@extends('estilos.main')

@section('content')

<script src="{{asset('js/excel.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-11 col-xs-12">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 centro">
          <h3><a href=""> <button class="btn w3-sdoca1">Relatório de Vendas </button></a></h3>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 centro">
          <h4 class="btn btn w3-sdoca1 centro" id="exportButton">
          <i class="fa fa-file-excel-o" style="font-size:25px;color:green"></i>
          </h4>
          &nbsp &nbsp &nbsp
          <h4 class="btn btn w3-sdoca1 centro" onclick="exportPDF()">
          <i class="fa fa-file-pdf-o" style="font-size:25px;color:red"></i>
          </h4>
        </div>
        <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12 centro w3-sdoca1">
          <h4 class="">
          @include('relatorios.search')
          </h4>
        </div>
    </div>
    </div>
<br>
  <div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

  <div class="table-responsive" id="tabela">

      <table class="table table-bordered table-striped table-condensed table-hover ">
          <thead>
            <tr>
              <th>Id</th>
              <th>Operador</th>
              <th>Cliente</th>
              <th>Recibo</th>
              <th>Serie</th>
              <th>Numero</th>
              <th>Total</th>
              <th>Data da venda</th>
              <!--th>Condicao</th-->
             </tr>

          </thead>
          <tbody>
          @foreach ($vendas as $v)
          <tr>
          <td> {{$v->id}}</td>
          <td> {{$v->name}}</td>
          <td> {{$v->nome}}</td>
          <td> {{$v->recibo}}</td>
          <td> {{$v->serie}}</td>
          <td> {{$v->numero}}</td>
          <td> {{$v->total_vendas}}</td>
          <td> {{$v->created_at}}</td>
          <!--td> {{$v->estado}}</td-->
          </tr>

          @endforeach
        </tbody>
      </table>
  </div>
{{$vendas->render()}}
</div>
</div>

<script type="text/javascript">
$(document).ready(function() {

        $("#exportButton").click(function(e) {
            e.preventDefault();
            var Tabela = document.getElementById('tabela');
            var Dados = new Blob(['\ufeff' + Tabela.outerHTML], {type:'application/vnd.ms-excel'});
            var url = window.URL.createObjectURL(Dados);
            var a = document.createElement('a');
            a.href = url;
            a.download = 'Dados';
            a.click();
        });
    });
    function exportPDF() {
          // Selecione a tabela HTML usando seu ID
          var tabela = document.getElementById('tabela');

          // Configurações opcionais para a geração do PDF
          var options = {
              margin: 10,
              filename: 'relatorio.pdf',
              image: {
                  type: 'jpeg',
                  quality: 0.98
              },
              html2canvas: {
                  scale: 2
              },
              jsPDF: {
                  unit: 'mm',
                  format: 'a4',
                  orientation: 'landscape'
              }
          };

          // Use html2pdf para gerar o PDF
          html2pdf(tabela, options);
      }
</script>
@endsection