@extends('layouts.app')

@section('title', 'Clientes')

@section('content')
<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-2xl font-bold text-white">Gestión de Clientes</h2>
            <p class="text-gray-400 text-sm mt-1">Administra la información de tus clientes</p>
        </div>
        <a href="{{ route('clientes.create') }}" class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary hover:bg-primary-dark text-background-dark font-bold transition-all shadow-[0_0_15px_rgba(19,236,91,0.3)]">
            <span class="material-symbols-outlined text-[18px]">add</span>
            <span>Nuevo Cliente</span>
        </a>
    </div>

    <div class="bg-surface-dark border border-[#23482f] rounded-xl p-6">
        <div class="flex flex-col gap-4">
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left text-gray-400">
                    <thead class="text-xs text-white uppercase bg-[#102216] border-b border-[#23482f]">
                        <tr>
                            <th scope="col" class="px-4 py-3">Código</th>
                            <th scope="col" class="px-4 py-3">Cliente</th>
                            <th scope="col" class="px-4 py-3">DNI</th>
                            <th scope="col" class="px-4 py-3">Teléfono</th>
                            <th scope="col" class="px-4 py-3">Plan</th>
                            <th scope="col" class="px-4 py-3">Estado</th>
                            <th scope="col" class="px-4 py-3">Monto Pago</th>
                            <th scope="col" class="px-4 py-3">Estado Pago</th>
                            <th scope="col" class="px-4 py-3">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($clientes as $cliente)
                        <tr class="border-b border-[#23482f] hover:bg-[#1a3524]">
                            <td class="px-4 py-3 font-medium text-white">{{ $cliente->codigo }}</td>
                            <td class="px-4 py-3 text-white">{{ $cliente->cliente }}</td>
                            <td class="px-4 py-3 text-gray-300">{{ $cliente->dni }}</td>
                            <td class="px-4 py-3 text-gray-300">{{ $cliente->numero }}</td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs font-bold rounded-full bg-primary/10 text-primary">
                                    {{ $cliente->plan }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                @if($cliente->estado === 'Activo')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-green-500/10 text-green-400">
                                        Activo
                                    </span>
                                @elseif($cliente->estado === 'Corte')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-red-500/10 text-red-400">
                                        Corte
                                    </span>
                                @elseif($cliente->estado === 'Suspendido')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-yellow-500/10 text-yellow-400">
                                        Suspendido
                                    </span>
                                @elseif($cliente->estado === 'Baja')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-gray-500/10 text-gray-400">
                                        Baja
                                    </span>
                                @else
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-gray-500/10 text-gray-400">
                                        {{ $cliente->estado }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-white">S/ {{ number_format($cliente->monto_pago ?? 0, 2) }}</td>
                            <td class="px-4 py-3">
                                @if($cliente->estado_pago === 'Pagado')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-green-500/10 text-green-400">
                                        Pagado
                                    </span>
                                @elseif($cliente->estado_pago === 'Pendiente')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-yellow-500/10 text-yellow-400">
                                        Pendiente
                                    </span>
                                @elseif($cliente->estado_pago === 'Vencido')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-red-500/10 text-red-400">
                                        Vencido
                                    </span>
                                @else
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-gray-500/10 text-gray-400">
                                        {{ $cliente->estado_pago }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 flex items-center gap-2">
                                <a href="{{ route('clientes.show', $cliente) }}" class="p-2 text-gray-400 hover:text-white hover:bg-[#23482f] rounded-lg transition-colors" title="Ver detalles">
                                    <span class="material-symbols-outlined text-[18px]">visibility</span>
                                </a>
                                <a href="{{ route('clientes.edit', $cliente) }}" class="p-2 text-gray-400 hover:text-white hover:bg-[#23482f] rounded-lg transition-colors" title="Editar">
                                    <span class="material-symbols-outlined text-[18px]">edit</span>
                                </a>
                                <form action="{{ route('clientes.destroy', $cliente) }}" method="POST" class="inline-block" onsubmit="return confirm('¿Estás seguro de eliminar este cliente?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-gray-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors" title="Eliminar">
                                        <span class="material-symbols-outlined text-[18px]">delete</span>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" class="px-4 py-8 text-center text-gray-400">
                                No se encontraron clientes registrados.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Paginación -->
            <div class="flex justify-between items-center">
                <div class="text-sm text-gray-400">
                    Mostrando {{ $clientes->firstItem() }} a {{ $clientes->lastItem() }} de {{ $clientes->total() }} resultados
                </div>
                <div class="pagination">
                    {{ $clientes->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection