@extends('admin.layout.index')

@section('title', 'Accident Detail')
@push('head-scripts')
    <style>
        .accident-label {
            transform: rotate(-90deg);
            transform-origin: left top;
            white-space: nowrap;
            color: #FF0000;
            letter-spacing: 1px;
        }

        .user-accident-card {
            border-left: 4px solid #dc3545;
        }

        .user-accident-card .card-header {
            background-color: #f8f9fa;
        }
    </style>
@endpush
@section('content')
    <div class="row g-3 align-items-center mb-3">
        <div class="col">
            <h4 class="mb-0">ACCIDENT ID: {{ $id }}</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">{{ $accidentDetails['timestamp'] }}</h6>
                </div>
                <div class="col-md-4">
                    <p class="text-muted mb-1">Transport Mode</p>
                    <h6 class="mb-0">{{ $accidentDetails['vehicle'] }}</h6>
                </div>
                <div class="col-md-4">
                    <p class="text-muted mb-1">Speed at Impact</p>
                    <h6 class="mb-0">{{ number_format($accidentDetails['speed'], 2) }} km/h</h6>
                </div>
                <div class="col-md-4">
                    <p class="text-muted mb-1">Parties Involved</p>
                    <h6 class="mb-0">{{ count($relatedAccidents) + 1 }}</h6>
                </div>
                <div class="col-md-4">
                    <p class="text-muted mb-1">Accident Group</p>
                    <h6 class="mb-0">{{ $accident->accident_group }}</h6>
                </div>
                <div class="col-md-4">
                    <p class="text-muted mb-1"><i class="ri-map-pin-line"></i> Location</p>
                    <h6 class="mb-0">{{ $accidentDetails['address'] }}</h6>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Speed Timeline</h6>
                    <p class="text-muted small mb-0">Speed data from 5 seconds before to 25 seconds after the accident.</p>
                </div>
                <div class="card-body">
                    <div id="speedChart"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Related Accidents Table --}}
    {{-- @if (count($relatedAccidents) > 0)
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0">Related Accidents in Group</h5>
                <p class="text-muted small mb-0">Other vehicles involved in this accident group (within 10m radius).</p>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>User ID</th>
                                <th>Vehicle</th>
                                <th>Speed (km/h)</th>
                                <th>Timestamp</th>
                                <th>Location (Lat, Lng)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($relatedAccidents as $related)
                                <tr>
                                    <td>{{ $related->userId }}</td>
                                    <td>{{ $related->vehicle ?? 'Unknown' }}</td>
                                    <td>{{ number_format($related->speed ?? 0, 2) }}</td>
                                    <td>{{ date('Y-m-d H:i:s', strtotime($related->created_at)) }}</td>
                                    <td>{{ number_format($related->lat, 6) }}, {{ number_format($related->lng, 6) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif --}}

    {{-- Individual User Accident Details --}}
    @if (count($usersInAccident) > 0)
        <div class="mb-3">
            <h5 class="mb-3">Individual User Details</h5>
            <div class="row g-3">
                @foreach ($usersInAccident as $index => $user)
                    <div class="col-lg-6 col-md-6 col-12">
                        <div class="card user-accident-card">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="ri-user-line"></i> {{ $user->user_name ?? 'Unknown User' }}
                                    <span class="badge bg-danger ms-2">User #{{ $index + 1 }}</span>
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tbody>
                                            <tr>
                                                <td class="text-muted" style="width: 40%;">
                                                    <i class="ri-user-line"></i> User ID
                                                </td>
                                                <td><strong>{{ $user->userId }}</strong></td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <i class="ri-mail-line"></i> Email
                                                </td>
                                                <td>{{ $user->user_email ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <i class="ri-car-line"></i> Vehicle
                                                </td>
                                                <td>{{ $user->vehicle ?? 'Unknown' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <i class="ri-speed-line"></i> Speed
                                                </td>
                                                <td><span class="badge bg-danger">{{ number_format($user->speed ?? 0, 2) }}
                                                        km/h</span></td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <i class="ri-map-pin-line"></i> Latitude
                                                </td>
                                                <td>{{ number_format($user->lat ?? 0, 6) }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <i class="ri-map-pin-line"></i> Longitude
                                                </td>
                                                <td>{{ number_format($user->lng ?? 0, 6) }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <i class="ri-direction-line"></i> Direction
                                                </td>
                                                <td>{{ $user->direction ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <i class="ri-compass-line"></i> Compass Heading
                                                </td>
                                                <td>{{ $user->compass_heading ? number_format($user->compass_heading, 2) . '°' : 'N/A' }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <i class="ri-time-line"></i> Timestamp
                                                </td>
                                                <td>{{ date('Y-m-d H:i:s', strtotime($user->created_at)) }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
@endsection

@push('custom-script')
    <script>
        // Dynamic chart data from controller
        const timeCategories = @json($chartData['labels']);
        const speedData = @json($chartData['speeds']);

        function buildLineChart(el, name, data, color) {
            const accidentIndex = timeCategories.findIndex(
                t => t === '0s' || t === '+0s'
            );

            // Get max speed to position the label properly
            const maxSpeed = Math.max(...data.filter(d => d !== null && d !== undefined));

            var options = {
                chart: {
                    type: 'line',
                    height: 400,
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: true
                    },
                    events: {
                        mounted: function(chartContext, config) {
                            console.log('Chart mounted successfully');
                        }
                    }
                },
                colors: [color],
                dataLabels: {
                    enabled: false
                },
                markers: {
                    size: 0,
                    hover: {
                        size: 7
                    }
                },
                stroke: {
                    curve: 'smooth',
                    width: 3
                },
                series: [{
                    name: name,
                    data: data
                }],
                xaxis: {
                    categories: timeCategories,
                    labels: {
                        rotate: -45,
                        rotateAlways: true
                    }
                },
                annotations: {
                    points: accidentIndex !== -1 ? [{
                        x: timeCategories[accidentIndex],
                        y: data[accidentIndex],
                        marker: {
                            size: 9,
                            fillColor: '#FF0000',
                            strokeColor: '#ffffff',
                            strokeWidth: 2
                        },
                        label: {
                            borderColor: 'transparent',
                            offsetX: 10,
                            offsetY: -30,
                            text: 'Accident',
                            style: {
                                background: 'transparent',
                                color: '#FF0000',
                                fontSize: '12px',
                                fontWeight: '600'
                            }
                        }
                    }] : []
                },
                grid: {
                    strokeDashArray: 4
                },
                yaxis: {
                    title: {
                        text: 'Speed (km/h)'
                    },
                    labels: {
                        formatter: function(val) {
                            return val.toFixed(2);
                        }
                    }
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val.toFixed(2) + ' km/h';
                        }
                    }
                }
            };

            new ApexCharts(document.querySelector(el), options).render();
        }

        buildLineChart("#speedChart", "Speed", speedData, '#405189');
    </script>
@endpush