@extends('layouts.guest')

@section('content')
<div class="max-w-md mx-auto mt-20 mb-20 bg-white p-6 rounded shadow">

    <h2 class="text-2xl font-bold mb-6 text-center">Login</h2>

    @if (session('status'))
        <div class="mb-4 text-green-600 text-sm">
            {{ session('status') }}
        </div>
    @endif

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

        <div class="mb-4">
            <label class="block text-sm font-medium mb-1">Email</label>
            <input type="email" name="email" value="{{ old('email') }}"
                   class="w-full border rounded px-3 py-2" required>
            @error('email') <p class="text-red-500 text-sm">{{ $message }}</p> @enderror
        </div>

        <div class="mb-4">
    <label class="block text-sm font-medium mb-1">Password</label>

    <div class="relative">
        <input
            type="password"
            id="password"
            name="password"
            class="w-full border rounded px-3 py-2 pr-10"
            required
        >

        <!-- Eye Button -->
        <button
            type="button"
            onclick="togglePassword()"
            class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500"
        >
            <svg id="eye-open" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                 viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M2.458 12C3.732 7.943 7.523 5 12 5
                         c4.478 0 8.268 2.943 9.542 7
                         -1.274 4.057-5.064 7-9.542 7
                         -4.477 0-8.268-2.943-9.542-7z"/>
            </svg>

            <svg id="eye-closed" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 hidden"
                 viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M13.875 18.825A10.05 10.05 0 0112 19
                         c-4.478 0-8.268-2.943-9.542-7
                         a9.956 9.956 0 012.223-3.592M6.223 6.223
                         A9.956 9.956 0 0112 5c4.478 0 8.268 2.943
                         9.542 7a9.97 9.97 0 01-4.293 5.067M15 12a3 3
                         0 00-3-3m0 0a3 3 0 013 3m-3-3L3 3"/>
            </svg>
        </button>
    </div>

    @error('password')
        <p class="text-red-500 text-sm">{{ $message }}</p>
    @enderror
</div>

<script>
function togglePassword() {
    const input = document.getElementById('password');
    const eyeOpen = document.getElementById('eye-open');
    const eyeClosed = document.getElementById('eye-closed');

    if (input.type === 'password') {
        input.type = 'text';
        eyeOpen.classList.add('hidden');
        eyeClosed.classList.remove('hidden');
    } else {
        input.type = 'password';
        eyeClosed.classList.add('hidden');
        eyeOpen.classList.remove('hidden');
    }
}
</script>


        <div class="mb-4 flex items-center">
            <input type="checkbox" name="remember" class="mr-2">
            <span class="text-sm">Remember me</span>
        </div>

        <button type="submit"
                class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
            Login
        </button>
        
        <div class="text-center mt-4">
            <a href="{{ route('password.request') }}" class="text-sm text-blue-600 hover:underline">
                Forgot Password?
            </a>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <a href="{{ route('register') }}" class="text-sm text-blue-600 hover:underline">
                Don't Have A Account?
            </a>
        </div>
    </form>
</div>
@endsection