@extends('layouts.panel')

@section('content')
    <div class="row g-4">
        <div class="col-12">
            <div class="bg-light rounded h-100 p-4">
                <h6 class="mb-4">Respuestas del Formulario de Adquisición</h6>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <input class="form-control" type="text" id="nombre_search" placeholder="Buscar por nombre">
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="tipo_cliente_search">
                            <option value="">Todos los tipos</option>
                            <option value="Persona Física">Persona Física</option>
                            <option value="Persona Jurídica">Persona Jurídica</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input class="form-control" type="text" id="documento_search" placeholder="Buscar por documento">
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table" id="tabla-respuestas">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Tipo</th>
                                <th scope="col">Financiación</th>
                                <th scope="col">Nombre/Razón Social</th>
                                <th scope="col">Documento/RUC</th>
                                <th scope="col">Email</th>
                                <th scope="col">Teléfono</th>
                                <th scope="col">Fecha</th>
                                <th scope="col">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Los datos se cargan con DataTables -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    var table = $('#tabla-respuestas').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('panel.formularios.datos') }}",
        columns: [
            { data: 'id', name: 'id' },
            { data: 'tipo_cliente', name: 'tipo_cliente' },
            { data: 'tipo_financiacion', name: 'tipo_financiacion' },
            { data: 'nombre', name: 'nombre' },
            { data: 'documento', name: 'documento' },
            { data: 'email', name: 'email' },
            { data: 'telefono', name: 'telefono' },
            { data: 'fecha', name: 'fecha' },
            { data: 'acciones', name: 'acciones', orderable: false, searchable: false }
        ],
        order: [[0, 'desc']],
        dom: 'Brtip',
        buttons: [
            'csv', 'excel', 'pdf', 'print'
        ],
        pageLength: 50,
        responsive: true,
        language: {
            "lengthMenu": "Mostrando _MENU_ registros por página",
            "zeroRecords": "Sin resultados",
            "info": "Mostrando _PAGE_ de _PAGES_",
            "infoEmpty": "Sin registros",
            "infoFiltered": "(filtrado de _MAX_ registros totales)",
            "search": "Buscar",
            "paginate": {
                "next": "Siguiente",
                "previous": "Anterior"
            }
        }
    });

    // Búsqueda por nombre
    $('#nombre_search').on('keyup', function () {
        table
            .columns(2)
            .search(this.value)
            .draw();
    });

    // Filtro por tipo de cliente
    $('#tipo_cliente_search').on('change', function () {
        table
            .columns(1)
            .search(this.value)
            .draw();
    });

    // Búsqueda por documento
    $('#documento_search').on('keyup', function () {
        table
            .columns(3)
            .search(this.value)
            .draw();
    });
</script>
@endpush