@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-users"></i>&nbsp;<a class="parent-item" href="{{ url('/asociaciones') }}">Listado de Asociaciones</a>
                        &nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">{{isset($edit) ? 'Actualizar' : 'Registrar'}} Detalle de Caja Chica</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' : 'Registrar'}} Detalle de Caja Chica</header>
                        </div>
                        <div class="card-body">
                            @if(isset($edit))
                                {!! Form::model($edit,['url' => ['caja/activa/actualizar/'.$edit->caja_chica_detalle_id],'method'=>'PATCH','enctype'=>'multipart/form-data','id'=>'frmClientes']) !!}
                            @else
                                {!! Form::open(['url' => 'caja/activa/guardar_egreso','method'=>'POST','enctype'=>'multipart/form-data','role'=>'form','id'=>'frmAsociacion']) !!}
                            @endif
                                <input type="hidden" name="caja_id" value="{{ $caja_id }}" />
                                @isset($id_caja)
                                    <input type="hidden" name="id_caja" value="{{ $id_caja }}">                                    
                                @endisset
                                <input type="hidden" name="caja_chica_id" value="{{ $caja_chica_id }}" />
                                @if(isset($mensaje))
                                    <div id="w4-danger" class="alert-danger alert in">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                        <i class="icon fa fa-ban"></i> {{ $mensaje }}
                                    </div>
                                @endif

                                @if(isset($edit))
                                    <div class="row mb-3 col-md-12">
                                        <label for="docu_soporte" class="form-label">Documento de Soporte</label>
                                        <input type="file" class="form-control" name="docu_soporte" id="docu_soporte">
                                        @if(isset($edit->caja_chica_detalle_soporte_file) and !empty($edit->caja_chica_detalle_soporte_file))
                                            <br />
                                            <br />
                                            <a target="_blank" class="btn btn-info my-2" href="{{ asset('upload/files-caja-chica/files-caja-chica-detalle/'.$edit->caja_chica_detalle_soporte_file) }}"><i class="fa fa-download"></i> Ver Adjunto Actual</a>
                                        @endif
                                    </div> 
                                @else
                                <div class="row mb-3 col-md-12">
                                    <label for="docu_soporte" class="form-label">Documento de Soporte</label>
                                    <input type="file" class="form-control" name="docu_soporte" id="docu_soporte">
                                </div>                                
                                @endif

                                <div class="row mb-3 col-md-12">
                                    {!! Form::mselect('tipo',$tipos, isset($edit) ? $edit->caja_chica_detalle_tipo_gasto_id : null,'Tipo de Gasto',$errors,6,true,true) !!}

                                    <div class="col-6">
                                        <label for="proveedor" class="form-label">Proveedor
                                        </label>
                                        <div class="input-group mb-3">
                                            <select name="proveedor" id="proveedor" class="form-control select2" style="width: 90%;" placeholder="Seleccionar">
                                               <option value="" selected>Seleccionar</option> 
                                               @foreach($proveedor as $key => $value)
                                                    @if(isset($newprov))
                                                        @if($newprov == $key)
                                                            <option value="{{$key}}" selected>{{$value}}</option>
                                                        @else
                                                            <option value="{{$key}}">{{$value}}</option>
                                                        @endif
                                                    @elseif(isset($edit))
                                                        @if($edit->caja_chica_detalle_cliente_proveedor_id == $key)
                                                            <option value="{{$key}}" selected>{{$value}}</option>
                                                        @else
                                                            <option value="{{$key}}">{{$value}}</option>
                                                        @endif
                                                    @else
                                                    <option value="{{$key}}">{{$value}}</option>
                                                    @endif
                                                @endforeach
                                            </select>

                                            <div class="input-group-append">
                                            <a class="btn btn-info" data-toggle="modal" data-target="#staticModal"><i class="fa fa-plus"></i></a>
                                          </div>
                                        </div>                                             
                                    </div>

                                </div>
                                
                                <div class="row mb-3 col-md-12">
                                    {!! Form::mtext('documento',isset($edit) ? $edit->caja_chica_detalle_documento : null,'Documento',$errors,6,true,true,[['onkeyup'=>'javascript:this.value=this.value.toUpperCase()']]) !!}

                                    <div class="col-6">
                                        <label for="fecha_documento" class="form-label">Fecha de Documento   </label><br>
                                        <input class="form-control" required type="date" name="fecha_documento" id="fecha_documento" data-off="No" data-on="Si"  value="{{isset($edit) ? $edit->caja_chica_detalle_fecha_documento : date('Y-m-d')}}" />
                                    </div> 

                                    <!-- {!! Form::mDate('fecha_documento',isset($edit) ? $edit->caja_chica_detalle_fecha_documento : null,'Fecha de Documento',$errors,6,true,true) !!} -->
                                </div>
                                <div class="row mb-3 col-md-12">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label  class="form-label text-color-dark text-3" for="'.$name.'">Monto</label>
                                            <input class="form-control" type="text" value="{{isset($edit) ? '₡ '. number_format($edit->caja_chica_detalle_monto, 2, ',', '.') : '' }}" name="monto" id="monto" data-thousands="." data-decimal="," data-prefix="₡ " required />
                                        </div>
                                    </div>

                                    {!! Form::mtext('dinero_dado',isset($edit) ? $edit->caja_chica_detalle_dado_a : null,'Dinero Dado A',$errors,6,false,true,[['onkeyup'=>'javascript:this.value=this.value.toUpperCase()']]) !!}

                                </div>
                                <div class="row mb-3 col-md-12">
                                    <!-- {!! Form::mtextAr('observaciones',isset($edit) ? $edit->caja_chica_detalle_observaciones : null,'Observaciones',$errors,6,true) !!} -->

                                    <div class="col-6">
                                        <label for="observaciones" class="form-label">Observaciones   </label><br>
                                        <textarea class="form-control" required name="observaciones" id="observaciones" data-off="No" data-on="Si"  value="">{{isset($edit) ? $edit->caja_chica_detalle_observaciones : null}}</textarea>
                                    </div> 

                                    @if(isset($edit))

                                    @else
                                    <div class="col-6">
                                        <label for="telefonos" class="form-label">¿Comprobante Interno?   </label><br>
                                        <input type="checkbox" name="comprob_interno" id="comprob_interno" data-off="No" data-on="Si"  {{isset($edit) ? $edit->caja_chica_detalle_comprobante_interno ? 'checked' : '' : ''}}   data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                                    </div>                                    
                                    @endif
                                    
                                </div>

                                <div class="row mb-3 col-md-12">

                                    {!! Form::mselect('orden_servicio',$ordenes_servicio, isset($edit) ? $edit->caja_chica_detalle_orden_producto_id : null,'Orden Servicio Funerario',$errors,6,true,true) !!}

                                </div>

                            </div>
                            
                        <div class="card-footer text-center">
                            <div class="text-center">
                                <button type="submit" class="btn bg-success">{{isset($edit) ? 'Actualizar' : 'Registrar'}} Detalle</button>
                                <a class="btn bg-danger" 
                                    onclick="return goBack();"
                                >Cancelar</a>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>

            <div class="modal fade" id="staticModal" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticModalLabel">Agregar Proveedor</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        {!! Form::open(['url' => 'caja/activa/guardar_proveedor','method'=>'POST','enctype'=>'multipart/form-data','role'=>'form','id'=>'frmProveedor']) !!}
                            <div class="clearfix"></div>
                            <div class="modal-body">
                                <input type="hidden" name="caja_id" value="{{ $caja_id }}" />
                                <input type="hidden" name="caja_chica_id" value="{{ $caja_chica_id }}" />
                                <div class="row mb-1 col-md-12">
                                    <div class="col-6">
                                        <label for="sede" class="form-label">Sede Principal
                                        </label>
                                        <div class="input-group mb-3">
                                            <select name="sede" id="sede" class="form-control" style="width: 90%;" placeholder="Seleccionar">
                                               <option value="" selected>Seleccionar</option> 
                                                @foreach($sede as $key => $value)
                                                    <option value="{{$key}}">{{$value}}</option>
                                                @endforeach
                                            </select>
                                        </div>                                             
                                    </div>

                                    {!! Form::mtext('identificador',isset($edit) ? $edit->cliente_proveedor_documento : null,'Identificación (NIT)',$errors,6,true,true,[['onkeypress'=>'return event.charCode > 47 && event.charCode < 58;']]) !!}
                                </div>
                                <div class="row mb-1 col-md-12">
                                    {!! Form::mtext('nombre',isset($edit) ? $edit->cliente_proveedor_nombre : null,'Nombre',$errors,6,true,true,[['onkeyup'=>'javascript:this.value=this.value.toUpperCase()']]) !!}

                                    {!! Form::mtext('siglas',isset($edit) ? $edit->cliente_proveedor_sigla : null,'Siglas',$errors,6,false,true,[['onkeyup'=>'javascript:this.value=this.value.toUpperCase()']]) !!}                                
                                </div>
                                <div class="row mb-1 col-md-12">
                                    {!! Form::mtext('telefono',isset($edit) ? $edit->cliente_proveedor_telefono_principal : null,'Teléfono Principal',$errors,6,false,true,[['onkeypress'=>'return event.charCode > 47 && event.charCode < 58;'],['maxlength'=>'8']]) !!}
                                    
                                    @php $telefonos =  isset($edit) ? str_replace(']','',str_replace('"]','',str_replace('"','',str_replace('["','',$edit->cliente_telefonos)))) : null; @endphp

                                    <div class="col-6">
                                        <label for="localidad" class="form-label">Localidades
                                        </label>
                                        <div class="input-group mb-3">
                                            <select name="localidad" id="localidad" class="form-control" style="width: 90%;" placeholder="Seleccionar">
                                               <option value="" selected>Seleccionar</option> 
                                                @foreach($localidades as $key => $value)
                                                    <option value="{{$key}}">{{$value}}</option>
                                                @endforeach
                                            </select>
                                        </div>                                             
                                    </div>
                                </div>
                                <div class="row mb-1 col-md-12">
                                    {!! Form::mtextAr('direccion',isset($edit) ? $edit->cliente_proveedor_direccion : null,'Dirección',$errors,6,false,false,'onkeyup="javascript:this.value=this.value.toUpperCase()"') !!}
                                
                                    {!! Form::mEmail('email',isset($edit) ? $edit->cliente_proveedor_email : null,'Correo Electrónico',$errors,6) !!}
                                </div>

                            </div>
                            <div class="modal-footer center-content-between">
                                <button type="submit" class="btn bg-success">Guardar</button>
                                <a class="btn bg-warning text-white" data-dismiss="modal" aria-label="Close">Cancelar</a>
                            </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
            
        </div>
    </div>

</div>
@endsection

@section('script')

<script>
    function goBack() {
        window.history.back();
    }
        $(document).ready(function () {
            $("#monto").maskMoney();

            $('.select2').select2();

            // $('#proveedor').select2({
            //     ajax: {
            //         dataType: 'json',
            //         url: "{{asset('').'ajax/proveedores'}}",
            //         delay: 250,
            //         minimumInputLength: 3,
            //         data: function(params) {                    
            //                 var query = {
            //                     search: params.term,
            //                 }
            //                 console.log(query);
            //                 return query;
            //         },
            //         processResults: function (data, page) {
            //         console.log(data);
            //         return {
            //             results: data
            //         };
            //         },
            //         theme: "classic"
            //     }
            // });
        });
    </script>

@if(isset($edit))
    <script type="text/javascript">
    function onloadingedit(){
        $("#documento").prop('readonly', true); //readonly
        $("#fecha_documento").prop('readonly', true); //readonly
        $("#monto").prop('readonly', true); //readonly
        $("#dinero_dado").prop('readonly', true); //readonly
    }
    function onloading(){
        document.getElementById("tipo").required = true;
        $("#tipo").addClass('is-invalid');
        document.getElementById("proveedor").required = true;
        $("#proveedor").addClass('is-invalid');
    }
    onloadingedit();
    onloading();
    </script>
@else
    <script type="text/javascript">
    function onloading(){
        document.getElementById("tipo").required = true;
        $("#tipo").addClass('is-invalid');
        document.getElementById("proveedor").required = true;
        $("#proveedor").addClass('is-invalid');
    }
    onloading();
    </script>
@endif

    
    <script>
        $("#comprob_interno").change(function() {
        if ($(this).is(":checked")) {
            $("#docu_soporte").addClass('isHidden');
            $("#documento").val('Automatico');
            $("#documento").prop('disabled', true); //disable
        }else{
            $("#docu_soporte").removeClass('isHidden');
            $("#documento").val('');
            $("#documento").prop('disabled', false); //disable   
        }
        });
    </script>

    <script>

        /*$('body').on('shown.bs.modal', '.modal', function() {
  $(this).find('select').each(function() {
    var dropdownParent = $(document.body);
    if ($(this).parents('.modal.in:first').length !== 0)
      dropdownParent = $(this).parents('.modal.in:first');
    $(this).select2({
       dropdownParent: dropdownParent
      
    });
  });
});*/

       /*$('#sede_perteneciente').select2({
        dropdownParent: $('#staticModal')
    });*/

    /*$('#sexo').select2({
   dropdownParent: $('#staticModal');
});*/
        $('#frmProveedor').validate({
            rules: {
                nombre: {
                    required: true,
                },
                telefono: {
                    required: true,
                },
                identificador: {
                    required: true,
                },

            },
             messages: {
                nombre: {
                        required: "El campo nombre es requerido.",
                },
                telefono: {
                        required: "El campo teléfono principal es requerido.",
                },
                identificador: {
                        required: "El campo identificador 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 celular = $('#telefono').val();
            var telefonos = $('#telefonos').val();
            var html = '';
            var validacion = '';
            
            if(celular == '' && telefonos == '' ){
                validacion = 'Debe ingresar alguno de los campos celular o teléfonos.';
            }

            if(celular != '' && validacion == ''){
              if(celular.length < 8){
                    validacion = 'El campo celular solo debe contener 8 caracteres de tipo numerico.';
                }
            }

            if(telefonos != '' && validacion == ''){
                var arrayTelefonos =  telefonos.split(',');

                for(var i = 0 ; i < arrayTelefonos.length; i++){
                    if(arrayTelefonos[i].length < 8 || isNaN(arrayTelefonos[i]*1)){
                        validacion += 'El teléfono ('+arrayTelefonos[i]+') debe contener 8 caracteres de tipo numerico.'+"<br/>"
                    }
                }
                html = validacion;
            }

                    if(validacion != ''){
                        Swal.fire({
                          icon: 'error',
                          title: 'Advertencia',
                          text: html == '' ? validacion : '',
                          html: html
                        });
                    }else{
                        form.submit();
                    }
        }
        });

       

     $(document).ready(function () {
          $.validator.setDefaults({
            submitHandler: function () {
              saveEncargado();
            }
          });

           $('#quickForm').validate({
            rules: {
                documento: {
                    required: true,
                },
                nombres: {
                    required: true,
                },
                paterno: {
                    required: true,
                }, 
            },
            messages: {
                documento: {
                        required: "El campo documento es requerido.",
                },
                nombres: {
                        required: "El campo nombres es requerido.",
                },
                paterno: {
                        required: "El campo primer apellido 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');
        }
        });        
       

        /*$('#empleado').select2({
            ajax: {
                dataType: 'json',
                url: "{{asset('').'ajax/empleados'}}",
                delay: 250,
                minimumInputLength: 3,
                data: function(params) {                    
                        var query = {
                            search: params.term,
                            page: params.page || 1
                        }
                        console.log(query);
                        return query;
                },
                processResults: function (data, page) {
                  return {
                    results: data
                  };
                },
                theme: "classic"
            }
        });*/
    });

        function saveEncargado(){
            console.log("{{asset('').'empleado/save/modal'}}");
            var sede = $('#sede').val();
            var documento = $('#documento').val();
            var nombres = $('#nombres').val();
            var paterno = $('#paterno').val();
            var materno = $('#materno').val();
            var sexo = $('#sexo').val();
            var celular = $('#celular').val();
            var telefonos = $('#telefonos').val();

            $.ajax({
                type: "POST",
                url: "{{asset('').'empleado/save/modal'}}",
                data:{  "_token": "{{ csrf_token() }}",
                        sede:sede, documento:documento,nombres:nombres,paterno:paterno,materno:materno, sexo:sexo,celular:celular,telefonos:telefonos},
                success: function (res) {
                    console.log(res.data);

                    document.getElementById("empleado").options[document.getElementById("empleado").options.length]=new Option(nombres+' '+paterno+' '+materno, res.data);
                    $('#staticModal').modal('hide');
                    Swal.fire(
                    'Alerta',
                    'Registro almacenado con éxito!',
                    'success'
                    )

                    $('#empleado').append(`
                        <option selected value="${res.empleado_id}">
                            ${res.empleado_nombres} ${res.empleado_apellido1} ${res.empleado_apellido2}
                        </option>
                    `)

                    // setTimeout(() => {
                    //     location.reload()
                    // }, 1500);
                },
                dataType: "json"
            });
        }
        /*$(function () {
             //Initialize Select2 Elements
            $('.select2').select2()

            //Initialize Select2 Elements
            $('.select2bs4').select2({
              theme: 'bootstrap4'
            })
        });*/
    </script>
@endsection