@extends('admin.layout.index')

@section('title', 'Accident Logs')

@push('head-scripts')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <style>
        /* DataTables horizontal scroll */
        .dataTables_scroll {
            position: relative;
            width: 100% !important;
        }

        .dataTables_scrollHead {
            border-bottom: 2px solid #dee2e6;
            overflow: hidden;
        }

        .dataTables_scrollBody {
            max-height: 600px;
            overflow-y: auto !important;
            overflow-x: auto !important;
        }

        .dataTables_scrollBody thead {
            display: none;
        }

        .dataTables_scrollBody .table {
            margin-top: 0 !important;
            border-top: none !important;
            width: 100% !important;
        }

        .dataTables_wrapper .dataTables_scroll {
            clear: both;
        }

        .dataTables_wrapper {
            width: 100% !important;
        }

        .dataTables_scrollHeadInner,
        .dataTables_scrollHeadInner table {
            width: 100% !important;
        }

        #accidentLogsTable {
            width: 100% !important;
            table-layout: auto;
        }

        #accidentLogsTable th,
        #accidentLogsTable td {
            white-space: nowrap;
        }

        @media (min-width: 992px) {
            .table-responsive {
                overflow-x: visible;
            }
            
            .dataTables_scrollBody {
                overflow-x: visible !important;
            }
            
            .dataTables_scroll {
                width: 100% !important;
            }
            
            .dataTables_scrollHeadInner {
                width: 100% !important;
            }
        }

        .dataTables_wrapper .dataTables_paginate {
            margin-top: 1rem;
        }

        .dataTables_wrapper .dataTables_info {
            margin-top: 1rem;
        }

        .dataTables_wrapper .dataTables_length {
            margin-bottom: 1rem;
        }
    </style>
@endpush

@section('content')
    <div class="row g-3 align-items-center mb-3">
        <div class="col">
            <h4 class="mb-0">Accident Event Listing</h4>
            <p class="text-muted mb-0">Timeline of accident events with telemetry summaries.</p>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle table-nowrap mb-0" id="accidentLogsTable">
                    <thead class="table-light">
                        <tr>
                            <th>ID</th>
                            <th>Timestamp</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script>
        $(document).ready(function() {
            $('#accidentLogsTable').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                scrollX: true,
                autoWidth: false,
                ajax: "{{ route('admin.accident-logs.data') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-end'
                    }
                ],
                responsive: true,
                lengthChange: false,
                pageLength: 10,
                order: [
                    [1, 'desc']
                ]
            });
        });
    </script>
@endpush