<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Forgot Password - Ghana Anaesthesiologists Society</title>
    <link href="<?= $baseUrl ?>/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/glass.css" rel="stylesheet">
</head>
<body class="auth-wrapper">
    <div class="auth-card">
        <div class="auth-logo">
            <i class="fas fa-key"></i>
            <h2>Forgot Password</h2>
            <p>Choose how to reset your password</p>
        </div>
        <?php if (isset($_SESSION['success'])): ?>
            <div class="alert alert-success glass-alert"><?= $_SESSION['success']; unset($_SESSION['success']); ?></div>
        <?php endif; ?>
        <div class="mb-4">
            <div class="btn-group btn-block" role="group" id="methodToggle">
                <button type="button" class="glass-btn glass-btn-primary method-btn active" data-method="email" style="border-radius: 50px 0 0 50px; width: 50%;"><i class="fas fa-envelope mr-1"></i>Email</button>
                <button type="button" class="glass-btn method-btn <?= !$smsEnabled ? 'disabled" disabled="disabled' : '"' ?> data-method="sms" style="border-radius: 0 50px 50px 0; width: 50%;"><i class="fas fa-mobile-alt mr-1"></i>SMS</button>
            </div>
        </div>

        <form method="POST" action="<?= $baseUrl ?>/forgot-password" id="forgotForm">
            <input type="hidden" name="reset_method" id="resetMethod" value="email">

            <div class="form-group" id="emailField">
                <label style="color: rgba(255,255,255,0.7);">Email Address</label>
                <input type="email" name="email" class="form-control glass-input" placeholder="Enter your email">
            </div>

            <div class="form-group" id="smsField" style="display: none;">
                <label style="color: rgba(255,255,255,0.7);">Phone Number</label>
                <input type="text" name="phone" class="form-control glass-input" placeholder="e.g. 233XXXXXXXXX">
                <small style="color: rgba(255,255,255,0.4);">Enter the phone number registered with your account (include country code)</small>
            </div>

            <button type="submit" class="glass-btn glass-btn-primary btn-block btn-lg" id="submitBtn">Send Reset Code</button>
        </form>
        <hr style="border-color: rgba(255,255,255,0.1);">
        <div class="text-center">
            <a href="<?= $baseUrl ?>/login"><i class="fas fa-arrow-left mr-1"></i>Back to Login</a>
        </div>
    </div>
    <script src="<?= $baseUrl ?>/vendor/jquery/jquery.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
    $(function() {
        $('.method-btn').on('click', function() {
            if ($(this).hasClass('disabled')) return;
            $('.method-btn').removeClass('glass-btn-primary').addClass('glass-btn');
            $(this).addClass('glass-btn-primary').removeClass('glass-btn');

            var method = $(this).data('method');
            $('#resetMethod').val(method);

            if (method === 'email') {
                $('#emailField').show();
                $('#smsField').hide();
                $('#emailField input').prop('required', true);
                $('#smsField input').prop('required', false);
                $('#submitBtn').html('<i class="fas fa-envelope mr-1"></i>Send Reset Link');
            } else {
                $('#emailField').hide();
                $('#smsField').show();
                $('#emailField input').prop('required', false);
                $('#smsField input').prop('required', true);
                $('#submitBtn').html('<i class="fas fa-mobile-alt mr-1"></i>Send OTP via SMS');
            }
        });

        $('#forgotForm').on('submit', function() {
            var method = $('#resetMethod').val();
            if (method === 'sms') {
                var phone = $('input[name="phone"]').val().trim();
                if (!phone) {
                    alert('Please enter your phone number');
                    return false;
                }
            } else {
                var email = $('input[name="email"]').val().trim();
                if (!email) {
                    alert('Please enter your email address');
                    return false;
                }
            }
        });
    });
    </script>
    <style>
    .method-btn { transition: all 0.3s; }
    .method-btn.disabled { opacity: 0.4; cursor: not-allowed; }
    </style>
</body>
</html>
