@extends('templates.admin-lte')

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

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

@section('content')
   <div class="box box-primary">
      <div class="box-body">
         <br>
         <div class="row">
            {!! Form::custom_link_one( route('administracion.base.mantenimientos.contactos.create'), "Crear Contacto", 'col-md-2 col-md-offset-10' ) !!}
         </div>
      
         <fieldset id="filtros">
            <div class="row">

               {!! Form::custom_input_one("nombre_contacto", "Nombre Contacto", "col-md-2" ) !!}

               {!! Form::custom_input_one("asunto", "Asunto", "col-md-2" ) !!}

               {!! Form::custom_input_one("cargo", "Cargo", "col-md-2" ) !!}

               {!! Form::custom_input_one("telefono", "Telefono", "col-md-2" ) !!}

               {!! Form::custom_input_one("departamento", "Departamento", "col-md-2" ) !!}

               {!! Form::custom_input_one("relacion", "Relación", "col-md-2" ) !!}

            </div>
         </fieldset>
         
         
         @php
            $COLUMNS = [ 'NOMBRE CONTACTO', 'PERSONA', 'ASUNTO', 'CARGO', 'TELEFONO', 'DEPARTAMENTO', 'RELACION', 'ACCIONES'];
         @endphp

         
            {!! Form::custom_table_one( "tabla-clientes", $COLUMNS ) !!}
         

      </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.contactos.index_ajax') !!}',
                send_request: function (request) 
                {
                  request.nombre_contacto = $("#nombre_contacto").val();
                  request.asunto = $("#asunto").val();
                  request.cargo = $("#cargo").val();
                  request.telefono = $("#telefono").val();
                  request.departamento = $("#departamento").val();
                  request.relacion = $("#relacion").val();
                    
                },
                data_source: function ( json ) 
                {
                    return json.data;
                },
                initComplete: function()
                {
                    //set_icheckbox();
                },
                columns: 
                [
                    
                    { data: 'nom_contacto', name: 'nom_contacto', orderable: true, searchable: false},
                    { data: 'persona.nombre', name: 'persona.nombre', orderable: true, searchable: false, render:function(data,type,row)
                        {
                            //return JSON.stringify( row );
                            if( row.persona != null)
                                if( row.persona.nombre != null )
                                    return row.persona.nombre;
                                else    
                                    return row.persona.nomb_fantasia;
                                else
                                    return '';
                        }
                    },
                    { data: 'asunto', name: 'asunto', orderable: true, searchable: false},
                    { data: 'cargo', name: 'cargo', orderable: true, searchable: false},
                    { data: 'telefono', name: 'telefono', orderable: true, searchable: false},
                    { data: 'departamento', name: 'departamento', orderable: true, searchable: false},
                    { data: 'relacion', name: 'relacion', 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>"
                }
                
            } 
        });

        $("#filtros input").keyup(function()
        {

            clearTimeout(refrescar_tabla);

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

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

            $.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_persona );
                        }
                    },
                    
                    cancelar: 
                    {
                        btnClass: 'btn-blue',
                        action: function () 
                        {
                            
                        }
                    },

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

        function eliminar_registro(cod_persona)
        {

            $.ajax
            ({
                type: "POST",
                url: "{{ route('administracion.base.mantenimientos.contactos.destroy_ajax') }}/",
                data: { "cod_persona" : cod_persona , "_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