<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card border-primary h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div><h6 class="text-muted mb-1"><?= lang('facilities.total') ?></h6><h3 class="mb-0"><?= number_format($totalAll) ?></h3></div>
                    <div class="align-self-center"><i class="fas fa-building fa-2x text-primary opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-success h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div><h6 class="text-muted mb-1"><?= lang('facilities.active') ?></h6><h3 class="mb-0"><?= number_format($totalActive) ?></h3></div>
                    <div class="align-self-center"><i class="fas fa-check-circle fa-2x text-success opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-warning h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div><h6 class="text-muted mb-1"><?= lang('facilities.under_maintenance') ?></h6><h3 class="mb-0"><?= number_format($totalMaintenance) ?></h3></div>
                    <div class="align-self-center"><i class="fas fa-tools fa-2x text-warning opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-danger h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div><h6 class="text-muted mb-1"><?= lang('facilities.closed') ?></h6><h3 class="mb-0"><?= number_format($totalClosed) ?></h3></div>
                    <div class="align-self-center"><i class="fas fa-lock fa-2x text-danger opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form class="row g-2 align-items-end" id="facility-filters" data-filter-table="facilities-table">
            <div class="col-md-3">
                <label class="form-label form-label-sm"><?= lang('common.status') ?></label>
                <select name="status" class="form-select form-select-sm">
                    <option value=""><?= lang('common.all') ?></option>
                    <option value="active"><?= lang('facilities.active') ?></option>
                    <option value="under_maintenance"><?= lang('facilities.under_maintenance') ?></option>
                    <option value="closed"><?= lang('facilities.closed') ?></option>
                    <option value="reserved"><?= lang('facilities.reserved') ?></option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label form-label-sm"><?= lang('facilities.type') ?></label>
                <select name="facility_type_id" class="form-select form-select-sm">
                    <option value=""><?= lang('common.all') ?></option>
                    <?php foreach ($facilityTypes as $ft): ?>
                    <option value="<?= $ft['id'] ?>"><?= e($ft['name_en']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="DataTableHelper.reload('facilities-table')"><?= lang('common.filter') ?></button>
                <button type="reset" class="btn btn-sm btn-outline-secondary" onclick="setTimeout(()=>DataTableHelper.reload('facilities-table'),50)"><?= lang('common.clear') ?></button>
            </div>
            <?php if (auth_can('facilities.manage')): ?>
            <div class="col-md-4 text-end">
                <a href="/facilities/create" class="btn btn-sm btn-primary"><i class="fas fa-plus me-1"></i><?= lang('facilities.create') ?></a>
            </div>
            <?php endif; ?>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="facilities-table" class="table table-striped table-hover w-100"
               data-url="/api/facilities/list"
               data-columns='<?= json_encode([
                   ["data"=>"id","title"=>"#","width"=>"50px"],
                   ["data"=>"code","title"=>lang("facilities.code")],
                   ["data"=>"name","title"=>lang("facilities.name")],
                   ["data"=>"type","title"=>lang("facilities.type")],
                   ["data"=>"capacity","title"=>lang("facilities.capacity")],
                   ["data"=>"bookable","title"=>lang("facilities.bookable"),"className"=>"text-center"],
                   ["data"=>"status","title"=>lang("common.status")],
                   ["data"=>"actions","title"=>lang("common.actions"),"orderable"=>false,"searchable"=>false],
               ]) ?>'>
            <thead>
                <tr>
                    <th>#</th>
                    <th><?= lang('facilities.code') ?></th>
                    <th><?= lang('facilities.name') ?></th>
                    <th><?= lang('facilities.type') ?></th>
                    <th><?= lang('facilities.capacity') ?></th>
                    <th><?= lang('facilities.bookable') ?></th>
                    <th><?= lang('common.status') ?></th>
                    <th><?= lang('common.actions') ?></th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    DataTableHelper.init('facilities-table', { order: [[0, 'desc']] });
});
</script>
<?php $__view->endPush() ?>