@section('style')
  <link rel="stylesheet" href="{{ asset('/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
  <link rel="stylesheet" href="{{ asset('/plugins/datatables-rowreorder/css/rowReorder.bootstrap4.min.css') }}">
  <link rel="stylesheet" href="{{ asset('/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/daterangepicker/daterangepicker.css') }}">
  <style>
  .inicio{
    width:0%;
  }

  .final{
    width:100%;
  }

  .animacion{
    transition: all 2s ease .2s;
  }
  </style>
@endsection

@extends('layouts.template')

@section('content')
  <div class="container">
    <div class="content-header">
      <div class="row">
        <div class="col-xs-12 col-sm-9">
          <h5 class="text-red text-uppercase font-weight-bold m-0">{{ $datos->title }}</h5>
          <small class="text-uppercase text-gray"><b>{{ $datos->subtitle }}</b></small>
        </div>
        <div class="col-xs-12 col-sm-3 text-right hidden-xs">
          <div class="pull-right"><img style="height: 30px;" src="{{ asset('img/LogoGrupoFlesan.png') }}"></div>
        </div>
      </div>
    </div>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @if(!empty($datos->datos->nom_cliente))
    <div class="content">
      <div class="col-xs-12">
        <div class="card card-danger card-outline">
          <div class="card-body">
            <div class="form-group row mb-1">
              <label class="col-sm-2 text-uppercase text-gray">nombre proveedor</label>
              <div class="col-sm-10 p-0">
                <input type="text" readonly class="form-control" name="txtProveedor" value="{{ $datos->datos['nom_cliente'] }}" id="txtProveedor">
              </div>
            </div>
            <div class="form-group row mb-1">
              <label class="col-sm-2 text-uppercase text-gray">ruc</label>
              <div class="col-sm-10 p-0">
                <input type="text" readonly class="form-control" name="txtRuc" value="{{ $datos->datos['cod_cliente'] }}" id="txtRuc">
              </div>
            </div>
            <div class="form-group row mb-1">
              <label class="col-sm-2 text-uppercase text-gray">empresa</label>
              <div class="col-sm-10 p-0">
                <input type="text" readonly class="form-control" name="txtEmpresa" value="{{ $datos->datos['descripcion_empresa'] }}" id="txtEmpresa">
              </div>
            </div>
            <div class="form-group row mb-1">
              <label class="col-sm-2 text-uppercase text-gray">desde - hasta</label>
              <div class="col-sm-4 p-0">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <i class="far fa-calendar-alt"></i>
                    </span>
                  </div>
                  <input type="text" class="form-control float-right" name="txtFecha" id="txtFecha">
                </div>
              </div>
              <div class="col-sm-6 p-0 text-right">
                <a class="btn btn-sm btn-default tab-pane active busqueda_prv"><i class="fas fa-filter"></i> Filtrar</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-sm-12" class="mt-1" id="loading" hidden>
        <div class="text-center pt-5 pb-5">
          <div class="preloader">
            <img class="center-block" src="{{ asset('img/LogoGrupoFlesan.png') }}" style="width: 250px;">
          </div>
          <div class="row justify-content-md-center">
            <div class="col col-md-4">
              <div class="progress" style="height:13px">
                <div id="barra" class="progress-bar progress-bar-striped progress-bar-animated bg-danger inicio animacion" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                </div>
              </div>
            </div>
          </div>
          <small><strong>FILTRANDO DATOS</strong></small>
        </div>
      </div>
      <div class="col-xs-12"  id="div1">
        <div class="card card-danger card-outline">
          <div class="card-body">
            <div class="row">
              <div class="col-sm-12">
                <h6 class="text-gray text-uppercase p-0 m-0">LISTADO DE FACTURAS</h6>
              </div>
            </div>
            <table class="table table-striped dataTable no-footer dtr-inline" id="tableFacturas" style="width: 100%;">
              <thead class="bg-danger">
                <th class="text-uppercase">Numero Factura</th>
                <th class="text-uppercase">Monto</th>
                <th class="text-uppercase">Fecha Factura</th>
                <th class="text-uppercase" width="15%">Monto Pagado</th>
                <th class="text-uppercase">Fecha Pago</th>
                <th class="text-uppercase">Saldo</th>
                <th class="text-uppercase">Tipo Operación</th>
              </thead>
              <tbody>
                @foreach($datos->factura as $key => $value)
                  <tr>
                    <td>{{ $value->num_factura }}</td>
                    <td>{{ $value->monto_total_doc }}</td>
                    <td>{{ date_format(date_create($value->fecha_conta), 'Y-m-d') }}</td>
                    <td>{{ $value->monto_pago }}</td>
                    <td>{{ date_format(date_create($value->fecha_pago), 'Y-m-d') }}</td>
                    <td>{{ $value->saldo }}</td>
                    <td>{{ $value->tipo_operacion_desc }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    @else
      <div class="alert alert-danger">
        <h5><i class="icon fas fa-ban"></i> ALERTA!</h5>
        No existe Datos encontrados para la búsqueda.
      </div>
    @endif
  </div>
@endsection

@section('script')
<script src="{{ asset('/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js') }}"></script>
<script src="{{ asset('/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('/plugins/datatables-fixedheader/js/dataTables.fixedHeader.min.js') }}"></script>
<script src="{{ asset('plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('js/moment.js') }}"></script>
<script type="text/javascript">
  var table;
  var table2;
  var fecha_min;
  var fecha_max;
  $(document).ready(function(){


    $(".preloader-wrapper").fadeOut(500,'swing');
    $('#txtFecha').daterangepicker({
      timePickerIncrement: 30,
      locale: {
        format: 'YYYY/MM/DD'
      }
    })
    table = $('#tableFacturas').DataTable({
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : false,
      'info'        : true,
      'autoWidth'   : true,
      "pageLength"  : 10,
      'responsive'  : true,
      'destroy': true,
    });
  });

  $(".busqueda_prv").on('click',function(){
    $("#loading").removeAttr('hidden')
    $("#div1").attr('hidden','true')
    $("#div2").attr('hidden','true')
    setTimeout(filtrar,2000);
  })



  function filtrar(){
    var fecha = $("#txtFecha").val().split(' - ');
    fecha_min = fecha[0];
    fecha_max = fecha[1];
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var min = fecha_min;
            var max = fecha_max;
            var date = moment(data[2]).format('YYYY/MM/DD');
            if (
                ( min === null && max === null ) ||
                ( min === null && date <= max ) ||
                ( min <= date   && max === null ) ||
                ( min <= date   && date <= max )
            ) {
                return true;
            }
            return false;
        }
    );
    document.getElementById("barra").classList.toggle("final");
    setTimeout(cargar,2200);

  }

  function cargar(){
    table.draw();
    $("#loading").attr('hidden','true')
    $("#div1").removeAttr('hidden')
    $("#barra").removeClass('final')
  }
</script>
@endsection