<!DOCTYPE html>
<html lang="en">

<x-head />

<body class="dark:bg-neutral-800 bg-neutral-100 dark:text-white">

    <section class="bg-white dark:bg-dark-2 flex flex-wrap min-h-[100vh]">

       <!-- LEFT IMAGE (FULL HEIGHT) -->
        <div class="lg:w-1/2 lg:block hidden relative">
            <img src="{{ asset('assets/images/auth/pamsimas.jpg') }}" alt="PAMSIMAS" class="absolute inset-0 w-full h-full object-cover">
            <!-- Overlay gelap opsional -->
            <div class="absolute inset-0 bg-gradient-to-r from-black/40 to-transparent"></div>
        </div>

        <!-- RIGHT LOGIN -->
        <div class="lg:w-1/2 w-full py-8 px-6 flex flex-col justify-center">

            <div class="lg:max-w-[464px] mx-auto w-full">

                <!-- LOGO -->
                <div class="text-center lg:text-left">
                    <a href="{{ route('index') }}" class="mb-2.5 max-w-[200px] block mx-auto lg:mx-0">
                        <img src="{{ asset('assets/images/logo.png') }}" alt="Logo PAMSIMAS">
                    </a>

                    <h4 class="mb-2 text-2xl font-bold text-neutral-900 dark:text-white">
                        Sign In to your Account
                    </h4>

                    <p class="mb-8 text-secondary-light text-base">
                        Welcome back! Please enter your details
                    </p>
                </div>

                <!-- NOTIFIKASI ERROR (MERAH - AUTO HILANG) -->
                @if(session('error') || $errors->any())
                    <div id="alert-error" class="alert-toast alert-error show">
                        <div class="alert-icon">
                            <iconify-icon icon="solar:danger-circle-bold"></iconify-icon>
                        </div>
                        <div class="alert-content">
                            <span class="alert-title">Login Gagal</span>
                            <span class="alert-message">{{ session('error') ?? $errors->first() }}</span>
                        </div>
                        <button type="button" class="alert-close" onclick="closeAlert('alert-error')">
                            <iconify-icon icon="radix-icons:cross-1"></iconify-icon>
                        </button>
                    </div>
                @endif

                <!-- NOTIFIKASI STATUS (BIRU - AUTO HILANG) -->
                @if(session('status'))
                    <div id="alert-status" class="alert-toast alert-info show">
                        <div class="alert-icon">
                            <iconify-icon icon="solar:info-circle-bold"></iconify-icon>
                        </div>
                        <div class="alert-content">
                            <span class="alert-title">Informasi</span>
                            <span class="alert-message">{{ session('status') }}</span>
                        </div>
                        <button type="button" class="alert-close" onclick="closeAlert('alert-status')">
                            <iconify-icon icon="radix-icons:cross-1"></iconify-icon>
                        </button>
                    </div>
                @endif

                <!-- FORM -->
                <form action="{{ route('login.post') }}" method="POST">
                    @csrf

                    <!-- EMAIL -->
                    <div class="icon-field mb-5 relative">

                        <!-- ICON -->
                        <span class="absolute start-4 top-1/2 -translate-y-1/2 pointer-events-none flex text-xl z-10 text-neutral-400">
                            <iconify-icon icon="mage:email"></iconify-icon>
                        </span>

                        <!-- INPUT -->
                        <input
                            type="email"
                            name="email"
                            value="{{ old('email') }}"
                            class="form-control h-[56px] ps-12 pe-4 border rounded-xl w-full
                            @error('email') border-red-400 bg-red-50 dark:bg-red-900/10 @else border-neutral-300 bg-neutral-50 dark:bg-dark-2 @enderror
                            focus:border-primary-600 focus:ring-2 focus:ring-primary-100 dark:focus:ring-primary-900 outline-none transition-all"
                            placeholder="Email address"
                            required
                            autocomplete="email"
                        >

                        <!-- ERROR ICON -->
                        @error('email')
                            <span class="absolute end-4 top-1/2 -translate-y-1/2 text-red-500 text-lg">
                                <iconify-icon icon="solar:danger-circle-bold"></iconify-icon>
                            </span>
                        @enderror
                    </div>

                    <!-- PASSWORD -->
                    <div class="relative mb-5">

                        <div class="icon-field relative">

                            <!-- LOCK ICON -->
                            <span class="absolute start-4 top-1/2 -translate-y-1/2 pointer-events-none flex text-xl z-10 text-neutral-400">
                                <iconify-icon icon="solar:lock-password-outline"></iconify-icon>
                            </span>

                            <!-- PASSWORD INPUT -->
                            <input
                                type="password"
                                name="password"
                                id="your-password"
                                class="form-control h-[56px] ps-12 pe-12 border rounded-xl w-full
                                @error('password') border-red-400 bg-red-50 dark:bg-red-900/10 @else border-neutral-300 bg-neutral-50 dark:bg-dark-2 @enderror
                                focus:border-primary-600 focus:ring-2 focus:ring-primary-100 dark:focus:ring-primary-900 outline-none transition-all"
                                placeholder="Password"
                                required
                                autocomplete="current-password"
                            >

                            <!-- SHOW/HIDE TOGGLE -->
                            <button
                                type="button"
                                id="toggle-password"
                                class="cursor-pointer absolute end-4 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 text-xl flex items-center justify-center w-8 h-8 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-700 transition"
                                tabindex="-1"
                            >
                                <iconify-icon id="toggle-icon" icon="mdi:eye-outline"></iconify-icon>
                            </button>

                        </div>
                    </div>

                    <!-- REMEMBER ME -->
                    <div class="flex justify-between items-center mt-6">
                        <div class="flex items-center">
                            <input
                                class="form-check-input border border-neutral-300 rounded w-4 h-4"
                                type="checkbox"
                                name="remember"
                                id="remember"
                            >
                            <label class="ps-2 text-sm text-neutral-600 dark:text-neutral-400 cursor-pointer" for="remember">
                                Remember me
                            </label>
                        </div>
                    </div>

                    <!-- BUTTON -->
                    <button
                        type="submit"
                        class="btn btn-primary justify-center text-sm font-semibold py-4 w-full rounded-xl mt-8 transition-all hover:shadow-lg hover:shadow-primary-600/20 active:scale-[0.98]"
                    >
                        Sign In
                    </button>

                </form>

            </div>
        </div>
    </section>

    <!-- STYLE -->
    <style>
        /* ========== ALERT TOAST MODERN ========== */
        .alert-toast {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 14px;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
            animation: slideDown 0.4s ease;
            transition: all 0.4s ease;
        }

        .alert-toast.hide {
            opacity: 0;
            transform: translateY(-10px);
            max-height: 0;
            padding: 0 16px;
            margin-bottom: 0;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .alert-error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #dc2626;
        }

        .alert-success {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #16a34a;
        }

        .alert-info {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #2563eb;
        }

        .alert-icon {
            font-size: 22px;
            flex-shrink: 0;
        }

        .alert-content {
            flex-grow: 1;
        }

        .alert-title {
            display: block;
            font-weight: 700;
            font-size: 13px;
            margin-bottom: 2px;
        }

        .alert-message {
            font-size: 12px;
            opacity: 0.85;
        }

        .alert-close {
            flex-shrink: 0;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            border-radius: 8px;
            font-size: 18px;
            opacity: 0.6;
            transition: all 0.2s;
        }

        .alert-close:hover {
            opacity: 1;
            background: rgba(0,0,0,0.05);
        }
    </style>

    <!-- SCRIPT -->
    <script>
        // === AUTO HIDE ALERT ===
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.alert-toast');

            alerts.forEach(function(alert) {
                // Auto hide after 4 seconds
                setTimeout(function() {
                    closeAlert(alert.id);
                }, 4000);
            });
        });

        function closeAlert(id) {
            const alert = document.getElementById(id);
            if (alert) {
                alert.classList.add('hide');
                // Hapus dari DOM setelah animasi selesai
                setTimeout(function() {
                    if (alert.parentNode) {
                        alert.parentNode.removeChild(alert);
                    }
                }, 400);
            }
        }

        // === SHOW/HIDE PASSWORD ===
        const togglePassword = document.getElementById('toggle-password');
        const passwordInput = document.getElementById('your-password');
        const toggleIcon = document.getElementById('toggle-icon');

        togglePassword.addEventListener('click', function () {
            const type = passwordInput.getAttribute('type') === 'password'
                ? 'text'
                : 'password';

            passwordInput.setAttribute('type', type);

            // Ganti icon
            if (type === 'password') {
                toggleIcon.setAttribute('icon', 'mdi:eye-outline');
            } else {
                toggleIcon.setAttribute('icon', 'mdi:eye-off-outline');
            }
        });
    </script>

    <x-script />

</body>
</html>