@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<!-- Content -->
<h4 class="fw-bold py-2"><span class="text-muted fw-light">Clientes</span></h4>
<div class="card">
    <div class="card-header p-3">
        <div class="d-flex flex-row-reverse">
            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                <button type="button" class="btn btn-outline-secundary" onclick="crear();">
                    <i class='tf-icons bx bx-plus-medical'></i>
                </button>
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop1" type="button" class="btn btn-outline-secundary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Exportar
                    </button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" id="tabla-excel" onclick="$('.tabla_excel').trigger('click');">Excel</a>
                        <a class="dropdown-item" id="tabla-pdf" onclick="$('.tabla_pdf').trigger('click');">PDF</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <div class="table-responsive-xxl text-nowrap" style="min-height:700px;">
        <table id='tabla' class="table table-bordered border-secundary table-sm table-striped w-100">
            <thead class="table-light">
                <tr>
                    <th class="text-center">ID</th>
                    <th class="text-center">RUT</th>
                    <th class="text-center">Nombre Completo</th>
                    <th class="text-center">Email</th>
                    <th class="text-center">Teléfono</th>
                    <th class="text-center">Dirección</th>
                    <th class="text-center">Comuna</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
        </table>
   </div>
</div>
<!-- / Content -->
<!-- Modal -->
<div class="modal fade" id="modalCenter" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <form action="post" id="form" name="form">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCenterTitle">TITULO</h5>
                    <!-- INPUT HIDDEN -->
                        <input type="hidden" name="accion_form" id="accion_form">
                        <input type="hidden" name="id_form" id="id_form">
                    <!-- FIN INPUT HIDDEN -->
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                {{-- <th class="text-center">RUT</th>
                <th class="text-center">Nombre Completo</th>
                <th class="text-center">Email</th>
                <th class="text-center">Teléfono</th>
                <th class="text-center">Dirección</th>
                <th class="text-center">Comuna</th> --}}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl">
                            <div class="card mb-4">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">Datos Generales</h5>
                                    <small class="text-muted float-end">Datos Generales</small>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label" for="rut">RUT</label>
                                            <input type="text" class="form-control" id="rut" name="rut" placeholder="RUT" />
                                        </div>
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="nombre_completo">Nombre Completo</label>
                                            <input type="text" class="form-control" id="nombre_completo" name="nombre_completo" placeholder="Nombre Completo" />
                                        </div>

                                        <div class="mb-3 col-md-2">
                                            <label class="form-label" for="email">Email</label>
                                            <input type="text" class="form-control" id="email" name="email" placeholder="Email" />
                                        </div>

                                        <div class="mb-3 col-md-2">
                                            <label class="form-label" for="telefono">Teléfono</label>
                                            <input type="text" class="form-control" id="telefono" name="telefono" placeholder="Teléfono" />
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="direccion">Dirección</label>
                                            <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Dirección" />
                                        </div>
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="comuna">Comuna</label>
                                            <select class="form-select" id="comuna" name="comuna" placeholder="">
                                                <option value="">[ Seleccione una comuna ]</option>
                                                <option value="Algarrobo">Algarrobo</option>
                                                <option value="Alhué">Alhué</option>
                                                <option value="Alto Biobío">Alto Biobío</option>
                                                <option value="Alto del Carmen">Alto del Carmen</option>
                                                <option value="Alto Hospicio">Alto Hospicio</option>
                                                <option value="Ancud">Ancud</option>
                                                <option value="Andacollo">Andacollo</option>
                                                <option value="Angol">Angol</option>
                                                <option value="Antártica">Antártica</option>
                                                <option value="Antofagasta">Antofagasta</option>
                                                <option value="Antuco">Antuco</option>
                                                <option value="Arauco">Arauco</option>
                                                <option value="Arica">Arica</option>
                                                <option value="Aysén">Aysén</option>
                                                <option value="Buin">Buin</option>
                                                <option value="Bulnes">Bulnes</option>
                                                <option value="Cabildo">Cabildo</option>
                                                <option value="Cabo de Hornos">Cabo de Hornos</option>
                                                <option value="Cabrero">Cabrero</option>
                                                <option value="Calama">Calama</option>
                                                <option value="Calbuco">Calbuco</option>
                                                <option value="Caldera">Caldera</option>
                                                <option value="Calera">Calera</option>
                                                <option value="Calera de Tango">Calera de Tango</option>
                                                <option value="Calle Larga">Calle Larga</option>
                                                <option value="Camarones">Camarones</option>
                                                <option value="Camiña">Camiña</option>
                                                <option value="Canela">Canela</option>
                                                <option value="Cañete">Cañete</option>
                                                <option value="Carahue">Carahue</option>
                                                <option value="Cartagena">Cartagena</option>
                                                <option value="Casablanca">Casablanca</option>
                                                <option value="Castro">Castro</option>
                                                <option value="Catemu">Catemu</option>
                                                <option value="Cauquenes">Cauquenes</option>
                                                <option value="Cerrillos">Cerrillos</option>
                                                <option value="Cerro Navia">Cerro Navia</option>
                                                <option value="Chaitén">Chaitén</option>
                                                <option value="Chañaral">Chañaral</option>
                                                <option value="Chanco">Chanco</option>
                                                <option value="Chépica">Chépica</option>
                                                <option value="Chiguayante">Chiguayante</option>
                                                <option value="Chile Chico">Chile Chico</option>
                                                <option value="Chillán">Chillán</option>
                                                <option value="Chillán Viejo">Chillán Viejo</option>
                                                <option value="Chimbarongo">Chimbarongo</option>
                                                <option value="Cholchol">Cholchol</option>
                                                <option value="Chonchi">Chonchi</option>
                                                <option value="Cisnes">Cisnes</option>
                                                <option value="Cobquecura">Cobquecura</option>
                                                <option value="Cochamó">Cochamó</option>
                                                <option value="Cochrane">Cochrane</option>
                                                <option value="Codegua">Codegua</option>
                                                <option value="Coelemu">Coelemu</option>
                                                <option value="Coihaique">Coihaique</option>
                                                <option value="Coihueco">Coihueco</option>
                                                <option value="Coinco">Coinco</option>
                                                <option value="Colbún">Colbún</option>
                                                <option value="Colchane">Colchane</option>
                                                <option value="Colina">Colina</option>
                                                <option value="Collipulli">Collipulli</option>
                                                <option value="Coltauco">Coltauco</option>
                                                <option value="Combarbalá">Combarbalá</option>
                                                <option value="Concepción">Concepción</option>
                                                <option value="Conchalí">Conchalí</option>
                                                <option value="Concón">Concón</option>
                                                <option value="Constitución">Constitución</option>
                                                <option value="Contulmo">Contulmo</option>
                                                <option value="Copiapó">Copiapó</option>
                                                <option value="Coquimbo">Coquimbo</option>
                                                <option value="Coronel">Coronel</option>
                                                <option value="Corral">Corral</option>
                                                <option value="Cunco">Cunco</option>
                                                <option value="Curacautín">Curacautín</option>
                                                <option value="Curacaví">Curacaví</option>
                                                <option value="Curaco de Vélez">Curaco de Vélez</option>
                                                <option value="Curanilahue">Curanilahue</option>
                                                <option value="Curarrehue">Curarrehue</option>
                                                <option value="Curepto">Curepto</option>
                                                <option value="Curicó">Curicó</option>
                                                <option value="Dalcahue">Dalcahue</option>
                                                <option value="Diego de Almagro">Diego de Almagro</option>
                                                <option value="Doñihue">Doñihue</option>
                                                <option value="El Bosque">El Bosque</option>
                                                <option value="El Carmen">El Carmen</option>
                                                <option value="El Monte">El Monte</option>
                                                <option value="El Quisco">El Quisco</option>
                                                <option value="El Tabo">El Tabo</option>
                                                <option value="Empedrado">Empedrado</option>
                                                <option value="Ercilla">Ercilla</option>
                                                <option value="Estación Central">Estación Central</option>
                                                <option value="Florida">Florida</option>
                                                <option value="Freire">Freire</option>
                                                <option value="Freirina">Freirina</option>
                                                <option value="Fresia">Fresia</option>
                                                <option value="Frutillar">Frutillar</option>
                                                <option value="Futaleufú">Futaleufú</option>
                                                <option value="Futrono">Futrono</option>
                                                <option value="Galvarino">Galvarino</option>
                                                <option value="General Lagos">General Lagos</option>
                                                <option value="Gorbea">Gorbea</option>
                                                <option value="Graneros">Graneros</option>
                                                <option value="Guaitecas">Guaitecas</option>
                                                <option value="Hijuelas">Hijuelas</option>
                                                <option value="Hualaihué">Hualaihué</option>
                                                <option value="Hualañé">Hualañé</option>
                                                <option value="Hualpén">Hualpén</option>
                                                <option value="Hualqui">Hualqui</option>
                                                <option value="Huara">Huara</option>
                                                <option value="Huasco">Huasco</option>
                                                <option value="Huechuraba">Huechuraba</option>
                                                <option value="Illapel">Illapel</option>
                                                <option value="Independencia">Independencia</option>
                                                <option value="Iquique">Iquique</option>
                                                <option value="Isla de Maipo">Isla de Maipo</option>
                                                <option value="Isla de Pascua">Isla de Pascua</option>
                                                <option value="Juan Fernández">Juan Fernández</option>
                                                <option value="La Cisterna">La Cisterna</option>
                                                <option value="La Cruz">La Cruz</option>
                                                <option value="La Estrella">La Estrella</option>
                                                <option value="La Florida">La Florida</option>
                                                <option value="La Granja">La Granja</option>
                                                <option value="La Higuera">La Higuera</option>
                                                <option value="La Ligua">La Ligua</option>
                                                <option value="La Pintana">La Pintana</option>
                                                <option value="La Reina">La Reina</option>
                                                <option value="La Serena">La Serena</option>
                                                <option value="La Unión">La Unión</option>
                                                <option value="Lago Ranco">Lago Ranco</option>
                                                <option value="Lago Verde">Lago Verde</option>
                                                <option value="Laguna Blanca">Laguna Blanca</option>
                                                <option value="Laja">Laja</option>
                                                <option value="Lampa">Lampa</option>
                                                <option value="Lanco">Lanco</option>
                                                <option value="Las Cabras">Las Cabras</option>
                                                <option value="Las Condes">Las Condes</option>
                                                <option value="Lautaro">Lautaro</option>
                                                <option value="Lebu">Lebu</option>
                                                <option value="Licantén">Licantén</option>
                                                <option value="Limache">Limache</option>
                                                <option value="Linares">Linares</option>
                                                <option value="Litueche">Litueche</option>
                                                <option value="Llaillay">Llaillay</option>
                                                <option value="Llanquihue">Llanquihue</option>
                                                <option value="Lo Barnechea">Lo Barnechea</option>
                                                <option value="Lo Espejo">Lo Espejo</option>
                                                <option value="Lo Prado">Lo Prado</option>
                                                <option value="Lolol">Lolol</option>
                                                <option value="Loncoche">Loncoche</option>
                                                <option value="Longaví">Longaví</option>
                                                <option value="Lonquimay">Lonquimay</option>
                                                <option value="Los Álamos">Los Álamos</option>
                                                <option value="Los Andes">Los Andes</option>
                                                <option value="Los Ángeles">Los Ángeles</option>
                                                <option value="Los Lagos">Los Lagos</option>
                                                <option value="Los Muermos">Los Muermos</option>
                                                <option value="Los Sauces">Los Sauces</option>
                                                <option value="Los Vilos">Los Vilos</option>
                                                <option value="Lota">Lota</option>
                                                <option value="Lumaco">Lumaco</option>
                                                <option value="Machalí">Machalí</option>
                                                <option value="Macul">Macul</option>
                                                <option value="Máfil">Máfil</option>
                                                <option value="Maipú">Maipú</option>
                                                <option value="Malloa">Malloa</option>
                                                <option value="Marchihue">Marchihue</option>
                                                <option value="María Elena">María Elena</option>
                                                <option value="María Pinto">María Pinto</option>
                                                <option value="Mariquina">Mariquina</option>
                                                <option value="Maule">Maule</option>
                                                <option value="Maullín">Maullín</option>
                                                <option value="Mejillones">Mejillones</option>
                                                <option value="Melipeuco">Melipeuco</option>
                                                <option value="Melipilla">Melipilla</option>
                                                <option value="Molina">Molina</option>
                                                <option value="Monte Patria">Monte Patria</option>
                                                <option value="Mostazal">Mostazal</option>
                                                <option value="Mulchén">Mulchén</option>
                                                <option value="Nacimiento">Nacimiento</option>
                                                <option value="Nancagua">Nancagua</option>
                                                <option value="Natales">Natales</option>
                                                <option value="Navidad">Navidad</option>
                                                <option value="Negrete">Negrete</option>
                                                <option value="Ninhue">Ninhue</option>
                                                <option value="Ñiquén">Ñiquén</option>
                                                <option value="Nogales">Nogales</option>
                                                <option value="Nueva Imperial">Nueva Imperial</option>
                                                <option value="Ñuñoa">Ñuñoa</option>
                                                <option value="Olivar">Olivar</option>
                                                <option value="Ollagüe">Ollagüe</option>
                                                <option value="Olmué">Olmué</option>
                                                <option value="Osorno">Osorno</option>
                                                <option value="Ovalle">Ovalle</option>
                                                <option value="O’Higgins">O’Higgins</option>
                                                <option value="Padre Hurtado">Padre Hurtado</option>
                                                <option value="Padre las Casas">Padre las Casas</option>
                                                <option value="Paiguano">Paiguano</option>
                                                <option value="Paillaco">Paillaco</option>
                                                <option value="Paine">Paine</option>
                                                <option value="Palena">Palena</option>
                                                <option value="Palmilla">Palmilla</option>
                                                <option value="Panguipulli">Panguipulli</option>
                                                <option value="Panquehue">Panquehue</option>
                                                <option value="Papudo">Papudo</option>
                                                <option value="Paredones">Paredones</option>
                                                <option value="Parral">Parral</option>
                                                <option value="Pedro Aguirre Cerda">Pedro Aguirre Cerda</option>
                                                <option value="Pelarco">Pelarco</option>
                                                <option value="Pelluhue">Pelluhue</option>
                                                <option value="Pemuco">Pemuco</option>
                                                <option value="Peñaflor">Peñaflor</option>
                                                <option value="Peñalolén">Peñalolén</option>
                                                <option value="Pencahue">Pencahue</option>
                                                <option value="Penco">Penco</option>
                                                <option value="Peralillo">Peralillo</option>
                                                <option value="Perquenco">Perquenco</option>
                                                <option value="Petorca">Petorca</option>
                                                <option value="Peumo">Peumo</option>
                                                <option value="Pica">Pica</option>
                                                <option value="Pichidegua">Pichidegua</option>
                                                <option value="Pichilemu">Pichilemu</option>
                                                <option value="Pinto">Pinto</option>
                                                <option value="Pirque">Pirque</option>
                                                <option value="Pitrufquén">Pitrufquén</option>
                                                <option value="Placilla">Placilla</option>
                                                <option value="Portezuelo">Portezuelo</option>
                                                <option value="Porvenir">Porvenir</option>
                                                <option value="Pozo Almonte">Pozo Almonte</option>
                                                <option value="Primavera">Primavera</option>
                                                <option value="Providencia">Providencia</option>
                                                <option value="Puchuncaví">Puchuncaví</option>
                                                <option value="Pucón">Pucón</option>
                                                <option value="Pudahuel">Pudahuel</option>
                                                <option value="Puente Alto">Puente Alto</option>
                                                <option value="Puerto Montt">Puerto Montt</option>
                                                <option value="Puerto Octay">Puerto Octay</option>
                                                <option value="Puerto Varas">Puerto Varas</option>
                                                <option value="Pumanque">Pumanque</option>
                                                <option value="Punitaqui">Punitaqui</option>
                                                <option value="Punta Arenas">Punta Arenas</option>
                                                <option value="Puqueldón">Puqueldón</option>
                                                <option value="Purén">Purén</option>
                                                <option value="Purranque">Purranque</option>
                                                <option value="Putaendo">Putaendo</option>
                                                <option value="Putre">Putre</option>
                                                <option value="Puyehue">Puyehue</option>
                                                <option value="Queilén">Queilén</option>
                                                <option value="Quellón">Quellón</option>
                                                <option value="Quemchi">Quemchi</option>
                                                <option value="Quilaco">Quilaco</option>
                                                <option value="Quilicura">Quilicura</option>
                                                <option value="Quilleco">Quilleco</option>
                                                <option value="Quillón">Quillón</option>
                                                <option value="Quillota">Quillota</option>
                                                <option value="Quilpué">Quilpué</option>
                                                <option value="Quinchao">Quinchao</option>
                                                <option value="Quinta de Tilcoco">Quinta de Tilcoco</option>
                                                <option value="Quinta Normal">Quinta Normal</option>
                                                <option value="Quintero">Quintero</option>
                                                <option value="Quirihue">Quirihue</option>
                                                <option value="Rancagua">Rancagua</option>
                                                <option value="Ránquil">Ránquil</option>
                                                <option value="Rauco">Rauco</option>
                                                <option value="Recoleta">Recoleta</option>
                                                <option value="Renaico">Renaico</option>
                                                <option value="Renca">Renca</option>
                                                <option value="Rengo">Rengo</option>
                                                <option value="Requínoa">Requínoa</option>
                                                <option value="Retiro">Retiro</option>
                                                <option value="Rinconada">Rinconada</option>
                                                <option value="Río Bueno">Río Bueno</option>
                                                <option value="Río Claro">Río Claro</option>
                                                <option value="Río Hurtado">Río Hurtado</option>
                                                <option value="Río Ibáñez">Río Ibáñez</option>
                                                <option value="Río Negro">Río Negro</option>
                                                <option value="Río Verde">Río Verde</option>
                                                <option value="Romeral">Romeral</option>
                                                <option value="Saavedra">Saavedra</option>
                                                <option value="Sagrada Familia">Sagrada Familia</option>
                                                <option value="Salamanca">Salamanca</option>
                                                <option value="San Antonio">San Antonio</option>
                                                <option value="San Bernardo">San Bernardo</option>
                                                <option value="San Carlos">San Carlos</option>
                                                <option value="San Clemente">San Clemente</option>
                                                <option value="San Esteban">San Esteban</option>
                                                <option value="San Fabián">San Fabián</option>
                                                <option value="San Felipe">San Felipe</option>
                                                <option value="San Fernando">San Fernando</option>
                                                <option value="San Gregorio">San Gregorio</option>
                                                <option value="San Ignacio">San Ignacio</option>
                                                <option value="San Javier">San Javier</option>
                                                <option value="San Joaquín">San Joaquín</option>
                                                <option value="San José de Maipo">San José de Maipo</option>
                                                <option value="San Juan de la Costa">San Juan de la Costa</option>
                                                <option value="San Miguel">San Miguel</option>
                                                <option value="San Nicolás">San Nicolás</option>
                                                <option value="San Pablo">San Pablo</option>
                                                <option value="San Pedro">San Pedro</option>
                                                <option value="San Pedro de Atacama">San Pedro de Atacama</option>
                                                <option value="San Pedro de la Paz">San Pedro de la Paz</option>
                                                <option value="San Rafael">San Rafael</option>
                                                <option value="San Ramón">San Ramón</option>
                                                <option value="San Rosendo">San Rosendo</option>
                                                <option value="San Vicente">San Vicente</option>
                                                <option value="Santa Bárbara">Santa Bárbara</option>
                                                <option value="Santa Cruz">Santa Cruz</option>
                                                <option value="Santa Juana">Santa Juana</option>
                                                <option value="Santa María">Santa María</option>
                                                <option value="Santiago">Santiago</option>
                                                <option value="Santo Domingo">Santo Domingo</option>
                                                <option value="Sierra Gorda">Sierra Gorda</option>
                                                <option value="Talagante">Talagante</option>
                                                <option value="Talca">Talca</option>
                                                <option value="Talcahuano">Talcahuano</option>
                                                <option value="Taltal">Taltal</option>
                                                <option value="Temuco">Temuco</option>
                                                <option value="Teno">Teno</option>
                                                <option value="Teodoro Schmidt">Teodoro Schmidt</option>
                                                <option value="Tierra Amarilla">Tierra Amarilla</option>
                                                <option value="Tiltil">Tiltil</option>
                                                <option value="Timaukel">Timaukel</option>
                                                <option value="Tirúa">Tirúa</option>
                                                <option value="Tocopilla">Tocopilla</option>
                                                <option value="Toltén">Toltén</option>
                                                <option value="Tomé">Tomé</option>
                                                <option value="Torres del Paine">Torres del Paine</option>
                                                <option value="Tortel">Tortel</option>
                                                <option value="Traiguén">Traiguén</option>
                                                <option value="Treguaco">Treguaco</option>
                                                <option value="Tucapel">Tucapel</option>
                                                <option value="Valdivia">Valdivia</option>
                                                <option value="Vallenar">Vallenar</option>
                                                <option value="Valparaíso">Valparaíso</option>
                                                <option value="Vichuquén">Vichuquén</option>
                                                <option value="Victoria">Victoria</option>
                                                <option value="Vicuña">Vicuña</option>
                                                <option value="Vilcún">Vilcún</option>
                                                <option value="Villa Alegre">Villa Alegre</option>
                                                <option value="Villa Alemana">Villa Alemana</option>
                                                <option value="Villarrica">Villarrica</option>
                                                <option value="Viña del Mar">Viña del Mar</option>
                                                <option value="Vitacura">Vitacura</option>
                                                <option value="Yerbas Buenas">Yerbas Buenas</option>
                                                <option value="Yumbel">Yumbel</option>
                                                <option value="Yungay">Yungay</option>
                                                <option value="Zapallar">Zapallar</option>
                                            </select>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    const titulo_singular = "Cliente";
    const titulo_pural = "Clientes";0
    cargar_validaciones_custom();
    $('#comuna').selectize();

    $.validator.setDefaults({
        ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
    });

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

// TABLA    
    var table = $('#tabla').DataTable({
        processing: true,
        serverSide: true,
        lengthMenu: [[25, 50, 100, 500, 1000],[25, 50, 100, 500, "1000"]],
        dom: "rtB<'row mx-0 '<'col-sm-6'l><'col-sm-6'p>>",
        ajax: "{{ URL::to('/') }}/clientes/listado",
        columns: [
            { data: 'id', 'class':'text-center' },
            { data: 'rut', 'class':'text-center' },
            { data: 'nombre_completo', 'class':'text-center' },
            { data: 'email', 'class':'text-center' },
            { data: 'telefono', 'class':'text-center' },
            { data: 'direccion', 'class':'text-center' },
            { data: 'comuna', 'class':'text-center' },
            {
                "data": null,
                "width": "100px",
                "className" : "text-center",
                "render": function(data, type, row, meta) {
                    return `
                        <div class="dropdown">
                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bx bx-dots-vertical-rounded"></i>
                            </button>
                            <div class="dropdown-menu" style="">
                                <a class="dropdown-item ver" data-id="${row.id}" href="javascript:ver(${row.id});"><i class="tf-icons bx bx-show-alt me-1"></i> Ver</a>
                                <a class="dropdown-item editar" data-id="${row.id}" href="javascript:editar(${row.id});"><i class="tf-icons bx bx-edit me-1"></i> Editar</a>
                                <a class="dropdown-item eliminar" data-id="${row.id}" href="javascript:eliminar(${row.id});"><i class="tf-icons bx bx-x me-1"></i> Eliminar</a>
                            </div>
                        </div>`;
                },
                "orderable": false
            },
        ],
        buttons: [
            {
                extend: 'excel',
                footer: true,
                exportOptions: { 
                    columns: 'th:not(:last-child)'
                },
                className: 'tabla_excel d-none',
            },
            {
                extend: 'pdfHtml5',
                footer: true,			
                exportOptions: { 
                    columns: 'th:not(:last-child)',
                },
                className: 'tabla_pdf d-none',
            }
        ],
        language: {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
        initComplete: function(){
            $('.dt-buttons').hide();
        }   
    });

    $('#tabla thead tr').clone(true).find('th').removeClass('sorting_asc sorting_asc sorting').off('click').end().insertBefore('#tabla thead tr');
        
    $('#tabla thead tr:eq(0) th').each(function (i){
        var title = $(this).text();
        if(title != 'Acciones'){
            $(this).html('<input type="text" class="form-control" placeholder="'+title+'" />');
        
            $('input', this).on('keyup change', function(){
                if(table.column(i).search() !== this.value){
                    table.column(i).search(this.value).draw();
                }
            });
        }else{
            $(this).html('');
        }
    });
// FIN TABLA

// ACCIONES
    crear = function(){
        limpiar_form();
        $(".modal-title").html("<strong>Crear "+titulo_singular+"</strong>");
        $("#accion_form").val("crear");
        $("#id_form").val('');
        $(".modal-footer").show();
        $('#modalCenter').modal('show');
    };

    ver = function(id){
        limpiar_form();
        $(".modal-title").html("<strong>Ver "+titulo_singular+" #"+id.toString().padStart(3,'0')+"</strong>");
        $("#accion_form").val("ver");
        $("#id_form").val(id);
        $(".modal-footer").hide();
        $.ajax({
            url: '{{ URL::to('/') }}/clientes/detalle',
            type: 'POST',
            data: {id},
            success: function(response){
                console.log(response);
                
                $.each(response, function(key, value){
                    var $el = $('[name="' + key + '"]');
                    if ($el.is('input[type="radio"]')){
                        $el.prop('checked', true);
                    }else if($el.is('select')){
                        $('#'+key)[0].selectize.setValue(value);
                        $el.filter('[value="' + value + '"]');
                    }else{
                        $el.val(value);
                    }
                    $el.prop('disabled',true);
                });
                $('#comuna')[0].selectize.disable();

                $('#modalCenter').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    };

    editar = function(id){
        limpiar_form();
        $(".modal-title").html("<strong>Editar "+titulo_singular+" #"+id.toString().padStart(3,'0')+"</strong>");
        $("#accion_form").val("editar");
        $("#id_form").val(id);
        $(".modal-footer").show();
        $.ajax({
            url: '{{ URL::to('/') }}/clientes/detalle',
            type: 'POST',
            data: {id},
            success: function(response){
                console.log(response);
                
                $.each(response, function(key, value){
                    var $el = $('[name="' + key + '"]');
                    if ($el.is('input[type="radio"]')){
                        $el.prop('checked', true);
                    }else if($el.is('select')){
                        $('#'+key)[0].selectize.setValue(value);
                        $el.filter('[value="' + value + '"]');
                    }else{
                        $el.val(value);
                    }
                    if(key == 'rut'){
                        $el.prop('disabled',true);
                    }else{
                        $el.prop('disabled',false);
                    }
                });
                $('#comuna')[0].selectize.enable();
                $('#modalCenter').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    };

    limpiar_form = function(){
        $('#rut').val('').prop('disabled',false);
        $('#nombre_completo').val('').prop('disabled',false);
        $('#email').val('').prop('disabled',false);
        $('#telefono').val('').prop('disabled',false);
        $('#direccion').val('').prop('disabled',false);
        $('#comuna')[0].selectize.setValue("");
        $('#comuna')[0].selectize.enable();
        $(".modal-footer").show();
    }

    eliminar = function(id){
        Swal.fire({
            title: '¿ Estas seguro que desea eliminar el registro #'+(id.toString().padStart(3,'0'))+' ?',
            text: "¡ No podrás revertir esto !",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '¡ Sí, bórralo !'
        }).then((result) => {
            if (result.isConfirmed){
                $.ajax({
                    url: '{{ URL::to('/') }}/clientes/eliminar',
                    type: 'POST',
                    data: {id},
                    success: function(response){
                        console.log(response);
                        
                        Swal.fire(
                        'Eliminado!',
                        'Tu registro ha sido eliminado.',
                        'success');
                        table.ajax.reload();
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    };
// FIN ACCIONES

    $("#form").validate({
		rules: {
			rut : {
				required: true,
                rut: true,
			},
            nombre_completo : {
				required: true,
			},
			telefono : {
				required: true,
			},
            email : {
				required: true,
				email: true
			},
			direccion : {
				required: true,
			},
            comuna: {
                required: true
            },
		},
		messages:{
            rut : {
				required: 'Campo requerido',
				rut: 'Ingrese Rut Valido',
			},
            nombre_completo : {
				required: 'Campo requerido',
			},
			telefono : {
				required: 'Campo requerido',
			},
            email : {
				required: 'Campo requerido',
				email: 'Ingrese E-mail Valido',
			},
            comuna : {
				required: 'Campo requerido',
			},
			direccion : {
				required: 'Campo requerido',
			},
		},
		submitHandler: function(form){
            var formData = new FormData(form);

            $.ajax({
                url: '{{ URL::to('/') }}/clientes/guardar',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    console.log(response);
                    $('#modalCenter').modal('hide');
                    if(response.response){
                        Swal.fire({
                            position: 'top-end',
                            icon: 'success',
                            title: '¡Excelente! La información ha sido guardada correctamente.',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        table.ajax.reload();
                    }else{
                        Swal.fire({
                            position: 'top-end',
                            icon: 'error',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
		}
	});
</script>
@endsection