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

$page_js = 'workshop_directory.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>
                <h1 class="h3 mb-1">Workshop Directory</h1>
                <p class="text-muted">Manage workshops, contacts, and status for fleet maintenance.</p>
            </div>
            <button class="btn btn-primary" id="btnAddNewWorkshop">
                <i class="bi bi-plus-lg"></i> Add New Workshop
            </button>
        </div>

        <div class="card shadow-sm">
            <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                <div class="d-flex gap-2">
                    <input type="text" class="form-control" id="workshopSearchDir" placeholder="Search name, contact, phone..." style="width: 300px;">
                    <select id="workshopStatusFilter" class="form-select" style="width: auto;">
                        <option value="all">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <button class="btn btn-outline-secondary" id="btnRefreshWorkshops"><i class="bi bi-arrow-clockwise"></i></button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Workshop Name</th>
                                <th>Vendor Type</th>
                                <th>Contact Person</th>
                                <th>Phone</th>
                                <th>Email</th>
                                <th>City</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="workshopDirectoryTable">
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">
                                    <i class="bi bi-building-gear fs-1 opacity-50 mb-2 d-block"></i>
                                    Loading workshops...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Add/Edit Modal -->
<div class="modal fade" id="workshopEditModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <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" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="workshopEditForm">
                    <input type="hidden" id="editWorkshopId" name="id">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label fw-semibold">Workshop Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editWorkshopName" name="name" required maxlength="255">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Status <span class="text-danger">*</span></label>
                            <select class="form-select" id="editStatus" name="status" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="row g-3 mt-2">
                        <div class="col-md-6">
                            <label class="form-label">Contact Person</label>
                            <input type="text" class="form-control" id="editContactPerson" name="contact_person" maxlength="255">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Phone</label>
                            <input type="tel" class="form-control" id="editPhone" name="phone" maxlength="50">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" id="editEmail" name="email">
                        </div>
                    </div>
                    <div class="row g-3 mt-3">
                        <div class="col-md-6">
                            <label class="form-label">Inactive Reason</label>
                            <textarea class="form-control" id="editInactiveReason" name="inactive_reason" rows="2" maxlength="500"></textarea>
                            <div class="form-text">Required when inactive.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Address</label>
                            <textarea class="form-control" id="editAddress" name="address" rows="3" maxlength="1000"></textarea>
                        </div>
                    </div>
                    <div class="row g-3 mt-3">
                        <div class="col-md-6">
                            <label class="form-label">City</label>
                            <select class="form-select" id="editCity" name="city">
                                <option value="">Select City</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Vendor Type</label>
                            <select class="form-select" id="editVendorType" name="vendor_type">
                                <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>
                </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">
                    <i class="bi bi-check-lg"></i> Save Workshop
                </button>
            </div>
        </div>
    </div>
</div>

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

