@section('title', __('Incidents'))
<div>
    <x-baseview title="{{ __('Incidents') }}">

        <x-km.kpis colunas="4">
            <x-km.kpi valor="{{ $resumo['sos'] }}" rotulo="{{ __('SOS open') }}" cor="{{ $resumo['sos'] > 0 ? '#dc2626' : '#111827' }}" />
            <x-km.kpi valor="{{ $resumo['abertas'] }}" rotulo="{{ __('Open') }}" />
            <x-km.kpi valor="{{ $resumo['criticas'] }}" rotulo="{{ __('High or critical') }}" cor="{{ $resumo['criticas'] > 0 ? '#b45309' : '#111827' }}" />
            <x-km.kpi valor="{{ $resumo['resolvidas30d'] }}" rotulo="{{ __('Solved (30 days)') }}" cor="#16a34a" />
        </x-km.kpis>

        {{-- abrir ocorrência --}}
        <x-km.card>
            <details>
                <summary class="text-sm font-bold text-gray-700" style="cursor:pointer">{{ __('Open an incident') }}</summary>
                <div class="flex flex-wrap items-end gap-3 mt-3">
                    <x-km.filtro rotulo="{{ __('Ride code') }}">
                        <input type="text" wire:model.defer="novaOrdem" class="text-sm border-gray-300 rounded-md w-44" placeholder="ex: 8012392232" />
                    </x-km.filtro>
                    <x-km.filtro rotulo="{{ __('Type') }}">
                        <select wire:model.defer="novoTipo" class="text-sm border-gray-300 rounded-md">
                            @foreach (\App\Models\Incident::TIPOS as $k => $v)
                                <option value="{{ $k }}">{{ $v }}</option>
                            @endforeach
                        </select>
                    </x-km.filtro>
                    <x-km.filtro rotulo="{{ __('Severity') }}">
                        <select wire:model.defer="novaSeveridade" class="text-sm border-gray-300 rounded-md">
                            @foreach (\App\Models\Incident::SEVERIDADES as $k => $v)
                                <option value="{{ $k }}">{{ $v }}</option>
                            @endforeach
                        </select>
                    </x-km.filtro>
                </div>
                <div class="mt-3">
                    <label class="block mb-1 text-xs text-gray-500">{{ __('What happened') }}</label>
                    <textarea wire:model.defer="novaDescricao" rows="2" class="w-full text-sm border-gray-300 rounded-md"></textarea>
                    @error('novaDescricao') <p class="text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <button wire:click="abrirOcorrencia" class="px-4 mt-2 text-sm font-semibold text-white rounded-md"
                    style="background:#1a4531;padding-top:8px;padding-bottom:8px">{{ __('Open incident') }}</button>
            </details>
        </x-km.card>

        <x-km.filtros>
            <x-km.filtro rotulo="{{ __('Status') }}">
                <select wire:model="filtroStatus" class="text-sm border-gray-300 rounded-md">
                    <option value="abertas">{{ __('Open + in analysis') }}</option>
                    <option value="todas">{{ __('All') }}</option>
                    @foreach (\App\Models\Incident::STATUS as $k => $v)
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endforeach
                </select>
            </x-km.filtro>
            <x-km.filtro rotulo="{{ __('Type') }}">
                <select wire:model="filtroTipo" class="text-sm border-gray-300 rounded-md">
                    <option value="">{{ __('All') }}</option>
                    @foreach (\App\Models\Incident::TIPOS as $k => $v)
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endforeach
                </select>
            </x-km.filtro>
        </x-km.filtros>

        {{-- lista --}}
        @forelse ($ocorrencias as $o)
            @php
                $cor = $o->type === 'sos' ? '#dc2626' : ($o->severity === 'critica' || $o->severity === 'alta' ? '#b45309' : '#6b7280');
            @endphp
            <div class="mt-4 bg-white border rounded-lg overflow-hidden" style="border-left:4px solid {{ $cor }}">
                <div class="flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b" style="background:#f8faf9">
                    <div>
                        <span style="font-weight:700;color:{{ $cor }}">
                            @if ($o->type === 'sos') 🚨 @endif {{ $o->tipo_label }}
                        </span>
                        <span class="text-xs text-gray-500">
                            · {{ $o->status_label }}
                            @if ($o->horas_aberta > 0) · <b>{{ $o->horas_aberta }}h {{ __('open') }}</b> @endif
                        </span>
                    </div>
                    <span class="text-xs text-gray-500">#{{ $o->id }} · {{ $o->created_at->format('d/m/Y H:i') }}</span>
                </div>
                <div class="px-3 py-2 text-sm">
                    <p>
                        @if ($o->order) {{ __('Ride') }}: <b>{{ $o->order->code }}</b> · @endif
                        @if ($o->driver) {{ __('Driver') }}: {{ $o->driver->name }} · @endif
                        @if ($o->customer) {{ __('Passenger') }}: {{ $o->customer->name }} @endif
                    </p>
                    @if ($o->handled_by)
                        <p class="mt-1 text-xs text-gray-500">
                            {{ __('Responsável') }}: <b>{{ optional(\App\Models\User::find($o->handled_by))->name }}</b>
                            @if ($o->assumed_at)
                                · {{ __('assumiu em') }} {{ $o->assumed_at->format('d/m H:i') }}
                                · {{ __('resposta em') }} {{ \App\Models\SupportTicket::duracao((int) $o->created_at->diffInSeconds($o->assumed_at)) }}
                            @endif
                        </p>
                    @elseif ($o->type === 'sos')
                        <p class="mt-1 text-xs font-bold" style="color:#dc2626">{{ __('SEM RESPONSÁVEL: assuma para iniciar o protocolo') }}</p>
                    @endif
                    @if ($o->type === 'sos' && !in_array($o->status, ['resolvida', 'sem_procedencia']))
                        <div class="grid grid-cols-1 gap-1 mt-2 md:grid-cols-2">
                            @foreach (\App\Models\Incident::PROTOCOLO_SOS as $passo => $rotuloPasso)
                                @php $feitoEm = data_get($o->protocolo, $passo); @endphp
                                <button wire:click="marcarProtocolo({{ $o->id }}, '{{ $passo }}')"
                                    class="flex items-center gap-2 px-2 py-1 text-xs text-left rounded-md {{ $feitoEm ? '' : 'hover:bg-gray-50' }}"
                                    style="{{ $feitoEm ? 'background:#f0fdf4;color:#15803d' : 'color:#6b7280' }}">
                                    <span style="font-weight:700">{{ $feitoEm ? '✓' : '○' }}</span>
                                    {{ __($rotuloPasso) }}
                                    @if ($feitoEm)<span class="text-[10px] text-gray-400">{{ $feitoEm }}</span>@endif
                                </button>
                            @endforeach
                        </div>
                    @endif
                    @if ($o->description)
                        <p class="mt-1" style="white-space:pre-line">{{ $o->description }}</p>
                    @endif
                    @if ($o->resolution)
                        <p class="mt-2 px-3 py-2 rounded-md" style="background:#ecfdf5">
                            <b>{{ __('Decision') }}</b> ({{ \App\Models\Incident::ACOES[$o->action_taken] ?? $o->action_taken }}):
                            {{ $o->resolution }}
                        </p>
                    @endif

                    @if (!in_array($o->status, ['resolvida', 'sem_procedencia']))
                        <div class="pt-2 mt-2 border-t">
                            <div class="flex flex-wrap items-end gap-2">
                                <x-km.filtro rotulo="{{ __('Outcome') }}">
                                    <select wire:model.defer="novoStatus" class="text-sm border-gray-300 rounded-md">
                                        <option value="resolvida">{{ __('Solved') }}</option>
                                        <option value="sem_procedencia">{{ __('No grounds') }}</option>
                                    </select>
                                </x-km.filtro>
                                <x-km.filtro rotulo="{{ __('Action') }}">
                                    <select wire:model.defer="acaoTomada" class="text-sm border-gray-300 rounded-md">
                                        @foreach (\App\Models\Incident::ACOES as $k => $v)
                                            <option value="{{ $k }}">{{ $v }}</option>
                                        @endforeach
                                    </select>
                                </x-km.filtro>
                                <button wire:click="assumir({{ $o->id }})"
                                    class="px-3 text-sm border rounded-md" style="padding-top:7px;padding-bottom:7px">{{ __('Take it') }}</button>
                            </div>
                            <textarea wire:model.defer="resolucao" rows="2" class="w-full mt-2 text-sm border-gray-300 rounded-md"
                                placeholder="{{ __('What was decided and why') }}"></textarea>
                            <button wire:click="tratar({{ $o->id }})" class="px-4 mt-1 text-sm font-semibold text-white rounded-md"
                                style="background:#1a4531;padding-top:8px;padding-bottom:8px">
                                {{ __('Close incident') }}
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        @empty
            <div class="p-6 mt-4 text-sm text-center text-gray-500 bg-white border rounded-lg">{{ __('No incidents with these filters.') }}</div>
        @endforelse

    </x-baseview>
</div>