@extends('layouts.app')

@section('content')
    <!-- end sidebar menu -->
    <!-- start page content -->
    {{-- @dump($cliente2) --}}
    <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 class="active">Detalles 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>Detalles de Caja Chica</header>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-10">
                                    <a href="{{ url('reportes/detalle_caja_chica') }}" class="btn btn-warning mb-3">Limpiar Filtro</a>
                                </div>
                                <div class="tools">
                                    {!! Form::open(['url' => 'reportes/detalle_caja_chica', 'method' => 'get', 'id' => 'frmFiltros']) !!}
                                    <input type="hidden" id="accion" name="accion" value="1">
                                    <!-- Example split danger button -->
                                    <div class="btn-group">
                                        <button class="btn btn-default dropdown-toggle" type="button"
                                            data-toggle="dropdown" aria-expanded="false">
                                            Exportar Todo
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" onclick="generar()"><i
                                                    class="fa fa-file-excel-o"></i>&nbsp;Excel</a>
                                        </div>
                                    </div>
                                    </div>


                                </div>
                            </div>
                            <div class="table-wrap">
                                <div class="table-responsive">
                                    <table class="table table-checkable order-column full-width dataTable no-footer"
                                        role="grid" style="margin-left: 0px; width: 1009.98px;">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <td><b>Caja</b></td>
                                                <td><b>Consecutivo de Caja</b></td>
                                                <td><b>Documento</b></td>
                                                <td><b>Tipo de Gasto</b></td>
                                                <td><b>Proveedor</b></td>
                                                <td><b>Observaciones</b></td>
                                                <td><b>Fecha de Documento</b></td>
                                                <td><b>Dinero Dado A</b></td>
                                                <td><b>Monto</b></td>
                                                <td><b>¿Comprobante Interno?</b></td>
                                                <td><b>Orden Servicio Funerario</b></td>
                                                <td><b></b></td>
                                            </tr>
                                            <tr>

                                                <th></th>
                                                <th>
                                                    <input type="hidden" name="caja_id" value="{{ $caja }}">
                                                    {!! Form::select('caja', [], $caja, [
                                                        'id' => 'caja',
                                                        'class' => 'form-control select2',
                                                        'style' => 'width: 100%;',
                                                        'onchange' => "buscar('caja_chica_detalle_tipo_gasto_id')",
                                                        'placeholder' => 'Caja',
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('consecutivo_de_caja',$consecutivo_de_caja,['id'=>'consecutivo_de_caja','class'=>'form-control','placeholder'=>'consecutivo','onchange'=>"buscar('consecutivo_de_caja')"]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('caja_chica_detalle_documento',$caja_chica_detalle_documento,['id'=>'caja_chica_detalle_documento','class'=>'form-control','placeholder'=>'Documento','onchange'=>"buscar('caja_chica_detalle_documento')"]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::select('caja_chica_detalle_tipo_gasto_id', $tipo_gasto, $caja_chica_detalle_tipo_gasto_id, [
                                                        'id' => 'caja_chica_detalle_tipo_gasto_id',
                                                        'class' => 'form-control select2',
                                                        'style' => 'width: 100%;',
                                                        'onchange' => "buscar('caja_chica_detalle_tipo_gasto_id')",
                                                        'placeholder' => 'Tipo gasto',
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    <input type="hidden" name="cliente_proveedor_id" value="{{$caja_chica_detalle_cliente_proveedor_id}}">
                                                    {!! Form::select('caja_chica_detalle_cliente_proveedor_id',[], $caja_chica_detalle_cliente_proveedor_id, [
                                                        'id' => 'caja_chica_detalle_cliente_proveedor_id',
                                                        'class' => 'form-control select2',
                                                        'style' => 'width: 100%;',
                                                        'onchange' => "buscar('caja_chica_detalle_cliente_proveedor_id')",
                                                        'placeholder' => 'Cliente Proveedor',
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('caja_chica_detalle_observaciones',$caja_chica_detalle_observaciones,['id'=>'caja_chica_detalle_documento','class'=>'form-control','placeholder'=>'Observaciones','onchange'=>"buscar('caja_chica_detalle_observaciones')"]) !!}
                                                </th>
                                                <th>

                                                    {!! Form::text('caja_chica_detalle_fecha_documento',$caja_chica_detalle_fecha_documento,['id'=>'caja_chica_detalle_fecha_documento','class'=>'form-control','placeholder'=>'Fecha documento']) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('caja_chica_detalle_dado_a',$caja_chica_detalle_dado_a,['id'=>'caja_chica_detalle_dado_a','class'=>'form-control','placeholder'=>'Dinero Dado A','onchange'=>"buscar('caja_chica_detalle_observaciones')"]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('caja_chica_detalle_monto',$caja_chica_detalle_monto,['id'=>'caja_chica_detalle_monto','class'=>'form-control','placeholder'=>'Monto','onchange'=>"buscar('caja_chica_detalle_monto')"]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::select('caja_chica_detalle_comprobante_interno',[1 => 'Si', 0 => 'No'],$caja_chica_detalle_comprobante_interno, [
                                                        'id' => 'caja_chica_detalle_comprobante_interno',
                                                        'class' => 'form-control select2',
                                                        'style' => 'width: 100%;',
                                                        'onchange' => "buscar('caja_chica_detalle_comprobante_interno')",
                                                        'placeholder' => 'Comprobante Interno',
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    <input type="hidden" name="orden_producto_id" value="{{$caja_chica_detalle_orden_producto_id}}">
                                                    {!! Form::select('caja_chica_detalle_orden_producto_id',[1 => 'Si', 0 => 'No'],$caja_chica_detalle_orden_producto_id, [
                                                        'id' => 'caja_chica_detalle_orden_producto_id',
                                                        'class' => 'form-control select2',
                                                        'style' => 'width: 100%;',
                                                        'onchange' => "buscar('caja_chica_detalle_orden_producto_id')",
                                                        'placeholder' => 'Orden Servicio Funerario',
                                                    ]) !!}
                                                </th>
                                                {!! Form::close() !!}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if (count($data) > 0)
                                                @foreach ($data as $key => $caja_chica)
                                                    <tr class="gradeX odd" role="row">
                                                        <td>{{ $key+1 }}</td>
                                                        <x-validated-td :item="$caja_chica->caja" />
                                                        <x-validated-td :item="$caja_chica->consecutivo_de_caja" />
                                                        <x-validated-td :item="$caja_chica->caja_chica_detalle_documento" />
                                                        <x-validated-td :item="$caja_chica->caja_chica_detalle_tipo_gasto_id" />
                                                        <x-validated-td :item="$caja_chica->caja_chica_detalle_cliente_proveedor_id" />
                                                            <td @if(Str::length($caja_chica->caja_chica_detalle_observaciones)>50) class="resumen" data-texto-completo="{{ $caja_chica->caja_chica_detalle_observaciones }}" @endif>
                                                                @if ($caja_chica->caja_chica_detalle_observaciones)
                                                                    {{ Str::limit($caja_chica->caja_chica_detalle_observaciones, 50) }}
                                                                @else
                                                                    <span class="text-danger"></span>
                                                                @endif
                                                            </td>
                                                        {{-- <x-validated-td :item="$caja_chica->caja_chica_detalle_observaciones" /> --}}
                                                        <x-validated-td :item="$caja_chica->caja_chica_detalle_fecha_documento" />
                                                        <x-validated-td :item="$caja_chica->caja_chica_detalle_dado_a" />
                                                        <x-validated-td :item="$caja_chica->caja_chica_detalle_monto" />


                                                        <x-validated-td :item="$caja_chica->caja_chica_detalle_comprobante_interno" />
                                                        <x-validated-td :item="$caja_chica->caja_chica_detalle_orden_producto_id" />

                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="10" class="text-center">No se encontraron resultados.
                                                    </td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div class="card-footer">
                            <div class="float-right">
                                {{ $data->appends([
                                    'caja' => $caja,
                                    'consecutivo_de_caja' => $consecutivo_de_caja,
                                    'caja_chica_detalle_documento' => $caja_chica_detalle_documento,
                                    'caja_chica_detalle_tipo_gasto_id' => $caja_chica_detalle_tipo_gasto_id,
                                    'caja_chica_detalle_cliente_proveedor_id' => $caja_chica_detalle_cliente_proveedor_id,
                                    'caja_chica_detalle_observaciones' => $caja_chica_detalle_observaciones,
                                    'caja_chica_detalle_dado_a' => $caja_chica_detalle_dado_a,
                                    'caja_chica_detalle_monto' => $caja_chica_detalle_monto,
                                    'caja_chica_detalle_comprobante_interno' => $caja_chica_detalle_comprobante_interno,
                                    'caja_chica_detalle_orden_producto_id' => $caja_chica_detalle_orden_producto_id,
                                    'caja_chica_detalle_fecha_documento' => $caja_chica_detalle_fecha_documento,
                                    ])->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal --}}
    <div class="modal" id="modal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <!-- Aquí se mostrará el contenido resumido del <td> -->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
            </div>
          </div>
        </div>
      </div>
@endsection
@section('script')
    <script type="text/javascript">
        function generar() {
            $('#accion').val(2);
            /* document.getElementById("frmFiltros").submit(); */
            $('#frmFiltros').submit()
        }

        function chkMarcados() {
            console.log('marcar chk');
        }

        function limpiar() {
            $('#documento').val('');
            $('#cliente').val('').change();
            $('#email').val('');
            $('#celular').val('');
            $('#telefonos').val('');
            $('#sede').val('').change();
            $('#tipo_cliente').val('').change();
            document.getElementById("frmFiltros").submit();
        }


        function buscar(tipo) {

            $('#accion').val(1);
            var textoSelect = $('#' + tipo).val();
            const ENTER_KEY_CODE = 13;

            switch (tipo) {
                case 'caja_chica_detalle_fecha_documento':
                    document.querySelector('#caja_chica_detalle_fecha_documento').addEventListener('keyup', function(e) {
                        if (e.keyCode === ENTER_KEY_CODE) {
                            document.getElementById("frmFiltros").submit();
                        }
                    });
                    break;
                default:
                    document.getElementById("frmFiltros").submit();
                    break;
            }

        }

        $(document).ready(function() {


            $('#caja_chica_detalle_cliente_proveedor_id').select2({
                ajax: {
                    dataType: 'json',
                    url: '{{ url('ajax/cliente_proveedor') }}',
                    delay: 250,
                    //minimumInputLength: 3,
                    data: function(param) {
                        let q = param.term.toLowerCase()
                        var query = {
                            search: q
                        }

                        console.log('query :', query)
                        return query;
                    },
                    processResults: function(data, page) {
                        return {
                            results: data
                        };
                    },
                    theme: "classic"
                }
            });

            $('#caja').select2({
                ajax: {
                    dataType: 'json',
                    url: '{{ url('ajax/cajas') }}',
                    delay: 250,
                    //minimumInputLength: 3,
                    data: function(param) {
                        let q = param.term.toLowerCase()
                        var query = {
                            search: q
                        }

                        console.log('query :', query)
                        return query;
                    },
                    processResults: function(data, page) {
                        return {
                            results: data
                        };
                    },
                    theme: "classic"
                }
            });

            $('#caja_chica_detalle_orden_producto_id').select2({
                ajax: {
                    dataType: 'json',
                    url: '{{ url('ajax/ordenes_producto') }}',
                    delay: 250,
                    //minimumInputLength: 3,
                    data: function(param) {
                        let q = param.term.toLowerCase()
                        var query = {
                            search: q
                        }

                        console.log('query :', query)
                        return query;
                    },
                    processResults: function(data, page) {
                        return {
                            results: data
                        };
                    },
                    theme: "classic"
                }
            });

            //inicializar daterange

            let caja_chica_detalle_fecha_documento = @json($caja_chica_detalle_fecha_documento);


if (caja_chica_detalle_fecha_documento != null) {
    let fechas = caja_chica_detalle_fecha_documento.split(' - ')
    var fecha_inicio = fechas[0];

    var fecha_fin = fechas[1];

    $('input[name="caja_chica_detalle_fecha_documento"]').daterangepicker({
    //timePicker: true,
    startDate: caja_chica_detalle_fecha_documento != null ? fecha_inicio : '',
    endDate: caja_chica_detalle_fecha_documento != null ? fecha_fin : '',
    locale: {
        format: 'DD-MM-YYYY'
    }
});

}else{
    $('input[name="caja_chica_detalle_fecha_documento"]').daterangepicker({
    //timePicker: true,
    locale: {
        format: 'DD-MM-YYYY'
    }
});

$('input[name="caja_chica_detalle_fecha_documento"]').val('');
$('input[name="caja_chica_detalle_fecha_documento"]').attr('placeholder', moment().format('DD-MM-YYYY')+' '+moment().format('DD-MM-YYYY'));

}

$('input[name=caja_chica_detalle_fecha_documento]').on('apply.daterangepicker', function() {
    console.log($(this).val());
    if ($(this).val() != '') {
        document.getElementById("frmFiltros").submit();
    }

})

//modal direccion completa
$('.resumen').on('click', function() {
    var content = $(this).data('texto-completo');
    $('.modal-body').html(content);
    $('#modal').modal('show');
  });

  // Cierra el modal
  $('.modal-footer').on('click', 'button', function() {
    $('#modal').modal('hide');
  });


        });

        function marcarTodos(o) {
            var boxes = document.getElementsByTagName("input");
            for (var x = 0; x < boxes.length; x++) {
                var obj = boxes[x];
                if (obj.type == "checkbox") {
                    if (obj.name != "check")
                        obj.checked = o.checked;
                }
            }
        }
    </script>
@endsection