<!-- Path: app/Views/auth/responder_login.view.php -->
<section class="min-h-[calc(100vh-4rem)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-slate-900 relative overflow-hidden">
    <!-- Decorative background elements specifically for responders (Blue-themed) -->
    <div class="absolute top-0 right-0 w-1/2 h-full bg-brand-blue opacity-10 skew-x-12 translate-x-32"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-brand-blue rounded-full filter blur-3xl opacity-20"></div>

    <div class="max-w-md w-full space-y-8 bg-slate-800 p-10 rounded-3xl shadow-2xl relative z-10 border border-slate-700">
        <div class="text-center">
            <div class="w-16 h-16 bg-brand-blue rounded-full flex items-center justify-center shadow-lg shadow-blue-500/40 mx-auto mb-4">
                <i class="fa-solid fa-shield-halved text-white text-2xl"></i>
            </div>
            <h2 class="text-3xl font-bold text-white tracking-tight">Responder Portal</h2>
            <p class="mt-2 text-sm text-slate-400">Authorized Agency Personnel Only</p>
        </div>

        @if(isset($error))
        <div class="bg-red-500/10 border-l-4 border-red-500 p-4 mb-4 rounded-r">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fa-solid fa-circle-exclamation text-red-400"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-red-200 font-medium">{{ $error }}</p>
                </div>
            </div>
        </div>
        @endif

        <form id="responderLoginForm" class="mt-8 space-y-6">
            <div class="space-y-4">
                <div>
                    <label for="phone_number" class="block text-sm font-medium text-slate-300 mb-1">Registered Phone Number</label>
                    <input id="phone_number" name="phone_number" type="tel" required class="appearance-none relative block w-full px-4 py-3 border border-slate-600 placeholder-slate-500 text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-brand-blue sm:text-sm transition bg-slate-900 focus:bg-slate-900" placeholder="e.g. 09012345678">
                </div>
                
                <div>
                    <label for="password" class="block text-sm font-medium text-slate-300 mb-1">Password</label>
                    <input id="password" name="password" type="password" required class="appearance-none relative block w-full px-4 py-3 border border-slate-600 placeholder-slate-500 text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-brand-blue sm:text-sm transition bg-slate-900 focus:bg-slate-900" placeholder="Enter your password">
                </div>
            </div>

            <div>
                <button type="submit" id="respSubmitBtn" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-brand-blue hover:bg-blue-600 transition shadow-lg shadow-blue-500/30 hover:-translate-y-0.5">
                    Secure Login
                </button>
            </div>
        </form>
        
        <div class="text-center mt-6 pt-6 border-t border-slate-700">
            <p class="text-xs text-slate-500">
                Are you a citizen reporting an emergency? 
                <a href="{!! defined('APP_URL') ? APP_URL : '' !!}/login" class="font-bold text-white hover:text-brand-blue transition block mt-1">Go to Citizen Portal</a>
            </p>
        </div>
    </div>
</section>

@addScript
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.getElementById('responderLoginForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const btn = document.getElementById('respSubmitBtn');
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Verifying...';

    const formData = new FormData(e.target);
    
    try {
        const response = await fetch('{!! defined("APP_URL") ? APP_URL : "" !!}/responder/login', {
            method: 'POST',
            body: formData
        });

        if (response.ok || response.redirected) {
            Swal.fire({ 
                icon: 'success', 
                title: 'Authentication Successful', 
                text: 'Connecting to dispatcher...', 
                timer: 1500,
                showConfirmButton: false,
                background: '#1e293b',
                color: '#fff'
            }).then(() => {
                window.location.href = '{!! defined("APP_URL") ? APP_URL : "" !!}/responder/dashboard';
            });
        } else {
            throw new Error('Invalid credentials');
        }
    } catch (err) {
        Swal.fire({ 
            icon: 'error', 
            title: 'Access Denied', 
            text: 'Invalid phone number or password.',
            confirmButtonColor: '#3b82f6',
            background: '#1e293b',
            color: '#fff'
        });
        btn.disabled = false;
        btn.innerHTML = originalText;
    }
});
</script>
@endAddScript