@extends('layouts.app')

@section('content')
<div x-data="{ openModal: false, deleteUrl: '' }">
    
    <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
        <div class="text-center md:text-left">
            <h1 class="text-3xl font-bold text-gray-800">Clientes</h1>
            <p class="text-gray-500 text-sm">Gerencie os dados dos usuários</p>
        </div>
        <a href="{{ route('pessoas.create') }}" class="w-full md:w-auto bg-nubank hover:bg-purple-800 text-white font-semibold py-3 px-6 rounded-xl transition-all shadow-md flex justify-center items-center gap-2">
            <i data-lucide="plus-circle" class="w-5 h-5"></i> Novo Cliente
        </a>
    </div>

    <!-- VERSÃO DESKTOP: TABELA (Oculta no Mobile) -->
    <div class="hidden md:block bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-400 uppercase">Nome</th>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-400 uppercase">E-mail</th>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-400 uppercase text-center">Ações</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($pessoas as $pessoa)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-5 font-semibold text-gray-700">{{ $pessoa->nome }}</td>
                    <td class="px-6 py-5 text-gray-500">{{ $pessoa->email }}</td>
                    <td class="px-6 py-5 text-center">
                        <div class="flex justify-center gap-2">
                            <a href="{{ route('pessoas.edit', $pessoa->id) }}" class="p-2 text-blue-600 hover:bg-blue-50 rounded-xl transition border border-blue-100"><i data-lucide="pencil" class="w-5 h-5"></i></a>
                            <button @click="openModal = true; deleteUrl = '{{ route('pessoas.destroy', $pessoa->id) }}'" class="p-2 text-red-500 hover:bg-red-50 rounded-xl transition border border-red-100"><i data-lucide="trash-2" class="w-5 h-5"></i></button>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- VERSÃO MOBILE: CARDS (Oculta no Desktop) -->
    <div class="md:hidden space-y-4">
        @foreach($pessoas as $pessoa)
        <div class="bg-white p-5 rounded-[24px] shadow-sm border border-gray-100 flex justify-between items-center">
            <div class="flex items-center gap-4">
                <!-- Ícone de Avatar Redondo (Estilo Nubank) -->
                <div class="w-12 h-12 bg-purple-50 rounded-full flex items-center justify-center text-nubank">
                    <i data-lucide="user" class="w-6 h-6"></i>
                </div>
                <div>
                    <h3 class="font-bold text-gray-800 text-base leading-tight">{{ $pessoa->nome }}</h3>
                    <p class="text-gray-500 text-xs">{{ $pessoa->email }}</p>
                </div>
            </div>

            <!-- Ações Diretas no Card -->
            <div class="flex gap-2">
                <a href="{{ route('pessoas.edit', $pessoa->id) }}" class="p-3 text-blue-600 bg-blue-50 rounded-2xl active:scale-95 transition">
                    <i data-lucide="pencil" class="w-5 h-5"></i>
                </a>
                <button @click="openModal = true; deleteUrl = '{{ route('pessoas.destroy', $pessoa->id) }}'" 
                        class="p-3 text-red-500 bg-red-50 rounded-2xl active:scale-95 transition">
                    <i data-lucide="trash-2" class="w-5 h-5"></i>
                </button>
            </div>
        </div>
        @endforeach
    </div>

    <!-- MODAL DE CONFIRMAÇÃO (Mantido igual) -->
    <div x-show="openModal" 
         class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-cloak>
        
        <div class="bg-white rounded-[32px] p-8 max-w-sm w-full shadow-2xl text-center">
            <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-red-600">
                <i data-lucide="alert-triangle" class="w-8 h-8"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Excluir cliente?</h3>
            <p class="text-gray-500 mb-8 text-sm">Esta ação não pode ser desfeita. O cliente perderá acesso à conta.</p>
            
            <div class="flex flex-col gap-3">
                <form :action="deleteUrl" method="POST">
                    @csrf @method('DELETE')
                    <button type="submit" class="w-full bg-red-500 text-white font-bold py-4 rounded-2xl active:bg-red-700 transition">
                        Sim, excluir agora
                    </button>
                </form>
                <button @click="openModal = false" class="w-full py-2 text-gray-400 font-semibold text-sm">Cancelar</button>
            </div>
        </div>
    </div>
</div>
@endsection