@php
    use App\Enums\CorporateRideRequestStatus;
@endphp

<x-app-layout>

<x-page.header title="Chamado Uber corporativo">
    <x-slot name="action">
        <a href="{{ route('uber.requests.index') }}"
           class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 sm:w-auto">
            Voltar à lista
        </a>
    </x-slot>
</x-page.header>

<x-page.card>
    <div class="space-y-6">
        <div class="rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 p-6 text-center">
            <p class="text-sm text-gray-600 mb-1">Código para justificativa no app corporativo</p>
            <p class="select-all break-all text-xl font-mono font-bold tracking-wide text-gray-900 sm:text-2xl">{{ $ride->justification_code }}</p>
            <p class="text-xs text-gray-500 mt-2">Copie e cole no campo de justificativa ao solicitar a corrida.</p>
        </div>

        <dl class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div>
                <dt class="text-gray-500">Status</dt>
                <dd class="font-medium">{{ $ride->status_label }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Urgência</dt>
                <dd class="font-medium">{{ $ride->urgency_label }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Solicitante</dt>
                <dd class="font-medium">{{ $ride->requester->name }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Setor</dt>
                <dd class="font-medium">{{ $ride->sector->name }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Aprovador designado</dt>
                <dd class="font-medium">{{ $ride->approver?->name ?? '— (defina o líder em Inventário → Setores ou use gestão com permissão de inventário)' }}</dd>
            </div>
            <div class="md:col-span-2">
                <dt class="text-gray-500">Título</dt>
                <dd class="font-medium">{{ $ride->title }}</dd>
            </div>
            @if($ride->description)
                <div class="md:col-span-2">
                    <dt class="text-gray-500">Descrição</dt>
                    <dd class="text-gray-800 whitespace-pre-wrap">{{ $ride->description }}</dd>
                </div>
            @endif
            <div class="md:col-span-2">
                <dt class="text-gray-500">Origem (prevista)</dt>
                <dd>{{ $ride->origin }}</dd>
            </div>
            <div class="md:col-span-2">
                <dt class="text-gray-500">Destino (previsto)</dt>
                <dd>{{ $ride->destination }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Data da corrida</dt>
                <dd>{{ $ride->ride_at?->timezone(config('app.timezone'))->format('d/m/Y H:i') }}</dd>
            </div>
            <div>
                <dt class="text-gray-500">Evento (EV)</dt>
                <dd>{{ $ride->operationEvent?->name ?? '—' }}</dd>
            </div>
            @if($ride->status === CorporateRideRequestStatus::Approved)
                <div>
                    <dt class="text-gray-500">Aprovado em</dt>
                    <dd>{{ $ride->approved_at?->timezone(config('app.timezone'))->format('d/m/Y H:i') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-gray-500">Aprovado por</dt>
                    <dd>{{ $ride->approvedBy?->name ?? '—' }}</dd>
                </div>
            @endif
            @if($ride->status === CorporateRideRequestStatus::Rejected)
                <div class="md:col-span-2">
                    <dt class="text-gray-500">Motivo da recusa</dt>
                    <dd class="text-red-700 whitespace-pre-wrap">{{ $ride->rejection_reason }}</dd>
                </div>
            @endif
        </dl>

        @if($ride->status === CorporateRideRequestStatus::Pending)
            @can('approve', $ride)
                <div class="flex flex-col gap-3 border-t pt-4 sm:flex-row sm:flex-wrap">
                    <x-ui.button
                        type="button"
                        x-data=""
                        x-on:click.prevent="$dispatch('open-modal', 'approve-ride-request')"
                    >
                        Aprovar
                    </x-ui.button>
                    <details class="min-w-0 flex-1">
                        <summary class="cursor-pointer text-sm text-gray-700 font-medium py-2">Recusar…</summary>
                        <form method="POST" action="{{ route('uber.requests.reject', $ride) }}" class="mt-3 space-y-3 max-w-lg">
                            @csrf
                            @method('PATCH')
                            <x-form.textarea name="rejection_reason" rows="3" :value="old('rejection_reason')" required placeholder="Informe o motivo" />
                            <x-form.error name="rejection_reason" />
                            <x-ui.button type="submit">Confirmar recusa</x-ui.button>
                        </form>
                    </details>
                </div>

                <x-modal name="approve-ride-request" :show="$errors->has('approval')" maxWidth="md" backdrop focusable>
                    <div class="p-6">
                        <h3 class="text-lg font-semibold text-gray-900">Aprovar chamado</h3>
                        <p class="mt-2 text-sm text-gray-600">
                            Confirma a aprovação deste chamado para o solicitante
                            <strong>{{ $ride->requester->name }}</strong>?
                        </p>

                        <div class="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-3">
                            <button
                                type="button"
                                class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 sm:w-auto"
                                x-on:click="$dispatch('close-modal', 'approve-ride-request')"
                            >
                                Cancelar
                            </button>

                            <form method="POST" action="{{ route('uber.requests.approve', $ride) }}" class="w-full sm:w-auto">
                                @csrf
                                @method('PATCH')
                                <x-ui.button type="submit" class="w-full justify-center sm:w-auto">Confirmar aprovação</x-ui.button>
                            </form>
                        </div>
                    </div>
                </x-modal>
            @endcan
        @endif

        @if($ride->status === CorporateRideRequestStatus::Approved)
            @can('update', $ride)
                <div class="pt-6 border-t">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Conferência (após relatório corporativo)</h3>
                    <p class="text-xs text-gray-600 mb-4">
                        Use estes campos para cruzar com o export do painel corporativo (origem/destino reais, ID da corrida, etc.).
                    </p>
                    <form method="POST" action="{{ route('uber.requests.reconciliation', $ride) }}" class="space-y-4 max-w-2xl">
                        @csrf
                        @method('PATCH')
                        <div>
                            <x-form.label for="actual_origin" value="Origem (conferida)" />
                            <x-form.input id="actual_origin" name="actual_origin" value="{{ old('actual_origin', $ride->actual_origin) }}" />
                            <x-form.error name="actual_origin" />
                        </div>
                        <div>
                            <x-form.label for="actual_destination" value="Destino (conferido)" />
                            <x-form.input id="actual_destination" name="actual_destination" value="{{ old('actual_destination', $ride->actual_destination) }}" />
                            <x-form.error name="actual_destination" />
                        </div>
                        <div>
                            <x-form.label for="corporate_trip_reference" value="Referência / ID da corrida no relatório" />
                            <x-form.input id="corporate_trip_reference" name="corporate_trip_reference" value="{{ old('corporate_trip_reference', $ride->corporate_trip_reference) }}" />
                            <x-form.error name="corporate_trip_reference" />
                        </div>
                        <div>
                            <x-form.label for="reconciliation_notes" value="Observações da conferência" />
                            <x-form.textarea id="reconciliation_notes" name="reconciliation_notes" rows="3" :value="old('reconciliation_notes', $ride->reconciliation_notes)" />
                            <x-form.error name="reconciliation_notes" />
                        </div>
                        <x-ui.button type="submit">Salvar conferência</x-ui.button>
                    </form>
                </div>
            @endcan
        @endif
    </div>
</x-page.card>

</x-app-layout>