@extends('layouts.app')

@section('title', 'Clientes')

@section('content')
    <div class="page-header page-header-row">
        <div>
            <p class="page-eyebrow">Contratos</p>
            <h1 class="page-title">Clientes</h1>
            <p class="page-subtitle">{{ $clientes->total() }} cliente(s) registrado(s).</p>
        </div>

        <a href="{{ route('clientes.create') }}" class="btn btn-primary">
            <x-icon name="plus" />
            Nuevo Cliente
        </a>
    </div>

    <x-card title="Filtros" icon="search">
        <form method="GET" action="{{ route('clientes.index') }}" class="filters-form">
            <div class="field field-span-3">
                <label for="q" class="field-label">Buscar</label>
                <input
                    type="text"
                    name="q"
                    id="q"
                    value="{{ request('q') }}"
                    class="field-input"
                    placeholder="Nombre, cédula, teléfono o email..."
                >
            </div>

            <div class="filters-actions-group">
                <span class="field-label field-label-ghost" aria-hidden="true">&nbsp;</span>
                <div class="filters-actions">
                    <button type="submit" class="btn btn-primary">Filtrar</button>
                    @if(request()->filled('q'))
                        <a href="{{ route('clientes.index') }}" class="btn btn-ghost">Limpiar</a>
                    @endif
                </div>
            </div>
        </form>
    </x-card>

    <x-card title="Resultados">
        @if($clientes->isEmpty())
            <div class="empty-state">
                <span class="empty-state-icon"><x-icon name="user-badge" /></span>
                <p class="empty-state-title">No hay clientes registrados</p>
                <p class="empty-state-text">Los clientes también se crean automáticamente al hacer un contrato nuevo.</p>
                <a href="{{ route('clientes.create') }}" class="btn btn-primary">
                    <x-icon name="plus" />
                    Nuevo Cliente
                </a>
            </div>
        @else
            <div class="table-scroll">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>C.C.</th>
                            <th>Teléfono</th>
                            <th>Email</th>
                            <th>Dirección</th>
                            <th class="actions-col">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($clientes as $cliente)
                            <tr>
                                <td>
                                    <div class="vehicle-cell">
                                        <span class="vehicle-cell-icon"><x-icon name="user-badge" /></span>
                                        <p class="vehicle-cell-title">{{ $cliente->nombre }}</p>
                                    </div>
                                </td>
                                <td>{{ $cliente->cc }}</td>
                                <td>{{ $cliente->telefono ?: '—' }}</td>
                                <td>{{ $cliente->email ?: '—' }}</td>
                                <td>{{ $cliente->direccion ?: '—' }}</td>
                                <td class="actions-col">
                                    <div class="row-actions">
                                        <a href="{{ route('clientes.edit', $cliente) }}" class="btn-icon-neutral" title="Editar Cliente" aria-label="Editar cliente">
                                            <x-icon name="pencil" />
                                        </a>
                                        <form
                                            action="{{ route('clientes.destroy', $cliente) }}"
                                            method="POST"
                                            data-confirm="¿Eliminar al cliente &quot;{{ $cliente->nombre }}&quot;? Esta acción no se puede deshacer."
                                        >
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-icon-danger" title="Eliminar Cliente" aria-label="Eliminar cliente">
                                                <x-icon name="trash" />
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{ $clientes->onEachSide(1)->links('vehiculos.partials.pagination') }}
        @endif
    </x-card>
@endsection