<?php $this->push('styles') ?>
<link rel="stylesheet" href="<?= module_asset('sports', 'css/sports.css') ?>">
<?php $this->endPush() ?>

<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="fas fa-chalkboard-teacher me-2"></i><?= lang('sports.classes') ?></h4>
    <?php if (auth_can('classes.manage')): ?>
    <a href="/sports/classes/create" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i>New Class</a>
    <?php endif; ?>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form class="row g-2 align-items-end" data-filter-table="classes-table" id="filterForm">
            <div class="col-md-3">
                <label class="form-label small">Sport</label>
                <select name="sport_id" class="form-select form-select-sm" onchange="DataTableHelper.reload('classes-table')">
                    <option value="">All Sports</option>
                    <?php foreach ($sports as $s): ?><option value="<?= $s['id'] ?>"><?= e($s['name_en']) ?></option><?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small">Status</label>
                <select name="status" class="form-select form-select-sm" onchange="DataTableHelper.reload('classes-table')">
                    <option value="">All</option>
                    <?php foreach ($statuses as $st): ?><option value="<?= $st ?>"><?= ucfirst(str_replace('_',' ',$st)) ?></option><?php endforeach; ?>
                </select>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="classes-table" class="table table-striped table-hover w-100"
               data-url="/api/sports/classes/datatable"
               data-columns='[
                   {"data":"class_code","title":"Code"},
                   {"data":"name_en","title":"Class Name"},
                   {"data":"sport_name","title":"Sport"},
                   {"data":"coach_name","title":"Coach"},
                   {"data":"class_type","title":"Level"},
                   {"data":"spots","title":"Enrolled"},
                   {"data":"status_badge","title":"Status","orderable":false},
                   {"data":"actions","title":"","orderable":false}
               ]'>
        </table>
    </div>
</div>

<?php $this->push('scripts') ?>
<script src="<?= module_asset('sports', 'js/sports.js') ?>"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    DataTableHelper.init('classes-table');
});
</script>
<?php $this->endPush() ?>