@extends('layouts.motoboy_dashboard')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">

    <div class="bg-white shadow-md p-5 mb-6 flex flex-col md:flex-row justify-between items-start md:items-center">
        <h1 class="text-2xl sm:text-3xl font-extrabold text-green-700 flex items-center gap-2 mb-3 md:mb-0">
            <i class="ri-dashboard-line text-green-500 text-3xl sm:text-4xl"></i> Painel do Motoboy
        </h1>
        <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm sm:text-base text-gray-700">
            <div class="flex items-center gap-1">
                <span class="font-semibold text-gray-600">Usuário:</span>
                <span class="text-gray-800">{{ auth()->user()->name }}</span>
            </div>
            <div class="flex items-center gap-1">
                <span class="font-semibold text-gray-600">Perfil:</span>
                <span class="px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-xs font-medium uppercase">
                    {{ optional(auth()->user()->roles()->first())->name ?? 'Sem perfil' }}
                </span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">

        <!-- Entregas Concluidas pelo motoboy-->
        <a href="{{ route('restrito.motoboy.entregas.by_status', ['status' => 'delivered']) }}">
            <div class="bg-white shadow-md p-5 flex items-center justify-between border-l-4 border-green-500">

                <div>
                    <p class="text-sm font-medium text-gray-500">Concluídas (Mês)</p>
                    <p class="text-2xl font-bold text-gray-900 mt-1">{{ $completedDeliveriesMonth ?? 0 }}</p>
                </div>
                <i class="ri-check-double-line text-green-500 text-4xl opacity-70"></i>
            </div>
        </a>

        <div class="bg-white shadow-md p-5 flex items-center justify-between border-l-4 border-blue-500">
            <div>
                <p class="text-sm font-medium text-gray-500">Entregas Disponíveis</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ $deliveriesCount ?? 0 }}</p>
            </div>
            <i class="ri-time-line text-blue-500 text-4xl opacity-70"></i>
        </div>
        <div class="bg-white shadow-md p-5 flex items-center justify-between border-l-4 border-yellow-500">
            <div>
                <p class="text-sm font-medium text-gray-500">Em Andamento</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ $inProgressDeliveriesCount ?? 0 }}</p>
            </div>
            <i class="ri-road-map-line text-yellow-500 text-4xl opacity-70"></i>
        </div>

        <div class="bg-white shadow-md p-5 flex items-center justify-between border-l-4 border-red-500">
            <div>
                <p class="text-sm font-medium text-gray-500">Recusadas/Canceladas</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ $rejectedCancelledDeliveriesCount ?? 0 }}</p>
            </div>
            <i class="ri-close-circle-line text-red-500 text-4xl opacity-70"></i>
        </div>
    </div>

    <div class="bg-white shadow-md p-5 mb-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-xl font-bold text-gray-700 flex items-center gap-2 mb-5">
                    <i class="ri-list-check text-green-500"></i> Pedidos de Troca
                </h2>
            </div>
            <div class="text-xl font-bold text-red-700 flex items-center gap-2 mb-5">
                <h2>Pedidos disponíveis: {{ $trocas->count()}}</h2>
            </div>
        </div>


        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($trocas as $troca)
                <div class="bg-gray-50 shadow-sm border border-gray-200 p-5 flex flex-col justify-between">
                    <div>
                        <div class="flex flex-col items-center justify-between mb-3">
                            <div class="text-center text-xl underline text-gray-500 mb-2">Cod. Pedido:</div>
                            <h3 class="text-lg font-bold text-gray-800 flex items-center gap-2 mb-2">
                                <!--<i class="ri-exchange-line text-xl text-red-500"></i>--> {{ $troca->codigo_troca }}
                            </h3>
                            @php
                                $statusClasses = [
                                    'pendente' => 'bg-yellow-100 text-yellow-800',
                                    'aceito' => 'bg-green-100 text-green-800',
                                    'rejeitado' => 'bg-red-100 text-red-800',
                                    'em_troca' => 'bg-blue-100 text-blue-800',
                                    'cancelado' => 'bg-gray-100 text-gray-800',
                                    'concluido' => 'bg-purple-100 text-purple-800',
                                ];
                                $currentStatusClass = $statusClasses[$troca->status] ?? 'bg-gray-200 text-gray-700';
                            @endphp
                            <span class="px-3 py-1 w-full text-center rounded-full text-md font-semibold {{ $currentStatusClass }}">
                                {{ ucfirst(str_replace('_', ' ', $troca->status)) }}
                            </span>
                        </div>

                        <div class="space-y-2 text-sm text-gray-700">
                            <p class="flex items-center gap-2">
                                <i class="ri-capsule-line text-gray-500"></i>
                                <span class="font-medium">Medicamento:</span>
                                <a href="{{ route('restrito.user.medicamentos.show', $troca->medicamento->slug) }}" class="text-blue-600 hover:text-blue-800 hover:underline">
                                    {{ $troca->medicamento->name }}
                                </a>
                            </p>
                            <p class="flex items-center gap-2">
                                <i class="ri-map-pin-2-line text-green-600"></i> {{-- New icon for origin --}}
                                <span class="font-medium">Origem:</span>
                                @php
                                    $ownerAddress = $troca->medicamento->user->enderecos->first() ?? 'Não informados';
                                @endphp
                                <span>
                                    {{ $ownerAddress->bairro ?? 'Bairro N/A' }}
                                    @if ($ownerAddress->cidade ?? false)
                                        , {{ $ownerAddress->cidade }}
                                    @endif
                                </span>
                            </p>

                            <p class="flex items-center gap-2">
                                <i class="ri-map-pin-line text-gray-500"></i>
                                <span class="font-medium">Destino :</span>
                                {{-- Acessando o bairro do dono do medicamento --}}
                                <span>{{ $troca->medicamento->user->enderecos->first()->bairro ?? 'Não informado' }}</span>
                            </p>
                            <p class="flex items-center gap-2">
                                <i class="ri-calendar-line text-gray-500"></i>
                                <span class="font-medium">Data:</span>
                                <span>{{ \Carbon\Carbon::parse($troca->created_at)->format('d/m/Y H:i') }}</span>
                            </p>
                            {{-- Você pode adicionar mais informações aqui, como endereço de coleta/entrega, se relevante para o motoboy --}}
                        </div>
                    </div>

                    <div class="mt-5 text-center">
                        <a href="{{ route('restrito.motoboy.detalhes-troca', $troca->codigo_troca) }}"
                           class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200">
                            <i class="ri-information-line mr-2 text-2xl"></i> Ver Detalhes
                        </a>
                    </div>
                </div>
            @empty
                <div class="col-span-full bg-white shadow-sm border border-gray-200 p-5 text-center text-gray-500">
                    <p class="text-lg font-medium mb-2">🎉 Nenhum pedido de troca para exibir no momento!</p>
                    <p>Fique atento, novas solicitações podem surgir a qualquer instante.</p>
                </div>
            @endforelse
        </div>

        <div class="mt-8 pt-5 border-t border-gray-200">
            {{ $trocas->links() }}
        </div>
    </div>
</div>
@endsection

@section('scripts')
{{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}
<script>
    // Exibir mensagens flash do Laravel com SweetAlert2
    @if(session('success'))
        Swal.fire({
            title: 'Sucesso!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonColor: '#10B981', // green-500
            customClass: {
                popup: 'shadow-xl',
                confirmButton: 'px-5 py-2 text-base font-medium',
            }
        });
    @endif

    @if(session('error'))
        Swal.fire({
            title: 'Erro!',
            text: '{{ session('error') }}',
            icon: 'error',
            confirmButtonColor: '#EF4444', // red-500
            customClass: {
                popup: 'shadow-xl',
                confirmButton: 'px-5 py-2 text-base font-medium',
            }
        });
    @endif

    @if(session('info'))
        Swal.fire({
            title: 'Informação!',
            text: '{{ session('info') }}',
            icon: 'info',
            confirmButtonColor: '#3B82F6', // blue-500
            customClass: {
                popup: 'shadow-xl',
                confirmButton: 'px-5 py-2 text-base font-medium',
            }
        });
    @endif
</script>
@endsection