@extends('components.service_description_layout')
@section('service_description')
    <!-- Login Form    <form action="{{route('user.authentication')}}" -->

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-header text-white ">
                        <h5 class="mb-0">{{ __('Customer Login') }}</h5>
                    </div>

                    <div class="card-body p-4">
                        <form action="{{ url('auth/customer/checkcustomer') }}" enctype="multipart/form-data" method="post"
                            id="login-form" autocomplete="off">
                            @csrf

                            @if ($errors->any())
                                <div class="alert alert-danger mb-3">
                                    <strong>{{ __('Whoops! There were some errors with your submission.') }}</strong>
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="mb-3">
                                <label for="phone" class="form-label">{{ __('Phone Number') }}</label>
                                <input type="text" class="form-control" id="phone" name="phone" value="{{ old('phone') }}"
                                    placeholder="{{ __('Enter your phone number') }}" required autocomplete="off">
                            </div>

                            <div class="mb-3">
                                <label for="password" class="form-label">{{ __('Password') }}</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="password" name="password"
                                        placeholder="{{ __('Enter your password') }}" required autocomplete="off">
                                    <button type="button" class="btn btn-outline-secondary" id="togglePassword">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
    {{-- d-grid gap-2 d-md-flex justify-content-md-end --}}
                            <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                                    <button type="submit" class="btn btn-success text-uppercase">
                                        {{ __('Login') }}
                                    </button>

                                @if (Route::has('password.request'))
                                    <div>
                                        <a class="btn btn-link" href="{{ route('password.request') }}">
                                            {{ __('Forgot Your Password?') }}
                                        </a>
                                    </div>
                                @endif
                                <br>
                            </div>
                        </form>
                        <a href="{{url('user/auth/sign-up')}}" style="color: green; display: block">Create new Account</a>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css">

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const togglePasswordButton = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');

            if (togglePasswordButton && passwordInput) {
                togglePasswordButton.addEventListener('click', function() {
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);
                    this.querySelector('i').classList.toggle('bi-eye');
                    this.querySelector('i').classList.toggle('bi-eye-slash');
                });
            }
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js')}}"></script>
    <script src="{{ asset('assets/provider-module/js/jquery-3.6.0.min.js') }}" async></script>
    <script src="{{ asset('assets/provider-module/js/bootstrap.bundle.min.js') }}" async></script>
    <script src="{{ asset('assets/provider-module/plugins/perfect-scrollbar/perfect-scrollbar.min.js') }}" async></script>
    <script src="{{ asset('assets/provider-module/js/main.min.js') }}" async></script>



    <script src="{{ asset('assets/admin-module/js/sweet_alert.js') }}"></script>
    <script src="{{ asset('assets/admin-module/js/toastr.js') }}"></script>
    <script src="{{ asset('assets/admin-module/js/dev.') }}"></script>
    <script type="text/javascript"></script>





    </script>
@endsection