@extends('adminlte::page')

@section('title', 'Pacientes')

@section('content_header')
    <h1>Pacientes</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{route('patients.searchpatients')}}" method="POST" class="form-search-patients">
                        <div class="row">
                            <div class="col-xl-2 col-lg-2">
                                <span class="">Carnet de Identidad</span>
                                <input type="text" name="ci_patient" class="form-control" >
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="">Apellido Paterno</span>
                                <input type="text" name="last_name_patient" class="form-control" >
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="">Apellido Materno</span>
                                <input type="text" name="mother_last_name_patient" class="form-control" >
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="">Nombres</span>
                                <input type="text" name="names_patient" class="form-control" >
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="">Número de Teléfonos</span>
                                <input type="text" name="phone_numbers_patient" class="form-control" >
                            </div>


                            <div class="col-xl-1 col-lg-1">
                                <br>
                                <input type="submit" class="btn btn-primary" value="Buscar" onclick="return false;" id="btnSearch">
                            </div>

                        </div>
                    </form>
                    <hr>
                    <div class="table-responsive-sm table-responsive-md">
                        <div class="" id="data-response">
                            <table class="table table-bordered table-striped table-hover table-list1" id="table-list1">
                                <thead class="thead-dark">
                                    <tr>
                                        <th width="50">N</th>
                                        <th>CI</th>
                                        <th>Paterno</th>
                                        <th>Materno</th>
                                        <th>Nombres</th>
                                        <th>Teléfonos</th>
                                        <th>Ventas</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
            </div>
            </div>
        </div>

    </div>
@stop

@section('css')

@stop

@section('js')
<script>
    $(document).ready(function(){
        $("#btnSearch").removeAttr("onclick");
        $(".form-search-patients").submit(function(e){
            e.preventDefault();
            let url = $(this).attr("action");
            let urlForm = $(this).attr("action");
            params = $(this).serializeArray();
            // $("#data-response").html('Buscando...');

            // $.post(url,params,function(datasearch){
            //     $("#data-response").html('').html(datasearch);

                // $(".table-list1").DataTable({
                //     "paging": true,
                //     "language": languageDataTable,
                //     dom: domDataTable,
                //     buttons: buttonsDataTable
                // });
                //Destroy existing DataTable instance
                if ( $.fn.DataTable.isDataTable( '.table-list1' ) ) {
                    $('.table-list1').DataTable().destroy();
                    $('.table-list1 tbody').empty(); // Limpia la tabla si es necesario
                    $('.table-list1').removeAttr('style');
                }
                $(".table-list1").DataTable({
                    autoWidth: false,
                    //Width 100%
                    width: 'auto',
                    //Ocultar cuadro de busqueda por defecto
                    searching: false,
                    processing: true,
                    serverSide: true,
                    buttons: buttonsDataTable,
                    dom: domDataTable,
                    ajax: {
                        url: urlForm,
                        type: 'POST',
                        data: function(d) {
                            d._token = '{{ csrf_token() }}';
                            // Puedes agregar aquí filtros personalizados si lo deseas
                            params.forEach(function(param) {
                                d[param.name] = param.value;
                            });
                        }
                    },
                    //Add show entries to two and three options
                    // lengthMenu: [1,2, 3, 10, 25, 50, 100],
                    columns: [
                        { data: 'i' },
                        { data: 'identity_document' },
                        { data: 'last_name' },
                        { data: 'mother_last_name' },
                        { data: 'names' },
                        { data: 'phone_numbers' },
                        { data: 'sales_count' },
                        { data: 'actions' },
                        // ...otros campos...
                    ],
                    columnDefs: [
                        { orderable: false, targets: 0,name: 'i' },
                        { orderable: true, targets: 1,name: 'identity_document' },
                    ],
                    order: [[1, 'asc']],
                    language: languageDataTable,
                });
            // });
        });
    })
</script>
@stop