@extends('layouts.app')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
<style>
  .white-space {
    white-space: pre-wrap !important;
  }
</style>
@section('title', 'Caixa')
@section('content')
@include('layouts.headers.cards_prod')
@include('layouts.footers.auth')
<!-- A consulta desta tabela deve envolver INNER JOIN por causa dos nomes da família, nome do grupo e subgrupo, todos vindos das respectivas chaves estrangeiras -->

<div class="container-fluid mt--7">
  <div class="row">
    <div class="col-xl-12 order-xl-1">
      <div class="card bg-secondary shadow">
        <div class="card-header bg-white border-0">
          <div class="row align-items-center">
            <div class="col-md-8">
              <h3 class="mb-0">{{ __('Relatório PAR') }}</h3>
            </div>
          </div>
        </div>
        <div class="card-body p-0">
          <div class="card bg-secondary border-0 mb-0">
            <div class="card-body bg-default p-3 m-0 row ">
              <div class="col-md-12">
                <div class="input-daterange row align-items-center">
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                        </div>
                        <input name="from_date" id="from_date" class="form-control" placeholder="Data Inicial: {{date('01-m-Y')}}" autocomplete="off" type="text">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                        </div>
                        <input name="to_date" id="to_date" class="form-control" placeholder="Data Final: {{date('t-m-Y')}}" autocomplete="off" type="text">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group text-center">
                      <button type="button" name="filter" id="filter" class="btn btn-primary">Filtrar</button>
                      <button type="button" name="refresh" id="refresh" class="btn btn-info">Limpar</button>
                    </div>
                  </div>

                  <div class="col-md-3">
                    <div class="form-group text-center">
                      <h2 class="text-center text-white">Total: <span class="text-white" id="total-top"></span></h2>
                    </div>
                  </div>
                </div>

                <div class="row p-3">
                  <div class="col-md-3">
                    <div class="card rounded">
                      <!-- Card body -->
                      <div class="card-body rounded p-3">
                        <div class="row">
                          <div class="col-auto mx-auto">
                            <div class="icon icon-shape bg-default text-dark rounded-circle shadow">
                              <i class="fas fa-hand-holding-usd fa-2x text-primary"></i>
                            </div>
                          </div>
                          <div class="col pl-0">
                            <div class="row mb-2">
                              <h5 class="card-title text-uppercase text-muted mb-0 ml-3">Pagamento</h5>
                            </div>
                            <span id="filtro-pagamento" class="font-weight-bold mb-0 text-white">
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="card rounded">
                      <!-- Card body -->
                      <div class="card-body rounded p-3">
                        <div class="row">
                          <div class="col-auto mx-auto">
                            <div class="icon icon-shape bg-default text-dark rounded-circle shadow">
                              <i class="fas fa-exchange-alt fa-2x text-primary"></i>
                            </div>
                          </div>
                          <div class="col pl-0">
                            <div class="row mb-2">
                              <h5 class="card-title text-uppercase text-muted mb-0 ml-3">Tipo</h5>
                            </div>
                            <span id="filtro-tipo" class="font-weight-bold mb-0 text-white">
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="card rounded">
                      <!-- Card body -->
                      <div class="card-body rounded p-3">
                        <div class="row">
                          <div class="col-auto mx-auto">
                            <div class="icon icon-shape bg-default text-dark rounded-circle shadow">
                              <i class="fas fa-cash-register fa-2x text-primary"></i>
                            </div>
                          </div>
                          <div class="col pl-0">
                            <div class="row mb-2">
                              <h5 class="card-title text-uppercase text-muted mb-0 ml-3">Liberação</h5>
                            </div>
                            <span id="filtro-liberar" class="font-weight-bold mb-0 text-white">
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="card rounded">
                      <!-- Card body -->
                      <div class="card-body rounded p-3">
                        <div class="row">
                          <div class="col-auto mx-auto">
                            <div class="icon icon-shape bg-default text-dark rounded-circle shadow">
                              <i class="fas fa-user-tag fa-2x text-primary"></i>
                            </div>
                          </div>
                          <div class="col pl-0">
                            <div class="row mb-2">
                              <h5 class="card-title text-uppercase text-muted mb-0 ml-3">Vendedor</h5>
                            </div>
                            <span id="filtro-vendedor" class="font-weight-bold mb-0 text-white">
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="table-responsive ">
                  <table class="table table-flush table-sm table-bordered table-light w-100" id="table">
                    <thead class="thead-light">
                      <tr class="text-center font-weight-bold">
                        <th>#</th>
                        <th>Codigo</th>
                        <th>Tipo</th>
                        <th>Cliente</th>
                        <th>Pagamento</th>
                        <th>Valor</th>
                        <th>Desconto</th>
                        <th class="d-none">Caixa</th>
                        <th>Liberação</th>
                        <th class="d-none">Liberação2</th>
                        <th>Data</th>
                        <th>Vendedor</th>
                        <th class="d-none">Tabela</th>
                        <th>Loja</th>
                      </tr>
                    </thead>
                    <tfoot>
                      <tr>
                        <th colspan="4"></th>
                        <th></th>
                        <th colspan="3"></th>
                        <th>Total:</th>
                        <th></th>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@push('js')
<script src="{{ asset('js/moment.js') }}"></script>
<script src="{{ asset('js/moment_locale.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.min.js"></script>
<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>


<script type="text/javascript">
  $.fn.dataTable.Api.register('column().data().sum()', function() {
    return this.reduce(function(a, b) {
      var x = parseFloat(a) || 0;
      var y = parseFloat(b) || 0;
      return x + y;
    }, 0);
  });
  $(document).ready(function() {
    $('.input-daterange').datepicker({
      todayBtn: 'linked',
      format: 'yyyy-mm-dd',
      language: "pt-BR",
      autoclose: true
    });

    load_data();

    function load_data(from_date = '', to_date = '') {
      var table = $('#table').DataTable({
        "processing": true,
        "serverSide": true,
        ajax: {
          url: "{{ route('relatorio.par') }}",
          data: {
            from_date: from_date,
            to_date: to_date
          }
        },
        "deferRender": true,
        "footerCallback": function(row, data, start, end, display) {
          var api = this.api(),
            data;

          // Remove the formatting to get integer data for summation
          var intVal = function(i) {
            return typeof i === 'string' ?
              i.replace(/[\$,]/g, '') * 1 :
              typeof i === 'number' ?
              i : 0;
          };

          // Total over all pages
          valor_total = api.column(5, {
              page: 'all'
            })
            .data()
            .reduce(function(a, b) {
              return intVal(a) + intVal(b);
            }, 0);

          desconto_total = api.column(6, {
              page: 'all'
            })
            .data()
            .reduce(function(a, b) {
              return intVal(a) + intVal(b);
            }, 0);

          total = valor_total - desconto_total;

          // Total over this page
          valor_page = api.column(5, {
              page: 'current'
            })
            .data()
            .reduce(function(a, b) {
              return intVal(a) + intVal(b);
            }, 0);

          desconto_page = api.column(6, {
              page: 'current'
            })
            .data()
            .reduce(function(a, b) {
              return intVal(a) + intVal(b);
            }, 0);

          pageTotal = valor_page - desconto_page;

          // Update footer
          $(api.column(8).footer()).html(
            pageTotal.toLocaleString('pt-BR', {
              style: 'currency',
              currency: 'BRL'
            })
            // + '(' + total.toLocaleString('pt-BR', {
            //     style: 'currency',
            //     currency: 'BRL'
            // }) + ')'
          );
          document.getElementById('total-top').innerHTML = pageTotal.toLocaleString('pt-BR', {
            style: 'currency',
            currency: 'BRL'
          });
          $(api.column(8).footer()).html();
        },
        columns: [{
            "class": "align-middle text-center details-control",
            "orderable": false,
            "data": null,
            "defaultContent": '',
            "searchable": false,
            "render": function() {
              return '<i class="far fa-eye" aria-hidden="true"></i>';
            },
            width: "15px"
          },
          {
            data: 'codigo',
            name: 'codigo',
            className: 'align-middle text-center',
          },
          {
            data: 'tipo',
            name: 'tipo',
            className: 'align-middle text-center',
          },
          {
            data: 'cliente',
            name: 'cliente',
            className: 'align-middle text-center white-space',
          },
          {
            data: 'forma_pagamento',
            name: 'forma_pagamento',
            defaultContent: '',
            className: 'align-middle text-center',
            "render": function(data, type, row) {
              if (data == 'dinheiro')
                data = '<i class="fas fa-money-bill-wave fa-2x text-success"> </i><br><small>Dinheiro</small>';
              if (data == 'cheque a vista')
                data = '<i class="fas fa-money-check-alt fa-2x text-danger"></i><br><small>Cheque</small>';
              if (data == 'cheque pre datado')
                data = '<i class="fas fa-money-check-alt fa-2x text-danger"></i><br><small>Cheque</small>';
              if (data == 'cartao de credito')
                data = '<i class="fas fa-credit-card fa-2x text-info"></i><br><small>Crédito</small>';
              if (data == 'cartao de debito')
                data = '<i class="fas fa-credit-card fa-2x text-info"></i><br><small>Débito</small>';
              if (data == 'pagamento antecipado')
                data = '<i class="fas fa-file-invoice-dollar fa-2x text-primary"></i><br><small>Antecipado</small>';
              if (data == 'boleto')
                data = '<i class="fas fa-file-invoice-dollar fa-2x text-primary"></i><br><small>Boleto</small>';
              if (data == 'credito anterior')
                data = '<i class="fas fa-wallet fa-2x text-dark"></i><br><small>Saldo</small>';
              if (data == 'fechamento')
                data = '<i class="fas fa-business-time fa-2x text-dark"></i><br><small>Fechamento</small>';
              if (row.valores == 0.00 && row.tipo == 'Serviço')
                data = '<i class="fas fa-tools fa-2x text-purple"></i><br><small>Garantia</small>';
              return data;
            }
          },
          {
            data: 'valores',
            name: 'valores',
            className: 'align-middle text-center',
            "render": function(data, type, row) {
              data = data - row.descontos;
              data2 = parseFloat(data);
              return data2.toLocaleString('pt-BR', {
                style: 'currency',
                currency: 'BRL'
              });
            }
          },
          {
            data: 'descontos',
            name: 'descontos',
            visible: false,
            defaultContent: '',
            className: 'align-middle text-center',
          },
          {
            data: 'caixa',
            name: 'caixa',
            visible: false,
            className: 'align-middle text-center'
          },
          {
            data: 'liberacao',
            name: 'liberacao',
            className: 'align-middle text-center',
            "render": function(data, type, row) {
              if (row.entrega == 'Entregue') {
                data = '<i class="fas fa-shipping-fast fa-2x text-default"></i>';
              } else {
                if (data == 0)
                  data = '<i class="fas fa-exclamation-triangle fa-2x text-yellow"></i>';
                if (data == 1)
                  data = '<i class="fas fa-check fa-2x text-success"></i>';
                if (data == '3')
                  data = '<i class="fas fa-times fa-2x text-danger"></i>';
              }
              return data;
            }
          },
          {
            data: 'liberacao',
            name: 'liberacao',
            visible: false,
            className: 'align-middle text-center',
            "render": function(data, type, row) {
              if (data == 0)
                data = 'Não Liberado';
              if (data == 1)
                data = 'Liberado';
              return data;
            }
          },
          {
            data: 'dia',
            name: 'dia',
            defaultContent: '',
            className: 'align-middle text-center',
          },
          {
            data: 'vendedor',
            name: 'vendedor',
            className: 'align-middle text-center',
          },
          {
            data: 'tabela',
            name: 'tabela',
            defaultContent: '',
            visible: false,
            className: 'align-middle text-center',
            "render": function(data, type, row) {
              if (data == 1)
                data = 'Varejo';
              if (data == 2)
                data = 'Atacado';
              return data;
            }
          },
          {
            data: 'loja',
            name: 'loja',
            defaultContent: '',
            className: 'align-middle text-center'
          }

        ],
        "language": {
          "info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
          "search": "Procurar:",
          "paginate": {
            "first": "Primeiro",
            "previous": "<",
            "next": ">",
            "last": "Último"
          }
        },

        dom: 'Bfrtip',
        lengthMenu: [
          [-1, 10, 25, 50],
          ['Todas as linhas', '10 linhas', '25 linhas', '50 linhas']
        ],
        buttons: [{
            extend: 'pageLength',
            className: 'btn bg-light rounded'
          },
          {
            extend: 'pdfHtml5',
            className: 'btn bg-danger text-white rounded',
            exportOptions: {
              columns: [1, 2, 3, 4, 5, 6, 7]
            }
          },
          {
            extend: 'excelHtml5',
            className: 'btn bg-success text-white rounded',
            exportOptions: {
              columns: [1, 2, 3, 4, 5, 6, 7]
            }
          },
          {
            extend: 'colvis',
            text: 'Colunas',
            className: 'btn bg-default text-white rounded'
          }
        ],
        initComplete: function() {
          this.api().columns([4]).every(function() {
            var column = this;
            var select = $('<select class="form-control form-control-sm filtro-pagamento w-100"><option value="">Todas</option></select>')
              .appendTo($('#filtro-pagamento'))
              .on('change', function() {
                var val = $.fn.dataTable.util.escapeRegex(
                  $(this).val()
                );

                column
                  .search(val ? '^' + val + '$' : '', true, false)
                  .draw();
              });

            column.data().unique().sort().each(function(d, j) {
              select.append(
                '<option value="' + d + '">' + d + "</option>"
              );
            });
          });
          this.api().columns([2]).every(function() {
            var column = this;
            var select = $('<select class="form-control form-control-sm filtro-tipo w-100"><option value="">Todas</option></select>')
              .appendTo($('#filtro-tipo'))
              .on('change', function() {
                var val = $.fn.dataTable.util.escapeRegex(
                  $(this).val()
                );

                column
                  .search(val ? '^' + val + '$' : '', true, false)
                  .draw();
              });

            column.data().unique().sort().each(function(d, j) {
              select.append(
                '<option value="' + d + '">' + d + "</option>"
              );
            });
          });
          this.api().columns([9]).every(function() {
            var column = this;
            var select = $('<select class="form-control form-control-sm filtro-liberar w-100"><option value="">Todas</option></select>')
              .appendTo($('#filtro-liberar'))
              .on('change', function() {
                var val = $.fn.dataTable.util.escapeRegex(
                  $(this).val()
                );

                column
                  .search(val ? '^' + val + '$' : '', true, false)
                  .draw();
              });

            column.data().unique().sort().each(function(d, j) {
              if (d == '3')
                a = 'Cancelado';
              else {
                if (d == 1) {
                  a = 'Liberado';
                } else {
                  a = 'Não Liberado';
                }
              }
              select.append(
                '<option value="' + d + '">' + a + "</option>"
              );
            });
          });
          this.api().columns([11]).every(function() {
            var column = this;
            var select = $('<select class="form-control form-control-sm filtro-vendedor w-100"><option value="">Todas</option></select>')
              .appendTo($('#filtro-vendedor'))
              .on('change', function() {
                var val = $.fn.dataTable.util.escapeRegex(
                  $(this).val()
                );

                column
                  .search(val ? '^' + val + '$' : '', true, false)
                  .draw();
              });

            column.data().unique().sort().each(function(d, j) {
              select.append(
                '<option value="' + d + '">' + d + "</option>"
              );
            });
          });
          this.api().columns([13]).every(function() {
            var column = this;
            var select = $('<select class="form-control form-control-sm filtro-loja w-100"><option value="">Todas</option></select>')
              .appendTo($('#filtro-loja'))
              .on('change', function() {
                var val = $.fn.dataTable.util.escapeRegex(
                  $(this).val()
                );

                column
                  .search(val ? '^' + val + '$' : '', true, false)
                  .draw();
              });

            column.data().unique().sort().each(function(d, j) {
              select.append(
                '<option value="' + d + '">' + d + "</option>"
              );
            });
          });
        },
      });
      $('#table tbody').on('click', 'tr', function() {
        $(this).toggleClass('selected');
      });
      $('#table tbody').on('click', 'td.details-control', function() {
        var tr = $(this).closest('tr');
        var tdi = tr.find("i.far");
        var row = table.row(tr);

        if (row.child.isShown()) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
          tdi.first().removeClass('fa-eye-slash');
          tdi.first().addClass('fa-eye');
        } else {
          // Open this row
          row.child(format(row.data())).show();
          tr.addClass('shown');
          tdi.first().removeClass('fa-eye');
          tdi.first().addClass('fa-eye-slash');
        }
      });

      table.on("user-select", function(e, dt, type, cell, originalEvent) {
        if ($(cell.node()).hasClass("details-control")) {
          e.preventDefault();
        }
      });
    }

    $('#filter').click(function() {
      $('.filtro-pagamento:nth-child(1)').remove();
      $('.filtro-tipo:nth-child(1)').remove();
      $('.filtro-tipo2:nth-child(1)').remove();
      $('.filtro-liberar:nth-child(1)').remove();
      $('.filtro-vendedor:nth-child(1)').remove();
      var from_date = $('#from_date').val();
      var to_date = $('#to_date').val();
      if (from_date != '' && to_date != '') {
        $('#table').DataTable().destroy();
        load_data(from_date, to_date);
      } else {
        alert('Precisa selecionar alguma data para filtrar');
      }
    });

    $('#refresh').click(function() {
      $('#from_date').val('');
      $('#to_date').val('');
      $('#table').DataTable().destroy();
      load_data();
    });
  });

  function format(d) {
    // `d` is the original data object for the row
    return '<table class="table-sm" cellpadding="5" cellspacing="0" border="0">' +
      '<tbody class="thead-dark">' +
      '<tr>' +
      '<td>...</td>' +
      // '<th class="align-middle text-center">Quantidade Máxima:</th>' +
      // '<td class="align-middle text-center text-white" colspan="2">' + d.quantidade_maxima_produtos + '</td>' +
      // '</tr>' +
      // '<tr>' +
      // '<th class="align-middle text-center">Quantidade Minima:</th>' +
      // '<td class="align-middle text-center text-white" colspan="2">' + d.quantidade_minima_produtos + '</td>' +
      // '</tr>' +
      // '<tr>' +
      // '<th class="align-middle text-center" >Valor Unitario:</th>' +
      // '<td class="align-middle text-center text-white" colspan="2">' + parseFloat(d.preco_produto_varejo).toLocaleString('pt-BR', {
      //     style: 'currency',
      //     currency: 'BRL'
      // }); + '</td>' +
      '</tr>' +
      '</tbody>' +
      '</table>';
  }
</script>

@endpush