<x-guest-layout>
    <x-auth-session-status class="mb-4" :status="session('status')" />

    <style>
        /* ── Shake Animation ── */
        @keyframes rf-shake {
            0%   { transform: translateX(0); }
            15%  { transform: translateX(-8px); }
            30%  { transform: translateX(8px); }
            45%  { transform: translateX(-6px); }
            60%  { transform: translateX(6px); }
            75%  { transform: translateX(-3px); }
            90%  { transform: translateX(3px); }
            100% { transform: translateX(0); }
        }
        .rf-shake {
            animation: rf-shake 0.5s ease-in-out;
        }

        /* ── Alert Error Global ── */
        .rf-alert {
            background: #FEF2F2;
            border: 1.5px solid #FECACA;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
        }
        .rf-alert-icon {
            width: 18px;
            height: 18px;
            color: #DC2626;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .rf-alert-text {
            font-size: 0.82rem;
            color: #991B1B;
            line-height: 1.5;
            font-family: 'Figtree', sans-serif;
        }
        .rf-alert-title {
            font-weight: 700;
            display: block;
            margin-bottom: 0.15rem;
            color: #DC2626;
        }

        /* ── Field Groups ── */
        .rf-group {
            margin-bottom: 1.75rem;
            position: relative;
        }
        .rf-input-ul {
            width: 100%;
            box-sizing: border-box;
            background: transparent;
            border: none;
            border-bottom: 1.5px solid #2D6A8F;
            border-radius: 0;
            padding: 0.5rem 2rem 0.5rem 1.8rem;
            font-family: 'Figtree', sans-serif;
            font-size: 0.95rem;
            color: #1E3A5F;
            outline: none;
            transition: border-color 0.2s;
        }
        .rf-input-ul:focus {
            border-bottom-color: #C9A84C;
        }
        .rf-input-ul::placeholder {
            color: #4A90A4;
            font-size: 0.9rem;
        }
        .rf-input-ul.is-error {
            border-bottom-color: #DC2626 !important;
        }
        .rf-icon-ul {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: #2D6A8F;
            pointer-events: none;
        }
        .rf-toggle-pw-ul {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            color: #2D6A8F;
            display: flex;
            align-items: center;
        }
        .rf-toggle-pw-ul:hover { color: #C9A84C; }

        /* ── Field Error ── */
        .rf-field-error {
            font-size: 0.75rem;
            color: #DC2626;
            margin-top: 0.35rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            font-family: 'Figtree', sans-serif;
        }

        /* ── Row ── */
        .rf-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.75rem;
        }
        .rf-checkbox-label {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.82rem;
            color: #1E3A5F;
            cursor: pointer;
        }
        .rf-checkbox-label input[type="checkbox"] {
            accent-color: #C9A84C;
            width: 15px;
            height: 15px;
        }
        .rf-link {
            font-size: 0.82rem;
            color: #C9A84C;
            font-weight: 600;
            text-decoration: none;
        }
        .rf-link:hover { color: #1E3A5F; }

        /* ── Submit Button ── */
        .rf-btn-ul {
            width: 100%;
            box-sizing: border-box;
            padding: 0.85rem;
            background: linear-gradient(135deg, #1E3A5F 0%, #2D6A8F 50%, #C9A84C 100%);
            color: #FFFFFF;
            border: none;
            border-radius: 10px;
            font-family: 'Figtree', sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: opacity 0.15s, transform 0.15s;
            box-shadow: 0 4px 20px rgba(45, 106, 143, 0.45);
        }
        .rf-btn-ul:hover {
            opacity: 0.92;
            transform: translateY(-1px);
        }
        .rf-btn-ul:active {
            transform: translateY(0);
        }

        /* ── Form Wrapper ── */
        .rf-form-wrap {
            width: 100%;
            max-width: 340px;
            margin: 0 auto;
        }
    </style>

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

        <div class="rf-form-wrap">

            {{-- Alert Error Global --}}
            @if ($errors->any())
                <div class="rf-alert">
                    <svg class="rf-alert-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                    </svg>
                    <div class="rf-alert-text">
                        <span class="rf-alert-title">Login Gagal!</span>
                        Email atau kata sandi yang kamu masukkan salah. Silakan coba lagi.
                    </div>
                </div>
            @endif

            {{-- Email --}}
            <div class="rf-group">
                <svg class="rf-icon-ul" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                </svg>
                <input
                    id="email"
                    class="rf-input-ul {{ $errors->has('email') ? 'is-error' : '' }}"
                    type="email"
                    name="email"
                    value="{{ old('email') }}"
                    placeholder="Email"
                    required
                    autofocus
                    autocomplete="username"
                />
                @error('email')
                    <div class="rf-field-error">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="13" height="13">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                        </svg>
                        {{ $message }}
                    </div>
                @enderror
            </div>

            {{-- Password --}}
            <div class="rf-group">
                <svg class="rf-icon-ul" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                </svg>
                <input
                    id="password"
                    class="rf-input-ul {{ $errors->has('password') ? 'is-error' : '' }}"
                    type="password"
                    name="password"
                    placeholder="Password"
                    required
                    autocomplete="current-password"
                />
                <button type="button" class="rf-toggle-pw-ul" onclick="togglePassword()" aria-label="Toggle password">
                    <svg id="icon-eye" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" width="17" height="17">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    <svg id="icon-eye-off" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" width="17" height="17" style="display:none">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                    </svg>
                </button>
                @error('password')
                    <div class="rf-field-error">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="13" height="13">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                        </svg>
                        {{ $message }}
                    </div>
                @enderror
            </div>

            {{-- Remember Me + Lupa Password --}}
            <div class="rf-row">
                <label class="rf-checkbox-label">
                    <input type="checkbox" name="remember" id="remember_me">
                    <span>Ingat Saya</span>
                </label>
                @if (Route::has('password.request'))
                    <a href="{{ route('password.request') }}" class="rf-link">Lupa Password?</a>
                @endif
            </div>

            {{-- Tombol Login --}}
            <button type="submit" class="rf-btn-ul">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="18" height="18">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                </svg>
                Login
            </button>

        </div>
    </form>

    <script>
        function togglePassword() {
            const pw = document.getElementById('password');
            const eyeOn = document.getElementById('icon-eye');
            const eyeOff = document.getElementById('icon-eye-off');
            if (pw.type === 'password') {
                pw.type = 'text';
                eyeOn.style.display = 'none';
                eyeOff.style.display = 'block';
            } else {
                pw.type = 'password';
                eyeOn.style.display = 'block';
                eyeOff.style.display = 'none';
            }
        }

        // ── Shake saat error ──
        document.addEventListener('DOMContentLoaded', function () {
            const hasError = {{ $errors->any() ? 'true' : 'false' }};

            if (hasError) {
                const formWrap = document.querySelector('.rf-form-wrap');
                const alertBox = document.querySelector('.rf-alert');

                formWrap.classList.add('rf-shake');
                formWrap.addEventListener('animationend', () => {
                    formWrap.classList.remove('rf-shake');
                }, { once: true });

                if (alertBox) {
                    alertBox.classList.add('rf-shake');
                    alertBox.addEventListener('animationend', () => {
                        alertBox.classList.remove('rf-shake');
                    }, { once: true });
                }

                document.querySelectorAll('.is-error').forEach(input => {
                    input.classList.add('rf-shake');
                    input.addEventListener('animationend', () => {
                        input.classList.remove('rf-shake');
                    }, { once: true });
                });
            }
        });
    </script>
</x-guest-layout>