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

<div class="container-fluid mt-4">
    <h2 class="text-center mt-4 mb-3">Staff List</h2>

    <?php if (!empty($issues_count) && (int)$issues_count > 0): ?>
        <div class="alert alert-warning" role="alert">
            <?= esc($issues_count) ?> teacher/assistant <?= ((int)$issues_count === 1) ? 'has' : 'have' ?> no class assignment for <?= esc($school_year) ?>.
        </div>
    <?php endif; ?>

    <!-- <a href="<?= site_url('staff/create') ?>" class="btn btn-primary mb-3">Add Staff</a> -->

    <div class="table-responsive">
    <table id="myTable" class="display table table-striped table-bordered table-hover w-100" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th>School ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>School Email</th>
                <th>Phone</th>
                <th>Position</th>
                <th>Class-Section</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php $order = 1; ?>
            <?php foreach ($staff as $s): ?>
                <tr class="<?= !empty($s['verification_issue']) ? 'table-warning' : '' ?>">
                    <td style="text-align: center;"><?= esc($order++); ?></td>
                    <td><?= esc($s['school_id']) ?></td>
                    <td><?= esc($s['firstname']) ?></td>
                    <td><?= esc($s['lastname']) ?></td>
                    <td><?= esc($s['email']) ?></td>
                    <td><?= esc($s['phone'] ?? '') ?></td>
                    <td><?= esc($s['active_role']) ?></td>
                    <td><?= esc($s['class_section']) ?></td>
                    <td>
                        <a href="<?= site_url('staff/edit/' . $s['id']) ?>" class="btn btn-sm btn-warning">Edit</a>
                    </td>
                </tr>

            <?php endforeach ?>
        </tbody>
    </table>
    </div>
</div>

<?= $this->endSection() ?>
<?= $this->section('scripts') ?>
<script>
$(document).ready(function() {
    $('#myTable').DataTable({
        autoWidth: false,
        scrollX: true
    });
});
</script>
<?= $this->endSection() ?>
