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

<div class="registration-form container mt-5 mb-5">
    <div class="row justify-content-center">
        <!-- Error Message -->
        <?php if (session()->getFlashdata('error')): ?>
            <div class="alert alert-danger text-center">
                <?= esc(session()->getFlashdata('error')) ?>
            </div>
        <?php endif; ?>

        <form id="roleForm" method="post" action="<?= base_url('/set-role') ?>">
            <?= csrf_field() ?>
            <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>


            <h3 class="text-center text-success" style="font-family: Arial, sans-serif;">
    Select Your Role to Log In
</h3>

            <br>
            <input type="hidden" name="selected_role" id="selected_role">
            <input type="hidden" name="redirect_to" value="<?= esc((string) ($redirect_to ?? '')) ?>">

            <div class="d-flex flex-wrap justify-content-center gap-3 mt-3">
                <?php foreach ($roles as $role): ?>
                    <div class="mb-3 d-grid">
                        <button type="button"
                            class="btn btn-lg btn-success item"
                            data-role="<?= esc(strtolower($role)) ?>"
                            data-bs-toggle="tooltip"
                            title="Log in as <?= esc(ucwords($role)) ?>">
                            <?= esc(ucwords($role)) ?>
                        </button>
                    </div>
                <?php endforeach; ?>
            </div>

        </form>

    </div>
</div>

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


<?= $this->section('scripts') ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('roleForm');
        const roleInput = document.getElementById('selected_role');
        const buttons = document.querySelectorAll('button[data-role]');

        buttons.forEach(button => {
            button.addEventListener('click', function() {
                const selectedRole = this.getAttribute('data-role');
                roleInput.value = selectedRole;
                form.submit();
            });
        });

        // Enable Bootstrap tooltips
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
    });
</script>
<?= $this->endSection() ?>
