@extends('layouts.app')

@section('title', 'Clientes')
@section('pagename', 'Clientes')

@section('content')
<div class="d-flex flex-row-reverse bd-highlight">
    <div class="p-2 bd-highlight">
        &nbsp;
    </div>
</div>
<div>
    <div class="col-12 mb-3 text-right">
        <a href="{{ route('admin.clients.create', [], false) }}" class="btn btn-outline-primary btn-lg">
            + Registrar Nuevo Cliente
        </a>
    </div>
    
{{--    <form id="form-search">--}}
{{--        <h3 class="mb-4">Buscador:</h3>--}}
{{--        <div class="row">--}}
{{--            <div class="col-4 col-md-6 col-lg-4 mb-3">--}}
{{--                <label>Nombre</label>--}}
{{--                <input type="search" name="searchTerm" id="searchTerm"--}}
{{--                    placeholder="Buscar por: Nombre"--}}
{{--                    class="form-control"--}}
{{--                />--}}
{{--            </div>--}}
{{--            <div class="col-8 col-md-6 col-lg-8 mb-3">--}}
{{--                <div>--}}
{{--                    <a href="{{ route('admin.clients.create', [], false) }}" class="btn btn-outline-primary btn-lg" style="margin-left: 83%">--}}
{{--                        Registrar Nuevo Cliente--}}
{{--                    </a>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="row justify-content-end">--}}
{{--            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">--}}
{{--                <button type="submit" class="btn btn-primary btn-block">Buscar</button>--}}
{{--            </div>--}}
{{--            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">--}}
{{--                <button type="button" onClick="window.location.reload()" class="btn btn-secondary btn-block">Limpiar</button>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </form>--}}
</div>
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <input type="text" id="routeGrid" value="{{ route('admin.clients.getrows') }}" hidden />
            <table class="table" id="tb-grid-postulantes">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>NOMBRE</th>
                        <th>FECHA REGISTRO</th>
                        <th>CORREO</th>
                        <th>ACCIONES</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let myDatatable;

    function search() {
        myDatatable.ajax.reload();
    }

    function getRows() {
        let url = $('#routeGrid').val();

        myDatatable = $('#tb-grid-postulantes').DataTable({
            "responsive": true,
            "processing": true,
            "serverSide": true,
            "searching": true,
            "ordering": false,
            "ajax": {
                "url": url,
                "type": "GET",
                "data": function (d) {
                    return $.extend( {}, d, {
                        "term": $('[type="search"]').val()
                    });
                }
            },
            "columns": [
                { "data": "id" },
                { "data": "name" },
                { "data": "created" },
                { "data": "account" },
                {
                    "data": "action",
                    "render": function (data) {
                        return data;
                    }
                },
            ],
            language: {
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "Ningun dato disponible en esta tabla",
                "sInfo":           "Mostrando 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":     "Ultimo",
                    "sNext":     "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
        });
    }

    function deleteRow(url) {
        let rpta = confirm('Seguro que desea Desactivar este Cliente?');

        if (!rpta)
            return;

        $.post(url,
        {  _token : $("meta[name='csrf-token']").attr('content') },
        function(resp) {
            location.reload();
        });
    }

    function activateRow(url) {
        let rpta = confirm('Seguro que desea Activar este Cliente?');

        if (!rpta)
            return;

        $.post(url,
        {  _token : $("meta[name='csrf-token']").attr('content') },
        function(resp) {
            location.reload();
        });
    }
    
    $(document).ready(function() {
        getRows();

        $('#form-search').submit(function(e) {
            e.preventDefault();
            search();
        });
    });
</script>
@endpush