@extends('layouts.motoboy_dashboard')

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
    <!-- Cabeçalho -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 p-4 bg-white shadow-sm">
        <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600 flex items-center">
            Detalhes do Pedido de Troca
        </h1>
        <div class="mt-3 md:mt-0">
            <div class="flex flex-col sm:flex-row gap-3 text-sm sm:text-base text-gray-700">
                <div class="flex items-center gap-1">
                    <span class="font-medium">Usuário:</span>
                    <span class="text-gray-600">{{ auth()->user()->name }}</span>
                </div>
                <div class="flex items-center gap-1">
                    <span class="font-medium">Perfil:</span>
                    <span class="px-2 py-0.5 bg-gray-100text-gray-600">{{ auth()->user()->roles()->first()->name ?? 'Sem perfil' }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Conteúdo Principal -->
    <div class="bg-white shadow-sm overflow-hidden">
        <!-- Mensagens -->
        @if (session('success'))
            <div class="bg-green-50 border-l-4 border-green-400 text-green-700 p-4 mb-4">
                <div class="flex items-center">
                    <i class="fas fa-check-circle mr-2"></i>
                    <p>{{ session('success') }}</p>
                </div>
            </div>
        @endif
        @if (session('error'))
            <div class="bg-red-50 border-l-4 border-red-400 text-red-700 p-4 mb-4">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <p>{{ session('error') }}</p>
                </div>
            </div>
        @endif

        <!-- Informações do Pedido -->
        <div class="bg-gray-50 p-4 sm:p-6 border-b">
            <h3 class="text-lg sm:text-xl font-semibold text-green-800 mb-3 flex items-center">
                <i class="fas fa-info-circle mr-2 text-green-600"></i> Informações do Pedido
            </h3>
            {{-- Ajustado o layout das colunas para melhor responsividade e preenchimento automático da largura --}}
            <div class="flex flex-grow gap-4 text-base lg:text-lg">
                {{-- Removido w-2/5 e w-1/5 para que as colunas ocupem a largura disponível automaticamente no grid --}}
                <div class="w-4/12 bg-white p-3 shadow-sm text-center"> {{-- Adicionado rounded-md para um visual mais suave --}}
                    <p class="font-medium text-gray-500">Código</p>
                    <p class="text-red-600 font-semibold text-md">{{ $pedido->codigo_troca }}</p>
                </div>
                <div class="w-2/12 bg-white p-3 shadow-sm text-center">
                    <p class="font-medium text-gray-500">Status</p>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs sm:text-sm font-medium
                        {{ $pedido->status == 'pendente' ? 'bg-yellow-100 text-yellow-800' : '' }}
                        {{ $pedido->status == 'aceito' ? 'bg-green-100 text-green-800' : '' }}
                        {{ $pedido->status == 'rejeitado' ? 'bg-red-100 text-red-800' : '' }}
                        {{ $pedido->status == 'em_troca' ? 'bg-blue-100 text-blue-800' : '' }}
                        {{ $pedido->status == 'em_transito' ? 'bg-indigo-100 text-indigo-800' : '' }}
                        {{ $pedido->status == 'cancelado' ? 'bg-gray-100 text-gray-800' : '' }} {{-- Adicionado status 'cancelado' --}}
                        {{ $pedido->status == 'concluido' ? 'bg-purple-100 text-purple-800' : '' }}"> {{-- Adicionado status 'concluído' --}}
                        {{ ucfirst(str_replace('_', ' ', $pedido->status)) }} {{-- Ajustado para formatar "em_troca" para "Em Troca" --}}
                    </span>
                </div>
                <div class="w-3/12 bg-white p-3 shadow-sm text-center">
                    <p class="font-medium text-gray-500">Pedido em:</p>
                    {{-- Usar o método format ou localeFormat do Carbon diretamente no objeto DateTime ou Carbon --}}
                    <p class="text-red-600 font-medium">
                        {{ $pedido->created_at ? $pedido->created_at->format('d/m/Y H:i') : 'N/A' }}
                    </p>
                </div>
                <div class="w-3/12 bg-white p-3 shadow-sm text-center">
                    <p class="font-medium text-gray-500">Última Atualização:</p> {{-- Renomeado para mais clareza --}}
                    <p class="text-red-600 font-medium">
                        {{ $pedido->updated_at ? $pedido->updated_at->format('d/m/Y H:i') : 'N/A' }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Medicamento -->
        <div class="p-4 sm:p-6 border-b">
            <h3 class="text-lg sm:text-xl font-semibold text-green-800 mb-3 flex items-center">
                <i class="fas fa-pills mr-2 text-green-600"></i> Medicamento
            </h3>
            <div class="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">
                <div class="w-full lg:w-32 h-32 flex items-center justify-center overflow-hidden bg-gray-100 flex-shrink-0">
                    @if ($pedido->medicamento->imagens->first())
                        <img src="{{ asset('storage/' . $pedido->medicamento->imagens->first()->path) }}"
                             class="object-contain w-full h-full"
                             alt="Imagem do medicamento"
                             loading="lazy">
                    @else
                        <img src="{{ asset('assets/images/sem-imagem.png') }}"
                             class="object-contain w-full h-full"
                             alt="Sem imagem"
                             loading="lazy">
                    @endif
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full">
                    <div class="bg-gray-50 p-3 rounded-md">
                        <p class="text-sm font-medium text-gray-500">Nome</p>

                        <p class="text-gray-800">
                            @if(auth()->user()->hasPermission('visualizar_medicamentos') )
                                <a href="{{ route('restrito.user.medicamentos.show', ['medicamento'=>$pedido->medicamento->slug]) }}"
                                class="text-green-600 hover:text-green-800 hover:underline transition">
                                {{ $pedido->medicamento->name }}
                                </a>
                            @else
                                {{ $pedido->medicamento->name }}
                            @endif
                                            </p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-md">
                        <p class="text-sm font-medium text-gray-500">Dosagem</p>
                        <p class="text-gray-800">{{ $pedido->medicamento->dosage }}</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-md">
                        <p class="text-sm font-medium text-gray-500">Laboratório</p>
                        <p class="text-gray-800">{{ $pedido->medicamento->laboratorio }}</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-md">
                        <p class="text-sm font-medium text-gray-500">Validade</p>
                        <p class="text-red-600 font-medium">
                            {{ \Carbon\Carbon::parse($pedido->medicamento->validade)->format('d/m/Y') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Usuários Envolvidos -->
        <div class="p-4 sm:p-6">
            <h3 class="text-lg sm:text-xl font-semibold text-green-800 mb-4 flex items-center">
                <i class="fas fa-users mr-2 text-green-600"></i> Partes Envolvidas
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                <!-- Dono do Medicamento -->
                <div class="bg-gray-50 p-4 sm:p-5">
                    <h4 class="text-md sm:text-lg font-medium text-gray-800 mb-3 flex text-center items-center">
                        <i class="fas fa-user-tag mr-2 text-green-400"></i> Ofertante do Medicamento
                    </h4>
                    <div class="flex items-start gap-3 sm:gap-4">
                        <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 rounded-full overflow-hidden flex-shrink-0">
                            @if ($pedido->medicamento->user->profile_photo)
                                <img src="{{ asset('storage/' . $pedido->medicamento->user->profile_photo) }}"
                                     class="object-cover w-full h-full"
                                     alt="Foto do dono"
                                     loading="lazy">
                            @else
                                <img src="{{ asset('assets/images/sem-imagem.png') }}"
                                     class="object-cover w-full h-full"
                                     alt="Sem imagem"
                                     loading="lazy">
                            @endif
                        </div>
                        <div class="space-y-1.5 text-sm sm:text-base">
                            <p><span class="font-medium text-gray-600">Nome:</span> {{ $pedido->medicamento->user->name }}</p>
                            <p><span class="font-medium text-gray-600">Email:</span> {{ $pedido->medicamento->user->email }}</p>
                            <p class="flex items-center">
                                <span class="font-medium text-gray-600">Celular:</span>
                                <a href="https://wa.me/55{{ preg_replace('/[^0-9]/', '', $pedido->medicamento->user->telefone) }}"
                                   target="_blank"
                                   class="ml-1 text-green-600 hover:text-green-700">
                                    <i class="fab fa-whatsapp mr-1"></i>{{ $pedido->medicamento->user->formatted_telefone }}
                                </a>
                            </p>
                            @if ($pedido->medicamento->user->enderecos->isNotEmpty())
                                @php
                                    $enderecoDono = $pedido->medicamento->user->enderecos->first();
                                    $enderecoCompletoDono = "{$enderecoDono->logradouro}, {$enderecoDono->numero}" .
                                        ($enderecoDono->complemento ? ", {$enderecoDono->complemento}" : "") .
                                        ", {$enderecoDono->bairro}, {$enderecoDono->cidade} - {$enderecoDono->estado}, CEP: {$enderecoDono->cep}";
                                @endphp
                                <div class="mt-2">
                                    <p class="font-medium text-gray-600">Endereço:</p>
                                    <p class="text-gray-800 text-sm">{{ $enderecoCompletoDono }}</p>
                                    <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($enderecoCompletoDono) }}"
                                       target="_blank"
                                       class="inline-flex items-center mt-1 text-blue-500 hover:text-blue-700 text-sm">
                                        <i class="fas fa-map-marker-alt mr-1"></i> Ver no mapa
                                    </a>
                                </div>
                            @else
                                <p><span class="font-medium text-gray-600">Endereço:</span> Não informado</p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Solicitante -->
                <div class="bg-gray-50 p-4 sm:p-5">
                    <h4 class="text-md sm:text-lg font-medium text-gray-800 mb-3 flex items-center">
                        <i class="fas fa-user-clock mr-2 text-green-400"></i> Solicitante
                    </h4>
                    <div class="flex items-start gap-3 sm:gap-4">
                        <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 rounded-full overflow-hidden flex-shrink-0">
                            @if ($pedido->requester->profile_photo)
                                <img src="{{ asset('storage/' . $pedido->requester->profile_photo) }}"
                                     class="object-cover w-full h-full"
                                     alt="Foto do solicitante"
                                     loading="lazy">
                            @else
                                <img src="{{ asset('assets/images/sem-imagem.png') }}"
                                     class="object-cover w-full h-full"
                                     alt="Sem imagem"
                                     loading="lazy">
                            @endif
                        </div>
                        <div class="space-y-1.5 text-sm sm:text-base">
                            <p><span class="font-medium text-gray-600">Nome:</span> {{ $pedido->requester->name }}</p>
                            <p><span class="font-medium text-gray-600">Email:</span> {{ $pedido->requester->email }}</p>
                            <p class="flex items-center">
                                <span class="font-medium text-gray-600">Celular:</span>
                                <a href="https://wa.me/55{{ preg_replace('/[^0-9]/', '', $pedido->requester->telefone) }}"
                                   target="_blank"
                                   class="ml-1 text-green-600 hover:text-green-700">
                                    <i class="fab fa-whatsapp mr-1"></i>{{ $pedido->requester->formatted_telefone }}
                                </a>
                            </p>
                            @if ($pedido->requester->enderecos->isNotEmpty())
                                @php
                                    $enderecoSolicitante = $pedido->requester->enderecos->first();
                                    $enderecoCompletoSolicitante = "{$enderecoSolicitante->logradouro}, {$enderecoSolicitante->numero}" .
                                        ($enderecoSolicitante->complemento ? ", {$enderecoSolicitante->complemento}" : "") .
                                        ", {$enderecoSolicitante->bairro}, {$enderecoSolicitante->cidade} - {$enderecoSolicitante->estado}, CEP: {$enderecoSolicitante->cep}";
                                @endphp
                                <div class="mt-2">
                                    <p class="font-medium text-gray-600">Endereço:</p>
                                    <p class="text-gray-800 text-sm">{{ $enderecoCompletoSolicitante }}</p>
                                    <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($enderecoCompletoSolicitante) }}"
                                       target="_blank"
                                       class="inline-flex items-center mt-1 text-blue-500 hover:text-blue-700 text-sm">
                                        <i class="fas fa-map-marker-alt mr-1"></i> Ver no mapa
                                    </a>
                                </div>
                            @else
                                <p><span class="font-medium text-gray-600">Endereço:</span> Não informado</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botões de Ação -->
        <div class="bg-gray-50 px-4 sm:px-6 py-4 border-t ">
            <div class="flex flex-col sm:flex-row justify-center gap-3">
                <a href="{{ url()->previous() }}"
                class="w-1/5 px-4 sm:px-6 py-2 bg-gray-600 hover:bg-gray-700 text-white  transition flex items-center justify-center gap-2">
                    <i class="fas fa-arrow-left mr-1"></i> Voltar
                </a>
                <!-- Botão Entregar -->
                @if ($pedido->status == 'aceito')
                    <button type="button" onclick="confirmarEntrega('{{ $pedido->codigo_troca }}')"
                            class="w-1/5 px-4 sm:px-6 py-2 bg-green-600 hover:bg-green-700 text-white transition flex items-center justify-center gap-2">
                            <i class="ri-motorbike-line mr-1 text-xl"></i> Pegar Entrega
                    </button>

                    <form action="{{ route('restrito.motoboy.pegar-entrega', $pedido->codigo_troca) }}"
                        method="POST" id="pegarEntregaForm-{{ $pedido->codigo_troca }}" class="hidden">
                        @csrf
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Inclua a biblioteca SweetAlert2 no seu layout principal ou aqui -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function confirmarEntrega(codigoTroca) {
    Swal.fire({
        title: 'Confirmar entrega',
        text: "Você está prestes a assumir a responsabilidade por esta entrega. Deseja continuar?",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sim, pegar entrega',
        cancelButtonText: 'Cancelar',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById(`pegarEntregaForm-${codigoTroca}`).submit();
        }
    });
}
</script>
@endsection