@extends('admin.layout.index')

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

@section('content')
<div class="row g-3 align-items-center mb-3">
    <div class="col">
        <h4 class="mb-0">ACCIDENT ID: {{ request()->id ?? 'ACC-XXXX' }}</h4>
        <p class="text-muted mb-0">Detailed telemetry and incident context.</p>
    </div>
    <div class="col-auto">
        <a href="{{ route('admin.accident-logs.index') }}" class="btn btn-light"><i class="ri-arrow-left-line me-1"></i> Back to Accident Logs</a>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-4">
                <p class="text-muted mb-1">Timestamp</p>
                <h6 class="mb-0">2024-06-12 14:22:05</h6>
            </div>
            <div class="col-md-4">
                <p class="text-muted mb-1">Region</p>
                <h6 class="mb-0">San Francisco, CA</h6>
            </div>
            <div class="col-md-4">
                <p class="text-muted mb-1">Transport Mode</p>
                <h6 class="mb-0">Car</h6>
            </div>
            <div class="col-md-4">
                <p class="text-muted mb-1">Auto-Call Status</p>
                <h6 class="mb-0 text-success">Activated</h6>
            </div>
            <div class="col-md-4">
                <p class="text-muted mb-1">Emergency Provider</p>
                <h6 class="mb-0">911 Dispatch</h6>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Speed Timeline</h6>
            </div>
            <div class="card-body">
                <div id="speedChart"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Acceleration Timeline</h6>
            </div>
            <div class="card-body">
                <div id="accelerationChart"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">G-Force Timeline</h6>
            </div>
            <div class="card-body">
                <div id="gforceChart"></div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Telemetry Data Timeline</h5>
        <p class="text-muted small mb-0">5 seconds before and 20 seconds after the incident.</p>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Timestamp</th>
                        <th>Speed (km/h)</th>
                        <th>Acceleration (m/s²)</th>
                        <th>G-Force</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>-5s</td>
                        <td>45.2</td>
                        <td>0.3</td>
                        <td>0.9</td>
                        <td>Normal</td>
                    </tr>
                    <tr>
                        <td>-3s</td>
                        <td>48.1</td>
                        <td>0.4</td>
                        <td>1.0</td>
                        <td>Normal</td>
                    </tr>
                    <tr>
                        <td>-1s</td>
                        <td>46.2</td>
                        <td>0.5</td>
                        <td>1.2</td>
                        <td>Braking</td>
                    </tr>
                    <tr>
                        <td>0s</td>
                        <td>28.5</td>
                        <td>1.4</td>
                        <td>2.1</td>
                        <td><span class="badge bg-danger">Impact detected</span></td>
                    </tr>
                    <tr>
                        <td>+5s</td>
                        <td>15.2</td>
                        <td>0.8</td>
                        <td>1.4</td>
                        <td>Decelerating</td>
                    </tr>
                    <tr>
                        <td>+20s</td>
                        <td>0</td>
                        <td>0.1</td>
                        <td>0.8</td>
                        <td>Stationary</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('custom-script')
<script>
    const timeCategories = ['-5s', '-4s', '-3s', '-2s', '-1s', '0s', '+1s', '+2s', '+3s', '+5s', '+10s', '+15s', '+20s'];

    function buildLineChart(el, name, data, color) {
        var options = {
            chart: { type: 'line', height: 200, toolbar: { show: false }, zoom: { enabled: false } },
            colors: [color],
            dataLabels: { enabled: false },
            stroke: { curve: 'smooth', width: 2 },
            series: [{ name: name, data: data }],
            xaxis: { categories: timeCategories },
            annotations: {
                xaxis: [{
                    x: '0s',
                    borderColor: '#f06548',
                    label: { borderColor: '#f06548', style: { color: '#fff', background: '#f06548' }, text: 'ACCIDENT' }
                }]
            },
            grid: { strokeDashArray: 4 }
        };
        new ApexCharts(document.querySelector(el), options).render();
    }

    buildLineChart("#speedChart", "Speed", [45.2, 46.8, 48.1, 47.5, 46.2, 28.5, 15.2, 12.0, 8.5, 5.0, 2.0, 0.5, 0], '#405189');
    buildLineChart("#accelerationChart", "Acceleration", [0.3, 0.35, 0.4, 0.5, 0.6, 1.4, 0.8, 0.6, 0.5, 0.3, 0.2, 0.15, 0.1], '#0ab39c');
    buildLineChart("#gforceChart", "G-Force", [0.9, 0.95, 1.0, 1.1, 1.2, 2.1, 1.4, 1.2, 1.0, 0.9, 0.85, 0.82, 0.8], '#f7b84b');
</script>
@endpush