@extends('templates.admin-lte')

@section('styles')
        @include( 'libraries', ['added' => array('datatables-css', 'jquery-confirm-css', 'jquery-toast-css') ] )
@endsection

@section('header')
    <h1>
        Paises
        <small>Indice</small>
    </h1>
@endsection

@section('content')
    <div class="box box-primary">
        <div class="box-body">
            <fieldset id="filtros">
                <div class="row">

                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Descripción:</label>
                            <div class="inner-addon right-addon">
                                <i class="glyphicon glyphicon-trash"></i>
                                <input type="text" class="form-control" placeholder="Descripción" id="descripcion">  
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="col-md-2">
                        <div class="form-group">
                            <br>
                            <a href="{{ route('administracion.base.mantenimientos.paises.create') }}" class="btn btn-primary btn-block">CREAR PAIS</a>
                        </div>
                    </div>

                </div>
            </fieldset>

            @php
                $COLUMNS = [   'DESCRIPCIÓN', 'NACIONALIDAD', 'CÓDIGO AREA', 'ABREVIATURA', 'SIGLAS',  'ACCIONES'];
            @endphp
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover" id="tabla-clientes">
                    <thead class="bg-primary">
                        <tr>
                            @foreach($COLUMNS as $column_name)
                                <th>{{ $column_name }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot class="bg-primary">
                        <tr>
                            @foreach($COLUMNS as $column_name)
                                <th>{{ $column_name }}</th>
                            @endforeach
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
        
        @include('libraries', ['added' => array('datatables-js', 'jquery-confirm-js', 'jquery-toast-js')])
    <script>
        $("#descripcion").focus();
        var refrescar_tabla;
        var config = 
        {
            datatable:
            {
                order: [[ 0, "desc" ]],
                ajax_source: '{!! route('administracion.base.mantenimientos.paises.index_ajax') !!}',
                send_request: function (request) 
                {
                     request.descripcion = $("#descripcion").val();
                },
                data_source: function ( json ) 
                {
                    return json.data;
                },
                initComplete: function()
                {
                    //set_icheckbox();
                },
                columns: 
                [
                    { data: 'descripcion', name: 'descripcion', orderable: true, searchable: false},
                    { data: 'nacionalidad', name: 'nacionalidad', orderable: true, searchable: false},
                    { data: 'codigo_area', name: 'codigo_area', orderable: true, searchable: false},
                    { data: 'abreviatura', name: 'abreviatura', orderable: true, searchable: false},
                    { data: 'siglas', name: 'siglas', orderable: true, searchable: false},
                    { data: 'acciones', name: 'acciones', orderable: false, searchable: false}
                ],
                default_datas_count: 10,
                tool_bar: '<"toolbar">' + "<'row'<'col-xs-12'<'col-xs-6'l><'col-xs-6'p>>r>"+
                            "<'row'<'col-xs-12't>>"+
                            "<'row'<'col-xs-12'<'col-xs-6'i><'col-xs-6'p>>>"
            }//end datatable
        }



        var table = $('.table').DataTable
        ({
            dom: config.datatable.tool_bar,
            deferRender: true,
            processing: true,
            serverSide: true,
            order: config.datatable.order,
            paginate: true,
            lengthChange: true,
            iDisplayLength: config.datatable.default_datas_count,
            filter: true,
            sort: true,
            info: true,
            autoWidth: true,
            initComplete: config.datatable.initComplete,
            //"drawCallback": reordenar_celdas(),
            ajax: 
            {
                url: config.datatable.ajax_source,
                type: "POST",
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                data: config.datatable.send_request,
                dataSrc: config.datatable.data_source,
            },
            columns: config.datatable.columns,
            language: 
            {
                decimal: "",
                processing:     "<i class='fa fa-circle-o-notch fa-spin text-primary  fa-3x'></i>",
                search:         "Buscar",
                lengthMenu:     "Mostrar _MENU_ Elementos",
                info:           "Mostrando de _START_ a _END_ registros de un total de _TOTAL_ registros",
                //infoEmpty:      "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                infoFiltered:   "(Filtrado de _MAX_ registros)",
                infoPostFix:    "",
                thousands:      ",",
                loadingRecords: "Cargando Registros...",
                zeroRecords:    "No existen registros disponibles",
                emptyTable:     "No existen registros disponibles",
                paginate: 
                {
                    first:      "Primera",
                    last:       "Ultima",
                    next:       "<i class='fa fa-chevron-right'></i>",
                    previous:   "<i class='fa fa-chevron-left'></i>"
                }
                
            } 
        });

        $("#descripcion").keyup(function()
        {
            clearTimeout(refrescar_tabla);

            refrescar_tabla = setTimeout(function() 
            {
                table.draw();
            }, 300);
            
        });

        $("body").on("click", ".boton-eliminar", function(event)
        {
            let cod_empresa = $(this).attr("id");

            $.confirm
            ({
                title: "Aviso",
                content: 'Seguro que quiere eliminar el registro?',
                buttons: 
                {
                    si: 
                    {
                        //isHidden: true, // hide the button
                        btnClass: 'btn-red',
                        action: function () 
                        {
                            eliminar_registro(cod_empresa);
                        }
                    },
                    
                    cancelar: 
                    {
                        btnClass: 'btn-blue',
                        action: function () 
                        {
                            
                        }
                    },

                }
            });
            
            event.preventDefault();
            
        } );

        function eliminar_registro( cod_pais )
        {

            $.ajax
            ({
                type: "POST",
                url: "{{ route('administracion.base.mantenimientos.paises.destroy_ajax',['']) }}/"+cod_pais,
                data: { "cod_pais" : cod_pais , "_method":"DELETE"},
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                success: function(response)
                {
                    table.draw();
                    
                    $.toast
                    ({
                        heading: 'AVISO',
                        text: "Registro eliminado correctamente.",
                        position: 'top-right',
                        stack: false,
                        icon: 'success',
                        hideAfter: 5000
                    });

                    
                },
                error: function(response)
                {
                    console.log(response);
                    $.toast
                    ({
                        heading: 'ERROR',
                        text: "No se pudo eliminar el registro: "+response.responseJSON.message,
                        position: 'top-right',
                        stack: false,
                        icon: 'error',
                        hideAfter: 5000
                    });
                }
            });
        }

    </script>
@endsection