<?= $this->extend('layout/register_layout') ?>
<?= $this->section('content') ?>

<!-- Triggered Modal on Load -->
<div class="registration-form container mt-5 mb-5 text-center">

</div>
<!-- Hidden trigger for modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="text-center mb-4">
        <a href="<?= base_url('/') ?>">
            <img src="<?= base_url('assets/images/alrahma_logo.png') ?>" alt="" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;">
        </a>
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-success shadow">
                <div class="modal-header bg-success text-white">
                    <h5 class="text-center modal-title" id="successModalLabel"></h5>
                </div>
                <div class="modal-body">
                    <h4 class="mb-3">Password Set Successfully!</h4>
                    <p class="mb-0">You will be redirected to the login page shortly.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    $(document).ready(function() {
        // Show modal on load
        const modal = new bootstrap.Modal(document.getElementById('successModal'));
        modal.show();

        // Redirect after 2 seconds
        setTimeout(() => {
            window.location.href = "<?= base_url('login') ?>";
        }, 5000);
    });
</script>
<?= $this->endSection() ?>