@extends('frontend.layout.app')
@section('content')
    <div class="breadcumb-wrapper " data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Login</h1>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{ route('index') }}">Home</a></li>
                        <li>Login</li>
                    </ul>
                </div>
            </div>
        </div>
    </div><!--==============================
                    Contact Area
                    ==============================-->
    <section class="space-top login-section">
        <div class="login-box">
            <div class="text-center">
                <h6 class="sec-title mb-3">Login to Your Account</h6>
            </div>

            @if (Session::has('flash_success'))
                <div class="alert alert-success">
                    {{ Session::get('flash_success') }}
                </div>
            @endif
            @if (Session::has('flash_error'))
                <div class="alert alert-danger">
                    {{ Session::get('flash_error') }}
                </div>
            @endif

            <form action="{{ route('login') }}" class="form-style3" method="post">
                @csrf
                <div class="row justify-content-between">
                    <div class="col-md-12 form-group">
                        <label>Phone Number <span class="required">(Required)</span></label>
                        <input type="tel" placeholder="Enter your phone number" name="phone" required maxlength="10"
                            pattern="[0-9]{10}" oninput="validatePhone(this)">

                        @error('phone')
                            <span role="alert" style="color: red">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror

                        <br>
                        <br>
                        <div class="col-md-12 form-group">
                            <label>Password <span class="required">(Required)</span></label>
                            <div class="position-relative">
                                <input type="password" placeholder="Enter your password" name="password" required
                                    id="password-field"
                                    style="text-align: left; padding-right: 40px;">
                                <button type="button" class="password-toggle-icon"
                                    style="position:absolute; right:15px; top:50%; transform:translateY(-50%); background:transparent; border:none; cursor:pointer; z-index:3; padding:0;"
                                    onclick="toggleLoginPasswordVisibility()" id="toggle-password-btn" tabindex="-1">
                                    <i class="fas fa-eye" id="eye-icon" aria-hidden="true"></i>
                                </button>
                            </div>
                            @error('password')
                                <span role="alert" style="color: red">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <script>
                            function toggleLoginPasswordVisibility() {
                                var passwordInput = document.getElementById('password-field');
                                var eyeIcon = document.getElementById('eye-icon');
                                if (passwordInput.type === "password") {
                                    passwordInput.type = "text";
                                    eyeIcon.classList.remove('fa-eye');
                                    eyeIcon.classList.add('fa-eye-slash');
                                } else {
                                    passwordInput.type = "password";
                                    eyeIcon.classList.remove('fa-eye-slash');
                                    eyeIcon.classList.add('fa-eye');
                                }
                            }
                        </script>
                        <div class="col-auto align-self-center form-group">
                            <input type="checkbox" id="notice" name="notice">
                            <label for="notice">Remember me</label>
                        </div>
                        <div class="col-auto align-self-center form-group">
                            <a href="{{ route('forget_password') }}">Forgot password?</a>
                        </div>
                        <div class="col-md-12 form-group">
                            <button class="vs-btn w-100" type="submit">Login</button>
                        </div>
                        <div class="col-md-12 text-center form-group">
                            <div class="register-link">
                                <p>New user? <a href="{{route('register')}}">Register here</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        </div>
    </section>

    <div data-bg-src="">
        <div class="vs-wave-shape  ">
            <svg viewBox="0 0 1920 295" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="wave-path" fill-rule="evenodd" clip-rule="evenodd"
                    d="M1920 295V202.758C1906.48 131.342 1843.63 77.168 1768.34 77.168C1739.37 77.168 1711.54 85.1814 1687.4 100.128C1650.68 38.4074 1584.56 0 1511.11 0C1412.1 0 1329.2 70.2842 1309.68 163.577C1294.03 136.928 1265.08 119 1232 119C1215.11 119 1198.88 123.673 1184.8 132.389C1163.39 96.397 1124.83 74 1082 74C1022.17 74 972.422 118.018 963.444 175.369C947.459 160.855 926.246 152 903 152C886.11 152 869.88 156.673 855.803 165.389C834.387 129.397 795.832 107 753 107C710.158 107 672.487 129.569 651.251 163.442C635.542 150.075 615.199 142 593 142C576.11 142 559.88 146.673 545.803 155.389C524.387 119.397 485.832 97 443 97C400.012 97 362.23 119.723 341.034 153.789C324.552 132.631 298.841 119 270 119C253.11 119 236.88 123.673 222.803 132.389C201.387 96.397 162.832 74 120 74C53.8333 74 0.000244141 127.833 0.000244141 194C0.000244141 194.41 0.000244141 194.835 0.0152435 195.245L0.000244141 195.248V295H1920Z" />
            </svg>
        </div>
    @endsection