@extends('layouts.motoboy_dashboard')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Cabeçalho da Página -->
    <div class="flex flex-col md:flex-row justify-between items-center bg-white p-6 shadow-sm border border-gray-200 mb-8 rounded-lg">
        <h1 class="text-2xl font-bold text-gray-800">{{ $title ?? 'Entregas Canceladas' }}</h1>
        <div class="flex flex-col md:flex-row gap-4 mt-4 md:mt-0 text-gray-700">
            <div class="flex items-center gap-2">
                <span class="font-semibold text-sm uppercase">Motoboy:</span>
                <span>{{ $motoboy->name ?? 'N/A' }}</span>
            </div>
            <div class="flex items-center gap-2">
                <span class="font-semibold text-sm uppercase">Status:</span>
                <span class="capitalize">{{ str_replace('_', ' ', $status ?? 'N/A') }}</span>
            </div>
        </div>
    </div>

    <!-- Lista de Entregas Canceladas -->
    <div class="bg-white p-6 shadow-sm border border-gray-200 mb-10 rounded-lg">
        <h2 class="text-2xl font-bold text-red-600 mb-4 text-center underline underline-offset-6">
            Entregas {{ $title ?? 'Canceladas' }} ({{ $entregas->total() }})
        </h2>
        <h3 class="text-lg font-medium text-gray-600 mb-6 text-center">
            Listagem das entregas que foram canceladas.
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse ($entregas as $entrega)
                <div class="bg-white shadow-md border-l-4 border-red-500 h-full flex flex-col rounded-lg overflow-hidden">
                    <a href="{{ route('restrito.motoboy.entregas.show', $entrega->id) }}" class="block flex-1">
                        <div class="flex items-start p-4">
                            <img src="{{ asset('storage/' . (optional(optional($entrega->pedidoTroca)->medicamento)->imagens->first()->path ?? 'images/sem-imagem.png')) }}"
                                 class="w-24 h-24 object-contain mr-4 flex-shrink-0 rounded-md border border-gray-200"
                                 alt="{{ optional(optional($entrega->pedidoTroca)->medicamento)->name ?? 'Medicamento' }}">
                            <div class="flex-1 min-w-0">
                                <h3 class="text-base font-semibold text-gray-800 truncate">
                                    {{ optional(optional($entrega->pedidoTroca)->medicamento)->name ?? 'Sem Nome do Medicamento' }}
                                </h3>
                                <p class="text-sm text-gray-600 mt-1">
                                    <span class="font-semibold uppercase text-xs">Código Troca:</span>
                                    <span class="text-red-600 hover:text-red-700 hover:underline transition-colors duration-200">
                                        {{ optional($entrega->pedidoTroca)->codigo_troca ?? 'N/A' }}
                                    </span>
                                </p>
                                <p class="text-sm text-gray-600 mt-1">
                                    <span class="font-semibold uppercase text-xs">Origem:</span>
                                    <span class="block truncate">{{ optional($entrega->enderecoOrigem)->rua ?? 'N/A' }}, {{ optional($entrega->enderecoOrigem)->numero ?? 'N/A' }} - {{ optional($entrega->enderecoOrigem)->bairro ?? 'N/A' }} / {{ optional($entrega->enderecoOrigem)->cidade ?? 'N/A' }} - {{ optional($entrega->enderecoOrigem)->uf ?? 'N/A' }}</span>
                                </p>
                                <p class="text-sm text-gray-600 mt-1">
                                    <span class="font-semibold uppercase text-xs">Destino:</span>
                                    <span class="block truncate">{{ optional($entrega->enderecoDestino)->rua ?? 'N/A' }}, {{ optional($entrega->enderecoDestino)->numero ?? 'N/A' }} - {{ optional($entrega->enderecoDestino)->bairro ?? 'N/A' }} / {{ optional($entrega->enderecoDestino)->cidade ?? 'N/A' }} - {{ optional($entrega->enderecoDestino)->uf ?? 'N/A' }}</span>
                                </p>
                                <span class="inline-block mt-2 px-3 py-1 text-sm font-medium rounded-full bg-red-100 text-red-800">
                                    {{ ucfirst(str_replace('_', ' ', $entrega->status)) }}
                                </span>
                            </div>
                        </div>
                    </a>

                    <div class="p-4 bg-gray-50 border-t border-gray-200 flex flex-col gap-3">
                         <span class="text-sm text-gray-500 text-center py-2">
                             Esta entrega foi cancelada e não pode ser reativada diretamente.
                         </span>
                        <a href="{{ route('restrito.motoboy.detalhes-entrega', $entrega->id) }}"
                           class="w-full flex items-center justify-center px-4 py-2 bg-gray-600 text-white font-medium hover:bg-gray-700 transition duration-200 rounded-md shadow-md">
                            <i class="ri-information-line mr-2"></i> Ver Detalhes
                        </a>
                    </div>

                    <div class="px-3 py-2 text-md text-white flex justify-between rounded-b-lg bg-red-500">
                        <span>Solicitado em: {{ optional($entrega->created_at)->format('d/m/Y H:i') ?? 'N/A' }}</span>
                        <span>Atualizado: {{ optional($entrega->updated_at)->diffForHumans() ?? 'N/A' }}</span>
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center text-gray-600 py-8 p-6 bg-gray-50 rounded-lg shadow-sm">
                    <p class="text-lg mb-4">Nenhuma entrega cancelada encontrada para este motoboy.</p>
                    <a href="{{ route('restrito.motoboy.dashboard') }}"
                       class="mt-4 inline-block bg-gray-600 text-white px-6 py-3 rounded-md hover:bg-gray-700 transition-colors duration-200 text-base font-semibold">
                        <i class="ri-dashboard-line mr-2"></i> Voltar ao Dashboard
                    </a>
                </div>
            @endforelse
        </div>
        @if ($entregas->hasPages())
            <div class="mt-6 flex justify-center">
                {{ $entregas->links('pagination::tailwind') }}
            </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
    {{-- Para mensagens de alerta, se necessário --}}
    {{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script> --}}
@endsection