@extends('masterpage.masterpage')

@section('content')
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Combustível</h1>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3 col-sm-6 col-12">
          <div class="info-box">
            <span class="info-box-icon bg-primary"><i class="far fa-flag"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">Qtd.</span>
              <span class="info-box-number" id="qtd">0</span>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-12">
          <div class="info-box">
            <span class="info-box-icon bg-success"><i class="far fa-flag"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">Total</span>
              <span class="info-box-number" id="total">R$ 0,00</span>
            </div>
          </div>
        </div>
        <div class="col-md-12" style="float:none;margin:auto;">
          <div class="card card-default">
            <div class="card-header">
              <h3 class="card-title">Fechamento</h3>
            </div>
            <form id="combustivelForm" role="form">
              <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
              <div class="card-body">
                <div class="row">
                  <div class="col-12">
                    <div class="form-group">
                      <label>Nº controle</label>
                      <input type="number" class="form-control" name="controle" id="controle" autofocus>
                    </div>
                    <div class="form-group">
                      <table id="tblControle" class="table table-striped">
                        <thead>                
                        <tr>
                          <th>Controle</th>
                          <th>Valor</th>
                          <th style="text-align: right">Ações</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>                
              </div>
              <div class="card-footer">
                <button type="button" id="btValidar" onclick="checkControle()" class="btn btn-primary">Validar</button>
                <a href="{{ url('combustivel') }}" class="btn btn-default">Voltar</a>
              </div>
            </form>
          </div>           
        </div>
      </div>
    </div>
  </section>

@stop  

@section('scripts')

  <script>

    var qtd = 0;
    var total = 0;

    function checkControle() {
      if (document.getElementById("controle").value == '' ) {
          Swal.fire(
            'Atenção!',
            'Os campo controle é obrigatório.',
            'info'
          )
      } else {
        var csrfToken = $('#csrf-token').val();
        var data = new FormData();
        data.append('controle', document.getElementById("controle").value);
        fetch('{{URL('combustivel/checkControle')}}', {
          method: 'post',
          body: data,
          headers: {
              "X-CSRF-Token": csrfToken
          },       
        }).then(function(response) {
          if(response.status == 200) {    
            return response.json()
          }
        }).then(function(json) {
          if (json != false) {
            
            var table = $('#tblControle').DataTable();
            var arrayControle = []
            arrayControle = [
              document.getElementById('controle').value,
              json.valor.toLocaleString('pt-br', {minimumFractionDigits: 2, style: 'currency', currency: 'BRL'}),
              `<button type="button" controleId="${document.getElementById('controle').value}" 
                class="btn btn-danger rounded-circle remove" 
                title="Excluir" style="float: right"><i class="fa fa-trash"></i>
              </button>`]
            table.row.add( arrayControle ).draw();

            qtd++
            total += json.valor;
            document.getElementById('qtd').innerHTML = qtd
            document.getElementById('total').innerHTML = total.toLocaleString('pt-br', {minimumFractionDigits: 2, style: 'currency', currency: 'BRL'})
            document.getElementById('controle').value = ''
            document.getElementById('controle').focus()

            Swal.fire({
              icon: 'success',
              title: 'Sucesso',
              showConfirmButton: false,
              timer: 1000
            })

          } else {
            Swal.fire(
              'Atenção!',
              'Controle já utilizado.',
              'error'
            )
          }
        }).catch(function(error) {
        });
      }
    }

    $(function () {
      $("#tblControle").DataTable({
        "responsive": true,
        "autoWidth": false,
        "oLanguage":{
          "sEmptyTable": "Nenhum registro encontrado",
          "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
          "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
          "sInfoFiltered": "(Filtrados de _MAX_ registros)",
          "sInfoPostFix": "",
          "sInfoThousands": ".",
          "sLengthMenu": "_MENU_ Resultados por página",
          "sLoadingRecords": "Carregando...",
          "sProcessing": "Processando...",
          "sZeroRecords": "Nenhum registro encontrado",
          "sSearch": "Pesquisar ",
          "oPaginate": {
            "sNext": "Próximo",
            "sPrevious": "Anterior",
            "sFirst": "Primeiro",
            "sLast": "Último"
          }
        }
      }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

      var input = document.getElementById("controle");
      input.addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
          event.preventDefault();
          document.getElementById("btValidar").click();
        }
      });

      $('#tblControle').on('click', '.remove', function () {
        Swal.fire({
          title: 'Tem certeza que deseja excluir?',
          text: "Os dados serão excluídos permanentemente!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Confirmar',
          cancelButtonText: 'Cancelar',
        }).then((result) => {
          if (result.isConfirmed) {
            let table = $('#tblControle').DataTable();
            let row = $(this).parents('tr');
            let controleId = table.row($(row)).data()[0]
            if ($(row).hasClass('child')) {
              table.row($(row).prev('tr')).remove().draw();
            } else {
              table
                .row($(this).parents('tr'))
                .remove()
                .draw();
            }
            var csrfToken = document.getElementById('csrf-token').value;
            var data = new FormData();
            data.append('controle', controleId)
            fetch('{{URL('combustivel/setControle')}}', {    
              method: 'post',
              body: data,
              headers: {
                "X-CSRF-Token": csrfToken
              },       
            }).then(function(response) {
              if (response.status === 200) {      
                Swal.fire({
                  icon: 'success',
                  title: 'Liberação excluída com sucesso',
                  showConfirmButton: false,
                  timer: 1000
                })
              } else {
                Swal.fire(
                  'Falha!',
                  'Falha ao excluir liberação.',
                  'error'
                )
              }
            });
          }
        })
      });

    });

  </script>

@stop