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

$page_js = 'workshop.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="card shadow-sm border-0 mb-4">
            <div class="card-body p-4 p-lg-5">
                <div class="row g-4 align-items-center">
                    <div class="col-lg-8">
                        <span class="badge bg-primary bg-opacity-10 text-primary mb-3 px-3 py-2">Workshop</span>
                        <h2 class="mb-2">Workshop Management</h2>
                        <p class="mb-0 text-muted">Track vehicle maintenance, repairs, and workshop capacity to keep your fleet operational.</p>
                    </div>
                    <div class="col-lg-4 text-lg-end">
                        <button type="button" class="btn btn-primary" id="btnAddVehicle"><i class="bi bi-plus-lg"></i> Add to Workshop</button>
                        <a href="workshop_directory.php" class="btn btn-outline-secondary ms-2"><i class="bi bi-building-gear"></i> Directory</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- KPI Cards -->
        <div class="row g-4 mb-4">
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card kpi-card shadow-sm border-0 rounded-4 h-100">
                    <div class="card-body py-3 px-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="kpi-label">In Workshop</div>
                                <div class="kpi-value" id="kpiInWorkshop">0</div>
                                <div class="small text-muted">Currently being serviced</div>
                            </div>
                            <div class="kpi-icon text-warning fs-3"><i class="bi bi-tools"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card kpi-card shadow-sm border-0 rounded-4 h-100">
                    <div class="card-body py-3 px-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="kpi-label">Pending Service</div>
                                <div class="kpi-value" id="kpiPendingService">0</div>
                                <div class="small text-muted">Awaiting maintenance</div>
                            </div>
                            <div class="kpi-icon text-info fs-3"><i class="bi bi-clock"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card kpi-card shadow-sm border-0 rounded-4 h-100">
                    <div class="card-body py-3 px-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="kpi-label">Completed</div>
                                <div class="kpi-value" id="kpiCompleted">0</div>
                                <div class="small text-muted">Jobs completed</div>
                            </div>
                            <div class="kpi-icon text-success fs-3"><i class="bi bi-check-circle"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card kpi-card shadow-sm border-0 rounded-4 h-100">
                    <div class="card-body py-3 px-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="kpi-label">Awaiting Payment</div>
                                <div class="kpi-value" id="kpiAwaitingPayment">0</div>
                                <div class="small text-muted">Jobs needing payment</div>
                            </div>
                            <div class="kpi-icon text-primary fs-3"><i class="bi bi-credit-card"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body py-3 px-3">
                <div class="row g-2 align-items-center">
                    <div class="col-auto">
                        <div class="input-group input-group-sm" style="min-width:200px">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control" id="workshopSearch" placeholder="Search plate, job, workshop...">
                        </div>
                    </div>
                    <div class="col-auto">
                        <select id="workshopFilter" class="form-select form-select-sm" style="min-width:180px">
                            <option value="">All workshops</option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <select id="workshopStageFilter" class="form-select form-select-sm" style="min-width:150px">
                            <option value="">All stages</option>
                            <option value="Workshop In Progress">In Progress</option>
                            <option value="Inspection">Inspection</option>
                            <option value="Internal Control">Internal Control</option>
                            <option value="Closed">Closed</option>
                            <option value="Requisition Raised">Requisition Raised</option>
                            <option value="Payment Made">Payment Made</option>
                            <option value="Payment Not Made">Payment Not Made</option>
                            <option value="Cancelled">Cancelled</option>
                        </select>
                    </div>
                    <div class="col">
                        <div class="d-flex gap-2 justify-content-end">
                            <button class="btn btn-outline-secondary btn-sm" id="btnRefreshJobs" title="Refresh"><i class="bi bi-arrow-clockwise"></i></button>
                            <div class="btn-group btn-group-sm" role="group">
                                <button class="btn btn-outline-secondary" id="btnExportWorkshopCsv" title="CSV"><i class="bi bi-filetype-csv"></i></button>
                                <button class="btn btn-outline-secondary" id="btnExportWorkshopXlsx" title="Excel"><i class="bi bi-file-earmark-excel"></i></button>
                                <button class="btn btn-outline-secondary" id="btnExportWorkshopPdf" title="PDF"><i class="bi bi-filetype-pdf"></i></button>
                            </div>
                            <button class="btn btn-primary btn-sm" id="btnAddNewWorkshop"><i class="bi bi-plus-lg"></i> Add Workshop</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-header bg-white d-flex justify-content-between align-items-center gap-3">
                <div>
                    <h5 class="mb-1">Work History</h5>
                    <p class="text-muted small mb-0">Jobs sent to workshops with status and costs.</p>
                </div>
                <span class="badge text-bg-light border" id="jobCount">0 jobs</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Vehicle</th>
                                <th>Complaint / Job</th>
                                <th>Workshop</th>
                                <th>Received</th>
                                <th>Completed</th>
                                <th>Stage</th>
                                <th>Amount</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="workHistoryTable">
                            <tr><td colspan="8" class="text-center text-muted py-4">Loading work history...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</main>

<!-- Add/Edit Workshop Modal -->
<div class="modal fade" id="workshopEditModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="workshopEditTitle">Add Workshop</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="workshopEditForm">
                    <input type="hidden" id="editWorkshopId">
                    <div class="mb-3">
                        <label class="form-label">Name *</label>
                        <input type="text" class="form-control" id="editWorkshopName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Contact Person</label>
                        <input type="text" class="form-control" id="editContactPerson">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Phone</label>
                            <input type="text" class="form-control" id="editPhone">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" id="editEmail">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Address</label>
                        <textarea class="form-control" id="editAddress" rows="2"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">City</label>
                            <select class="form-select" id="editCity">
                                <option value="">Select City</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Vendor Type</label>
                            <select class="form-select" id="editVendorType">
                                <option value="Workshop">Workshop</option>
                                <option value="Fuel Station">Fuel Station</option>
                                <option value="Tyre Centre">Tyre Centre</option>
                                <option value="Auto Electrician">Auto Electrician</option>
                                <option value="Panel Beater">Panel Beater</option>
                                <option value="Diagnostics">Diagnostics</option>
                                <option value="General Service">General Service</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Status *</label>
                            <select class="form-select" id="editStatus" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Inactive Reason</label>
                            <textarea class="form-control" id="editInactiveReason" rows="2"></textarea>
                        </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="btnSaveWorkshopDir">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Vehicle to Workshop Modal -->
<div class="modal fade" id="workshopModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="workshopModalTitle">Add Vehicle to Workshop</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="workshopModalAlert" class="alert d-none alert-dismissible fade show" role="alert">
                    <span class="alert-content"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                <form id="workshopForm">
                    <input type="hidden" id="workshopId" name="workshopId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="vehicleSelect" class="form-label">Vehicle</label>
                            <select class="form-select" id="vehicleSelect" name="vehicleId" required>
                                <option value="">Select Vehicle</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="issueType" class="form-label">Issue Type</label>
                            <select class="form-select" id="issueType" name="issueType" required>
                                <option value="">Select Type</option>
                                <option value="maintenance">Scheduled Maintenance</option>
                                <option value="repair">Repair</option>
                                <option value="emergency">Emergency</option>
                                <option value="inspection">Inspection</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="3" placeholder="Describe the issue or maintenance required"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label for="technicianSelect" class="form-label">Assigned Technician</label>
                            <select class="form-select" id="technicianSelect" name="technicianId">
                                <option value="">Select Technician</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="workshopSelect" class="form-label">Workshop</label>
                            <select class="form-select" id="workshopSelect" name="workshopId">
                                <option value="">Select Workshop</option>
                            </select>
                            <div id="workshopContactInfo" class="mt-1 small text-muted" style="font-size: 0.8em;"></div>
                        </div>
                        <div class="col-md-6">
                            <label for="priority" class="form-label">Priority</label>
                            <select class="form-select" id="priority" name="priority" required>
                                <option value="low">Low</option>
                                <option value="medium">Medium</option>
                                <option value="high">High</option>
                                <option value="urgent">Urgent</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="estimatedDays" class="form-label">Estimated Days</label>
                            <input type="number" class="form-control" id="estimatedDays" name="estimatedDays" min="1" value="1">
                        </div>
                        <div class="col-md-6">
                            <label for="startDate" class="form-label">Start Date</label>
                            <input type="date" class="form-control" id="startDate" name="startDate" required>
                        </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="btnSaveWorkshop">Save</button>
            </div>
        </div>
    </div>
</div>

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