@extends('layouts.user_dashboard')

@section('content')
<div class="flex flex-col md:flex-row justify-between items-center my-2 mt-6 p-4 bg-white shadow-md">

    <h1 class="text-2xl font-bold text-gray-800">Detalhes do Pedido de Troca</h1>
    <div class="flex flex-wrap gap-4 mt-4 md:mt-0">
        <div class="flex gap-2">
            <label class="font-bold">Usuário:</label>
            <span class="text-gray-700">{{ auth()->user()->name }}</span>
        </div>
        <div class="flex gap-2">
            <label class="font-bold">Perfil:</label>
            <span class="text-gray-700">
                {{ auth()->user()->roles()->first()->name ?? 'Sem perfil' }}
            </span>
        </div>
    </div>
</div>

<div class="max-w-5xl mx-auto mt-10 p-6 bg-white shadow-lg">

    {{-- Mensagens de sucesso e erro --}}
    @if(session('success'))
        <div class="bg-green-200 text-green-800 p-3 mb-4">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="bg-red-200 text-red-800 p-3 mb-4">
            <ul>
                @foreach($errors->all() as $error)
                    <li>• {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif


    <div class="bg-gray-100 p-6">
        <h3 class="text-xl text-centerfont-semibold mb-4">Informações do Pedido</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

            <!-- Pedido Troca-->
            <div class="bg-white p-4 shadow-md space-y-3">
                <p><strong>Código Troca:</strong> {{ $pedidoTroca->codigo_troca }}</p>
                <p><strong>Status:</strong>
                    <span class="px-3 py-1 text-sm rounded-full
                        @if($pedidoTroca->status == 'pendente') bg-yellow-200 text-yellow-800
                        @elseif($pedidoTroca->status == 'aceito') bg-green-200 text-green-800
                        @elseif($pedidoTroca->status == 'rejeitado') bg-red-200 text-red-800
                        @endif">
                        {{ ucfirst($pedidoTroca->status) }}
                    </span>
                </p>
                <p class="text-red-600"><strong>Data do Pedido:</strong> {{ $pedidoTroca->created_at->format('d/m/Y H:i') }}</p>
                <p><strong>Pedido há:</strong> {{ $pedidoTroca->created_at->diffForHumans() }}</p>
            </div>

            <!-- SOLICITANTE -->
            <div class="flex flex-col lg:flex-row items-center gap-4 bg-white p-4 shadow-md">

                <div class="w-24 h-24 bg-gray-200 flex items-center justify-center overflow-hidden">
                    @if($pedidoTroca->requester->profile_photo)
                        <img src="{{ asset('storage/' . $pedidoTroca->requester->profile_photo) }}" class="object-cover w-full h-full">
                    @else
                        <img src="{{ asset('assets/images/sem-imagem.png') }}" class="object-cover w-full h-full">
                    @endif
                </div>


                <div class="space-y-3">
                    <p><strong>Solicitante:</strong> {{ $pedidoTroca->requester->name }}</p>
                    <p><strong>Email:</strong> {{ $pedidoTroca->requester->email }}</p>
                    <p><strong>UF:</strong> {{ $pedidoTroca->requester->enderecos->first()->uf }}</p>
                    <p><strong>Celular:</strong> <i class="fa-brands fa-whatsapp mr-2"></i>{{ $pedidoTroca->requester->formatted_telefone }}</p>
                </div>


            </div>

        </div>
    </div>

    <div class="bg-white p-6 mt-6 shadow-md">
        <h3 class="text-xl font-semibold mb-4">Medicamento Requerido na Troca</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {{-- Medicamento --}}
            <div class="flex flex-col lg:flex-row items-center gap-4 p-4 bg-gray-100 shadow-sm">
                <div class=" h-auto flex items-center justify-center overflow-hidden">
                    @if($pedidoTroca->medicamento->imagens)
                    <div class="swiper w-40 h-60 relative" id="swiper-{{ $pedidoTroca->medicamento->id }}">
                        <div class="swiper-wrapper">
                            @foreach($pedidoTroca->medicamento->imagens as $imagem)
                                <div class="swiper-slide">
                                    <img src="{{ asset('storage/' . $imagem->path) }}"
                                         alt="{{ $pedidoTroca->medicamento->name }}"
                                         class="w-full h-full object-contain z-0">
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-prev text-gray-500"></div>
                        <div class="swiper-button-next text-gray-500"></div>
                        <div class="swiper-pagination"></div>
                    </div>

                    @else
                        <img src="{{ asset('assets/images/sem-imagem.png') }}" class="object-cover w-full h-full">
                    @endif
                </div>
                <div class="space-y-3">
                    <p><strong>Nome:</strong> {{ $pedidoTroca->medicamento->name }}</p>
                    <p><strong>Dosagem:</strong> {{ $pedidoTroca->medicamento->dosage }}</p>
                    <p><strong>Laboratório:</strong> {{ $pedidoTroca->medicamento->laboratorio }}</p>


                    <p><strong class="text-red-600">Validade:</strong> <label class="text-red-600">{{ \Carbon\Carbon::parse($pedidoTroca->medicamento->validade)->format('d/m/Y') }}</label></p>
                </div>
            </div>

            {{-- Dono do Medicamento --}}
            <div class="flex flex-col lg:flex-row items-center gap-4 p-4 bg-gray-100 shadow-sm">
                <div class="w-24 h-24 bg-gray-200 flex items-center justify-center overflow-hidden ">
                    @if($pedidoTroca->medicamento->user->profile_photo)
                        <img src="{{ asset('storage/' . $pedidoTroca->medicamento->user->profile_photo) }}" class="object-cover w-full h-full">
                    @else
                        <img src="{{ asset('assets/images/sem-imagem.png') }}" class="object-cover w-full h-full">
                    @endif
                </div>


                <div class="space-y-3">
                    <p><strong>Proprietário(a):</strong> {{ $pedidoTroca->medicamento->user->name }}</p>
                    <p><strong>Email:</strong> {{ $pedidoTroca->medicamento->user->email }}</p>
                    <p><strong>UF:</strong> {{ $pedidoTroca->medicamento->user->enderecos->first()->uf }}</p>
                    <p><strong>Celular:</strong> <i class="fa-brands fa-whatsapp mr-2"></i>{{ $pedidoTroca->medicamento->user->formatted_telefone }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col lg:flex-row justify-center mt-6 gap-4">
        <a href="{{ url()->previous() }}" class="px-4 py-2 text-center bg-gray-700 text-white hover:bg-gray-800 transition">
            <i class="fa-solid fa-arrow-left mr-2"></i>Voltar
        </a>
        @if($pedidoTroca->status == 'pendente')
            <button type="button" onclick="openModal('aceito')" class="px-4 py-2 bg-green-500 text-white hover:bg-green-600 transition">
                <i class="fa-solid fa-check mr-2"></i>Aceitar
            </button>

            <button type="button" onclick="openModal('rejeitado')" class="px-4 py-2 bg-red-500 text-white hover:bg-red-600 transition">
                <i class="fa-solid fa-xmark mr-2"></i>Rejeitar
            </button>
        @endif
    </div>

</div>

@endsection

<div id="confirmModal" class="fixed inset-0 flex z-100 items-center justify-center bg-gray-900 bg-opacity-50 hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg text-center">
        <h2 class="text-lg font-bold mb-4">Confirmar Ação</h2>
        <p id="modalMessage">Tem certeza que deseja realizar esta ação?</p>

        <div class="mt-4 flex justify-center gap-4">
            <form id="confirmationForm" action="" method="POST">
                @csrf
                <input type="hidden" name="status" id="statusField">
                <button type="submit" class="px-4 py-2 bg-green-500 text-white hover:bg-green-600 transition">Sim</button>
            </form>
            <button onclick="closeModal()" class="px-4 py-2 bg-gray-500 text-white hover:bg-gray-600 transition">Cancelar</button>
        </div>
    </div>
</div>

<script>
    function openModal(status) {
        document.getElementById('confirmModal').classList.remove('hidden');

        if(status === 'aceito') {
            document.getElementById('modalMessage').textContent = 'Tem certeza que deseja aceitar esta troca?';
            document.getElementById('confirmationForm').action = '{{ route('restrito.user.troca.aceitar', $pedidoTroca->codigo_troca) }}';
            document.getElementById('statusField').value = 'aceito';
        } else {
            document.getElementById('modalMessage').textContent = 'Tem certeza que deseja rejeitar esta troca?';
            document.getElementById('confirmationForm').action = '{{ route('restrito.user.troca.rejeitar', $pedidoTroca->codigo_troca) }}';
            document.getElementById('statusField').value = 'rejeitado';
        }
    }

    function closeModal() {
        document.getElementById('confirmModal').classList.add('hidden');
    }
</script>