@extends('frontend::layouts.master')

@section('title')
    <title>{{  $login_title ?? 'Login Account' }}</title>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-md-9 col-sm-12 ">
                <div class="login-form mt-5 mb-5">
                    <div class="text-center mb-4">
                        <h2>{{ $login_title }}</h2>
                        <p>{{ $login_subtitle }}</p>
                    </div>

                    <!-- Login Form -->
                    <form method="POST" action="{{ route('login') }}">
                        @csrf

                        <!-- Display Errors -->
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0 list-none">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="form-grp mb-3">
                            <input type="email" class="is-invalid" required name="email" placeholder="Enter your email"
                                value="{{ old('email') }}">
                        </div>

                        <div class="form-grp password-input-wrapper">
                            <input type="password" name="password" id="password" placeholder="Enter your password">
                            <button type="button" class="password-toggle-btn" onclick="togglePassword()">
                                <svg class="eye-icon" id="eyeIcon" width="20" height="20" viewBox="0 0 24 24"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor"
                                        stroke-width="2" fill="none" />
                                    <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"
                                        fill="none" />
                                </svg>
                                <svg class="eye-off-icon" id="eyeOffIcon" width="20" height="20" viewBox="0 0 24 24"
                                    fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                    <path d="m1 1 22 22" stroke="currentColor" stroke-width="2" />
                                    <path d="m6.71 6.71c-1.82 1.31-3.71 3.64-3.71 5.29s4 8 11 8c1.75 0 3.35-.39 4.71-1.07"
                                        stroke="currentColor" stroke-width="2" fill="none" />
                                    <path d="m14 14.12c-.55.39-1.25.62-2 .62-1.66 0-3-1.34-3-3 0-.75.23-1.45.62-2"
                                        stroke="currentColor" stroke-width="2" fill="none" />
                                    <path d="m12.01 3c3.97 0 7.99 3.36 7.99 8.02 0 1.65-1.89 3.98-3.71 5.29"
                                        stroke="currentColor" stroke-width="2" fill="none" />
                                </svg>
                            </button>
                        </div>

                        <!-- Remember Me & Forgot Password -->
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="remember" id="remember"
                                    {{ old('remember') ? 'checked' : '' }}>
                                <label class="form-check-label" for="remember">
                                    Remember me
                                </label>
                            </div>

                            @if (Route::has('password.request'))
                                <div class="mt-3">
                                    <a href="{{ route('password.request') }}" class="text-decoration-none">
                                        Forgot password?
                                    </a>
                                </div>
                            @endif

                        </div>

                        <button type="submit" class="btn btn-two w-100 d-block mb-3">Login</button>

                        @if (config('app.app_mode') == "DEMO")
                            <div class="text-center">
                                <span class="text-danger mb-0 ttn">Email: user@gmail.com</span> <br/>
                                <span class="text-danger mb-0 ttn">Password: password</span>
                            </div>
                        @endif

                        @if ($google_visible_status == 1 || $facebook_visible_status == 1)
                            <div class="divider">
                                <span>OR</span>
                            </div>
                        @endif

                        <div class="social-login mb-5">

                            @if ($google_visible_status == 1)
                                <div class="social-login-item mb-3">
                                    <a href="{{ route('auth.google') }}"
                                        class="google d-flex align-items-center gap-2 border p-2 rounded justify-content-center">
                                        <svg width="18" height="18" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 48 48" class="LgbsSe-Bz112c">
                                            <g>
                                                <path fill="#EA4335"
                                                    d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z">
                                                </path>
                                                <path fill="#4285F4"
                                                    d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z">
                                                </path>
                                                <path fill="#FBBC05"
                                                    d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z">
                                                </path>
                                                <path fill="#34A853"
                                                    d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z">
                                                </path>
                                                <path fill="none" d="M0 0h48v48H0z"></path>
                                            </g>
                                        </svg> <span>Continue with Google</span>
                                    </a>
                                </div>
                            @endif

                            @if ($facebook_visible_status == 1)
                                <div class="social-login-item">
                                    <a href="{{ route('auth.facebook') }}"
                                        class="social-login-item google d-flex align-items-center gap-2 border p-2 rounded justify-content-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24"
                                            height="24">
                                            <path fill="#039be5" d="M24 5A19 19 0 1 0 24 43A19 19 0 1 0 24 5Z" />
                                            <path fill="#fff"
                                                d="M26.572,29.036h4.917l0.772-4.995h-5.69v-2.73c0-2.075,0.678-3.915,2.619-3.915h3.119v-4.359c-0.548-0.074-1.707-0.236-3.897-0.236c-4.573,0-7.254,2.415-7.254,7.917v3.323h-4.701v4.995h4.701v13.729C22.089,42.905,23.032,43,24,43c0.875,0,1.729-0.08,2.572-0.194V29.036z" />
                                        </svg>
                                        <span>Continue with Facebook</span>
                                    </a>
                                </div>
                            @endif
                        </div>

                        <!-- Sign Up Link -->
                        <div class="text-center">
                            <p class="mb-0">Don't have an account?
                                <a href="{{ route('register') }}" class="text-decoration-none fw-bold">
                                    Sign up here
                                </a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('style')
        <style>
            .password-input-wrapper {
                position: relative;
            }

            .password-toggle-btn {
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                background: none;
                border: none;
                cursor: pointer;
                color: #6c757d;
                padding: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                transition: all 0.2s ease;
            }

            .password-toggle-btn:hover {
                color: #495057;
                background-color: rgba(0, 0, 0, 0.05);
            }

            .password-toggle-btn:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
            }

            .form-grp input[type="password"],
            .form-grp input[type="text"] {
                padding-right: 45px;
            }
        </style>
    @endpush


    @push('script')
        <script>
            function togglePassword() {
                const passwordInput = document.getElementById('password');
                const eyeIcon = document.getElementById('eyeIcon');
                const eyeOffIcon = document.getElementById('eyeOffIcon');

                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    eyeIcon.style.display = 'none';
                    eyeOffIcon.style.display = 'block';
                } else {
                    passwordInput.type = 'password';
                    eyeIcon.style.display = 'block';
                    eyeOffIcon.style.display = 'none';
                }
            }
        </script>
    @endpush
@endsection