@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 Puestos</a>
                        &nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Planilla de Cobro - {{isset($edit) ? 'Actualizar' : 'Generar'}}</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>Planilla de Cobro - {{isset($edit) ? 'Actualizar' : 'Generar'}}</header>
                        </div>
                         @if(isset($edit))
                            {!! Form::model($edit,['url' => ['puesto/actualizar/'.$edit->puesto_id],'method'=>'PATCH','id'=>'frmContratos']) !!}
                        @else
                            {!! Form::open(['url' => 'cobros/asocaciones/planillas/crear','method'=>'POST','role'=>'form','id'=>'frmContratos']) !!}
                        @endif
                        <div class="card-body">
                            <div class="row col-md-12">
                                {!! Form::mselect('asociacion',$asociaciones, null,'Asociación Solidarista',$errors,6,false) !!}

                                {!! Form::mtext('nombre',null,'Nombre',$errors,6,true,true,[['onkeyup'=>'javascript:this.value=this.value.toUpperCase()']]) !!}
                            </div>
                            <div class="row col-md-12">
                                {!! Form::mDate('inicio',null,'Fecha Inicial',$errors,6) !!}

                                {!! Form::mDate('fin',null,'Fecha Final',$errors,6) !!}
                            </div>
                            <div class="row col-md-12">
                                {!! Form::mselect('modalidad_cobro',$modalidad_cobros, isset($edit) ? ($edit->puesto_estado == 0 ? 2 : 1) : null,'Modalidad de Cobro',$errors,6,false) !!}
                            </div>
                            <div class="row col-md-12">

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label  class="form-label text-color-dark text-3" for="">Monto Cobro inicial</label>
                                        <input class="form-control" type="text" value="{{isset($edit) ? '₡ '. number_format($edit->monto_inicial, 2, ',', '.') : '' }}" name="monto_inicial" id="monto_inicial" data-thousands="." data-decimal="," data-prefix="₡ " />
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label  class="form-label text-color-dark text-3" for="">Monto Cobro Final</label>
                                        <input class="form-control" type="text" value="{{isset($edit) ? '₡ '. number_format($edit->monto_final, 2, ',', '.') : '' }}" name="monto_final" id="monto_final" data-thousands="." data-decimal="," data-prefix="₡ " />
                                    </div>
                                </div>

                            </div>
                             <div class="row mb-1 col-md-12">
                                <div class="col-2">
                                    <label for="todos_clientes" class="form-label">Todos los Clientes</label><br><br>
                                    <input class="filtroClientes" checked type="checkbox" id="todos_clientes" name="todos_clientes" data-off="No" data-on="Si"  data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                                <div class="col-2">
                                    <label for="clientes_nuevos" class="form-label">Sólo Clientes Nuevos</label><br><br>
                                    <input class="filtroClientes" type="checkbox" id="clientes_nuevos" name="clientes_nuevos" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                                <div class="col-2">
                                    <label for="sin_clientes_nuevos" class="form-label">Sin Clientes Nuevos</label><br><br>
                                    <input class="filtroClientes" type="checkbox" id="sin_clientes_nuevos" name="sin_clientes_nuevos" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>

                                <div class="col-2">
                                    <label for="todos_clientes" class="form-label">Adeudados hasta la fecha seleccionada</label><br>
                                    <input class="filtroFecha" id="hasta_fecha" type="checkbox" name="hasta_fecha" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                                <div class="col-2">
                                    <label for="clientes_nuevos" class="form-label">Sólo cobro de la fecha seleccionada</label><br>
                                    <input class="filtroFecha" id="solo_cobro" type="checkbox" name="solo_cobro" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                                 <div class="col-2">
                                    <label for="sin_clientes_nuevos" class="form-label">Pagaron en la fecha seleccionada</label><br>
                                    <input class="filtroFecha" checked id="pagaron_fecha" type="checkbox" name="pagaron_fecha" data-off="No" data-on="Si"  data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                            </div>
                            <div class="row mb-1 col-md-12">
                                <div class="col-3">
                                    <label for="clientes_nuevos" class="form-label">Actual</label><br>
                                    <input class="filtroMorosidad" checked type="checkbox" id="actual" name="actual" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                </div>
                                 <div class="col-3">
                                    <label for="sin_clientes_nuevos" class="form-label">Morosidad</label><br>
                                    <input class="filtroMorosidad" type="checkbox" id="morosidad" name="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/asocaciones/planillas/lista')}}">Cancelar</a>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>

        $('#frmContratos').validate({
                 rules: {
                    nombre: {
                        required: true
                  },
                    asociacion: {
                        required: true
                  }, 
                },
                messages: {
                  nombre: {
                    required: "Campo nombre es requerido"
                  },
                  asociacion: {
                    required: "Favor de selccionar una asociación"
                  },
                },
                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){
                        let asociacion = $('#asociacion').val();
                        $.ajax({
                            type: "POST",
                            url: "{{asset('').'cobros/asociaciones/validar/fechas'}}",
                            data:{  "_token": "{{ csrf_token() }}", inicio:fecha_inicio,fin:fecha_fin, asociacion},
                            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,
                                    showConfirmButton: true,
                                    confirmButtonText:'<i class="fa fa-check"></i> Generar',
                                    cancelButtonText:'<i class="fa fa-ban"></i> Cancelar',
                                    customClass: {                                        
                                        cancelButton: 'btn btn-warning',
                                        confirmButton: 'btn btn-primary'
                                    },
                                    }).then((result) => { 
                                        if (result.isConfirmed){
                                            form.submit();
                                        }
                                    });ORS-5556
                                }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)

                     //console.log('$(this) :', $(this).name)
                     console.log('current :', current)
                     console.log('name :', '#'+name)
                     //console.log('is :', $( this ).is( '#'+name ))
                    if ( !$( this ).is( currentId ) ) {
                        console.log(index);
                        console.log(currentId);
                        $(this).bootstrapToggle('off')
                    }
                })
            })

            $("#monto_inicial").maskMoney();
            $("#monto_final").maskMoney();
            
             //Initialize Select2 Elements
            $('.select2').select2()


         


            });
    </script>
@endsection