<div class="d-flex justify-content-between align-items-center mb-3">
    <h4><?= lang('facilities.maintenance') ?>: <?= e($facility['name_en']) ?></h4>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addMaintenanceModal"><i class="fas fa-plus me-1"></i>Add Record</button>
</div>

<div class="card">
    <div class="card-body">
        <table id="maintenance-table" class="table table-striped table-hover w-100"
               data-url="/api/facilities/maintenance/<?= $facility['id'] ?>"
               data-columns='<?= json_encode([
                   ["data"=>"id","title"=>"#","width"=>"50px"],
                   ["data"=>"type","title"=>"Type"],
                   ["data"=>"title","title"=>"Title"],
                   ["data"=>"start","title"=>"Start Date"],
                   ["data"=>"end","title"=>"End Date"],
                   ["data"=>"cost","title"=>"Est. Cost"],
                   ["data"=>"priority","title"=>"Priority"],
                   ["data"=>"status","title"=>"Status"],
               ]) ?>'>
            <thead><tr><th>#</th><th>Type</th><th>Title</th><th>Start</th><th>End</th><th>Cost</th><th>Priority</th><th>Status</th></tr></thead>
        </table>
    </div>
</div>

<!-- Add Maintenance Modal -->
<div class="modal fade" id="addMaintenanceModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">Add Maintenance Record</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form method="POST" action="/facilities/<?= $facility['id'] ?>/maintenance" data-ajax="true" id="maintenance-form">
            <?= csrf_field() ?>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Type <span class="text-danger">*</span></label>
                    <select name="maintenance_type" class="form-select" required>
                        <option value="scheduled">Scheduled</option>
                        <option value="emergency">Emergency</option>
                        <option value="inspection">Inspection</option>
                        <option value="upgrade">Upgrade</option>
                        <option value="repair">Repair</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Priority <span class="text-danger">*</span></label>
                    <select name="priority" class="form-select" required>
                        <option value="low">Low</option>
                        <option value="medium" selected>Medium</option>
                        <option value="high">High</option>
                        <option value="critical">Critical</option>
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label">Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control" required>
                    <div class="invalid-feedback" data-field="title"></div>
                </div>
                <div class="col-12">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="3"></textarea>
                </div>
                <div class="col-md-4"><label class="form-label">Start Date <span class="text-danger">*</span></label><input type="date" name="start_date" class="form-control" required></div>
                <div class="col-md-4"><label class="form-label">End Date</label><input type="date" name="end_date" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Estimated Cost</label><input type="number" name="estimated_cost" class="form-control" step="0.01" min="0"></div>
                <div class="col-md-6"><label class="form-label">Assigned To</label><input type="text" name="assigned_to" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Vendor</label><input type="text" name="vendor" class="form-control"></div>
            </div>
            <div class="mt-3"><button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>Save</button></div>
        </form>
    </div>
</div></div></div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    DataTableHelper.init('maintenance-table', { order: [[3, 'desc']] });
    document.getElementById('maintenance-form').addEventListener('submit', function() {
        setTimeout(function() { DataTableHelper.reload('maintenance-table'); }, 1000);
    });
});
</script>
<?php $__view->endPush() ?>