@extends('plantilla')
@section('titulo', $titulo)
@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
<script>
    globalId = '0';
    
</script>
@endsection
@section('breadcrumb')
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/home">Inicio</a></li>
    <li class="breadcrumb-item"><a href="/formularios">Formulario pago</a></li>
    <li class="breadcrumb-item active">Nuevo</li>
</ol>
<ol class="toolbar">
    <li class="btn-item"><a title="Nuevo" href="/formulario/nuevo" class="fa fa-plus-circle" aria-hidden="true"><span>Nuevo</span></a></li>
    <li class="btn-item"><a title="Guardar" href="#" class="fa fa-floppy-o" aria-hidden="true" onclick="javascript: $('#modalGuardar').modal('toggle');"><span>Guardar</span></a>
    </li>
    <li class="btn-item"><a title="Guardar" href="#" class="fa fa-trash-o" aria-hidden="true" onclick="javascript: $('#mdlEliminar').modal('toggle');"><span>Eliminar</span></a>
    </li>
    <li class="btn-item"><a title="Salir" href="#" class="fa fa-arrow-circle-o-left" aria-hidden="true" onclick="javascript: $('#modalSalir').modal('toggle');"><span>Salir</span></a></li>
</ol>
<script>
function fsalir(){
    location.href ="/producto/formularios-de-pago";
}
</script>

@endsection
@section('contenido')
<div class="panel-body">
        <div id = "msg"></div>
                <form id="form1" method="POST">
            <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
            <input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}" required></input>
            <div class="row mb-2">
                <div class="form-group col-sm-6">
                    <label>Nombre *: </label>
                    <input type="text" id="txtNombreFormulario" name="txtNombreFormulario" class="form-control" value="{{$formularioDePago->nombre }}" required>
                </div>
                <div class="form-group col-sm-6">
                    <label>Producto: </label>
                    <select id="lstProducto" name="lstProducto" class="form-control selectpicker" data-live-search="true" required>
                        <option disabled selected value="">Seleccionar</option>
                        @for ($i = 0; $i < count($array_producto); $i++)
                            @if (isset($formularioDePago) and $array_producto[$i]->idproducto == $formularioDePago->fk_idproducto)
                                <option selected value="{{ $array_producto[$i]->idproducto }}">{{ $array_producto[$i]->nombre }}</option>
                            @else
                                <option value="{{ $array_producto[$i]->idproducto }}">{{ $array_producto[$i]->nombre }}</option>
                            @endif
                        @endfor
                    </select>
                </div>
                <div class="form-group col-sm-6">
                    <label>CUIT - Raz&oacute;n social: </label>
                    <select id="lstCuitFacturacion" name="lstCuitFacturacion" class="form-control selectpicker" data-live-search="true" required>
                        <option disabled selected value="">Seleccionar</option>
                        @for ($i = 0; $i < count($array_cuits); $i++)
                            @if (isset($formularioDePago) and $array_cuits[$i]->idcuit == $formularioDePago->fk_idcuitfacturacion)
                                <option selected value="{{ $array_cuits[$i]->idcuit }}">{{ $array_cuits[$i]->cuit }}</option>
                            @else
                                <option value="{{ $array_cuits[$i]->idcuit }}">{{ $array_cuits[$i]->cuit }}</option>
                            @endif
                        @endfor
                    </select>
                </div>
                <div class="form-group col-sm-6">
                    <label>Correo de notificacion *: </label>
                    <input type="email" id="txtCorreoNotificacion" name="txtCorreoNotificacion" class="form-control" value="{{$formularioDePago->correo_notificacion }}" required>
                </div>
                <div class="form-group col-sm-6">
                    <label>URL de confirmaci&oacute;n *: </label>
                    <input type="url" id="txtUrlConfirmacion" name="txtUrlConfirmacion" class="form-control" value="{{$formularioDePago->url_confirmacion }}" required>
                </div>
            </div>
            
            <div class="row">   
                <div class="col-sm-12">  
                    <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold text-primary">Medios de pago relacionados</h6>
                                <div class="pull-right">
                                    <button type="button" class="btn btn-secondary fa fa-minus-circle" onclick="abrirDialogoEliminarMedioDePago()"></button>
                                    <button type="button" class="btn btn-secondary fa fa-plus-circle" onclick="abrirModalMedioDePago()"></button>
                                </div>
                            </div>
                            <div class="panel-body">
                                <table id="grillaMedioDePago" class="display" style="width:98%">
                                    <thead>
                                        <tr>
                                            <th> </th>
                                            <th>Medio de pago</th>
                                        </tr>
                                    </thead>
                                </table> 
                            </div>
                    </div>          
                </div>
            </div>
    </form>
</div>
<!--Modal MedioDePago -->
<div class="modal fade" id="modalMedioDePago" tabindex="-1" role="dialog" aria-labelledby="modalMedioDePagoLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="display: inline-table">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBuscarLabel">Nuevo Medio de pago</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group col-lg-6">
                        <label>Medio de pago</label>
                        <select id="lstMedioDePago" name="lstMedioDePago" class="form-control">
                            @for ($i = 0; $i < count($array_medios_pago); $i++)
                                <option value="{{ $array_medios_pago[$i]->idmediodepago }}">{{ $array_medios_pago[$i]->nombre }}</option>
                            @endfor 
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="fAgregarMedioDePago();">Agregar</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalmsgMedioDePago" tabindex="-1" role="dialog" aria-labelledby="modalmsgMedioDePago">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBuscarLabel">Eliminar</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group col-lg-6">
                    &#191;Desea confirmar la operacion?
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="eliminarMedioDePago();">Aceptar</button>
            </div>
        </div>
    </div>
</div>
<!--Fin molda MedioDePago -->
<div class="modal fade" id="mdlEliminar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Eliminar registro?</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">¿Deseas eliminar el registro actual?</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary" onclick="eliminar();">Sí</button>
          </div>
        </div>
      </div>
</div>
<script>
//MedioDePago
    var datatable = $('#grillaMedioDePago').DataTable({
             "processing": true,
           "serverSide": false,
	        "bFilter": false,
	        "bInfo": true,
	        "bSearchable": false,
            "paging": false,
            "pageLength": 25,
            "order": [[ 0, "asc" ]],
            "ajax": "{{ asset('/formulario/cargarGrillaMedioDePago?idFormulario='.$globalId) }}"
        }); 

    $("#form1").validate();

    function guardar() {
        if ($("#form1").valid()) {
            modificado = false;
            form1.submit(); 
        } else {
            $("#modalGuardar").modal('toggle');
            msgShow("Corrija los errores e intente nuevamente.", "danger");
            return false;
        }
    }

    function eliminar() {
        $.ajax({
            type: "GET",
            url: "{{ asset('/formulario/eliminar') }}",
            data: { id:globalId },
            async: true,
            dataType: "json",
            success: function (data) {
                if (data) {
                    msgShow(data.msg, data.err);
    				$('#mdlEliminar').modal('toggle');
                } else {
                    msgShow("Error al eliminar", "success");
                }
            }
        });
    }
    
    //funcionalidad modal MedioDePago
    function abrirModalMedioDePago() {
        if(globalId == 0 ){
            msgShow("Debe guardar el formulario antes de poder dar de alta un Medio de pago asociada.", "danger");
        }
        else{
            $('#modalMedioDePago').modal('toggle');
        }

    }
    function limpiarFormularioMedioDePago(){
        $("#lstMedioDePago").val();
    }
    
    function fAgregarMedioDePago(){
    var grilla = $('#grillaMedioDePago').DataTable();
    grilla.row.add([
        "<input type='checkbox' name='txtId[]' value=''>",
        $("#lstMedioDePago option:selected").text() + "<input type='hidden' name='txtMedioDePago[]' value='"+ $("#lstMedioDePago option:selected").val() +"'>"
    ]).draw();
    $('#modalMedioDePago').modal('toggle');
    limpiarFormularioMedioDePago();
    } 
    function abrirDialogoEliminarMedioDePago() {
        $('#modalmsgMedioDePago').modal('toggle');
    }
    function eliminarMedioDePago() {
        var grilla = $('#grillaMedioDePago').DataTable();
        $('#grillaMedioDePago input[type=checkbox]').each(function () {
            if (this.checked) {
                $(this.parentElement.parentNode).addClass('borrar');
            }
        });
        grilla.rows('.borrar').remove().draw(false);
        $('#modalmsgMedioDePago').modal('toggle');
    }

</script>
@endsection