<?php
require_once 'app/helpers/auth.php';
require_once 'app/helpers/rbac.php';
require_once 'config/database.php';
requireLogin();

if (!can('driver.off_duty.view')) {
    echo "<div class='alert alert-danger m-4'>Access denied</div>"; exit;
}

$page_js = 'driver_off_duty.js';
include 'views/layouts/header.php';
include 'views/layouts/sidebar.php';
?>
<main class="main-content">
<?php include 'views/layouts/topbar.php'; ?>
<div class="container-fluid p-4">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
        <div>
            <span class="section-chip mb-2"><i class="bi bi-calendar-day"></i> Driver Attendance</span>
            <h2 class="mb-1">Monthly Off-Duty Overview</h2>
            <p class="text-muted mb-0">Track driver off-duty days across the fleet (max 5 per driver per month).</p>
        </div>
        <div class="btn-group btn-group-sm" role="group">
            <button class="btn btn-outline-secondary" id="btnExportOffDutyCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
            <button class="btn btn-outline-secondary" id="btnExportOffDutyXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
            <button class="btn btn-outline-secondary" id="btnExportOffDutyPdf" title="PDF"><i class="bi bi-filetype-pdf"></i></button>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small fw-semibold text-muted">Month</label>
                    <input type="month" id="overviewMonth" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-semibold text-muted">Driver</label>
                    <select id="overviewDriver" class="form-select"><option value="">All drivers</option></select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-outline-secondary w-100" id="btnRefreshOverview"><i class="bi bi-arrow-clockwise me-2"></i>Refresh</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="table-responsive">
            <table class="table align-middle table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Driver</th>
                        <th>Month</th>
                        <th>Days Taken</th>
                        <th>Max</th>
                        <th>Remaining</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="overviewTable"><tr><td colspan="6" class="text-center text-muted py-4">Loading...</td></tr></tbody>
            </table>
        </div>
    </div>
</div>
</main>

<script>window.CSRF_TOKEN = <?= json_encode(generateCsrfToken(), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;</script>
<?php include 'views/layouts/footer.php'; ?>
