@extends('layouts.app')

@section('content')
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    <i class="fa fa-list-alt text-info me-2"></i>Kardex / Extractos
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Consulta el estado de cuenta detallado y el historial de pagos por cliente.
                </h2>
            </div>
        </div>
    </div>
</div>

<div class="content">
    {{-- Notificaciones --}}
    @if(session('error'))
        <div class="alert alert-danger d-flex align-items-center" role="alert">
            <i class="fa fa-exclamation-circle me-2"></i>
            <p class="mb-0">{{ session('error') }}</p>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="block block-rounded">
        <div class="block-header block-header-default">
            <h3 class="block-title">Buscador de Cuentas</h3>
        </div>
        
        <div class="block-content block-content-full border-bottom bg-body-light">
            <form method="GET" action="{{ route('extractos.index') }}">
                <div class="row g-3 justify-content-center">
                    <div class="col-md-8">
                        <div class="input-group">
                            {{-- Selector de Criterio --}}
                            <select class="form-select form-select-alt fw-semibold" name="buscax" style="max-width: 130px;">
                                <option value="cliente" {{ request('buscax','cliente') === 'cliente' ? 'selected' : '' }}>👤 Cliente</option>
                                <option value="contrato" {{ request('buscax') === 'contrato' ? 'selected' : '' }}>📄 Contrato</option>
                                <option value="lote" {{ request('buscax') === 'lote' ? 'selected' : '' }}>📍 Lote</option>
                            </select>

                            {{-- Input de Búsqueda --}}
                            <input type="text" name="buscar" class="form-control form-control-alt"
                                   placeholder="Nombre, CI, Código o Referencia..."
                                   value="{{ request('buscar') }}" autofocus>

                            {{-- Botones --}}
                            <button type="submit" class="btn btn-info text-white px-4">
                                <i class="fa fa-search me-1"></i> Consultar
                            </button>
                            <a href="{{ route('extractos.index') }}" class="btn btn-alt-secondary" title="Limpiar búsqueda">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                        <div class="form-text fs-xs text-muted ms-1">
                            Sugerencia: Puedes buscar por ID de sistema para resultados exactos.
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="block-content">
            @if($clientes !== null)
                @if($clientes->total() === 0)
                    <div class="alert alert-warning text-center my-3" role="alert">
                        <i class="fa fa-exclamation-triangle me-1"></i>
                        No se encontraron resultados para "<strong>{{ request('buscar') }}</strong>".
                    </div>
                @else
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="fs-sm text-uppercase fw-bold text-muted mb-0">
                            {{ $clientes->total() }} Clientes Encontrados
                        </h4>
                        <span class="fs-xs text-muted">Haga clic en un registro para abrir el extracto</span>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-vcenter table-hover fs-sm">
                            <thead class="bg-body-dark text-uppercase fs-xs">
                                <tr>
                                    <th class="text-center" style="width: 100px;">Código</th>
                                    <th>Nombre Completo del Cliente</th>
                                    <th style="width: 200px;">Documento (CI)</th>
                                    <th class="text-center" style="width: 80px;">Acción</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($clientes as $cli)
                                <tr style="cursor: pointer;" onclick="window.location='{{ route('extractos.show', $cli->id) }}'">
                                    <td class="text-center fw-bold">
                                        <span class="text-info">{{ $cli->id }}</span>
                                    </td>
                                    <td class="fw-semibold text-dark">
                                        {{ $cli->nombre }}
                                    </td>
                                    <td>
                                        <i class="far fa-id-card text-muted me-1"></i> {{ $cli->ci }}
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('extractos.show', $cli->id) }}"
                                           class="btn btn-sm btn-alt-info"
                                           data-bs-toggle="tooltip" title="Ver Extracto">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="py-3">
                        {{ $clientes->appends(request()->all())->links('pagination::bootstrap-5') }}
                    </div>
                @endif
            @else
                {{-- Estado Inicial / Vacío --}}
                <div class="text-center py-6">
                    <div class="item item-circle bg-info-light text-info mx-auto mb-3">
                        <i class="fa fa-search fa-2x"></i>
                    </div>
                    <h3 class="h5 fw-bold mb-1">Inicie una búsqueda</h3>
                    <p class="text-muted mx-auto" style="max-width: 400px;">
                        Ingrese los datos del cliente, contrato o lote en la parte superior para visualizar el historial de movimientos financieros.
                    </p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection