@extends('adminlte::page')

@section('title', 'Cuenta Bancaria')

@section('content_header')
    <div class="container-fluid">
        <div class="row">
            <!-- left column -->
            <div class="col-md-6">
                <h1><i class="fa fa-th" aria-hidden="true"></i> Mantenimiento de Cuenta Bancaria </h1>
            </div>

            <div class="col-md-6" id="grupo__accion">
                <br><br>
                <div class="float-right">
                    <button type="button" class="btn btn-primary" id="busquedaVeh"> <i class="fas fa-search"></i> Buscar
                    </button>
                    <button type="submit" class="btn btn-info toastrDefaultSuccess" id="btn_Grabar" name="btn_Grabar">
                        <i class="fas fa-save">
                            Grabar</i></button>
                    <button type="submit" class="btn btn-info toastrDefaultSuccess" id="btn_Modifica" name="btn_Modifica">
                        <i class="fas fa-save">
                            Modificar</i></button>
                    <button type="button" class="btn btn-danger" onclick="Limpiar()"> <i class="fas fa-trash">
                            Limpiar</i></button>
                </div>

            </div>
        </div>
    </div>

@stop

@section('content')
    <div style="display:none;" id="loader"></div>
    <div id="DivPrincipal">
        <form id="servicios_form" method="post" enctype="multipart/form-data">
            @csrf
            <div class="row justify-content-center">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="card card-success" id="my-card">
                        <div class="card-header">
                            <h3 class="card-title">Datos De Cuentas</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->

                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <input id="id_ncuenta" name="id_ncuenta" hidden value="0">
                                        <label>Nº Cuenta:</label>
                                        <input type="number" class="form-control" id="ncuenta" name="ncuenta">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Nombre:</label>
                                        <input type="text" class="form-control"id="nombre" name="nombre" onkeypress="return check(event)">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Tipo Cuenta: </label>
                                        <select class="form-control select2bs4" style="width: 100%;" id="tcuenta"
                                            name="tcuenta">
                                            <option value="A" selected="selected">Ahorros</option>
                                            <option value="C">Corriente</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Codigo Cliente:</label>
                                        <input type="number" class="form-control" id="ccliente" name="ccliente">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Banco: </label>
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <div class="form-group">
                                                <select class="form-control select2bs4" style="width: 100%;" id="idbanco"
                                                    name="idbanco">
                                                    @foreach ($bancos as $datos)
                                                        <option value="{{ $datos->id }}">{{ $datos->descripcion }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <button type="button" class="btn btn-light" id="addBanco"
                                                    name="addBanco"> <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Estado: </label>
                                        <select class="form-control select2bs4" style="width: 100%;" id="estado"
                                            name="estado">
                                            <option value="A" selected="selected">Activo</option>
                                            <option value="I">Inactivo</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </form>

         <!--MODAL BANCOS-->
         <div class="modal fade" id="modal-Bancos">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title"> <i class="fas fa-search"> </i> Crear Bancos</h4>
                        <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!--<p>One fine body&hellip;</p>-->
                        <form id="banco_form" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-12">
                                    <div class="card-body">             
                                        <div class="form-group">
                                            <label for="InputOperacion">Descripcíon: </label>
                                            <input type="text" class="form-control" id="descripcion" name="descripcion"
                                                placeholder="Ingrese Nuevo Banco">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer justify-content-rigth">
                        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                        <button type="button" class="btn btn-primary" id="btnGuardarBanco" name="btnGuardarModelo">Guardar
                            Cambios</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!--END MODAL MODELOS-->
        </div>

    </div>
    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-xl">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fas fa-search"> </i> Búsqueda de
                        Cuentas</h4>
                    <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--<p>One fine body&hellip;</p>-->
                    <div class="row">
                        <div class="col-12">

                            <!-- /.card -->
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title"></h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <table id="tblBuscarItems" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>Nº Cuenta</th>
                                                <th>Nombre</th>
                                                <th>Codigo CLiente</th>
                                                <th>Tipo Cuenta</th>
                                                <th>Banco</th>
                                                <th>Cod.Banco</th>
                                                <th>Estado</th>
                                            </tr>
                                        </thead>
                                        <tfoot>

                                        </tfoot>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                                                                      <button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

       
@stop
@section('js')
    <!--<script src="../../js/mantenimientos/Items/cuentaBancaria.js"></script>-->
    <script>
        const formulario = document.getElementById("servicios_form");
$("form#servicios_form").submit(function (e) {
    e.preventDefault();
    MostrarLoader();

    const formData = new FormData(this);
    $.ajax({
        url: "/admin/createcuenta",
        type: "POST",
        data: formData,
        success: function (data) {
            if (data.status == "ok") {
                toastr.success(data.message);
                document.getElementById("id_ncuenta").value = 0;
                document.getElementById("btn_Modifica").style.display = "none";
                document.getElementById("btn_Grabar").style.display = "";
                formulario.reset();
            } else {
                toastr.error(data.message);
            }
            setTimeout(function () {
                OcultarLoader();
            }, 100);

        },
        cache: false,
        contentType: false,
        processData: false,
    });
});

const Limpiar = () => {
    document.getElementById("id_ncuenta").value = 0;
    document.getElementById("btn_Modifica").style.display = "none";
    document.getElementById("btn_Grabar").style.display = "";
    formulario.reset();
}


$(function () {

    CambiarBotonGuardar();

    $('.toastrDefaultSuccess').click(function () {
        $("#servicios_form").submit();
    });
    $('.toastrDefaultInfo').click(function () {
        toastr.info('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
    });
    $('.toastrDefaultError').click(function () {
        toastr.error('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
    });
    $('.toastrDefaultWarning').click(function () {
        toastr.warning('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
    });

    const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;



    function cargarBusqueda() {
        $('#tblBuscarItems').DataTable({
            "processing": true,
            "serverSide": true,
            "responsive": true,
            "lengthChange": false,
            "autoWidth": false,
            "select": true,
            "ajax": {
                'url': 'listarCuentas', 'headers': {
                    'Content-Type': 'application/json',
                    "X-CSRF-Token": csrfToken
                }
            },
            "columns": [
                { data: 'id' },
                { data: 'cuenta' },
                { data: 'nombre' },
                { data: 'codigocliente' },
                { data: 'tipocuenta' },
                { data: 'descripcion' },
                { data: 'id_banco_fk' },
                { data: 'estado' },
            ],
            "language": {
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "zeroRecords": "No se encontró nada - lo siento",
                "info": "Mostrando la página _PAGE_ de _PAGES_",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtrado de _MAX_ registros totales)",
                "search": "Buscar :",
                "paginate": {
                    "previous": "Anterior",
                    "next": "siguiente"
                }
            },
        }).buttons().container().appendTo('#tblBuscarItems_wrapper .col-md-6:eq(0)');

        var table = $('#tblBuscarItems').DataTable();
        $('#tblBuscarItems tbody').on('click', 'tr', function () {
            var row = table.row(this).data();
            CargarDatosSelect(row);

        });
    }
    cargarBusqueda();
    //   cargarBusqueda();
    $('#busquedaVeh').on('click', function () {
        // cargarBusqueda();
        var table = $('#tblBuscarItems').DataTable();
        table.ajax.reload();
        $("#modal-xl").modal('show');
    });

    function CargarDatosSelect(item) {
        $("#modal-xl").modal('hide');
        document.getElementById("id_ncuenta").value = item.id;
        document.getElementById("ncuenta").value = item.cuenta;
        document.getElementById("nombre").value = item.nombre;
        document.getElementById("ccliente").value = item.codigocliente;
        $("#tcuenta").val(item.tipocuenta).change();
        $("#estado").val(item.estado).change();
        $("#idbanco").val(item.id_banco_fk).change();
        CambiarBotonGuardar();
    }

    function CambiarBotonGuardar() {
        var systemON = document.getElementById("id_ncuenta").value;

        if (systemON > '0') {
            //document.querySelector(`#grupo__accion .button-hidden`).classList.add(".button-visible");
            document.getElementById("btn_Grabar").style.display = "none";
            document.getElementById("btn_Modifica").style.display = "";
        } else {
            //document.querySelector(`#grupo__usuario .button-hidden`).classList.add("formulario__input-error-activo");
            document.getElementById("btn_Modifica").style.display = "none";
            document.getElementById("btn_Grabar").style.display = "";
        }
    }

    $('#addBanco').on('click', function(){
        $("#modal-Bancos").modal('show');
    });

    $('#btnGuardarBanco').on('click', function(){
        $("#banco_form").submit();
    });

    $("form#banco_form").submit(function (e) {
        e.preventDefault();
        MostrarLoader();

        const formData = new FormData(this);
        $.ajax({
            url: "/bancos/CrearBancos",
            type: "POST",
            data: formData,
            success: function (data) {
                if (data.status == "ok") {
                    SetComboMarca();
                    $("#modal-Bancos").modal('hide');
                } else {
                    toastr.error(data.message);
                }
                setTimeout(function () {
                    OcultarLoader();
                }, 100);
            },
            cache: false,
            contentType: false,
            processData: false,
        });
    });

    function SetComboMarca() {
        $.ajax({
            url: "/bancos/ListarBancos",
            type: "GET",
            headers: {
                'Content-Type': 'application/json',
                "X-CSRF-Token": csrfToken
            },
            success: function(data) {
                if (data.status == "ok") {
                    var opciones = ""; //"<option value=''>Elegir</option>";
                    for (let i in data.object) {
                        opciones += '<option value="' + data.object[i].id + '">' +
                            data.object[i].descripcion + '</option>';
                    }
                    document.getElementById("idbanco").innerHTML = opciones;    
                } else {
                    toastr.error(data.message);
                }
            },
            cache: false,
            contentType: false,
            processData: false,
        });
    }

})
  function check(e) {
    tecla = (document.all) ? e.keyCode : e.which;

    //Tecla de retroceso para borrar, siempre la permite
    if (tecla == 8) {
        return true;
    }

    // Patrón de entrada, en este caso solo acepta letras
    patron = /[A-Za-zÑñ ]/;
    //patron = /[A-Za-z0-9]/;para letras y numeros
    tecla_final = String.fromCharCode(tecla);
    return patron.test(tecla_final);
}
        
    </script>
@stop