recreate project

app/Views/auth/select_role.php

@@ -0,0 +1,71 @@
+<?= $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: 180px; height: 120px;">
+    </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">
+
+            <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() ?>