@extends('layouts.motoboy_dashboard')

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

    <!-- Navegação -->
    <div class="bg-white shadow-md rounded-lg p-4 my-6 flex flex-col sm:flex-row gap-4 justify-between">
        <a href="{{ url()->previous() }}"
           class="bg-gray-700 text-white h-10 px-4 rounded-md hover:bg-gray-800 transition flex items-center justify-center w-full sm:w-auto">
            <i class="fa-solid fa-arrow-left mr-2"></i> Voltar
        </a>

        <a href="{{ route('restrito.motoboy.pedido-trocas') }}"
           class="bg-blue-600 text-white h-10 px-4 rounded-md hover:bg-blue-700 transition flex items-center justify-center w-full sm:w-auto">
           <i class="ri-search-line mr-2"></i> Pedidos de Troca
        </a>
    </div>

    <!-- Painel Principal -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Informações do Medicamento -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden lg:col-span-2">
            <div class="px-6 py-5 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-pills text-blue-500 mr-2"></i> Medicamento
                </h2>
            </div>
            <div class="p-6 flex items-start">
                <div class="h-20 w-20 overflow-hidden bg-gray-100 rounded-lg">
                    @if($entrega->pedidoTroca->medicamento->imagens->first())
                        <img src="{{ asset('storage/'.$entrega->pedidoTroca->medicamento->imagens->first()->path) }}"
                             class="h-full w-full object-contain">
                    @else
                        <div class="h-full w-full flex items-center justify-center text-gray-400">
                            <i class="fas fa-image text-2xl"></i>
                        </div>
                    @endif
                </div>
                <div class="ml-4 text-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800">
                        {{ $entrega->pedidoTroca->medicamento->name }}
                    </h3>
                    <p class="mt-1"><span class="font-medium">Dosagem:</span> {{ $entrega->pedidoTroca->medicamento->dosage }}</p>
                    <p><span class="font-medium">Laboratório:</span> {{ $entrega->pedidoTroca->medicamento->laboratorio }}</p>
                    <p><span class="font-medium">Validade:</span> <span class="text-red-600">{{ \Carbon\Carbon::parse($entrega->pedidoTroca->medicamento->validade)->format('d/m/Y') }}</span></p>
                    <p><span class="font-medium">Quantidade:</span> {{ $entrega->pedidoTroca->medicamento->remaining_quantity }}</p>
                </div>
            </div>
        </div>

        <!-- Informações da Entrega -->
        <div class="bg-white shadow-lg rounded-lg">
            <div class="px-6 py-5 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i> Informações da Entrega
                </h2>
            </div>
            <div class="p-6 space-y-4 text-gray-700">
                <p><span class="font-medium">Data do Pedido:</span> {{ \Carbon\Carbon::parse($entrega->created_at)->format('d/m/Y H:i') }}</p>
                <p><span class="font-medium">Distância Estimada:</span> {{ \App\Helpers\EntregaHelper::calcularDistancia($entrega->pedidoTroca->requester->enderecos->first()->cep, $entrega->pedidoTroca->medicamento->user->enderecos->first()->cep) }}</p>
                <p><span class="font-medium">Motoboy Responsável:</span> {{ $entrega->motoboy?->name ?? 'Nenhum motoboy atribuído' }}</p>
            </div>
        </div>

        <!-- Endereços -->
        <div class="bg-white shadow-lg rounded-lg">
            <div class="px-6 py-5 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-map-marker-alt text-red-500 mr-2"></i> Endereços
                </h2>
            </div>
            <div class="p-6 space-y-6 text-gray-700">
                <div>
                    <h3 class="text-sm font-medium text-gray-500"><i class="fas fa-arrow-up text-green-500 mr-2"></i> Retirada</h3>
                    <p class="font-medium">{{ $entrega->pedidoTroca->medicamento->user->name }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-500"><i class="fas fa-arrow-down text-orange-500 mr-2"></i> Entrega</h3>
                    <p class="font-medium">{{ $entrega->pedidoTroca->requester->name }}</p>
                </div>
            </div>
        </div>

        <!-- Ações -->
        <div class="bg-white shadow-lg rounded-lg lg:col-span-3 p-6 text-right">
            @if($entrega->pedidoTroca->status == 'aceito')
                <form action="{{ route('restrito.motoboy.pegar-entrega',['codigo_troca'=> $entrega->pedidoTroca->codigo_troca]) }}" method="POST">
                    @csrf
                    <button type="submit" class="bg-orange-600 text-white px-4 py-2 rounded-md hover:bg-orange-700 transition">
                        <i class="fas fa-play mr-2"></i> Iniciar Entrega
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>
@endsection