@extends('layouts.app')

@section('title', 'Admin Login')

@push('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
<div class="container">
    <div class="row justify-content-center min-vh-100 align-items-center">
        <div class="col-md-6 col-lg-5">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-danger text-white text-center py-4">
                    <div class="mb-3">
                        <i class="bi bi-shield-lock" style="font-size: 3rem;"></i>
                    </div>
                    <h3 class="mb-0">Admin Portal</h3>
                    <p class="mb-0 opacity-75">TCS Courier Management System</p>
                </div>
                <div class="card-body p-5">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <strong>Login Failed!</strong>
                            @foreach ($errors->all() as $error)
                                <br>{{ $error }}
                            @endforeach
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif
                    
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif
                    
                    @if ($errors->has('token'))
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <strong>Session Expired!</strong> Please refresh the page and try again.
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif
                    
                    <form method="POST" action="{{ route('admin.login.submit') }}">
                        @csrf
                        
                        <!-- Email -->
                        <div class="mb-4">
                            <label for="email" class="form-label">
                                <i class="bi bi-envelope me-2"></i>Admin Email
                            </label>
                            <input type="email" class="form-control form-control-lg @error('email') is-invalid @enderror" 
                                   id="email" name="email" value="{{ old('email') }}" 
                                   placeholder="Enter admin email address" required autofocus>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <!-- Password -->
                        <div class="mb-4">
                            <label for="password" class="form-label">
                                <i class="bi bi-lock me-2"></i>Password
                            </label>
                            <div class="input-group">
                                <input type="password" class="form-control form-control-lg @error('password') is-invalid @enderror" 
                                       id="password" name="password" placeholder="Enter password" required>
                                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                    <i class="bi bi-eye" id="toggleIcon"></i>
                                </button>
                            </div>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <!-- Remember Me -->
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="remember" name="remember" 
                                       {{ old('remember') ? 'checked' : '' }}>
                                <label class="form-check-label" for="remember">
                                    Keep me signed in
                                </label>
                            </div>
                        </div>
                        
                        <!-- Submit Button -->
                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-danger btn-lg">
                                <i class="bi bi-box-arrow-in-right me-2"></i>
                                Sign In to Admin Portal
                            </button>
                        </div>
                        
                        <!-- Refresh Button for Session Issues -->
                        <div class="d-grid mb-4">
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="refreshPage()">
                                <i class="bi bi-arrow-clockwise me-2"></i>
                                Refresh Page (if experiencing login issues)
                            </button>
                        </div>
                    </form>
                    
                    <!-- Security Notice -->
                    <div class="alert alert-warning" role="alert">
                        <i class="bi bi-shield-exclamation me-2"></i>
                        <strong>Security Notice:</strong> This is a restricted admin area. Only authorized personnel should access this portal.
                    </div>
                </div>
                <div class="card-footer text-center py-3 bg-light">
                    <small class="text-muted">
                        <i class="bi bi-arrow-left me-1"></i>
                        <a href="{{ route('home') }}" class="text-decoration-none">Back to Main Site</a>
                        <span class="mx-2">|</span>
                        <a href="{{ route('login') }}" class="text-decoration-none">Customer Login</a>
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }
    
    .card {
        border-radius: 15px;
        overflow: hidden;
    }
    
    .card-header {
        border-bottom: none;
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    }
    
    .form-control:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
    
    .btn-danger {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        border: none;
        transition: all 0.3s ease;
    }
    
    .btn-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
    }
    
    .alert {
        border-radius: 10px;
    }
    
    .form-control {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        transition: all 0.3s ease;
    }
    
    .form-control:focus {
        border-color: #dc3545;
        transform: translateY(-1px);
    }
    
    .input-group .btn {
        border-radius: 0 8px 8px 0;
    }
</style>
@endpush

@push('scripts')
<script>
    // Refresh page function
    function refreshPage() {
        // Clear any cached form data
        document.querySelector('form').reset();
        // Reload the page to get fresh CSRF token
        window.location.reload();
    }
    
    // Toggle password visibility
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordField = document.getElementById('password');
        const toggleIcon = document.getElementById('toggleIcon');
        
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            toggleIcon.className = 'bi bi-eye-slash';
        } else {
            passwordField.type = 'password';
            toggleIcon.className = 'bi bi-eye';
        }
    });
    
    // Form validation and CSRF token refresh
    document.querySelector('form').addEventListener('submit', function(e) {
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        
        if (!email || !password) {
            e.preventDefault();
            alert('Please fill in all required fields.');
            return;
        }
        
        // Refresh CSRF token before submission
        const csrfToken = document.querySelector('input[name="_token"]');
        if (csrfToken) {
            fetch('/admin/session-info', {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.session && data.session.csrf_token) {
                    csrfToken.value = data.session.csrf_token;
                }
            })
            .catch(error => {
                console.log('CSRF token refresh failed:', error);
            });
        }
        
        // Show loading state
        const submitBtn = document.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Signing In...';
        submitBtn.disabled = true;
    });
    
    // Handle 419 errors by refreshing the page
    window.addEventListener('beforeunload', function() {
        // Reset form state if page is being refreshed due to error
        const submitBtn = document.querySelector('button[type="submit"]');
        if (submitBtn && submitBtn.disabled) {
            submitBtn.innerHTML = '<i class="bi bi-box-arrow-in-right me-2"></i>Sign In to Admin Portal';
            submitBtn.disabled = false;
        }
    });
    
    // Auto-refresh CSRF token every 5 minutes
    setInterval(function() {
        const csrfToken = document.querySelector('input[name="_token"]');
        if (csrfToken) {
            fetch('/admin/session-info', {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.session && data.session.csrf_token) {
                    csrfToken.value = data.session.csrf_token;
                }
            })
            .catch(error => {
                console.log('Auto CSRF token refresh failed:', error);
            });
        }
    }, 300000); // 5 minutes
    
    // Auto-focus on email field
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('email').focus();
    });
    
    // Add animation to alerts
    document.querySelectorAll('.alert').forEach(function(alert) {
        alert.style.animation = 'slideInDown 0.5s ease-out';
    });
</script>

<style>
    @keyframes slideInDown {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
</style>
@endpush