@extends('layouts.header')

@section('content')
<div class="min-h-screen flex items-center justify-center relative overflow-hidden">

    {{-- Blobs --}}
    <div class="blob blob1"></div>
    <div class="blob blob2"></div>
    <div class="blob blob3"></div>

    <div class="relative w-full max-w-md z-10 px-4">
        <div class="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl p-8">

            {{-- Header --}}
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-white">Hisab Seba</h1>
                <p class="text-gray-300 text-sm mt-1">{{ __('user_login.user_panel_login') }}</p>
            </div>

            {{-- Validation Errors --}}
            @if ($errors->any())
                <div class="mb-4 bg-red-500/20 border border-red-500/40 text-red-200 px-4 py-2 rounded-lg text-sm">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('login') }}" class="space-y-4" id="loginForm">
                @csrf

                {{-- Login Field --}}
                <div>
                    <label class="text-sm text-gray-200">{{ __('user_login.username_email_phone') }}</label>
                    <input
                        type="text"
                        name="login"
                        required
                        value="{{ old('login') }}"
                        class="w-full mt-1 px-4 py-2 rounded-lg bg-white/20 border border-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                        placeholder="{{ __('user_login.enter_username_email_phone') }}"
                    >
                </div>

                {{-- Password Field --}}
                <div class="relative">
                    <label class="text-sm text-gray-200">{{ __('user_login.password') }}</label>
                    <input
                        type="password"
                        name="password"
                        id="passwordField"
                        required
                        class="w-full mt-1 px-4 py-2 pr-10 rounded-lg bg-white/20 border border-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                        placeholder="••••••••"
                    >

                    <button
                        type="button"
                        onclick="togglePassword()"
                        class="absolute right-3 top-9 text-gray-300 hover:text-white"
                    >
                        👁
                    </button>
                </div>

                {{-- Remember + Forgot --}}
                <div class="flex items-center justify-between text-sm">
                    <label class="flex items-center gap-2 text-gray-300 cursor-pointer">
                        <input
                            type="checkbox"
                            name="remember"
                            class="rounded bg-white/20 border-white/30 text-indigo-500 focus:ring-indigo-400"
                        >
                        {{ __('user_login.remember_me') }}
                    </label>

                    <span class="text-gray-400 cursor-not-allowed">
                        {{ __('user_login.forgot_password') }}
                    </span>
                </div>

                {{-- Button --}}
                <button
                    type="submit"
                    id="loginButton"
                    class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 rounded-lg transition duration-200 shadow-lg hover:shadow-indigo-500/40 flex items-center justify-center gap-2"
                >
                    <span id="btnText">{{ __('user_login.login') }}</span>

                    <svg
                        id="spinner"
                        class="w-5 h-5 animate-spin hidden"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <circle
                            class="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            stroke-width="4"
                        ></circle>
                        <path
                            class="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8v8H4z"
                        ></path>
                    </svg>
                </button>
            </form>

            {{-- Footer Link --}}
            <p class="text-sm text-gray-300 text-center mt-6">
                {{ __('user_login.dont_have_account') }}
                <a href="{{ route('register') }}" class="text-indigo-300 hover:text-white hover:underline">
                    {{ __('user_login.register') }}
                </a>
            </p>

            <div class="text-center mt-6 text-xs text-gray-400">
                © {{ date('Y') }} Hisab Seba • {{ __('user_login.user_access') }}
            </div>
        </div>
    </div>

    {{-- Blob Styles --}}
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(-45deg, #0f172a, #1e293b, #312e81, #0f172a);
            background-size: 400% 400%;
            animation: gradientMove 12s ease infinite;
        }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.5;
            animation: float 18s infinite ease-in-out;
        }

        .blob1 {
            width: 300px;
            height: 300px;
            background: #6366f1;
            top: 10%;
            left: 10%;
        }

        .blob2 {
            width: 350px;
            height: 350px;
            background: #22d3ee;
            bottom: 10%;
            right: 10%;
            animation-delay: 3s;
        }

        .blob3 {
            width: 250px;
            height: 250px;
            background: #a855f7;
            top: 60%;
            left: 20%;
            animation-delay: 6s;
        }

        @keyframes float {
            0%   { transform: translateY(0) translateX(0); }
            50%  { transform: translateY(-40px) translateX(30px); }
            100% { transform: translateY(0) translateX(0); }
        }
    </style>
</div>

{{-- SweetAlert Toast --}}
@if(session('swal'))
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        Swal.fire({
            icon: '{{ session('swal.icon') }}',
            title: '{{ session('swal.title') }}',
            text: '{{ session('swal.text') }}',
            toast: true,
            position: 'top-end',
            timer: 4000,
            timerProgressBar: true,
            showConfirmButton: false
        });
    </script>
@endif

{{-- Scripts --}}
<script>
    function togglePassword() {
        const field = document.getElementById('passwordField');
        field.type = field.type === 'password' ? 'text' : 'password';
    }

    document.getElementById('loginForm').addEventListener('submit', function () {
        document.getElementById('btnText').innerText = @json(__('user_login.logging_in'));
        document.getElementById('spinner').classList.remove('hidden');
        document.getElementById('loginButton').disabled = true;
    });
</script>
@endsection