<?php
session_start();

// If user is already logged in, redirect to dashboard
if (isset($_SESSION['user_id'])) {
    header('Location: index.php');
    exit();
}

?>
<?php include 'layouts/main.php'; ?>

<head>
    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'Forgot Password - Prodigy ENT Hospital Management System')); ?>
    <?php include 'layouts/head-css.php'; ?>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <style>
        :root {
            --primary-green: #2d7a2d;
            --primary-green-light: #4caf50;
            --primary-green-dark: #1b5e20;
            --accent-green: #81c784;
            --success-green: #66bb6a;
            --light-green: #e8f5e8;
            --very-light-green: #f1f8f1;
            --medical-teal: #26a69a;
            --medical-teal-light: #4db6ac;
            --text-dark: #2e2e2e;
            --text-muted: #6c757d;
            --white: #ffffff;
            --light-gray: #f8f9fa;
            --border-color: #dee2e6;
        }

        body {
            background: linear-gradient(135deg, var(--very-light-green) 0%, var(--light-green) 100%);
            min-height: 100vh;
        }

        .auth-page-wrapper {
            background: linear-gradient(135deg, var(--very-light-green) 0%, var(--light-green) 100%);
        }

        .card {
            border: none;
            box-shadow: 0 10px 30px rgba(45, 122, 45, 0.1);
            border-radius: 16px;
            overflow: hidden;
        }

        /* Left side - White background with green accents for logo visibility */
        .bg-primary {
            background: linear-gradient(135deg, #ffffff 0%, #f8fffe 30%, #f0fdf4 100%) !important;
            border-right: 4px solid var(--primary-green);
        }

        /* Form styling */
        .form-control {
            border: 2px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 0.2rem rgba(45, 122, 45, 0.25);
        }

        .input-group-text {
            background-color: var(--light-green);
            border: 2px solid var(--border-color);
            border-right: none;
            color: var(--primary-green);
        }

        .form-control:focus + .input-group-text,
        .input-group .form-control:focus ~ .input-group-text {
            border-color: var(--primary-green);
        }

        /* Button styling */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-light) 100%);
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(45, 122, 45, 0.3);
        }

        .btn-outline-secondary {
            border: 2px solid var(--primary-green);
            color: var(--primary-green);
            background: transparent;
            border-radius: 8px;
            padding: 10px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-outline-secondary:hover {
            background-color: var(--light-green);
            border-color: var(--primary-green);
            color: var(--primary-green);
        }

        /* Link styling */
        a {
            color: var(--primary-green);
            text-decoration: none;
        }

        a:hover {
            color: var(--primary-green-dark);
            text-decoration: underline;
        }

        /* Text colors */
        .text-primary {
            color: var(--primary-green) !important;
        }

        .text-info {
            color: var(--medical-teal) !important;
        }

        /* Background variants */
        .bg-info {
            background-color: rgba(38, 166, 154, 0.1) !important;
        }

        .bg-light {
            background-color: var(--very-light-green) !important;
        }

        /* Form validation */
        .is-valid {
            border-color: var(--success-green);
        }

        .is-invalid {
            border-color: #e53e3e;
        }

        /* Logo container enhancements */
        .position-relative img {
            filter: none;
            drop-shadow: 0 2px 10px rgba(45, 122, 45, 0.1);
        }
        
        /* Add subtle green accent behind logo */
        .logo-accent {
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(135deg, var(--light-green), var(--very-light-green));
            border-radius: 50%;
            z-index: -1;
            opacity: 0.3;
        }

        /* Footer styling */
        .footer {
            background: transparent;
        }

        .footer .text-primary {
            color: var(--primary-green) !important;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .card {
                margin: 15px;
            }
            
            .p-lg-5 {
                padding: 2rem !important;
            }
        }

        /* Enhanced visual elements */
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-green) 0%, var(--medical-teal) 100%);
            z-index: 1;
        }

        /* Input group enhancements */
        .input-group {
            border-radius: 8px;
            overflow: hidden;
        }

        .input-group .form-control:not(:first-child) {
            border-left: none;
        }

        /* Enhanced shadow for better depth */
        .shadow-lg {
            box-shadow: 0 1rem 3rem rgba(45, 122, 45, 0.175) !important;
        }

        /* Info boxes */
        .info-box {
            background: var(--light-green);
            border: 1px solid rgba(45, 122, 45, 0.2);
            border-radius: 12px;
            padding: 20px;
        }

        .info-box h6 {
            color: var(--primary-green);
            font-weight: 600;
        }

        /* Icon styling in left panel */
        .feature-icon {
            color: var(--primary-green);
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="auth-page-wrapper py-5 d-flex justify-content-center align-items-center min-vh-100">
        <div class="auth-page-content overflow-hidden pt-lg-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card overflow-hidden border-0 shadow-lg">
                            <div class="row g-0">
                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4 h-100 bg-primary bg-gradient">
                                        <div class="position-relative h-100 d-flex flex-column align-items-center justify-content-center text-center">
                                            <div class="mb-4">
                                                <a href="index.php" class="d-block position-relative">
                                                    <div class="logo-accent"></div>
                                                    <img src="assets/images/prodigy.png" alt="ENT Hospital" height="80" class="mb-3 position-relative">
                                                </a>
                                                <h4 class="text-dark mb-3">Prodigy ENT Hospital Management</h4>
                                                <p class="text-muted mb-4">Secure password recovery system to help you regain access to your account.</p>
                                            </div>
                                            
                                            <div class="row text-center w-100">
                                                <div class="col-12 mb-3">
                                                    <i class="ri-lock-password-line feature-icon h2 d-block"></i>
                                                    <small class="text-muted">Secure Password Reset</small>
                                                </div>
                                                <div class="col-12 mb-3">
                                                    <i class="ri-mail-send-line feature-icon h2 d-block"></i>
                                                    <small class="text-muted">Email Verification</small>
                                                </div>
                                                <div class="col-12 mb-3">
                                                    <i class="ri-shield-check-line feature-icon h2 d-block"></i>
                                                    <small class="text-muted">Account Protection</small>
                                                </div>
                                                <div class="col-12">
                                                    <i class="ri-time-line feature-icon h2 d-block"></i>
                                                    <small class="text-muted">Quick Recovery Process</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4">
                                        <div class="text-center mb-4">
                                            <h5 class="text-primary mb-2">Forgot Password?</h5>
                                            <p class="text-muted">Don't worry! Enter your username and we'll send a password reset link to your registered email address.</p>
                                        </div>

                                        <div class="mt-4">
                                            <form id="forgotPasswordForm" novalidate>
                                                <div class="mb-4">
                                                    <label for="username" class="form-label">Username</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text"><i class="ri-user-line"></i></span>
                                                        <input type="text" class="form-control" id="username" name="username" 
                                                               placeholder="Enter your username" required>
                                                    </div>
                                                    <div class="invalid-feedback">
                                                        Please enter your username.
                                                    </div>
                                                </div>

                                                <div class="mt-4">
                                                    <button class="btn btn-primary w-100" type="submit" id="reset-btn">
                                                        <i class="ri-mail-send-line me-2"></i>Send Reset Link
                                                    </button>
                                                </div>

                                                <div class="mt-4 text-center">
                                                    <p class="mb-0">Remember your password? 
                                                        <a href="login.php" class="fw-semibold text-primary">
                                                            <i class="ri-arrow-left-line me-1"></i>Back to Login
                                                        </a>
                                                    </p>
                                                </div>
                                            </form>
                                        </div>

                                        <!-- Information Box -->
                                        <div class="mt-4">
                                            <div class="info-box">
                                                <h6 class="mb-3">
                                                    <i class="ri-information-line me-2"></i>Password Reset Instructions
                                                </h6>
                                                <ul class="text-muted small mb-0 ps-3">
                                                    <li>Enter your username in the field above</li>
                                                    <li>Check your registered email for reset link</li>
                                                    <li>Link expires in 1 hour for security</li>
                                                    <li>Contact support if you don't receive the email</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <!-- Support information -->
                                        <div class="mt-3 p-3 bg-info bg-opacity-10 rounded">
                                            <h6 class="text-info mb-2">
                                                <i class="ri-headphone-line me-2"></i>Need Help?
                                            </h6>
                                            <small class="text-muted">
                                                Can't access your email or need assistance?<br>
                                                <strong>Support:</strong> support@enthospital.co.ke<br>
                                                <strong>Phone:</strong> +254-700-000-000<br>
                                                <strong>Hours:</strong> Mon-Fri, 8AM-5PM EAT
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center">
                            <p class="mb-0 text-muted">
                                &copy; <script>document.write(new Date().getFullYear())</script> 
                                <span class="text-primary fw-semibold">Prodigy ENT Hospital</span> - 
                                Professional Healthcare Management System
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <?php include 'layouts/vendor-scripts.php'; ?>

    <script>
    document.getElementById('forgotPasswordForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        const username = document.getElementById('username');
        const resetBtn = document.getElementById('reset-btn');
        
        // Validate username
        if (!username.value.trim()) {
            username.classList.add('is-invalid');
            Swal.fire({
                icon: 'warning',
                title: 'Required Field',
                text: 'Please enter your username',
                confirmButtonColor: '#2d7a2d'
            });
            return;
        } else {
            username.classList.remove('is-invalid');
            username.classList.add('is-valid');
        }

        // Show loading state
        resetBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Processing...';
        resetBtn.disabled = true;

        // Show processing message
        Swal.fire({
            title: 'Processing',
            text: 'Please wait while we verify your account...',
            allowOutsideClick: false,
            showCancelButton: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        // Send request to backend
        fetch('process_reset_password.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: new URLSearchParams({
                username: username.value.trim()
            }).toString()
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: data.message || 'A password reset link has been sent to your registered email address. Please check your inbox.',
                    confirmButtonText: 'Return to Login',
                    confirmButtonColor: '#2d7a2d',
                    allowOutsideClick: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = 'login.php';
                    }
                });
            } else {
                throw new Error(data.error || 'An error occurred while processing your request');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: error.message || 'An unexpected error occurred. Please try again.',
                confirmButtonText: 'OK',
                confirmButtonColor: '#2d7a2d'
            });
        })
        .finally(() => {
            // Reset button state
            resetBtn.innerHTML = '<i class="ri-mail-send-line me-2"></i>Send Reset Link';
            resetBtn.disabled = false;
            
            // Clear the form
            form.reset();
            username.classList.remove('is-valid');
        });
    });

    // Auto-focus on username field
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('username').focus();
    });

    // Real-time validation
    document.getElementById('username').addEventListener('input', function() {
        if (this.value.trim()) {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        } else {
            this.classList.remove('is-valid');
        }
    });
    </script>
</body>
</html>