<!-- Path: app/Views/admin/incident_review.view.php -->
<div class="bg-slate-100 min-h-[calc(100vh-64px)] py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="mb-4">
            <a href="{{APP_URL}}/admin/incidents/pending" class="text-slate-500 hover:text-navy-900"><i class="fas fa-arrow-left"></i> Back to Pending</a>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column: Incident Data -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Top Header -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-navy-900">Incident #{{ str_pad($incident['id'], 5, '0', STR_PAD_LEFT) }}</h1>
                        <p class="text-sm text-slate-500">Reported: {{ date('F j, Y, g:i a', strtotime($incident['created_at'])) }}</p>
                    </div>
                    <div>
                        @if($incident['status'] == 'pending')
                            <button id="verifyBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded shadow-md"><i class="fas fa-check-circle"></i> Verify Incident</button>
                        @else
                            <span class="bg-green-100 text-green-800 font-bold px-4 py-2 rounded border border-green-200"><i class="fas fa-check"></i> Verified</span>
                        @endif
                    </div>
                </div>

                <!-- Details & Map -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                    <div class="grid grid-cols-1 md:grid-cols-2">
                        <div class="p-6 border-r border-slate-100">
                            <h3 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4">Victim Details</h3>
                            <div class="space-y-3 text-sm">
                                <p><strong class="block text-slate-500">Name</strong> <span class="text-lg">{{ $incident['victim_name'] }}</span></p>
                                <p><strong class="block text-slate-500">Phone</strong> <a href="tel:{{ $incident['victim_phone'] }}" class="text-brandBlue-600 font-bold">{{ $incident['victim_phone'] }}</a></p>
                                <p><strong class="block text-slate-500">Category</strong> <span class="text-alert font-bold">{{ $incident['category_name'] }}</span></p>
                                <p><strong class="block text-slate-500">Description</strong> <span class="bg-slate-50 p-2 block mt-1 rounded border">{{ $incident['description'] }}</span></p>
                            </div>
                        </div>
                        <div class="p-6 bg-slate-50">
                            <h3 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4">Location Data</h3>
                            <div class="bg-white p-4 rounded border font-mono text-center mb-4">
                                {{ $incident['latitude'] }}, {{ $incident['longitude'] }}
                            </div>
                            <a href="https://www.google.com/maps/search/?api=1&query={{ $incident['latitude'] }},{{ $incident['longitude'] }}" target="_blank" class="block w-full text-center bg-slate-200 hover:bg-slate-300 text-slate-700 py-2 rounded transition-colors font-medium">
                                <i class="fas fa-map-marked-alt"></i> Open in Google Maps
                            </a>
                            @if($incident['image_url'])
                                <div class="mt-4">
                                    <strong class="block text-slate-500 text-xs uppercase mb-1">Evidence</strong>
                                    <a href="{{ MEDIA_URL }}/{{ $incident['image_url'] }}" target="_blank">
                                        <img src="{{ MEDIA_URL }}/{{ $incident['image_url'] }}" class="w-full h-32 object-cover rounded border">
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Dispatch & Timeline -->
            <div class="lg:col-span-1 space-y-6">
                <!-- Dispatcher Module -->
                <div class="bg-navy-950 rounded-xl shadow-lg border border-navy-800 text-white overflow-hidden">
                    <div class="p-4 border-b border-navy-800 bg-navy-900 font-bold flex items-center gap-2">
                        <i class="fas fa-satellite-dish text-brandBlue-400"></i> Active Dispatch Routing
                    </div>
                    <div class="p-4">
                        @if($incident['status'] == 'pending')
                            <div class="text-center text-slate-400 py-6 text-sm">Please verify the incident first to unlock routing.</div>
                        @elseif($incident['status'] == 'verified')
                            <h4 class="text-sm text-slate-300 mb-3">Nearest {{ $incident['category_name'] }} Responders (Haversine)</h4>
                            <form id="dispatchForm">
                                <div class="space-y-2 mb-4 max-h-60 overflow-y-auto">
                                    @if(empty($nearestResponders))
                                        <div class="text-red-400 text-sm p-3 bg-red-900/30 rounded border border-red-800">No available units found.</div>
                                    @else
                                        @foreach($nearestResponders as $res)
                                            <label class="flex items-start gap-3 p-3 rounded-lg border border-navy-700 bg-navy-800 hover:bg-navy-700 cursor-pointer transition-colors">
                                                <input type="radio" name="responder_id" value="{{ $res['id'] }}" class="mt-1 accent-brandBlue-500" required>
                                                <div>
                                                    <div class="font-bold">{{ $res['organization_name'] }}</div>
                                                    <div class="text-xs text-brandBlue-300">Unit ID: #{{ $res['id'] }} - {{ $res['full_name'] }}</div>
                                                    <div class="text-xs text-green-400 font-mono mt-1"><i class="fas fa-route"></i> {{ number_format($res['distance'], 2) }} km away</div>
                                                </div>
                                            </label>
                                        @endforeach
                                    @endif
                                </div>
                                <button type="submit" id="dispatchBtn" class="w-full bg-alert hover:bg-red-600 text-white font-bold py-3 rounded shadow-lg transition-colors">
                                    DISPATCH SELECTED UNIT
                                </button>
                            </form>
                        @else
                            <div class="text-center py-6">
                                <i class="fas fa-check-circle text-4xl text-green-500 mb-2 block"></i>
                                <div class="font-bold">Unit Dispatched</div>
                                <div class="text-sm text-slate-300 mt-1">Assigned to: {{ $incident['responder_org'] }}</div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Timeline -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
                    <h3 class="font-bold text-navy-900 mb-4 border-b pb-2"><i class="fas fa-history mr-1 text-slate-400"></i> Event Timeline</h3>
                    <div class="space-y-4 max-h-80 overflow-y-auto">
                        @foreach($timeline as $event)
                            <div class="flex gap-3 text-sm">
                                <div class="mt-1 w-2 h-2 rounded-full bg-brandBlue-500 flex-shrink-0"></div>
                                <div>
                                    <div class="font-semibold text-slate-800">{{ $event['action_type'] }}</div>
                                    <div class="text-slate-600 text-xs">{{ $event['action_details'] }}</div>
                                    <div class="text-slate-400 text-[10px] mt-1">{{ date('M d, Y h:i:s A', strtotime($event['created_at'])) }} - {{ $event['actor_name'] }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@addScript
<script>
$(document).ready(function() {
    const incidentId = {{ $incident['id'] }};

    $('#verifyBtn').on('click', function() {
        let $btn = $(this);
        let orig = $btn.html();
        $btn.html('<i class="fas fa-spinner fa-spin"></i>').prop('disabled', true);
        
        $.ajax({
            url: `{{APP_URL}}/admin/incidents/${incidentId}/verify`,
            type: 'POST',
            success: function(res) {
                if(res.status === 'success') {
                    showNotification('success', 'Verified', res.message);
                    setTimeout(() => window.location.reload(), 1000);
                }
            },
            error: function() {
                showNotification('error', 'Error', 'Verification failed.');
                $btn.html(orig).prop('disabled', false);
            }
        });
    });

    $('#dispatchForm').on('submit', function(e) {
        e.preventDefault();
        let $btn = $('#dispatchBtn');
        let orig = $btn.html();
        $btn.html('<i class="fas fa-spinner fa-spin"></i> DISPATCHING...').prop('disabled', true);

        $.ajax({
            url: `{{APP_URL}}/admin/incidents/${incidentId}/dispatch`,
            type: 'POST',
            data: $(this).serialize(),
            success: function(res) {
                if(res.status === 'success') {
                    Swal.fire('Dispatched!', res.message, 'success').then(() => window.location.reload());
                }
            },
            error: function(xhr) {
                let msg = xhr.responseJSON ? xhr.responseJSON.message : 'Dispatch failed.';
                showNotification('error', 'Error', msg);
                $btn.html(orig).prop('disabled', false);
            }
        });
    });
});
</script>
@endAddScript