@include('admin.include.header')
@include('admin.include.sidebar')

<style>
    textarea#email-body {
        height: 340px;
    }

    .card.card-custom {
        -webkit-box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.15);
        box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.15);
    }

    .svg-icon {
        color: black;
    }

    .kpi-card {
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        border: none;
        background: #fff;
    }

    .kpi-card.kpi-light-primary { background: #64b5f6; }
    .kpi-card.kpi-light-success { background: #81c784; }
    .kpi-card.kpi-light-warning { background: #ffb74d; }
    .kpi-card.kpi-light-danger { background: #e57373; }
    .kpi-card.kpi-light-info { background: #4fc3f7; }

    .kpi-card.kpi-light-primary .kpi-label { color: rgba(0, 0, 0, 0.75); }
    .kpi-card.kpi-light-success .kpi-label { color: rgba(0, 0, 0, 0.75); }
    .kpi-card.kpi-light-warning .kpi-label { color: rgba(0, 0, 0, 0.75); }
    .kpi-card.kpi-light-danger .kpi-label { color: rgba(0, 0, 0, 0.75); }
    .kpi-card.kpi-light-info .kpi-label { color: rgba(0, 0, 0, 0.75); }
    .kpi-card.kpi-light-primary .kpi-value { color: #0d47a1; }
    .kpi-card.kpi-light-success .kpi-value { color: #1b5e20; }
    .kpi-card.kpi-light-warning .kpi-value { color: #e65100; }
    .kpi-card.kpi-light-danger .kpi-value { color: #b71c1c; }
    .kpi-card.kpi-light-info .kpi-value { color: #01579b; }

    .kpi-label {
        font-size: 0.85rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    .kpi-value {
        font-size: 1.5rem;
        font-weight: 700;
    }

    #inspection_list_table thead th {
        color: #000000 !important;
    }
</style>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div>
        <div class="px-5">
            <div class="card card-custom">
                <div class="card-body flex-wrap border-0 pt-6 pb-0 ">
                    <h3>Dashboard</h3>
                </div>
                <div class="card p-5" style="overflow: auto;">
                    <div class="row">

                        <div class="col-xl-4">
                            <div class="card card-custom gutter-b" style="height: 150px">
                                <div class="card-body">
                                    <span class="svg-icon svg-icon-dark svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <rect x="3" y="11" width="18" height="6" rx="2"></rect>
                                            <path d="M5 11V7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4"></path>
                                            <circle cx="7.5" cy="17.5" r="2.5"></circle>
                                            <circle cx="16.5" cy="17.5" r="2.5"></circle>
                                        </svg></span>
                                    <div class="text-dark font-weight-bolder font-size-h2 mt-3">{{ $counts['vehicles'] ?? 0 }}</div>
                                    <a href="{{ url('vehicles') }}" class="text-muted text-hover-dark font-weight-bold font-size-lg mt-1">Vehicles</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="card card-custom gutter-b" style="height: 150px">
                                <div class="card-body">
                                    <span class="svg-icon svg-icon-dark svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                                <path d="M12 2L4 5v6c0 5 4 9 8 9s8-4 8-9V5l-8-3z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                <path d="M10 14l-3-3 1.414-1.414L10 11.172l5.586-5.586L17 7l-7 7z" fill="#000000" fill-rule="nonzero"></path>
                                            </g>
                                        </svg></span>
                                    <div class="text-dark font-weight-bolder font-size-h2 mt-3">{{ $counts['compliance'] ?? 0 }}</div>
                                    <a href="{{ route('compliance.index') }}" class="text-muted text-hover-dark font-weight-bold font-size-lg mt-1">Compliance Tracking</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="card card-custom gutter-b" style="height: 150px">
                                <div class="card-body">
                                    <span class="svg-icon svg-icon-dark svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                                <path d="M14.828 9.172a4 4 0 1 1-5.656 5.656L4 20l-2-2 6.172-6.172a4 4 0 0 1 7.656-2.656z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                <path d="M12 2C11.4477 2 11 2.44772 11 3V5H13V3C13 2.44772 12.5523 2 12 2ZM12 22C12.5523 22 13 21.5523 13 21V19H11V21C11 21.5523 11.4477 22 12 22ZM16 12C16 10.3431 14.6569 9 13 9H11C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15H13C14.6569 15 16 13.6569 16 12Z" fill="#000000" fill-rule="nonzero"></path>
                                            </g>
                                        </svg></span>
                                    <div class="text-dark font-weight-bolder font-size-h2 mt-3">{{ number_format($counts['maintenance_total'] ?? 0) }}</div>
                                    <a href="{{ url('maintenance') }}" class="text-muted text-hover-dark font-weight-bold font-size-lg mt-1">Maintenance & Costing</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="my-4">
                    <h4 class="mb-3">Inspection KPIs</h4>
                    <div class="row mb-4">
                        <div class="col-md-4 col-12 mb-3">
                            <div class="kpi-card kpi-light-primary">
                                <div class="kpi-label">Total Fleet Units (Trucks / Trailers)</div>
                                <div class="kpi-value" id="kpi_fleet">0 / 0</div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6 mb-3">
                            <div class="kpi-card kpi-light-success">
                                <div class="kpi-label">Completed Inspections This Month</div>
                                <div class="kpi-value" id="kpi_completed">0</div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6 mb-3">
                            <div class="kpi-card kpi-light-warning">
                                <div class="kpi-label">Due Soon</div>
                                <div class="kpi-value" id="kpi_due_soon">0</div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-4 col-6 mb-3">
                            <div class="kpi-card kpi-light-danger">
                                <div class="kpi-label">Overdue</div>
                                <div class="kpi-value" id="kpi_overdue">0</div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6 mb-3">
                            <div class="kpi-card kpi-light-info">
                                <div class="kpi-label">Fix Required (from latest inspections)</div>
                                <div class="kpi-value" id="kpi_fix">0</div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6 mb-3">
                            <div class="kpi-card kpi-light-danger">
                                <div class="kpi-label">Fail Count (critical issues)</div>
                                <div class="kpi-value" id="kpi_fail">0</div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <h4 class="mb-3">Global Inspection List</h4>
                    <div class="card mb-4">
                        <div class="card-body">
                            <form id="inspectionFilters" class="form-inline flex-wrap align-items-end mb-3">
                                <div class="form-group mr-2 mb-2">
                                    <label class="mr-1">Date range</label>
                                    <select name="date_preset" class="form-control form-control-sm">
                                        <option value="all">All</option>
                                        <option value="this_month">This month</option>
                                        <option value="last_month">Last month</option>
                                        <option value="custom">Custom</option>
                                    </select>
                                </div>
                                <div class="form-group mr-2 mb-2 d-none" id="customDateWrap">
                                    <input type="date" name="date_from" class="form-control form-control-sm" placeholder="From">
                                    <input type="date" name="date_to" class="form-control form-control-sm ml-1" placeholder="To">
                                </div>
                                <div class="form-group mr-2 mb-2">
                                    <label class="mr-1">Asset type</label>
                                    <select name="asset_type" class="form-control form-control-sm">
                                        <option value="">All</option>
                                        <option value="truck">Truck</option>
                                        <option value="trailer">Trailer</option>
                                    </select>
                                </div>
                                <div class="form-group mr-2 mb-2">
                                    <label class="mr-1">Vehicle</label>
                                    <select name="vehicle_id" class="form-control form-control-sm">
                                        <option value="">All</option>
                                        @foreach($vehicles ?? [] as $v)
                                            <option value="{{ $v->id }}">{{ $v->unit_number }} ({{ $v->vin }})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mr-2 mb-2">
                                    <label class="mr-1">Mechanic</label>
                                    <select name="mechanic_id" class="form-control form-control-sm">
                                        <option value="">All</option>
                                        @foreach($mechanics ?? [] as $m)
                                            <option value="{{ $m->id }}">{{ $m->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mr-2 mb-2">
                                    <label class="mr-1">Status</label>
                                    <select name="status" class="form-control form-control-sm">
                                        <option value="">All</option>
                                        <option value="pass">Pass</option>
                                        <option value="fix">Fix</option>
                                        <option value="fail">Fail</option>
                                    </select>
                                </div>
                                <div class="form-group mr-2 mb-2">
                                    <label class="mr-1">Due status</label>
                                    <select name="due_status" class="form-control form-control-sm">
                                        <option value="">All</option>
                                        <option value="on_time">On-time</option>
                                        <option value="overdue">Overdue</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-sm btn-primary mb-2">Apply</button>
                                <button type="button" id="resetInspectionFilters" class="btn btn-sm btn-secondary mb-2 ml-1">Reset</button>
                            </form>
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm" id="inspection_list_table" style="width:100%"></table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@include('admin.include.footer')
<style>
    .icon-btn {
        background: transparent;
        border: none;
        padding: 0;
        margin-right: 6px;
        cursor: pointer;
    }
    .icon-btn i {
        color: #000000;
        font-size: 15px;
    }
    .icon-btn i.fa-trash {
        color: #dc3545;
    }
    .icon-btn:hover {
        background: transparent;
        opacity: 0.8;
    }
</style>
<script>
    $('.sidebar_dashboard_tab').addClass("menu-item-active")

    function loadInspectionKpis() {
        $.get("{{ route('inspection.kpis') }}")
            .done(function(data) {
                var trucks = data.total_trucks ?? 0;
                var trailers = data.total_trailers ?? 0;
                $('#kpi_fleet').text(trucks + ' / ' + trailers);
                $('#kpi_completed').text(data.completed_this_month ?? 0);
                $('#kpi_due_soon').text(data.due_soon ?? 0);
                $('#kpi_overdue').text(data.overdue ?? 0);
                $('#kpi_fix').text(data.fix_required ?? 0);
                $('#kpi_fail').text(data.fail_count ?? 0);
            })
            .fail(function() {
                $('#kpi_fleet').text('0 / 0');
                $('#kpi_completed, #kpi_due_soon, #kpi_overdue, #kpi_fix, #kpi_fail').text('0');
                console.error('Failed to load inspection KPIs');
            });
    }

    function inspectionListUrl() {
        var form = document.getElementById('inspectionFilters');
        if (!form) return "{{ route('inspection.list.data') }}";
        var params = new URLSearchParams();
        if (form.date_preset && form.date_preset.value) params.set('date_preset', form.date_preset.value);
        if (form.date_from && form.date_from.value) params.set('date_from', form.date_from.value);
        if (form.date_to && form.date_to.value) params.set('date_to', form.date_to.value);
        if (form.asset_type && form.asset_type.value) params.set('asset_type', form.asset_type.value);
        if (form.vehicle_id && form.vehicle_id.value) params.set('vehicle_id', form.vehicle_id.value);
        if (form.mechanic_id && form.mechanic_id.value) params.set('mechanic_id', form.mechanic_id.value);
        if (form.status && form.status.value) params.set('status', form.status.value);
        if (form.due_status && form.due_status.value) params.set('due_status', form.due_status.value);
        var base = "{{ route('inspection.list.data') }}";
        return params.toString() ? base + '?' + params.toString() : base;
    }

    var inspectionListTable = null;

    function loadInspectionListTable() {
        var url = inspectionListUrl();
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                var data = (res && res.data && Array.isArray(res.data)) ? res.data : [];
                if (inspectionListTable) {
                    inspectionListTable.clear();
                    inspectionListTable.rows.add(data).draw();
                } else {
                    initInspectionListTable(data);
                }
            },
            error: function(xhr) {
                if (inspectionListTable) {
                    inspectionListTable.clear().draw();
                } else {
                    initInspectionListTable([]);
                }
                console.warn('Inspection list load failed:', xhr.status, xhr.responseText ? xhr.responseText.substring(0, 200) : '');
            }
        });
    }

    function initInspectionListTable(data) {
        if (inspectionListTable) return;
        inspectionListTable = $('#inspection_list_table').DataTable({
            data: data,
            order: [[2, 'desc']],
            columns: [
                { data: 'vehicle_number', title: 'Unit Number' },
                { data: 'vin', title: 'VIN' },
                { data: 'inspection_date', title: 'Inspection date/time' },
                {
                    data: 'mechanic_name',
                    title: 'Mechanic',
                    render: function(val) {
                        if (!val || val === '—') {
                            return '<span class="text-muted">—</span>';
                        }
                        return '<span style="display:inline-block;padding:2px 8px;border-radius:4px;background:#e8e8e8;color:#000000;font-weight:600;">'
                                + val +
                               '</span>';
                    }
                },
                {
                    data: 'pass_count',
                    title: 'Pass',
                    render: function(val) {
                        var n = parseInt(val);
                        return isNaN(n) || n <= 0 ? '0' : String(n);
                    }
                },
                {
                    data: 'fix_count',
                    title: 'Fix',
                    render: function(val) {
                        var n = parseInt(val);
                        return isNaN(n) || n <= 0 ? '0' : String(n);
                    }
                },
                {
                    data: 'fail_count',
                    title: 'Fail',
                    render: function(val) {
                        var n = parseInt(val);
                        return isNaN(n) || n <= 0 ? '0' : String(n);
                    }
                },
                {
                    data: null,
                    title: 'Actions',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var viewUrl = "{{ url('inspection') }}/" + row.id + "/view";
                        var pdfUrl = "{{ url('inspection') }}/" + row.id + "/export-pdf";
                        return '<a href="' + viewUrl + '" class="icon-btn" title="View"><i class="fa fa-eye"></i></a>' +
                               '<a href="' + pdfUrl + '" target="_blank" class="icon-btn" title="Export PDF"><i class="fa fa-file-pdf"></i></a>';
                    }
                }
            ]
        });
    }

    $(document).ready(function() {
        loadInspectionKpis();

        $('select[name="date_preset"]').on('change', function() {
            $('#customDateWrap').toggleClass('d-none', this.value !== 'custom');
        });

        $('#inspectionFilters').on('submit', function(e) {
            e.preventDefault();
            loadInspectionListTable();
        });

        $('#resetInspectionFilters').on('click', function() {
            var form = document.getElementById('inspectionFilters');
            if (form) form.reset();
            $('#customDateWrap').addClass('d-none');
            loadInspectionListTable();
        });

        if ($('#inspection_list_table').length) {
            loadInspectionListTable();
        }
    });
</script>