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

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

$page_js = 'service_schedules.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 justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1"><i class="bi bi-calendar-check"></i> Service Schedules</h4>
            <p class="text-muted mb-0">Preventive maintenance intervals and due-service tracking.</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-warning" id="btnCheckDue"><i class="bi bi-exclamation-triangle"></i> Check Due Services</button>
            <button class="btn btn-primary" id="btnAddInterval"><i class="bi bi-plus-lg"></i> Add Schedule</button>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body py-2">
            <div class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small">Search Vehicle</label>
                    <input type="text" class="form-control form-control-sm" id="filterVehicleSearch" placeholder="Plate number...">
                </div>
                <div class="col-md-2">
                    <label class="form-label small">&nbsp;</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="filterDueOnly">
                        <label class="form-check-label small">Due only</label>
                    </div>
                </div>
                <div class="col-md-2 d-flex gap-1">
                    <button class="btn btn-sm btn-outline-secondary flex-fill" id="btnRefreshIntervals"><i class="bi bi-arrow-clockwise"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4" id="dueKpiRow">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100 bg-warning-subtle">
                <div class="card-body text-center">
                    <div class="text-muted small">Due Now (Date)</div>
                    <div class="fs-3 fw-bold text-warning" id="kpiDueDate">0</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100 bg-danger-subtle">
                <div class="card-body text-center">
                    <div class="text-muted small">Due Now (Mileage)</div>
                    <div class="fs-3 fw-bold text-danger" id="kpiDueMileage">0</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100 bg-success-subtle">
                <div class="card-body text-center">
                    <div class="text-muted small">On Schedule</div>
                    <div class="fs-3 fw-bold text-success" id="kpiOnTrack">0</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100 bg-info-subtle">
                <div class="card-body text-center">
                    <div class="text-muted small">Total Schedules</div>
                    <div class="fs-3 fw-bold text-info" id="kpiTotal">0</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Vehicle</th>
                            <th>Task</th>
                            <th>Interval</th>
                            <th>Last Service</th>
                            <th>Due</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="intervalTableBody">
                        <tr><td colspan="7" class="text-center text-muted py-4">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Interval Modal -->
<div class="modal fade" id="intervalModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="intervalModalTitle">Add Service Schedule</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="intervalForm">
                    <input type="hidden" id="editIntervalId">
                    <div class="mb-3">
                        <label class="form-label">Vehicle *</label>
                        <select class="form-select" id="editVehicleId" required>
                            <option value="">Select Vehicle</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Task Description</label>
                        <textarea class="form-control" id="editTaskDescription" rows="2" placeholder="e.g. Oil change, filter check, brake inspection"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Interval Type</label>
                            <select class="form-select" id="editIntervalType">
                                <option value="both">Both (km + days)</option>
                                <option value="mileage">Mileage only</option>
                                <option value="time">Time only</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Active</label>
                            <select class="form-select" id="editIsActive">
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Interval (km)</label>
                            <input type="number" class="form-control" id="editIntervalKm" min="0" value="5000">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Interval (days)</label>
                            <input type="number" class="form-control" id="editIntervalDays" min="0" value="90">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="btnSaveInterval">Save Schedule</button>
            </div>
        </div>
    </div>
</div>

<!-- Generate PM Confirmation Modal -->
<div class="modal fade" id="generatePmModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Generate PM Job</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="generatePmBody">
                <p>Create a maintenance job for this due service?</p>
                <div class="alert alert-info" id="generatePmInfo"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="btnGeneratePm"><i class="bi bi-tools"></i> Generate Job</button>
            </div>
        </div>
    </div>
</div>

</main>
<?php include 'views/layouts/footer.php'; ?>
