@extends('admin.layout')
@section('title', 'Clientes - Admin IMOZA')
@section('header', 'Clientes')

@section('content')
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
    <form method="GET" class="flex gap-2 w-full sm:w-auto">
        <input type="text" name="q" value="{{ request('q') }}" placeholder="Buscar clientes..." class="px-4 py-2 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none text-sm w-full sm:w-64">
        <button class="px-4 py-2 bg-imoza-blue-dark text-white rounded-xl text-sm font-semibold hover:bg-imoza-blue-bright transition-colors">Buscar</button>
    </form>
    <button onclick="document.getElementById('modal-create').classList.remove('hidden')" class="px-4 py-2 bg-imoza-blue-dark text-white rounded-xl text-sm font-semibold hover:bg-imoza-blue-bright transition-colors whitespace-nowrap">+ Nuevo Cliente</button>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-100">
            <tr>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Nombre</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Email</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Teléfono</th>
                <th class="text-center px-6 py-3 font-semibold text-gray-600">Acciones</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($customers as $customer)
            <tr class="hover:bg-gray-50/50">
                <td class="px-6 py-4 font-semibold text-imoza-blue-dark">{{ $customer->name }}</td>
                <td class="px-6 py-4 text-gray-500">{{ $customer->email ?: '-' }}</td>
                <td class="px-6 py-4 text-gray-500">{{ $customer->phone ?: '-' }}</td>
                <td class="px-6 py-4 text-center">
                    <div class="flex items-center justify-center gap-2">
                        <button onclick="document.getElementById('modal-edit-{{ $customer->id }}').classList.remove('hidden')" class="text-xs font-semibold text-imoza-blue-bright hover:text-imoza-blue-dark">Editar</button>
                        <form method="POST" action="{{ route('admin.customers.destroy', $customer) }}" onsubmit="return confirm('¿Eliminar?')">
                            @csrf @method('DELETE')
                            <button class="text-xs font-semibold text-red-400 hover:text-red-600">Eliminar</button>
                        </form>
                    </div>
                </td>
            </tr>

            <div id="modal-edit-{{ $customer->id }}" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
                <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md">
                    <h3 class="font-bold text-lg text-imoza-blue-dark mb-4">Editar Cliente</h3>
                    <form method="POST" action="{{ route('admin.customers.update', $customer) }}" class="space-y-4">
                        @csrf @method('PUT')
                        <input type="text" name="name" value="{{ $customer->name }}" placeholder="Nombre" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
                        <input type="email" name="email" value="{{ $customer->email }}" placeholder="Email" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
                        <input type="text" name="phone" value="{{ $customer->phone }}" placeholder="Teléfono" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
                        <textarea name="address" rows="2" placeholder="Dirección" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">{{ $customer->address }}</textarea>
                        <div class="flex gap-2">
                            <button type="submit" class="flex-1 bg-imoza-blue-dark text-white py-2 rounded-xl font-semibold">Guardar</button>
                            <button type="button" onclick="document.getElementById('modal-edit-{{ $customer->id }}').classList.add('hidden')" class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-xl font-semibold">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
            @empty
            <tr><td colspan="4" class="px-6 py-8 text-center text-gray-400">No hay clientes registrados.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="px-6 py-4 border-t border-gray-100">{{ $customers->links() }}</div>
</div>

<div id="modal-create" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md">
        <h3 class="font-bold text-lg text-imoza-blue-dark mb-4">Nuevo Cliente</h3>
        <form method="POST" action="{{ route('admin.customers.store') }}" class="space-y-4">
            @csrf
            <input type="text" name="name" placeholder="Nombre *" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
            <input type="email" name="email" placeholder="Email" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
            <input type="text" name="phone" placeholder="Teléfono" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
            <textarea name="address" rows="2" placeholder="Dirección" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none"></textarea>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 bg-imoza-blue-dark text-white py-2 rounded-xl font-semibold">Crear</button>
                <button type="button" onclick="document.getElementById('modal-create').classList.add('hidden')" class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-xl font-semibold">Cancelar</button>
            </div>
        </form>
    </div>
</div>
@endsection