@extends('layouts.app')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<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">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/animate.css/animate.min.css">

@section('title', 'Compras')
@section('content')
@include('layouts.headers.cards_prod')
<!-- 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 -->
<style>
  .white-space {
    white-space: pre-wrap !important;
  }

  td {
    padding: 0 !important;
  }
</style>

<div class="container-fluid mt--5">
  <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 col-sm-12">
              <h3 class="mb-0">{{ __('Tela de Compras') }}</h3>
            </div>
            <div class="col-md-4 col-sm-12 text-center align-middle d-none">
              <a href="{{ route('compras.index') }}" class="btn btn-sm btn-primary mt-2">{{ __('Retornar as compras') }}</a>
            </div>
          </div>
        </div>
        <div class="card-body">
          @if (Session::has('mensagem-falha'))
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <span class="alert-icon"><i class="ni ni-notification-70"></i></span>
            <span class="alert-text"><strong>{{ Session::get('mensagem-falha') }}</strong>
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
          @endif
          <div class="row p-0">
            <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">Atualizar</button>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group text-center">
                    <button type="button" id="atulizar_tabela" class="btn btn-dark btn_atualizar">Atualizar</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 filtros">
              <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-list-ol 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">Codigo</h5>
                      </div>
                      <span class="font-weight-bold mb-0 text-white">
                        <input type="text" class="form-control form-control-sm" id="filtro-codigo" placeholder="Pesquise pelo codigo">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 filtros">
              <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-users 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">Cliente</h5>
                      </div>
                      <span class="font-weight-bold mb-0 text-white">
                        <input type="text" class="form-control form-control-sm" id="filtro-cliente" placeholder="Pesquise por nome">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 filtros">
              <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">Comprador</h5>
                      </div>
                      <span id="filtro-usuario" class="font-weight-bold mb-0 text-white">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3 filtros d-none">
              <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-check-circle 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">Finalizada</h5>
                      </div>
                      <span id="filtro-finalizada" class="font-weight-bold mb-0 text-white">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-bordered w-100 table-dark table-sm table-striped table-hover" id="table">
              <thead class="thead-dark">
                <tr class="text-center">
                  <th>Codigo</th>
                  <th>Fornecedor</th>
                  <th>Comprador</th>
                  <th>Total</th>
                  <th>Data</th>
                  <th>Produtos</th>
                </tr>
              </thead>
              <tbody>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- Comentando o navbar horizontal -->
@include('layouts.footers.auth')
@include('php.modal-pedido-produtos')

@endsection

@push('js')
<script type="text/javascript" src="/js/print/es6-promise.auto.min.js"></script>
<script type="text/javascript" src="/js/print/jspdf.min.js"></script>
<script type="text/javascript" src="/js/print/html2canvas.min.js"></script>
<script type="text/javascript" src="/js/print/html2pdf.min.js"></script>
<script type="text/javascript" src="/js/moment.js"></script>
<script type="text/javascript" src="/js/jquery.mask.min.js"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon') }}/vendor/bootstrap-notify/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.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" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<!--Datatable Pedido -->
<script>
  $(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({
        order: [
          [0, 'desc']
        ],
        "processing": true,
        "serverSide": false,
        ajax: {
          url: "{{ route('compras.data_compra') }}",
          data: {
            from_date: from_date,
            to_date: to_date
          }
        },
        "deferRender": true,

        columns: [{
            data: 'id',
            name: 'id',
            className: 'align-middle text-center p-2',
            width: '50px',
            render: function(data, type, row) {
              data = '<div class="avatar bg-light text-dark avatar-md rounded-circle">' + row.id + '</div>';
              return data;
            }
          },

          {
            data: 'razao_cliente',
            name: 'razao_cliente',
            className: 'align-middle text-center white-space w-25 p-2',
          },

          {
            data: 'name',
            name: 'name',
            className: 'align-middle text-center p-2',
          },


          {
            data: '',
            name: '',
            className: 'align-middle text-center p-2',
            "render": function(data, type, row) {
              data = row.valor_total;

              return data;
            }
          },
          {
            data: 'data_compra',
            name: 'data_compra',
            className: 'align-middle text-center p-2',
          },
          {
            data: '',
            name: '',
            className: 'align-middle text-center  p-2',
            "render": function(data, type, row) {


              data = '<button class="btn btn-warning btn-produtos rounded" data-toggle="modal" data-target="#ModalPedidoProdutos" value="' + row.id + '"><i class="fas fa-box text-white"></i> Produtos</button>';

              return data;
            }
          }
        ],
        "language": {
          "info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
          "search": "Procurar:",
          "paginate": {
            "first": "Primeiro",
            "previous": "<",
            "next": ">",
            "last": "Último"
          }
        },
        dom: 'rtip',
        lengthMenu: [
          [10, 25, 50, -1],
          ['10 linhas', '25 linhas', '50 linhas', 'Todas as linhas']
        ],
        buttons: [{
            extend: 'pageLength',
            className: 'btn bg-light rounded'
          },
          {
            extend: 'pdfHtml5',
            className: 'btn bg-danger text-white rounded',
            exportOptions: {
              columns: [1, 2, 3, 4]
            }
          },
          {
            extend: 'excelHtml5',
            className: 'btn bg-success text-white rounded',
            exportOptions: {
              columns: [1, 2, 3, 4]
            }
          },
          {
            extend: 'colvis',
            text: 'Colunas',
            className: 'btn bg-default text-white rounded'
          }
        ],
        // stateSave: true

        initComplete: function() {
          this.api().columns([2]).every(function() {
            var column = this;
            var select = $('<select class="form-control form-control-sm w-100 filtro-usuario"><option value="">Todas</option></select>')
              .appendTo($('#filtro-usuario'))
              .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.columns([0]).every(function() {
        var that = this;
        $('#filtro-codigo').on('keyup change clear', function() {
          if (that.search() !== this.value) {
            that.search(this.value).draw();
          }
        });
      });

      table.columns([1]).every(function() {
        var that = this;
        $('#filtro-cliente').on('keyup change clear', function() {
          if (that.search() !== this.value) {
            that.search(this.value).draw();
          }
        });
      });
    }

    $('#filter').click(function() {
      $('.filtro-usuario: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() {
      $('.filtro-usuario:nth-child(1)').remove();
      $('#from_date').val('');
      $('#to_date').val('');
      $('#table').DataTable().destroy();
      load_data();
    });

    $('#atulizar_tabela').click(function() {
      $('#table').DataTable().ajax.reload(null, false);
    });

  });
</script>

<!--Ajax Produtos -->
<script>
  $(document).on('click', '.btn-produtos', function() {
    $('#compra_produtos').children().remove();
    let valor = $(this).val();
    // let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $.ajax({
      url: "../compras/data_compra_produtos/" + valor,
      method: 'get',
      dataType: 'json',
      data: {
        // _token: CSRF_TOKEN,
        id: valor
      },
      success: function(retorno) {
        $('#pedido_produtos').children().remove();
        $('.btn-prod-acao').remove();

        for (let x = 0; x < retorno.produtos.length; x++) {


          data_checkbox = "<td>-</td>";

          $('#pedido_produtos').append(
            "<tr class='text-center'>" +
            data_checkbox +
            "<td> <img class='avatar avatar-sm' src='../" + retorno.produtos[x].imagem + "'</td>" +
            "<td>" + retorno.produtos[x].produto + "</td>" +
            "<td>" + retorno.produtos[x].valor_unitario_produto + "</td>" +
            "<td>" + retorno.produtos[x].quantidade_produto + "</td>" +
            "<td>" + '-' + "</td>" +
            "<td>" + (retorno.produtos[x].valor_compra_produto - 0).toFixed(2) + "</td>" +
            "</tr>"
          );
        }

        $("#model_pedido_id").val(retorno.compra.id_compra);
        $("#cod_pedido").html("Produtos do Pedido: " + retorno.compra.id_compra);
        $("#cliente_devolucao").val(retorno.compra.id_cliente);

        $('.total_pedido').html(retorno.total.toLocaleString('pt-BR', {
          style: 'currency',
          currency: 'BRL'
        }));

        var table = $('#test').DataTable({
          paging: false,
          searching: false,
          retrieve: true,
          dom: 'Bt',
          lengthMenu: [
            [-1, 25, 50, 10],
            ['Todas as linhas', '25 linhas', '50 linhas', '10 linhas']
          ],
          buttons: [
            {
                extend: 'pdfHtml5',
                className: 'btn bg-danger text-white rounded',
                exportOptions: {
                  columns: [2, 3, 4, 6]
                }
              },
            // {
            //   text: 'PDF',
            //   className: 'btn bg-danger text-white rounded',
            //   action: function(e, dt, node, config) {

            //     var element = document.getElementById('test');
            //     var data = new Date();
            //     var cod = $('#model_pedido_id').val();

            //     var dia = data.getDate(); // 1-31
            //     var mes = data.getMonth(); // 0-11 (zero=janeiro)

            //     var opt = {
            //       margin: 1,
            //       filename: 'Compra_' + cod + '.pdf',
            //       image: {
            //         type: 'jpeg',
            //         quality: 0.98
            //       },
            //       html2canvas: {
            //         scale: 1,
            //         y: window.scrollY,
            //         logging: true
            //       },
            //       jsPDF: {
            //         text: 'Compra: '+ cod,
            //         unit: 'mm',
            //         format: 'a4',
            //         orientation: 'landscape'
            //       }
            //     };

            //     // New Promise-based usage:
            //     html2pdf().set(opt).from(element).save();

            //   }
            // },
            {
              extend: 'excelHtml5',
              className: 'btn bg-success text-white rounded',
              exportOptions: {
                columns: [2, 3, 4, 6]
              }
            }
          ],
        });

      },
      error: function(retorno) {
        alert(JSON.stringify(retorno));
      }
    })


  });
</script>

<!-- Sweet Alerts -->
<script>
  function warning() {
    swal("Erros encontrados", "Esse cliente está com o cadastro incompleto. \n *Não é possivel emitir Nota Fiscal", "warning")
  }

  function entrega() {
    swal("Entrega", "Esse compra foi definido como uma entrega", "info")
  }

  function nfe() {
    swal("Nota já emitida", "Esse compra já possui uma nota fiscal", "success")
  }
</script>

@endpush