@extends('admin.layout.index')

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

@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 class="col-auto">
        <button class="btn btn-soft-secondary">Export CSV</button>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-lg-3 col-sm-6">
        <label class="form-label">Search</label>
        <input class="form-control" placeholder="Search by ID or region">
    </div>
    <div class="col-lg-3 col-sm-6">
        <label class="form-label">Date</label>
        <input type="date" class="form-control">
    </div>
    <div class="col-lg-3 col-sm-6">
        <label class="form-label">Transport Mode</label>
        <select class="form-select">
            <option>All</option>
            <option>Car</option>
            <option>Bike</option>
            <option>Pedestrian</option>
        </select>
    </div>
    <div class="col-lg-3 col-sm-6">
        <label class="form-label">Auto-call Activated</label>
        <select class="form-select">
            <option>All</option>
            <option>Yes</option>
            <option>No</option>
        </select>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table align-middle nowrap" id="accidentLogsTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Timestamp</th>
                        <th>Region</th>
                        <th>Transport Mode</th>
                        <th>Auto-call</th>
                        <th>Provider</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>ACC-20240612-01</td>
                        <td>2024-06-12 14:22:05</td>
                        <td>San Francisco, CA</td>
                        <td>Car</td>
                        <td><span class="badge bg-success">Yes</span></td>
                        <td>911 Dispatch</td>
                        <td class="text-end">
                            <a href="{{ route('admin.accident-logs.detail', ['id' => 'ACC-20240612-01']) }}" class="btn btn-soft-primary btn-sm"><i class="ri-eye-line"></i></a>
                        </td>
                    </tr>
                    <tr>
                        <td>ACC-20240610-07</td>
                        <td>2024-06-10 19:04:11</td>
                        <td>Seattle, WA</td>
                        <td>Bike</td>
                        <td><span class="badge bg-danger">No</span></td>
                        <td>-</td>
                        <td class="text-end">
                            <a href="{{ route('admin.accident-logs.detail', ['id' => 'ACC-20240610-07']) }}" class="btn btn-soft-primary btn-sm"><i class="ri-eye-line"></i></a>
                        </td>
                    </tr>
                    <tr>
                        <td>ACC-20240605-03</td>
                        <td>2024-06-05 08:40:52</td>
                        <td>Chicago, IL</td>
                        <td>Pedestrian</td>
                        <td><span class="badge bg-success">Yes</span></td>
                        <td>Local EMS</td>
                        <td class="text-end">
                            <a href="{{ route('admin.accident-logs.detail', ['id' => 'ACC-20240605-03']) }}" class="btn btn-soft-primary btn-sm"><i class="ri-eye-line"></i></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('custom-script')
<script>
    $(document).ready(function () {
        $('#accidentLogsTable').DataTable({
            responsive: true,
            lengthChange: false,
            pageLength: 5
        });
    });
</script>
@endpush