@extends('layouts.app')

@php($hideLayout = true)

@section('content')
    <!-- Session Status -->
    @if (session('status'))
        <div class="mb-4 font-medium text-sm text-green-600">
            {{ session('status') }}
        </div>
    @endif

    <div class="flex min-h-screen flex-col items-center justify-center gap-4 bg-gray-50 px-4 p-4  ">
        <div
            class="flex w-full max-w-md flex-col items-center justify-center rounded-2xl bg-white px-6 py-8 md:p-8 shadow-xl border border-dashed border-slate-200">
            <!-- Logo -->
            <div class="mb-2">
                <a href="/">
                    <img alt="Edge Course Logo" class="w-[140px]" src="{{ asset('assets/images/logo.svg') }}">
                </a>
            </div>
            

            <!-- Welcome Message -->
            <div class="text-center">

                <p class="mt-2 text-xl font-bold text-gray-800">{{ __('auth.sign_in') }}</p>
            </div>

            <!-- Illustration -->
            <div class="my-4 h-40 w-full">
                <img alt="Login illustration" class="h-full w-full object-contain"
                    src="{{ asset('assets/images/login.svg') }}">
            </div>
               @include('include.social-login')

            <!-- Login Form -->
            <form method="POST" action="{{ route('login') }}" class="w-full space-y-4">
                @csrf

                <!-- Email/Phone Field -->
                @error('email')
                    <div class="bg-red-100 border border-red-500 text-red-600 px-4 py-3 text-sm rounded-sm mt-1 flex items-center"
                        role="alert">
                        <svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2"
                            viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {{ __('auth.login_error') }}
                    </div>
                @enderror

                <div>
                    <label for="email" class="mb-1 block text-md font-medium text-gray-700">
                        {{ __('auth.email_or_phone') }} <span class="text-red-500">*</span>
                    </label>
                    <input id="email" type="text" name="email" value="{{ old('email') }}" required autofocus
                        autocomplete="username" placeholder="{{ __('auth.email_or_phone_placeholder') }}">

                </div>

                <!-- Password Field -->
                <div>
                    <label for="password" class="mb-1 block text-md font-medium text-gray-700">
                        {{ __('auth.password') }} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input id="password" type="password" name="password" required autocomplete="current-password"
                            placeholder="{{ __('auth.password_placeholder') }}"
                            class="@error('password') !border-red-500 !bg-red-50 @enderror">
                        <button type="button"
                            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 hover:text-primary-dark"
                            onclick="togglePasswordVisibility()">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="cursor-pointer">
                                <path
                                    d="M21.1303 9.8531C22.2899 11.0732 22.2899 12.9268 21.1303 14.1469C19.1745 16.2047 15.8155 19 12 19C8.18448 19 4.82549 16.2047 2.86971 14.1469C1.7101 12.9268 1.7101 11.0732 2.86971 9.8531C4.82549 7.79533 8.18448 5 12 5C15.8155 5 19.1745 7.79533 21.1303 9.8531Z"
                                    stroke="currentColor" stroke-width="1.5"></path>
                                <path
                                    d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                                    stroke="currentColor" stroke-width="1.5"></path>
                            </svg>
                        </button>
                    </div>
                    @error('password')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Remember Me & Forgot Password -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember_me" type="checkbox" name="remember"
                            class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <label for="remember_me" class="ml-2 block text-sm text-gray-700 text-nowrap">
                            {{ __('auth.remember_me') }}
                        </label>
                    </div>

                    @if (Route::has('password.request'))
                        <a href="{{ route('password.request') }}"
                            class="text-sm text-primary hover:text-primary-dark  hover:underline">
                            {{ __('auth.forgot_password_login') }}
                        </a>
                    @endif
                </div>

             


                <!-- Submit Button -->
                <button type="submit" class="btn-primary w-full !py-[12px]">
                    {{ __('auth.sign_in') }}
                </button>

                <!-- Sign Up Link -->
                <p class="text-center text-sm text-gray-500">
                    {{ __('auth.no_account') }}
                    <a href="/register" class="font-medium text-primary hover:text-primary-dark hover:underline">
                        {{ __('auth.signup') }}
                    </a>
                </p>
          
            </form>
        </div>
    </div>

    <script>
        function togglePasswordVisibility() {
            const passwordField = document.getElementById('password');
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
        }
    </script>
@endsection