@extends('layout.master')
@section('parentPageTitle', 'Listado de Paises')
@section('title', 'Listado de paises')
@section('page-style')
<link rel="stylesheet" href="{{asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
<link rel="stylesheet" href="{{asset('assets/bootstrap.min.css')}}">
@stop


@section('content')


<meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="row clearfix" >
       
        
        <!--<div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        
        <div class="col-sm-8 col-sm-8 col-sm-8">-->
        <div class="col-md-12 d-flex justify-content-center">
            <div class="card patients-list">

                <div class="body">

                     <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                        <big style="color: black;font-size: 25px;"class="">@yield('title')</big>
                    </div>
                    <!-- Nav tabs -->
                    <div align="right">
                        <a href="ingresar" class="btn btn-primary btn-round">Nuevo país</a>
                    </div>  

                    <input type="hidden" id="idpaiseliminar" name="idpaiseliminar" value="">                 
           
                    <!-- Tab panes -->
                    <div class="tab-content m-t-10">
                        <div class="tab-pane table-responsive active" id="All" style="overflow-x: hidden;">
                            <table class="table m-b-0 table-hover" id="tabla1" name="tabla1">
                                <thead>
                                    <tr class="ui-widget-header">        
                        
                                        <th>Nombre</th>
                                        <th>Acción</th>
                                       
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    
@stop

@section('modal')
<!-- Default Size -->
{!!Form::open()!!}

<div class="modal" id="pais_eliminar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" >
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="title" id="defaultModalLabel">Eliminación de país</h4>
                
            </div>
            <div id="msj-success-elipais" class=" msj-successeliminar alert alert-success alert-dismissible" role="" style="display: none;">
                     <strong> País eliminado correctamente.</strong>
            </div>

            <div class="modal-body">
                 <h4><p align="center">Desea eliminar el registro?</p></h4>
            </div>

            <div class="modal-footer">
                <button style="border-color:#18ce0f; color:#18ce0f;" type="button" id="btnmodalaceptar_elipais" class="btn btn-default btn-round btn-simple">
                    <span class=""></span> Aceptar
                </button>
               <button style="border-color:#FF3636; color:#FF3636;" type="button" id="btnmodalcancelar_eliempresa" class="btn btn-default btn-round btn-simple" class="" data-dismiss="modal">Cancelar
                </button>
            </div>
        </div>
    </div>
</div>
{!!Form::close()!!}

@stop

@section('page-script')
<script src="{{asset('assets/bundles/datatablescripts.bundle.js')}}"></script>

<script>

var lenguaje = {
    "lengthMenu": "Listar _MENU_ ",
    "zeroRecords": "Aún no tiene registros",
    "info": "Página _PAGE_ de _PAGES_",
    "infoEmpty": "",
    "Search": "Buscar",
    "infoFiltered": "(filtered from _MAX_ total records)",
    "search": "Buscar",
    "zeroRecords": "Sin resultados encontrados",
    "paginate": {
        "first": "Primero",
        "last": "Ultimo",
        "next": "Siguiente",
        "previous": "Anterior"
    }
}


$(document).ready(function() {
   
    listarpaisindex();
} );



$("#btnmodalaceptar_elipais").click(function(){

    var token = $('meta[name="csrf-token"]').attr('content');
    //var url='eliminar';
    //var data={"id":$("#btn_eliempresa").attr("data-eliminarempresa")};

    var valor=$("#idpaiseliminar").val();
    

    var route = "eliminar/" + valor;

      $.get(route, function(data){

      })

      .done(function(data) {
       
            if (data.mensaje == 'eliminado') {

                $("#msj-success-elipais").fadeIn();

                setTimeout(function() {
                    $('#pais_eliminar').modal('hide');
                }, 1500);

                listarpais();

                $("#msj-success-elipais").fadeOut();
              
            }
      })   

      .fail(function() {
              alert( "error" );
    
      });


});

var listarpais = function(){

    var eliminartabla = jQuery('#tabla1').dataTable().fnDestroy();
    var recargartabla = jQuery('#tabla1').dataTable( {

    ajax: {
            url:'{{route('paises.listarpaises')}}',
            dataSrc: ""
        },
        columns: [
            
            {
                name: 'nombre',
                data: 'nombre'
            },

            {   
                className: 'text-left',
                data:'id',
                
                render: function (data,type,row) {
                    return '<a href="'+data+'" class="btn btn-primary btn-round btn-sm">Editar</a>' + '<button type="button" id="btn_elipais" name="btn_elipais" onclick="obtenerid(' + data + ')" class="btn btn-primary btn-round btn-sm"data-toggle="modal" data-target="#pais_eliminar"><span class=""></span> Eliminar</button>';    
                }
            }   
                 
        ],
        "columnDefs": [
             
            { "orderable": false, "targets": 1},

             
        ],
        language : lenguaje
  }); 
  
}

function listarpaisindex() {

    var route = "listarpaisindex";

    var recargartablatotal = jQuery('#tabla1').dataTable({
        
        //"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }],
        "ajax": {
            method:'post',
            url: route,
            headers:{
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            "data": function(data) {

            }
        },
        
        columns: [
            
            {
                name: 'nombre',
                data: 'nombre'
            },

            {   
                className: 'text-left',
                data:'id',
                
                render: function (data,type,row) {
                    return '<a href="'+data+'" class="btn btn-primary btn-round btn-sm">Editar</a>' + '<button type="button" id="btn_elipais" name="btn_elipais" onclick="obtenerid(' + data + ')" data-toggle="modal" data-target="#pais_eliminar" class="btn btn-primary btn-round btn-sm" ><span class=""></span> Eliminar</button>';    
                }
            }   
            
        ],

        "columnDefs": [
             
            { "orderable": false, "targets": 1},
             
        ],

        language: lenguaje

    });

}

function obtenerid(id) {

    $('#idpaiseliminar').val(id);

}



</script>
@stop