@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 Ativas' }}</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 Ativas -->
    <div class="bg-white p-6 shadow-sm border border-gray-200 mb-10 rounded-lg">
        <h2 class="text-2xl font-bold text-blue-600 mb-4 text-center underline underline-offset-6">
            {{ $title }} ({{ $entregas->total() }})
        </h2>
        <h3 class="text-lg font-medium text-gray-600 mb-6 text-center">
            Visualize e gerencie suas entregas em andamento.
        </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 h-full flex flex-col rounded-lg overflow-hidden',
                    'border-blue-500' => in_array($entrega->status, ['accepted_by_motoboy', 'in_transit']),
                    'border-purple-500' => $entrega->status === 'picked_up',
                ])>
                    <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-blue-100 text-blue-800' => in_array($entrega->status, ['accepted_by_motoboy', 'in_transit']),
                                    'bg-purple-100 text-purple-800' => $entrega->status === 'picked_up',
                                ])>
                                    {{ 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">
                        @if ($entrega->status === 'accepted_by_motoboy')
                            <form action="{{ route('restrito.motoboy.entregas.update_status', $entrega->id) }}" method="POST" id="pickedUpForm-{{ $entrega->id }}" class="w-full">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="new_status" value="picked_up">
                                <button type="button" onclick="confirmarAcao('picked_up', '{{ $entrega->id }}')"
                                        class="w-full flex items-center justify-center px-4 py-2 bg-purple-600 text-white font-medium hover:bg-purple-700 transition duration-200 rounded-md shadow-md">
                                    <i class="ri-hand-coin-line mr-2"></i> Coletado
                                </button>
                            </form>
                        @elseif ($entrega->status === 'picked_up' || $entrega->status === 'in_transit')
                            <form action="{{ route('restrito.motoboy.entregas.update_status', $entrega->id) }}" method="POST" id="deliveredForm-{{ $entrega->id }}" class="w-full">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="new_status" value="delivered">
                                <button type="button" onclick="confirmarAcao('delivered', '{{ $entrega->id }}')"
                                        class="w-full flex items-center justify-center px-4 py-2 bg-green-600 text-white font-medium hover:bg-green-700 transition duration-200 rounded-md shadow-md">
                                    <i class="ri-check-double-line mr-2"></i> Entregue
                                </button>
                            </form>
                            @if ($entrega->status !== 'in_transit') {{-- Permite cancelar antes de iniciar o trânsito --}}
                                <form action="{{ route('restrito.motoboy.entregas.update_status', $entrega->id) }}" method="POST" id="inTransitForm-{{ $entrega->id }}" class="w-full">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="new_status" value="in_transit">
                                    <button type="button" onclick="confirmarAcao('in_transit', '{{ $entrega->id }}')"
                                            class="w-full flex items-center justify-center px-4 py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition duration-200 rounded-md shadow-md">
                                        <i class="ri-road-map-line mr-2"></i> Em Trânsito
                                    </button>
                                </form>
                            @endif
                        @else
                            <span class="text-sm text-gray-500 text-center py-2">Nenhuma ação disponível para este status.</span>
                        @endif
                    </div>

                    <div @class([
                        'px-3 py-2 text-md text-white flex justify-between rounded-b-lg',
                        'bg-blue-500' => in_array($entrega->status, ['accepted_by_motoboy', 'in_transit']),
                        'bg-purple-500' => $entrega->status === 'picked_up',
                    ])>
                        <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 com este status encontrada.</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')
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>
    <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>
    <script>
        function confirmarAcao(acao, entregaId) {
            let mensagem = '';
            let titulo = '';
            let formId = '';

            switch (acao) {
                case 'picked_up':
                    mensagem = 'Tem certeza que deseja marcar esta entrega como "Coletada"?';
                    titulo = 'Confirmar Coleta';
                    formId = 'pickedUpForm-' + entregaId;
                    break;
                case 'in_transit':
                    mensagem = 'Tem certeza que deseja marcar esta entrega como "Em Trânsito"?';
                    titulo = 'Confirmar Em Trânsito';
                    formId = 'inTransitForm-' + entregaId;
                    break;
                case 'delivered':
                    mensagem = 'Tem certeza que deseja marcar esta entrega como "Entregue"? Esta ação não pode ser desfeita!';
                    titulo = 'Confirmar Entrega';
                    formId = 'deliveredForm-' + entregaId;
                    break;
                default:
                    alertify.error('Ação inválida.');
                    return;
            }

            alertify.confirm(
                titulo,
                mensagem,
                function() {
                    document.getElementById(formId).submit();
                },
                function() {
                    alertify.error('Ação cancelada.');
                }
            ).set('labels', {
                ok: `Sim, ${acao === 'picked_up' ? 'Coletar' : (acao === 'in_transit' ? 'Confirmar' : 'Entregar')}`,
                cancel: 'Cancelar'
            });
        }
    </script>
@endsection