@extends('template.layoutAdmin', ['activeButton'=>'personal'])
@section('cabecera')
    <div class="row">
        <div class="col-12 text-left">
            <h1>
                <small> {{  trans('valorParametro.tituloParametro') }} </small>
            </h1>
        </div>
    </div>
@endsection
@section('title')
{{  trans('valorParametro.tituloParametro') }}
@endsection

@section('contenido')
    <div class="row">
        <div class="col-12">
            @if (Session::has('message'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    😉 {{ Session::get('message') }} 😉
                </div>
            @endif
            @if (Session::has('message_error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    😓 {{ Session::get('message_error') }} 😒
                </div>
            @endif
        </div>


            <div class="col-6">
                    <div class="box">
                        <div class="box-header with-border">
                            <div class="row">
                                <div class="col-md-10">
                                    <h3 class="box-title"> {{  trans('valorParametro.valores') }} </h3>

                                </div>

                                <div class="float-left">
                                    <button class="btn btn-info " onclick="AbrirVentanaNuevoValor()">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                </div>

                            </div>
                        </div>
                        <div class="box-body">
                            <table class="table table-bordered table-responsive" id="tbZonasC">
                                <thead>
                                    <tr>
                                        <th class="text-center"> {{  trans('valorParametro.id') }} </th>
                                        <th class="text-center"> {{  trans('valorParametro.nombre') }} </th>
                                        <th class="text-center"> {{  trans('valorParametro.descripcion') }}	</th>
                                        <th class="text-center"> {{  trans('valorParametro.opciones') }} </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($allParametros as $perfil)
                                        <tr>
                                            <td style="vertical-align: middle;" class="text-center">{{ $perfil->idParametro }}</td>
                                            <td style="vertical-align: middle;" class="text-center">{{ $perfil->nombre }}</td>
                                            <td style="vertical-align: middle;" class="text-center">{{ $perfil->refParametro }}
                                            </td>
                                            <td style="vertical-align: middle;" class="text-center">
                                                <a href="javascript:;"
                                                    onclick="showRol({{ $perfil->idParametro }}, '{{ $perfil->nombre }}')"
                                                    class="btn btn-sm btn-info"><i class="fa fa-share"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                </div>


            </div>

            <div class="col-6">

                    <div class="box" id="mesaUpdate">

                        <div class="box-header with-border">
                            <div class="row">
                                <div class="col-md-6">
                                    <h3 class="box-title" id="titleMesa"></h3>

                                </div>
                                <div class="col-md-6 text-right" id="btnTitleMesa">

                                    <!-- Button trigger modal -->
                                    <button class="btn btn-info" id="agregar" onclick="Añadir()"
                                        data-target="#staticBackdrop"><i class="fa fa-plus"></i></button>'
                                </div>
                            </div>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table class="table table-bordered table-responsive" id="tbMesa">
                                <thead>
                                    <tr>
                                        <th class="text-center"> {{  trans('valorParametro.nombre') }} </th>
                                        <th class="text-center"> {{  trans('valorParametro.estado') }} </th>
                                        <th class="text-center"> {{  trans('valorParametro.opciones') }} </th>
                                    </tr>
                                </thead>
                                <tbody id="cuerpo">

                                </tbody>
                            </table>
                        </div>
                    </div>



                </div>

    </div>
    {{--Modal agregar---}}
    <div class=" modal fade modal-dialog-centered" id="AñadirValores" data-backdrop="static" data-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tituloModal"> {{  trans('valorParametro.agregarValor') }} </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="Nombre"> {{  trans('valorParametro.nombre') }} <span class="text text-danger">*</span> </label>
                        <input type="text" name="nombreValor" id="nombreValor" class="form-control"
                            placeholder="{{ trans('valorParametro.nombrePlace') }}" required>
                    </div>

                    <div class="form-group">
                        <label for="Nombre"> {{  trans('valorParametro.descripcion') }} </label>
                        <input type="text" name="descripcionValor" id="descripcionValor" class="form-control"
                            placeholder="{{ trans('valorParametro.descripcionPlace') }}" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"> {{  trans('valorParametro.cerrar') }} </button>
                    <button type="button" class="btn btn-primary" onclick="CrearValor()"> {{  trans('valorParametro.agregar') }} </button>
                </div>
            </div>
        </div>
    </div>
    </div>



    <!-- Modal para valores parametros -->
    <div class=" modal fade modal-dialog-centered" id="AñadirModal" data-backdrop="static" data-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tituloModal"> {{  trans('valorParametro.agregar') }} </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="nombre"> {{  trans('valorParametro.nombre') }} <span class="text text-danger">*</span> </label>
                        <input type="text" name="nombre" id="nombre" class="form-control"
                            placeholder="{{ trans('valorParametro.nombrePlace') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="nombre_ingles"> {{  trans('valorParametro.nombre_ingles') }} <span class="text text-danger">*</span> </label>
                        <input type="text" name="nombre_ingles" id="nombre_ingles" class="form-control"
                            placeholder="{{ trans('valorParametro.nombre_ingles_place') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="descripcion"> {{  trans('valorParametro.descripcion') }} </label>
                        <input type="text" name="descripcion" id="descripcion" class="form-control"
                            placeholder="{{ trans('valorParametro.descripcionPlace') }}" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"> {{  trans('valorParametro.cerrar') }} </button>
                    <button type="button" class="btn btn-primary" onclick="CrearValorParametro()"> {{  trans('valorParametro.agregar') }} </button>
                </div>
            </div>
        </div>
    </div>
    </div>




    <!-- Modal para valores parametros Editar -->
    <div class=" modal fade modal-dialog-centered" id="ModalEditar" data-backdrop="static" data-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tituloModal"> {{  trans('valorParametro.editar') }}	</h5>
                    <button type="button" class="close" onclick="cerrarEditar()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="Nombre"> {{  trans('valorParametro.nombre') }} <span class="text text-danger">*</span> </label>
                        <input type="text" name="nombre" id="nombreEditar" class="form-control"
                            placeholder="{{ trans('valorParametro.nombrePlace') }}" required>
                    </div>

                    <div class="form-group">
                        <label for="Nombre"> {{  trans('valorParametro.descripcion') }} <span class="text text-danger">*</span> </label>
                        <input type="text" name="descripcion" id="descripcionEditar" class="form-control"
                            placeholder="{{ trans('valorParametro.descripcionPlace') }}" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" onclick="cerrarEditar()"> {{  trans('valorParametro.cerrar') }} </button>
                    <button type="button" class="btn btn-primary" onclick="EditarParametro()"> {{  trans('valorParametro.editar') }} </button>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        window.onload = $('#agregar').hide();
        var idParametro = 0;
        var nombreActual = "";
        var idEditar = 0;


        function cambiarEstado(id,state){
            var data = {
                "id": id,
                "state": state
            }
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
             $.ajax({
                    url: UrlHost_ + "/administrator/Parametros/CambiarEstado",
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        
                        swal({
                            title: " {{  trans('valorParametro.agregando') }} ",
                            text: " {{  trans('valorParametro.espereUnMomento') }} ",
                            showConfirmButton: false
                        });
                    },
                    success: function(response) {

                        if (response.code==200) {
                            swal(" {{  trans('valorParametro.valorActualizado') }} ", " {{  trans('valorParametro.datosGuardados') }} ", "success")
                             showRol(idParametro, nombreActual);
                        }else{
                            swal("Error", "Error", "warning")

                        }


                    }
                });


        }
        function AbrirVentanaNuevoValor() {
            $('#AñadirValores').modal('show'); // abrir
        }

        function EditarParametro() {
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var nombreEditar = document.getElementById('nombreEditar').value;
            var nombreDescripEditar = document.getElementById('descripcionEditar').value;
            if(nombreDescripEditar.trim()==""){
                nombreDescripEditar=false;
            }
            var data = {
                "idRol": idParametro,
                "idEditar": idEditar,
                "nombreEditar": nombreEditar,
                "DescripcionEditar": nombreDescripEditar
            }
            if (nombreEditar.trim() == "" ) {
                swal({
                        title: " {{  trans('valorParametro.valoresVacios') }} ",
                        text: " {{  trans('valorParametro.llenarCampos') }}	",
                        type: "warning",
                        showCancelButton: false,
                        confirmButtonClass: "btn-danger",
                        confirmButtonText: "Ok",
                        closeOnConfirm: true
                    });

            } else {
                $.ajax({
                    url: UrlHost_ + "/administrator/Parametros/Editar",
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        
                        swal({
                            title: " {{  trans('valorParametro.agregando') }} ",
                            text: " {{  trans('valorParametro.espereUnMomento') }} ",
                            showConfirmButton: false
                        });
                    },
                    success: function(response) {

                        swal(" {{  trans('valorParametro.valorParametroAgregado') }} ", " {{  trans('valorParametro.datosGuardados') }} ", "success")
                    showRol(idParametro, nombreActual);
                    $('#ModalEditar').modal('hide');
                    document.getElementById('nombreEditar').value="";
                    document.getElementById('descripcionEditar').value="";
                    }
                });
            }
        }

        function abrirEditar(id) {
            var host = "{{ $_SERVER['HTTP_HOST'] }}";

            var data = {
                "idRol": idParametro,
                "idEditar": id
            }
            idEditar = id;
            $.ajax({
                url: UrlHost_ + "/administrator/Parametros/obtener",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                   
                    swal({
                        title: " {{  trans('valorParametro.agregando') }} ",
                        text: " {{  trans('valorParametro.espereUnMomento') }} ",
                        showConfirmButton: false
                    });
                },
                success: function(response) {


                    swal.close();
                    document.getElementById('nombreEditar').value = response.nombre;
                    document.getElementById('descripcionEditar').value = response.refValor;
                    $('#ModalEditar').modal('show'); // cerrar
                }
            });



        }

        function cerrarEditar() {
            $('#ModalEditar').modal('hide'); // cerrar
            document.getElementById('nombreEditar').value = "";
            document.getElementById('descripcionEditar').value = "";
        }

        function CrearValor() {
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var nombreValor = document.getElementById('nombreValor').value;
            var nombreDescripValor = document.getElementById('descripcionValor').value;
            if(nombreDescripValor.trim()==""){
                nombreDescripValor=false;
            }
            var data = {
                "idRol": idParametro,
                "nombre": nombreValor,
                "descrip": nombreDescripValor
            }
            if (nombreValor.trim() == "") {
                swal({
                    title: " {{  trans('valorParametro.camposVacios') }} ",
                    text: " {{  trans('valorParametro.camposLlenar') }}	",
                    showConfirmButton: true
                });
            } else {
                $.ajax({
                    url: UrlHost_ + "/administrator/Parametros/CrearValor",
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        
                        swal({
                            title: " {{  trans('valorParametro.agregando') }} ",
                            text: " {{  trans('valorParametro.espereUnMomento') }} ",
                            showConfirmButton: false
                        });
                    },
                    success: function(response) {
                        if (response.code == 200) {

                            swal.close();
                            swal(" {{  trans('valorParametro.guardadoExitoso') }} ", " {{  trans('valorParametro.guardadoCorrectamente') }} ", "success")
                            location.reload();
                        }
                    }
                });


            }

        }

        function Añadir() {
            $('#AñadirModal').modal('show'); // abrir
        }

        function CrearValorParametro() {
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var nombreValorParametro = document.getElementById('nombre').value;
            var nombreInglesValorParametro = document.getElementById('nombre_ingles').value;
            var nombreDescrip = document.getElementById('descripcion').value;
            if(nombreDescrip.trim()==""){
                nombreDescrip=false;
            }
            var data = {
                "idRol": idParametro,
                "nombre": nombreValorParametro,
                "nombre_ingles": nombreInglesValorParametro,
                "descrip": nombreDescrip
            }
            if (nombreValorParametro.trim() == "") {
                swal({
                    title: " {{  trans('valorParametro.camposVacios') }} ",
                    text: " {{  trans('valorParametro.camposLlenar') }} ",
                    showConfirmButton: true
                });
            } else {
                $.ajax({
                    url: UrlHost_ + "/administrator/Parametros/AgregarValorParametro",
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                      //  
                      swal({
                    title: " {{  trans('valorParametro.cargando') }} ",
                    text: " {{  trans('valorParametro.agregandoValorParametro') }} ",
                    showConfirmButton: false
                });
                    },
                    success: function(response) {
                        if (response.code == 200) {

                            swal.close();
                            showRol(idParametro, nombreActual);
                            $('#AñadirModal').modal('hide');
                            document.getElementById('nombre').value="";
                            document.getElementById('descripcion').value="";
                            swal(" {{  trans('valorParametro.valorParametroAgregado') }}", " {{  trans('valorParametro.datosGuardados') }} ", "success")
                        }
                    }
                });


            }

        }

        function CrearParametro() {

        }

        function showRol(idRol, nombre) {
            var host = "{{ $_SERVER['HTTP_HOST'] }}";
            var data = {
                "idRol": idRol
            }
            
            nombreActual = nombre;
            $.ajax({
                url: UrlHost_ + "/administrator/Parametros/show",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                   
                    swal({
                        title: " {{  trans('valorParametro.cargando') }} ",
                        text: "Espere un momento",
                        showConfirmButton: false
                    });
                },
                success: function(response) {
                    if (response.code == 200) {

                        swal.close();
                        document.getElementById('titleMesa').innerHTML =nombre;
                        $('#agregar').show();
                        idParametro = idRol;
                        var nFilas = $("#tbMesa tr").length;
                        var table = document.getElementById("titleMesa");
                        document.getElementById('cuerpo').innerHTML = "";
                        var array = response.data;
                        for (let index2 = 0; index2 < array.length; index2++) {
                            const element = array[index2];
                            const idEd = element.idValorParametro;
                            if (element.idEstado == 1) {
                                var agregar = '<tr id="rowEditar' + index2 + '" >' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    element.nombre +

                                    ' </td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<a href="javascript:;" onclick="cambiarEstado('+idEd+','+1+')">'+
                                    '<span class="badge"  style="background: #00DB38" >'+
                                    ' {{  trans('valorParametro.activo') }}	</span>' +
                                    '</a>'+
                                    '</td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<button class="btn btn-info" onclick="abrirEditar(' + element.idValorParametro + ')"><i class="fa fa-edit"></i></button>' +
                                    '</td>' +
                                    '</tr>';

                            } else {
                                var agregar = '<tr id="rowEditar' + index2 + '" >' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    element.nombre +

                                    ' </td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<a href="javascript:;" onclick="cambiarEstado('+idEd+','+2+')">'+
                                    '<span class="badge"  style="background: red">'+
                                    ' {{  trans('valorParametro.inactivo') }} </span>' +
                                    '</a>'+
                                    '</td>' +
                                    '<td style="vertical-align: middle;" class="text-center">' +
                                    '<button class="btn btn-info" onclick="abrirEditar(' + element.idValorParametro + ')"><i class="fa fa-edit"></i></button>' +
                                    '</td>' +
                                    '</tr>';
                            }

                            $('#titleMesa tr:first').after(agregar);
                            document.getElementById('cuerpo').insertRow(-1).innerHTML = agregar;
                        }
                    }
                }
            });
        }

    </script>

@endsection