@extends('layouts.app')

@section('content')
    <!-- end sidebar menu -->
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                        <div class="page-title text-danger">Sin Sucursal</div>
                    </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li><i class="fa fa-square"></i>&nbsp;<a class="parent-item" href="{{ url('/puestos') }}">Listado de Cobros</a>
                        &nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">{{isset($edit) ? 'Actualizar' : 'Generar'}} - Listado de Cobro Automático</li>
                    </ol>
                </div>
            </div>
            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>{{isset($edit) ? 'Actualizar' : 'Generar'}} - Listado de Cobro Automático</header>
                        </div>
                        {!! Form::open(['url' => 'cobros/debito/automatico/guardar','method'=>'POST','role'=>'form','id'=>'frmContratos']) !!}
                        <div class="card-body">
                            <div class="row col-md-12">
                                 {!! Form::mtext('nombre',isset($edit) ? $edit->cliente_nombres : null,'Nombre',$errors,6,true,true,[['onkeyup'=>'javascript:this.value=this.value.toUpperCase()']]) !!}


                                 <div class="col-3">
                                    <label for="banco_popular" class="form-label">¿Banco Popular?</label><br>
                                    <input type="checkbox" name="banco_popular" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                            </div>
                            <div class="row col-md-12">
                                {!! Form::mDate('inicio',null,'Fecha Inicial',$errors,6,true) !!}

                                {!! Form::mDate('fin',null,'Fecha Final',$errors,6) !!}
                            </div>
                            <div class="row col-md-12">
                                {!! Form::mselect('modalidad_cobro',$modalidades,null,'Modalidad de Cobro',$errors,6,false) !!}

                                <div class="col-3">
                                    <label for="actual" class="form-label">Actual</label><br>
                                    <input class="filtro_modalidad" checked type="checkbox" name="actual" id="actual" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                                 <div class="col-3">
                                    <label for="morosidad" class="form-label">Morosidad</label><br>
                                    <input class="filtro_modalidad" type="checkbox" name="morosidad" id="morosidad" data-off="No" data-on="Si"  data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>

                            </div>
                        </div>
                        <div class="card-footer text-center">
                            <div class="text-center">
                                <button type="submit" class="btn bg-success">Aceptar</button>
                                <a class="btn bg-danger" href="{{url('cobros/debito/automatico/lista')}}">Cancelar</a>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function cambio(propiedad)
        {
            var chk_morosidad = document.querySelector('morisidad');
            var chk_actual = document.querySelector('actual');
            if(propiedad == 'actual'){
                chk_morosidad.checked = false;
            }else{
               chk_actual.checked = false;
            }
        }

        $('#frmContratos').validate({
                rules: {
                  nombre: {
                    required: true
                  },
                   inicio: {
                    required: true
                  },
                },
                messages: {
                  nombre: {
                    required: "Campo nombre es requerido"
                  },
                  inicio: {
                    required: "Campo fecha inicial es requerido"
                  },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                  error.addClass('invalid-feedback');
                  element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                  $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                  $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    var fecha_inicio = $('#inicio').val();
                    var fecha_fin = $('#fin').val();
                    var validacion = '';
                    var error = 0;
                    
                    
                    if(fecha_fin != ''){
                        //---Validar fecha fin sea mayor a fecha inicio--------------
                        if(fecha_inicio > fecha_fin){
                            Swal.fire({
                              icon: 'error',
                              title: 'Advertencia',
                              text: 'La fecha fin debe de ser mayor a la fecha de inicio',
                            });  
                            error++;
                        }
                    }

                    //--Validar si existe un registro con la misma fecha-------

                    if(error == 0){
                        $.ajax({
                            type: "POST",
                            url: "{{asset('').'cobros/debito/automatico/validar/fechas'}}",
                            data:{  "_token": "{{ csrf_token() }}", inicio:fecha_inicio,fin:fecha_fin},
                            success: function (res) {
                                if(res.datos.length != 0){
                                    var fila_tabla = '';
                                    for(var i = 0 ; i < res.datos.length ; i++){
                                        fila_tabla += `<tr>
                                                            <td>${res.datos[i].cobro_planilla_nombre}</td>
                                                            <td>${res.datos[i].cobro_planilla_codigo}</td>
                                                            <td>${res.datos[i].cobro_planilla_periodo}</td>
                                                            <td>${res.datos[i].cobro_planilla_periodofin}</td>
                                                        </tr>`;
                                         fila_tabla += `<p>${res.datos[i].cobro_planilla_nombre} ${res.datos[i].cobro_planilla_codigo} ${res.datos[i].cobro_planilla_periodo} ${res.datos[i].cobro_planilla_periodofin}</p>`;               
                                    }
                                    Swal.fire({
                                      icon: 'warning',
                                      title: 'Crear Listado',
                                      width: 600,
                                      html: `<div class="text-justify">Ya existe(n) listado(s) con ese rango de fechas. Si crea el listado no se tendran en cuenta los cobros relacionados en otro listado.</div><br>
                                      <div class="text-center"><strong>¿Desea crear el listado?</strong></div><br>
                                      Listado(s):<br>
                                      <div class="table-responsive">
                                        <table class="table">
                                            ${fila_tabla}
                                        </table>
                                      </div>
                                       
                                        `,
                                    showCloseButton: true,
                                    showCancelButton: true,
                                    confirmButtonText:`<i class="fa fa-check"></i> Crear Listado`,
                                    cancelButtonText:'<i class="fa fa-ban"></i> Cancelar',
                                    customClass: {
                                        confirmButton: 'btn btn-primary',
                                        cancelButton: 'btn btn-warning'
                                    },
                                    }).then((result) => { 
                                        if (result.isConfirmed){
                                            form.submit();
                                        }
                                    });
                                }else
                                    form.submit();
                            },
                                dataType: "json"
                        });
                    }
                }
              });

        $(document).ready(function () {
             $(".toggle").click( function () {
                let current = $(this)
                let currentId = current.children().attr("id")
                let currentClass = current.children().attr("class")

                console.log('currentClass :', currentClass)

                $( ".toggle" ).children('.'+currentClass).each(function( index, element ) {
                    console.log('element :', element)
                    if ( !$( this ).is( currentId ) ) {
                        $(this).bootstrapToggle('off')
                    }
                })
            });
             //Initialize Select2 Elements
            $('.select2').select2();
        });
    </script>
@endsection