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

require_once __DIR__ . '/app/helpers/csrf.php';

$userName = $_SESSION['user_name'] ?? 'User';
$page_js = 'maintenance.js';

include __DIR__ . '/views/layouts/header.php';
include __DIR__ . '/views/layouts/sidebar.php';
?>

<main class="main-content maintenance-page">
<?php include __DIR__ . '/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"><i class="bi bi-tools me-1"></i> Maintenance Desk</span>
                    <h2 class="mb-2">Vehicle Maintenance Command</h2>
                    <p class="mb-0 text-muted">Log complaints, control RFQs, approve job orders, and track workshop progress from one operational queue.</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <button type="button" class="btn btn-primary" id="btnNewMaintenanceJob"><i class="bi bi-plus-lg"></i> Log Complaint</button>
                    <button type="button" class="btn btn-outline-secondary ms-2" id="btnRefreshMaintenance"><i class="bi bi-arrow-clockwise"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-12 col-md-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">Total Jobs</div>
                            <div class="kpi-value" id="maintenanceTotalJobs">0</div>
                        </div>
                        <div class="kpi-icon text-primary fs-3"><i class="bi bi-clipboard2-data"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-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">Active Jobs</div>
                            <div class="kpi-value" id="maintenanceOpenJobs">0</div>
                        </div>
                        <div class="kpi-icon text-warning fs-3"><i class="bi bi-hourglass-split"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-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="maintenanceWorkshopJobs">0</div>
                        </div>
                        <div class="kpi-icon text-info fs-3"><i class="bi bi-buildings"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-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 Approval</div>
                            <div class="kpi-value" id="maintenanceAwaitingApproval">0</div>
                        </div>
                        <div class="kpi-icon text-success fs-3"><i class="bi bi-check2-circle"></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-end">
                <div class="col-auto">
                    <label class="form-label mb-0 small fw-semibold text-uppercase text-muted">Workflow Stage</label>
                    <select id="maintenanceStageFilter" class="form-select form-select-sm" style="min-width:200px">
                        <option value="">All stages</option>
                        <option value="Complaint Logged">Complaint Logged</option>
                        <option value="Maintenance Review">Maintenance Review</option>
                        <option value="Work Order Raised">Work Order Raised</option>
                        <option value="RFQ Sent">RFQ Sent</option>
                        <option value="Quote Submitted">Quote Submitted</option>
                        <option value="Quote Vetted">Quote Vetted</option>
                        <option value="Job Order Approved">Job Order Approved</option>
                        <option value="Workshop In Progress">Workshop 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="Requisition Approved">Requisition Approved</option>
                        <option value="Requisition Rejected">Requisition Rejected</option>
                        <option value="Payment Made">Payment Made</option>
                        <option value="Suspended">Suspended</option>
                        <option value="Cancelled">Cancelled</option>
                    </select>
                </div>
                <div class="col-auto">
                    <label class="form-label mb-0 small fw-semibold text-uppercase text-muted">From</label>
                    <input type="date" id="maintenanceDateFrom" class="form-control form-control-sm" style="min-width:150px">
                </div>
                <div class="col-auto">
                    <label class="form-label mb-0 small fw-semibold text-uppercase text-muted">To</label>
                    <input type="date" id="maintenanceDateTo" class="form-control form-control-sm" style="min-width:150px">
                </div>
                <div class="col">
                    <div class="input-group input-group-sm" style="max-width:360px">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" id="maintenanceSearch" class="form-control" placeholder="Plate, complaint, driver, or workshop">
                    </div>
                </div>
                <div class="col-auto">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-success" id="btnExportCsv"><i class="bi bi-filetype-csv"></i> CSV</button>
                        <button type="button" class="btn btn-outline-primary" id="btnExportXlsx"><i class="bi bi-file-earmark-excel"></i> Excel</button>
                        <button type="button" class="btn btn-outline-danger" id="btnExportPdf"><i class="bi bi-filetype-pdf"></i> PDF</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">Maintenance Jobs</h5>
                <p class="text-muted small mb-0">Prioritized vehicle issues and approval workflow actions.</p>
            </div>
            <span class="badge text-bg-light border">Live Queue</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</th>
                            <th>Workshop</th>
                            <th>Work Order</th>
                            <th>Stage</th>
                            <th>Amount</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="maintenanceJobsTable">
                        <tr><td colspan="7" class="text-center py-4 text-muted">Loading maintenance jobs...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</main>

<div class="modal fade" id="maintenanceJobModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="maintenanceJobModalTitle">Log Complaint</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="maintenanceJobForm">
                    <input type="hidden" id="maintenance_job_id">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="maintenance_vehicle_id" class="form-label">Vehicle</label>
                            <select id="maintenance_vehicle_id" class="form-select">
                                <option value="">Select vehicle</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="maintenance_driver_id" class="form-label">Driver</label>
                            <select id="maintenance_driver_id" class="form-select">
                                <option value="">Select driver</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="maintenance_complaint_source" class="form-label">Complaint Source</label>
                            <select id="maintenance_complaint_source" class="form-select">
                                <option value="Driver">Driver</option>
                                <option value="Fleet Office">Fleet Office</option>
                                <option value="Maintenance Office">Maintenance Office</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="maintenance_complaint_title" class="form-label">Complaint Title</label>
                            <input type="text" id="maintenance_complaint_title" class="form-control">
                        </div>
                        <div class="col-md-4" id="maintenanceWorkOrderNumberGroup">
                            <label for="maintenance_work_order_number" class="form-label">Work Order #</label>
                            <input type="text" id="maintenance_work_order_number" class="form-control" readonly>
                        </div>
                        <div class="col-md-4">
                            <label for="maintenance_complaint_date" class="form-label">Complaint Date</label>
                            <input type="date" id="maintenance_complaint_date" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label for="maintenance_complaint_log_date" class="form-label">Log Date</label>
                            <input type="date" id="maintenance_complaint_log_date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="maintenance_nature_of_fault" class="form-label">Nature Of Fault</label>
                            <input type="text" id="maintenance_nature_of_fault" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label for="maintenance_current_service_mileage_km" class="form-label">Current Mileage</label>
                            <input type="number" id="maintenance_current_service_mileage_km" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label for="maintenance_last_service_mileage_km" class="form-label">Last Service Mileage</label>
                            <input type="number" id="maintenance_last_service_mileage_km" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label for="maintenance_next_service_mileage_km" class="form-label">Next Service Mileage</label>
                            <input type="number" id="maintenance_next_service_mileage_km" class="form-control">
                        </div>
                        <!-- Monthly mileage removed per new requirements -->
                        <div class="col-md-4">
                            <label for="maintenance_expected_completion_date" class="form-label">Expected Completion Date</label>
                            <input type="date" id="maintenance_expected_completion_date" class="form-control">
                        </div>
                        <div class="col-md-4" id="maintenanceWorkflowStageGroup">
                            <label for="maintenance_workflow_stage" class="form-label">Workflow Stage</label>
                            <select id="maintenance_workflow_stage" class="form-select">
                                <option value="Complaint Logged">Complaint Logged</option>
                                <option value="Maintenance Review">Maintenance Review</option>
                                <option value="Work Order Raised">Work Order Raised</option>
                                <option value="RFQ Sent">RFQ Sent</option>
                                <option value="Quote Submitted">Quote Submitted</option>
                                <option value="Quote Vetted">Quote Vetted</option>
                                <option value="Job Order Approved">Job Order Approved</option>
                                <option value="Workshop In Progress">Workshop 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="Requisition Approved">Requisition Approved</option>
                                <option value="Requisition Rejected">Requisition Rejected</option>
                                <option value="Payment Made">Payment Made</option>
                                <option value="Suspended">Suspended</option>
                                <option value="Cancelled">Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="maintenance_status" class="form-label">Status</label>
                            <select id="maintenance_status" class="form-select">
                                <option value="Pending">Pending</option>
                                <option value="Approved">Approved</option>
                                <option value="In Progress">In Progress</option>
                                <option value="Completed">Completed</option>
                                <option value="Closed">Closed</option>
                                <option value="Requisition Raised">Requisition Raised</option>
                                <option value="Requisition Approved">Requisition Approved</option>
                                <option value="Requisition Rejected">Requisition Rejected</option>
                                <option value="Payment Made">Payment Made</option>
                                <option value="Paid">Paid</option>
                                <option value="Suspended">Suspended</option>
                                <option value="Cancelled">Cancelled</option>
                                <option value="Rejected">Rejected</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="maintenance_complaint_description" class="form-label">Complaint Description</label>
                            <textarea id="maintenance_complaint_description" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="col-12" id="maintenanceCommentGroup">
                            <label for="maintenance_comment" class="form-label">Maintenance Office Comment</label>
                            <textarea id="maintenance_comment" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveMaintenanceJob">Save Job</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="maintenanceActionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="maintenanceActionModalTitle">Maintenance Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="maintenanceActionForm">
                    <input type="hidden" id="maintenance_action_job_id">
                    <input type="hidden" id="maintenance_action_code">
                    <div class="alert alert-light border mb-3">
                        <div class="fw-semibold small text-uppercase text-muted mb-1">Action Guidance</div>
                        <div id="maintenanceActionHelp" class="mb-0 small text-muted">Apply the next workflow step for this job.</div>
                    </div>
                    <div class="quote-vetting-panel d-none mb-3" id="maintenanceQuoteVettingPanel">
                        <div class="quote-vetting-header">
                            <div>
                                <div class="quote-vetting-eyebrow">Quote Vetting</div>
                                <h6 class="mb-0">Selected Quote Review</h6>
                            </div>
                            <span class="badge text-bg-light border" id="quoteVettingFinalBadge">No final workshop</span>
                        </div>
                        <div id="quoteVettingSummary" class="quote-vetting-summary">
                            <div class="text-muted small">Loading quote context...</div>
                        </div>
                        <div class="table-responsive mt-3">
                            <table class="table table-sm align-middle mb-0 quote-vetting-table">
                                <thead>
                                    <tr>
                                        <th>Workshop</th>
                                        <th>Quote</th>
                                        <th>Status</th>
                                        <th>Decision</th>
                                    </tr>
                                </thead>
                                <tbody id="quoteVettingTable">
                                    <tr><td colspan="4" class="text-muted">Loading quotes...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6" id="maintenanceActionAmountGroup">
                            <label for="maintenance_action_amount" class="form-label" id="maintenanceActionAmountLabel">Amount</label>
                            <input type="number" step="0.01" id="maintenance_action_amount" class="form-control">
                            <div class="form-text" id="maintenanceActionAmountHelp">Use this field when the workflow step needs a financial value.</div>
                        </div>
                        <div class="col-md-6 d-none" id="maintenanceActionWorkshopGroup">
                            <label for="maintenance_action_workshop" class="form-label" id="maintenanceActionWorkshopLabel">Workshop</label>
                            <select id="maintenance_action_workshop" class="form-select">
                                <option value="">Select workshop</option>
                            </select>
                            <div class="form-text" id="maintenanceActionWorkshopHelp">Choose workshop for RFQ/Quote processing.</div>
                            <div class="small text-primary mt-1 d-none" id="maintenanceActionWorkshopSelectedLabel">Selected workshop: -</div>
                        </div>
                        <div class="col-12 d-none" id="maintenanceActionLineItemsGroup">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">Work Line Items</label>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="addMaintenanceLineItem">Add Item</button>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-2">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Work To Be Done</th>
                                            <th style="width: 180px;">Cost</th>
                                            <th style="width: 52px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="maintenanceActionLineItems"></tbody>
                                </table>
                            </div>
                            <div class="text-end small fw-semibold">Total: <span id="maintenanceLineItemsTotal">0.00</span></div>
                        </div>
                        <div class="col-12">
                            <label for="maintenance_action_comment" class="form-label" id="maintenanceActionCommentLabel">Comment</label>
                            <textarea id="maintenance_action_comment" class="form-control" rows="4"></textarea>
                            <div class="form-text" id="maintenanceActionCommentHelp">Add context for reviewers, workshop, or internal control.</div>
                        </div>
                        <div class="col-12 d-none" id="maintenanceHodOverrideSection">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="maintenance_hod_override" value="1">
                                <label class="form-check-label fw-semibold" for="maintenance_hod_override">
                                    Apply HOD Override
                                </label>
                            </div>
                            <div class="form-text">Required only when RFQ policy gate blocks this stage transition.</div>
                        </div>
                        <div class="col-12 d-none" id="maintenanceHodOverrideReasonGroup">
                            <label for="maintenance_hod_override_reason" class="form-label">HOD Override Reason</label>
                            <textarea id="maintenance_hod_override_reason" class="form-control" rows="2" placeholder="Provide reason for override"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger d-none" id="rejectComplaintAction">Reject</button>
                <button type="button" class="btn btn-primary" id="submitMaintenanceAction">Apply Action</button>
            </div>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="maintenanceTimelineCanvas">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Job Timeline</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body" id="maintenanceTimelineBody">
        <div class="text-muted">Loading timeline...</div>
    </div>
</div>

<div class="modal fade" id="rfqManagerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title">RFQ & Quote Manager</h5>
                    <div class="small text-muted" id="rfqPolicyInfo">RFQ Vendors: 0/3 | Quotes: 0/2</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="rfq_manager_job_id">

                <div class="rfq-workspace">
                    <div class="rfq-policy-strip">
                        <div class="rfq-policy-item" id="rfqPolicyVendorStatus">
                            <div class="rfq-policy-label">Vendor Coverage</div>
                            <div class="rfq-policy-value">0/3</div>
                            <div class="rfq-policy-detail">Needs vendors</div>
                        </div>
                        <div class="rfq-policy-item" id="rfqPolicyQuoteStatus">
                            <div class="rfq-policy-label">Comparable Quotes</div>
                            <div class="rfq-policy-value">0/2</div>
                            <div class="rfq-policy-detail">Needs quotes</div>
                        </div>
                        <div class="rfq-policy-item" id="rfqApprovalReadiness">
                            <div class="rfq-policy-label">Approval Readiness</div>
                            <div class="rfq-policy-value">Pending</div>
                            <div class="rfq-policy-detail">No final workshop</div>
                        </div>
                    </div>

                    <div class="rfq-decision-summary" id="finalWorkshopInfo">Final Workshop Selected: -</div>

                    <div class="rfq-scope-panel">
                        <div class="rfq-panel-header mb-2">
                            <div>
                                <div class="rfq-step">Work Order Scope</div>
                                <h6 class="mb-0">Line Items Vendors Must Quote Against</h6>
                            </div>
                            <span class="badge text-bg-light border" id="rfqScopeSummary">0 items</span>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0 rfq-scope-table">
                                <thead>
                                    <tr>
                                        <th>Work To Be Done</th>
                                        <th class="text-end">Estimated Cost</th>
                                    </tr>
                                </thead>
                                <tbody id="rfqScopeTable">
                                    <tr><td colspan="2" class="text-muted">Loading work scope...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-lg-5">
                            <div class="rfq-panel">
                                <div class="rfq-panel-header">
                                    <div>
                                        <div class="rfq-step">Step 4</div>
                                        <h6 class="mb-0">Invite RFQ Vendors</h6>
                                    </div>
                                    <span class="badge text-bg-light border">Minimum 3</span>
                                </div>
                                <label for="rfq_workshop_select" class="form-label">Workshop Vendor</label>
                                <div class="input-group">
                                    <select id="rfq_workshop_select" class="form-select">
                                        <option value="">Select workshop</option>
                                    </select>
                                    <button type="button" class="btn btn-primary" id="btnAddRfqVendor">
                                        <i class="bi bi-envelope-paper me-1"></i>Send Invite
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-7">
                            <div class="rfq-panel">
                                <div class="rfq-panel-header">
                                    <div>
                                        <div class="rfq-step">Step 4</div>
                                        <h6 class="mb-0">Capture Workshop Quote</h6>
                                    </div>
                                    <span class="badge text-bg-light border">Against line items</span>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-5">
                                        <label for="quote_rfq_id" class="form-label">RFQ Vendor</label>
                                        <select id="quote_rfq_id" class="form-select">
                                            <option value="">Select RFQ</option>
                                        </select>
                                        <div class="small text-primary mt-1" id="quoteWorkshopSelectedLabel">Selected workshop: -</div>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="quote_amount" class="form-label">Quote Total</label>
                                        <input type="number" step="0.01" min="0" id="quote_amount" class="form-control bg-light" readonly>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="quote_received_date" class="form-label">Received Date</label>
                                        <input type="date" id="quote_received_date" class="form-control">
                                    </div>
                                    <div class="col-md-5">
                                        <label for="quote_file" class="form-label">Quote File</label>
                                        <input type="file" id="quote_file" class="form-control" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx">
                                    </div>
                                    <div class="col-md-7">
                                        <label for="quote_notes" class="form-label">Quote Notes</label>
                                        <input type="text" id="quote_notes" class="form-control">
                                    </div>
                                    <div class="col-12">
                                        <div class="quote-line-items-panel">
                                            <div class="quote-line-items-header">
                                                <div>
                                                    <div class="rfq-step">Vendor Quote Lines</div>
                                                    <h6 class="mb-0">Quote Against Work Scope</h6>
                                                </div>
                                                <div class="quote-line-items-actions">
                                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btnUseWorkScopeForQuote">
                                                        <i class="bi bi-arrow-repeat me-1"></i>Use Scope
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddQuoteLineItem">
                                                        <i class="bi bi-plus-circle me-1"></i>Add Line
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="table-responsive">
                                                <table class="table table-sm align-middle mb-2 quote-line-items-table">
                                                    <thead>
                                                        <tr>
                                                            <th>Work / Part / Service</th>
                                                            <th class="text-end">Quoted Amount</th>
                                                            <th></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="quoteLineItemsTable">
                                                        <tr><td colspan="3" class="text-muted">Select an RFQ vendor to load quote lines.</td></tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="text-end small fw-semibold">Quote Total: <span id="quoteLineItemsTotal">0.00</span></div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button type="button" class="btn btn-success" id="btnUploadQuote">
                                            <i class="bi bi-upload me-1"></i>Save Quote
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rfq-panel">
                        <div class="rfq-panel-header">
                            <div>
                                <div class="rfq-step">Steps 5-6</div>
                                <h6 class="mb-0">Compare Quotes And Select Final Workshop</h6>
                            </div>
                            <div class="small text-muted" id="rfqRecommendationInfo">Waiting for comparable quotes.</div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-hover align-middle rfq-comparison-table">
                                <thead>
                                    <tr>
                                        <th>Workshop</th>
                                        <th>RFQ</th>
                                        <th>Quote</th>
                                        <th>Received</th>
                                        <th>Evidence</th>
                                        <th>Notes</th>
                                        <th>Status</th>
                                        <th>Recommendation</th>
                                        <th>Decision</th>
                                    </tr>
                                </thead>
                                <tbody id="rfqManagerTable">
                                    <tr><td colspan="9" class="text-center text-muted">Loading RFQ records...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- PDF Generation Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="assets/js/maintenance-pdf.js?v=20260521-maintenance-print-pdf"></script>

<!-- RFQ Invite Modal -->
<div class="modal fade" id="rfqInviteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Invite Workshop</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="rfq_invite_workshop_id">
                <input type="hidden" id="rfq_invite_job_id">
                <div class="mb-2">
                    <label for="rfq_invite_email" class="form-label">Workshop Email</label>
                    <input type="email" id="rfq_invite_email" class="form-control" placeholder="workshop@example.com">
                </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-primary" id="btnConfirmRfqInvite">Send Invite</button>
            </div>
        </div>
    </div>
</div>

<!-- RFQ Resend Confirm Modal -->
<div class="modal fade" id="rfqResendModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Resend RFQ Invitation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="rfq_resend_id">
                <p>Resend invitation for this RFQ?</p>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" id="rfq_resend_force">
                    <label class="form-check-label" for="rfq_resend_force">Force resend (override recent sends)</label>
                </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-primary" id="btnConfirmRfqResend">Resend</button>
            </div>
        </div>
    </div>
</div>

<script>
window.CURRENT_USER_ID = <?= (int)($_SESSION['user_id'] ?? 0) ?>;
window.CURRENT_USER_ROLE = <?= json_encode($_SESSION['role_name'] ?? '', JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
window.CSRF_TOKEN = <?= json_encode(generateCsrfToken(), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
</script>

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