@extends('layout.app')
@section('title', 'Manage Vehicle Service')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        /* ── Clean Page Variables ── */
        :root {
            --svc-accent: #2E7D6F;
            --svc-accent-light: #E8F5F1;
            --svc-accent-hover: #236357;
            --svc-border: #e2e8f0;
            --svc-bg-subtle: #f8fafb;
            --svc-text: #334155;
            --svc-text-muted: #64748b;
        }

        /* ── Section Titles (replaces blue headers) ── */
        .svc-section-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--svc-text);
            padding: 16px 20px 12px;
            border-bottom: 2px solid var(--svc-accent);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .svc-section-title i {
            color: var(--svc-accent);
            font-size: 18px;
        }

        /* ── Pending Panel Cards ── */
        .svc-card {
            border-left: 4px solid transparent;
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 8px;
        }
        .svc-ok { background: #EAF3DE; border-left-color: #639922; }
        .svc-warn { background: #FAEEDA; border-left-color: #BA7517; }
        .svc-over { background: #FCEBEB; border-left-color: #A32D2D; }

        .svc-card .svc-name { font-size: 13px; font-weight: 600; }
        .svc-card .svc-meta {
            font-size: 11px; color: #666;
            margin: 3px 0 5px;
            display: flex; gap: 12px; flex-wrap: wrap;
        }
        .svc-card .svc-foot {
            display: flex; justify-content: space-between;
            align-items: center; margin-top: 4px;
        }
        .svc-card .svc-left { font-size: 11px; font-weight: 600; }
        .ok-left { color: #3B6D11; }
        .warn-left { color: #BA7517; }
        .over-left { color: #A32D2D; }

        /* ── KM progress bar ── */
        .km-bar-wrap {
            height: 5px; background: #e0e0e0;
            border-radius: 3px; overflow: hidden; margin-top: 4px;
        }
        .km-bar { height: 5px; border-radius: 3px; }
        .bar-ok { background: #639922; }
        .bar-warn { background: #BA7517; }
        .bar-over { background: #A32D2D; width: 100% !important; }

        /* ── Status badge ── */
        .status-badge {
            font-size: 10px; font-weight: 600;
            padding: 2px 8px; border-radius: 20px;
        }
        .badge-ok { background: #C0DD97; color: #27500A; }
        .badge-warn { background: #FAC775; color: #633806; }
        .badge-over { background: #F7C1C1; color: #791F1F; }

        /* ── Panel header dynamic color ── */
        .panel-hdr-ok { background: #EAF3DE !important; color: #27500A !important; }
        .panel-hdr-warn { background: #FAEEDA !important; color: #633806 !important; }
        .panel-hdr-over { background: #FCEBEB !important; color: #791F1F !important; }

        /* ── Disabled row ── */
        tr.svc-row input:disabled {
            background: #f5f5f5; color: #aaa; cursor: not-allowed;
        }
        tr.svc-row.row-active {
            background: var(--svc-accent-light);
        }

        .btn-quick {
            font-size: 11px; padding: 2px 10px;
            background: var(--svc-accent); color: #fff;
            border: none; border-radius: 5px;
            cursor: pointer; white-space: nowrap;
        }
        .btn-quick:hover { background: var(--svc-accent-hover); }

        .val-box {
            background: #FCEBEB; border: 1px solid #F7C1C1;
            color: #791F1F; border-radius: 6px;
            padding: 10px 14px; font-size: 13px;
            margin-bottom: 14px; display: none;
        }
        .val-box ul { margin: 6px 0 0 18px; }

        .no-svc-warn {
            background: #FAEEDA; border: 1px solid #FAC775;
            color: #633806; border-radius: 6px;
            padding: 8px 12px; font-size: 12px;
            margin-top: 8px; display: none;
        }

        .hist-chip {
            display: inline-block; background: #f0f0f0;
            border-radius: 20px; padding: 1px 8px;
            font-size: 11px; margin: 1px;
        }

        #pending-status-panel .spinner-border {
            width: 1.4rem; height: 1.4rem;
        }

        /* ── Clean card styling ── */
        .svc-clean-card {
            background: #fff;
            border: 1px solid var(--svc-border);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .svc-clean-card .card-body {
            padding: 20px;
        }

        /* ── Form fields ── */
        .svc-form-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--svc-text);
            margin-bottom: 6px;
        }

        /* ── Service table styling ── */
        #services-table thead th {
            background: var(--svc-bg-subtle);
            color: var(--svc-text);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            border-bottom: 2px solid var(--svc-border);
        }
        #services-table tfoot tr {
            background: var(--svc-accent-light) !important;
        }
        #services-table tfoot th {
            border-top: 2px solid var(--svc-accent);
        }

        /* ── Primary button override ── */
        .svc-btn-primary {
            background: var(--svc-accent);
            border: none;
            color: #fff;
            padding: 8px 20px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 14px;
            transition: background 0.2s;
        }
        .svc-btn-primary:hover {
            background: var(--svc-accent-hover);
            color: #fff;
        }

        /* ── Pending panel ── */
        .pending-panel-card {
            border: 1px solid var(--svc-border);
            border-radius: 10px;
            overflow: hidden;
        }
        .pending-panel-header {
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 600;
            background: var(--svc-bg-subtle);
            color: var(--svc-text);
            border-bottom: 1px solid var(--svc-border);
        }
    </style>
@endpush

@section('content')

    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('vehicle-services.index') }}">Vehicles</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                Vehicle No: {{ $selectedVehicle?->vehicle_no ?? 'Select Vehicle' }}
            </li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row gx-3">

            <div class="col-12">
                <div class="val-box" id="val-alert">
                    <strong>Please fix the following errors before saving:</strong>
                    <ul id="val-list"></ul>
                </div>
            </div>

            <div class="col-md-12">
                <div class="svc-clean-card mb-3">
                    <div class="svc-section-title">
                        <i class="ri-add-circle-line"></i> Add New Service Entry
                    </div>
                    <div class="card-body">

                        @if ($errors->any())
                            <div class="alert alert-danger py-2">
                                <ul class="mb-0 ps-3">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form id="service-form" action="{{ route('vehicle-services.store') }}" method="POST" novalidate>
                            @csrf
                            @if(request('redirect_to'))
                            <input type="hidden" name="redirect_to" value="{{ request('redirect_to') }}">
                            @endif
                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="svc-form-label">
                                        Truck <span class="text-danger">*</span>
                                    </label>
                                    <select id="vehicle_id" name="{{ $vehicleId ? '' : 'vehicle_id' }}"
                                        class="form-control select2 @error('vehicle_id') is-invalid @enderror" {{ $vehicleId ? 'disabled' : '' }}>
                                        <option value="">-- Select Truck --</option>
                                        @foreach ($vehicles as $id => $no)
                                            <option value="{{ $id }}"
                                                {{ old('vehicle_id', $vehicleId) == $id ? 'selected' : '' }}>
                                                {{ $no }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @if($vehicleId)
                                    <input type="hidden" name="vehicle_id" value="{{ old('vehicle_id', $vehicleId) }}">
                                    @endif
                                    <div class="invalid-feedback" id="err-vehicle">
                                        @error('vehicle_id')
                                            {{ $message }}
                                        @else
                                            Please select a truck.
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="svc-form-label">
                                        Service Date <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="ri-calendar-todo-line"></i>
                                        </span>
                                        <input type="text" name="service_date" id="service_date"
                                            class="form-control datepicker @error('service_date') is-invalid @enderror"
                                            value="{{ old('service_date', date('Y-m-d')) }}" required>
                                    </div>
                                    <div class="invalid-feedback" id="err-date">
                                        @error('service_date')
                                            {{ $message }}
                                        @else
                                            Service date is required.
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="svc-form-label">
                                        Odometer Reading (KM) <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" name="service_km" id="service_km"
                                        class="form-control @error('service_km') is-invalid @enderror"
                                        placeholder="e.g. 22555"
                                        value="{{ old('service_km', $selectedVehicle?->current_km ?? '') }}" min="0"
                                        required>
                                    <div class="invalid-feedback" id="err-km">
                                        @error('service_km')
                                            {{ $message }}
                                        @else
                                            Enter a valid KM reading.
                                        @enderror
                                    </div>
                                </div>

                            </div>
                            <div class="row g-3">

                                <div class="col-md-8">
                                    <h6 class="fw-semibold mb-2" style="color: var(--svc-text);">Select Services Performed</h6>

                                    <div class="no-svc-warn" id="no-svc-warn">
                                        ⚠ Please select at least one service before saving.
                                    </div>

                                    <div class="table-responsive">
                                        <table class="table table-sm table-bordered align-middle" id="services-table">
                                            <thead>
                                                <tr>
                                                    <th style="width:38px" class="text-center">Pick</th>
                                                    <th>Service Name</th>
                                                    <th style="width:140px">Amount (₹)</th>
                                                    <th>Remarks</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($serviceTypes as $stId => $stName)
                                                    <tr class="svc-row" data-svc-id="{{ $stId }}">
                                                        <td class="text-center">
                                                            <input type="checkbox"
                                                                name="services[{{ $stId }}][selected]"
                                                                value="1" class="form-check-input svc-check"
                                                                {{ collect(old('services'))->has($stId) ? 'checked' : '' }}>
                                                            <input type="hidden"
                                                                name="services[{{ $stId }}][service_type_id]"
                                                                value="{{ $stId }}">
                                                        </td>
                                                        <td>{{ $stName }}</td>
                                                        <td>
                                                            <input type="number"
                                                                name="services[{{ $stId }}][amount]"
                                                                class="form-control form-control-sm text-end svc-amount"
                                                                placeholder="0.00" min="0" step="0.01"
                                                                value="{{ old('services.' . $stId . '.amount', '') }}"
                                                                {{ collect(old('services'))->has($stId) ? '' : 'disabled' }}>
                                                        </td>
                                                        <td>
                                                            <input type="text"
                                                                name="services[{{ $stId }}][remarks]"
                                                                class="form-control form-control-sm svc-remark"
                                                                placeholder="e.g. Changed"
                                                                value="{{ old('services.' . $stId . '.remarks', '') }}"
                                                                {{ collect(old('services'))->has($stId) ? '' : 'disabled' }}>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2" class="text-end">Total Amount (₹):</th>
                                                    <th>
                                                        <input type="number" name="total_amount" id="total_amount"
                                                            class="form-control form-control-sm text-end fw-bold"
                                                            value="0.00" readonly>
                                                    </th>
                                                    <th></th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>

                                    <div class="mt-3">
                                        <label class="svc-form-label">General Remarks</label>
                                        <textarea name="remarks" class="form-control" rows="2"
                                            placeholder="Optional notes about this service visit...">{{ old('remarks') }}</textarea>
                                    </div>

                                    <div class="mt-3 d-flex gap-2">
                                        <button type="button" class="btn svc-btn-primary" id="btn-save">
                                            <i class="ri-save-line"></i> Save Service Record
                                        </button>
                                        @if(request('redirect_to') == 'performance' && request('vehicle_id'))
                                        <a href="{{ route('vehicle-performance.show', request('vehicle_id')) }}" class="btn btn-outline-secondary">
                                            Cancel
                                        </a>
                                        @else
                                        <a href="{{ route('vehicle-services.index') }}" class="btn btn-outline-secondary">
                                            Back to List
                                        </a>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="pending-panel-card h-100">
                                        <div class="pending-panel-header" id="panel-header">
                                            Pending Servicing Status
                                        </div>
                                        <div class="p-2" id="pending-status-panel">
                                            <div class="text-center py-4 text-muted small">
                                                Select a vehicle to see pending services.
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 mt-2">
                <div class="svc-clean-card">
                    <div class="svc-section-title">
                        <i class="ri-history-line"></i> Past Service History
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="history-datatable" class="table truncate m-0 align-middle">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Date</th>
                                        <th>Service KM</th>
                                        <th>Services Done</th>
                                        <th class="text-end">Amount (₹)</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Service Batch Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="detail-content">
                    <div class="text-center py-3">
                        <div class="spinner-border text-primary"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        // datepicker
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            autoApply: true,
            startDate: moment(),
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $(document).ready(function() {
            var historyTable = $('#history-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('vehicle-services.getData') }}',
                    data: function(d) {
                        d.vehicle_id = $('#vehicle_id').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'id',
                        searchable: false
                    },
                    {
                        data: 'service_date',
                        name: 'service_date'
                    },
                    {
                        data: 'service_km',
                        name: 'service_km'
                    },
                    {
                        data: 'services',
                        name: 'services',
                        orderable: false
                    },
                    {
                        data: 'total_amount',
                        name: 'total_amount',
                        className: 'text-end'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    }
                ]
            });


            $('.svc-check:checked').each(function() {
                $(this).closest('tr').addClass('row-active');
            });

            $(document).on('change', '.svc-check', function() {
                var $row = $(this).closest('tr');
                var checked = $(this).is(':checked');

                $row.find('.svc-amount, .svc-remark').prop('disabled', !checked);
                $row.toggleClass('row-active', checked);

                if (!checked) {
                    $row.find('.svc-amount').val('');
                }

                calcTotal();
                $('#no-svc-warn').hide();
            });


            $(document).on('input', '.svc-amount', calcTotal);

            function calcTotal() {
                var total = 0;
                $('.svc-amount:not(:disabled)').each(function() {
                    total += parseFloat($(this).val()) || 0;
                });
                $('#total_amount').val(total.toFixed(2));
            }

            // ─────────────────────────────────────────
            // 5. PENDING STATUS PANEL — AJAX REFRESH
            // ─────────────────────────────────────────
            function refreshPending() {
                var vehicleId = $('#vehicle_id').val();
                var currentKm = $('#service_km').val();

                if (!vehicleId) {
                    $('#pending-status-panel').html(
                        '<div class="text-center py-4 text-muted small">Select a vehicle to see pending services.</div>'
                    );
                    $('#panel-header').removeClass('panel-hdr-ok panel-hdr-warn panel-hdr-over').text(
                        'Pending Servicing Status');
                    return;
                }

                $('#pending-status-panel').html(
                    '<div class="text-center py-4"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
                );

                $.ajax({
                    url: '{{ url('vehicle-services/pending') }}/' + vehicleId,
                    method: 'GET',
                    data: {
                        current_km: currentKm
                    },
                    success: function(html) {
                        $('#pending-status-panel').html(html);

                        // Update panel header color based on worst status
                        var hasOver = $('#pending-status-panel .svc-over').length > 0;
                        var hasWarn = $('#pending-status-panel .svc-warn').length > 0;

                        $('#panel-header')
                            .removeClass('panel-hdr-ok panel-hdr-warn panel-hdr-over');

                        if (hasOver) {
                            var cnt = $('#pending-status-panel .svc-over').length;
                            $('#panel-header').addClass('panel-hdr-over').text('Pending Status — ' +
                                cnt + ' Overdue');
                        } else if (hasWarn) {
                            var cnt = $('#pending-status-panel .svc-warn').length;
                            $('#panel-header').addClass('panel-hdr-warn').text('Pending Status — ' +
                                cnt + ' Warning');
                        } else {
                            $('#panel-header').addClass('panel-hdr-ok').text('Pending Status — ');
                        }
                    },
                    error: function() {
                        $('#pending-status-panel').html(
                            '<div class="text-danger small p-2">Failed to load pending services.</div>'
                        );
                    }
                });
            }
            $('#vehicle_id').on('change', function() {
                if ($(this).val()) {
                    window.location.href = '{{ route('vehicle-services.create') }}?vehicle_id=' + $(this)
                        .val();
                }
            });

            $('#service_km').on('input change', debounce(refreshPending, 600));

            refreshPending();

            window.quickPickService = function(serviceTypeId) {
                var $cb = $('.svc-check[data-svc-id="' + serviceTypeId + '"]');

                if (!$cb.length) {
                    $cb = $('tr.svc-row[data-svc-id="' + serviceTypeId + '"] .svc-check');
                }
                if ($cb.length && !$cb.is(':checked')) {
                    $cb.prop('checked', true).trigger('change');
                }

                $('html, body').animate({
                    scrollTop: $('#services-table').offset().top - 80
                }, 400);
            };


            $('#btn-save').on('click', function() {
                var errors = [];
                var isValid = true;

                $('#val-alert').hide();
                $('#val-list').html('');
                $('#no-svc-warn').hide();
                $('#vehicle_id, #service_date, #service_km').removeClass('is-invalid');
                $('#err-vehicle, #err-date, #err-km').hide();

                // Truck
                if (!$('#vehicle_id').val()) {
                    $('#vehicle_id').addClass('is-invalid');
                    $('#err-vehicle').show();
                    errors.push('Please select a truck.');
                    isValid = false;
                }


                if (!$('#service_date').val()) {
                    $('#service_date').addClass('is-invalid');
                    $('#err-date').show();
                    errors.push('Service date is required.');
                    isValid = false;
                }

                var km = parseFloat($('#service_km').val());
                if (!$('#service_km').val() || isNaN(km) || km < 0) {
                    $('#service_km').addClass('is-invalid');
                    $('#err-km').show();
                    errors.push('Enter a valid odometer reading (KM ≥ 0).');
                    isValid = false;
                }

                // At least one service selected
                var anySelected = $('.svc-check:checked').length > 0;
                if (!anySelected) {
                    $('#no-svc-warn').show();
                    errors.push('At least one service must be selected.');
                    isValid = false;
                }

                // Amount validation for checked rows
                $('.svc-check:checked').each(function() {
                    var $row = $(this).closest('tr');
                    var name = $row.find('td:nth-child(2)').text().trim();
                    var amount = parseFloat($row.find('.svc-amount').val());
                    if (isNaN(amount) || amount < 0) {
                        $row.find('.svc-amount').addClass('is-invalid');
                        errors.push(name + ': Amount must be 0 or more.');
                        isValid = false;
                    } else {
                        $row.find('.svc-amount').removeClass('is-invalid');
                    }
                });

                if (!isValid) {
                    // Show summary box
                    $.each(errors, function(i, msg) {
                        $('#val-list').append('<li>' + msg + '</li>');
                    });
                    $('#val-alert').show();
                    $('html, body').animate({
                        scrollTop: 0
                    }, 400);
                    return false;
                }

                // All good — submit
                $('#service-form').submit();
            });


            function debounce(fn, delay) {
                var t;
                return function() {
                    clearTimeout(t);
                    t = setTimeout(fn, delay);
                };
            }

        });


        function deleteBatch(id) {
            swal({
                title: 'Confirm Delete?',
                text: 'Removing this record will affect service intervals.',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#DD6B55',
                confirmButtonText: 'Yes, delete it!'
            }, function() {
                $.ajax({
                    url: '{{ url('vehicle-services') }}/' + id,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function() {
                        location.reload();
                    },
                    error: function() {
                        swal('Error', 'Could not delete record.', 'error');
                    }
                });
            });
        }


        function viewDetails(id) {
            $('#detail-content').html(
                '<div class="text-center py-3"><div class="spinner-border text-primary"></div></div>');
            $('#detailModal').modal('show');

            $.get('{{ url('vehicle-services') }}/' + id, function(data) {
                var html = '';
                html += '<div class="row mb-2"><div class="col-6"><strong>Date:</strong> ' + data.service_date +
                    '</div>';
                html += '<div class="col-6"><strong>KM Reading:</strong> ' + Number(data.service_km)
                    .toLocaleString() + ' KM</div></div>';
                if (data.remarks) {
                    html += '<div class="mb-2"><strong>Remarks:</strong> ' + data.remarks + '</div>';
                }
                html += '<hr><h6 class="mb-2">Services Performed:</h6>';
                html +=
                    '<table class="table table-sm table-bordered"><thead><tr><th>Service</th><th class="text-end">Amount (₹)</th><th>Remarks</th></tr></thead><tbody>';
                $.each(data.items, function(i, item) {
                    html += '<tr>';
                    html += '<td>' + item.service_type.name + '</td>';
                    html += '<td class="text-end">' + (item.amount ? parseFloat(item.amount).toFixed(2) :
                        '—') + '</td>';
                    html += '<td>' + (item.remarks || '—') + '</td>';
                    html += '</tr>';
                });
                html += '</tbody></table>';
                if (data.total_amount) {
                    html += '<div class="text-end fw-bold">Total: ₹' + parseFloat(data.total_amount).toFixed(2) +
                        '</div>';
                }
                $('#detail-content').html(html);
            }).fail(function() {
                $('#detail-content').html(
                    '<div class="text-danger">Could not load details. Please try again.</div>');
            });
        }
    </script>
@endpush