@extends('layouts.app2')
@section('title')
  <title>{{$title}} - Licenciamento Ambiental </title>
@endsection
@section('content')

  <style>
    .table th,
    .table td {
      padding: 0 0 0 0;
    }

    table.dataTable {
      border-collapse: collapse !important;
    }
  </style>
  
  @if ($errors->all())
    <div class="alert alert-danger" role="alert">
      <ul>

        @foreach ($errors->all() as $erro)
          <li>{{ $erro }}</li>
        @endforeach

      </ul>
    </div>
  @endif

  @if (session('success'))
    <div class="alert alert-success">
      {{ session('success') }}
    </div>
  @endif
  @if (session('erro'))
    <div class="alert alert-danger">
      {{ session('erro') }}
    </div>
  @endif

  <div class="content-wrapper">
    <div class="content-body">
      <section id="configuration">
        <div class="row">
          <div class="col-12">
            <div class="card" style="background-color: #f1f1f1;">
              <div class="card-header">
                <h4 class="card-title"> {{$title}} </h4>
              </div>
              <div class="card-content collapse show">
                  <div class="card-body card-dashboard">
                    <div class="row mb-3">
                      <div class="col-md-8"></div>
                      <div class="col-md-4">
                          <select id="municipio" class="form-control">
                              <option value="">Todos os municípios</option>
                              @foreach ($consorciados as $consorciado)
                                  <option value="{{ $consorciado }}">
                                      {{ $consorciado }}
                                  </option>
                              @endforeach
                          </select>
                      </div>
                  </div>
                      <div class="table-responsive">
                          
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                              @foreach ($idTables as $index => $item)
                                  <li class="nav-item">
                                      <a class="nav-link {{$index == 0 ? 'active' : ''}}" style="color:darkblue;font-weight: bold; padding: 0.4rem 1.6rem 0.4rem 1.6rem;"
                                          id="{{$item['id']}}-tab" data-toggle="tab" href="#{{$item['id']}}" role="tab" aria-controls="{{$item['id']}}"
                                          aria-selected="true">{{$item['name']}}</a>
                                  </li>
                              @endforeach
                          </ul>
                          
                          <div class="tab-content" id="myTabContent">
                              
                          @foreach ($idTables as $index => $item)
                              <div class="tab-pane fade {{$index == 0 ? 'show  active' : ''}}" id="{{$item['id']}}" role="tabpanel" aria-labelledby="profile-tab">
                                  <div style="height: 10px; width: 10px;"></div>
                                  <div style="height: 10px; width: 10px;"></div>
                                  <table class="table" id="users-table{{$item['type']}}" style="margin-top: 60px; width: 100%;">
                                      <thead
                                          style="border:none; border-top:none; border-bottom:none; border:#f1f1f1 2px solid; padding: 0 0 0 0; width: 100%;">
                                          <tr style="border:#f1f1f1 2px solid; padding: 0 0 0 0;">
                                              <th style="border-top:none; border-bottom:none; padding: 0 0 0 0!important;"></th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                      </tbody>
                                  </table>
                              </div>
                          @endforeach
                      </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

<div class="modal fade" id="downloadFile" tabindex="-1" aria-labelledby="downloadFileLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
               <div class="modal-header">
                    <h5 class="downloadFile-modal-title" id="modalIncludeFileLabel"></h5>
                    {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"> --}}
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                  <input type="hidden" name="modalId" id="modalId" value="">
                  <input type="hidden" name="modalType" id="modalType" value="">
                  <p>O processo de preparação e download dos arquivos pode levar alguns minutos. Tem certeza que deseja continuar?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" id="btn-baixar-arquivo" class="btn btn-primary bntindexbnt btn-raised">Baixar</button>
                    <button type="button" class="btn btn-warning" id="btn-interromper" style="display:none;">Cancelar processamento</button>
                  <div id="progress-container" style="display:none; padding-top: 30px; width: 100%;">
                      <div style="width:100%;background:#eee;border-radius:5px;">
                          <div id="progress-bar" style="width:0%;background:#007bff;color:#fff;text-align:center;border-radius:5px;">0%</div>
                      </div>
                      <span id="progress-text"></span>
                  </div>
                </div>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- end recent orders  -->


@include('modal.deletar')
@endsection
@section('post-script')
<script>

  let interromper = false;
  let id = 0;
  let type = 0;
  let documentos = [];

$(document).ready(function () {
   $('#modalDeletar').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    let id = button.data('id');
    let type = button.data('type');

    let baseUrl = '{{ routeTenant('tarefas.tarefasabertas.deletar', ["__id__", "__type__"]) }}';
    let url = baseUrl.replace('__id__', id).replace('__type__', type);

    $('#formDeletar').attr('action', url);
});

  $('#downloadFile').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget); 
      id = button.data('id');
      type = button.data('type');
      var token = button.data('token');
      var modal = $(this);
      modal.find('.downloadFile-modal-title').text('Baixar o processo ' + token);
    });
  });
  function setModalButtonsDisabled(disabled) {
    $('#btn-baixar-arquivo').prop('disabled', disabled);
    $('#btn-interromper').prop('disabled', !disabled);
    $('.btn-secondary').prop('disabled', disabled);
  }
function processarDownload(){
  console.log('processarDownload');
  let baseUrl = '{{ routeTenant("tarefas.tarefasabertas.preparar-arquivos", ["__id__", "__type__"]) }}';

  let url = baseUrl.replace('__id__', id).replace('__type__', type);

  fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
        let bar = document.getElementById('progress-bar');
        let text = document.getElementById('progress-text');
        text.textContent = data.finished ? 'documentos encontrados' : 'Buscando documentos...';
        if (data.success) {
          documentos = data.documentos;
          processarLote();
        }else {
          setModalButtonsDisabled(false);
          document.getElementById('btn-interromper').style.display = 'none';
          document.getElementById('btn-baixar-arquivo').style.display = 'inline-block';
          text.textContent = 'Falha ao encontrar os documentos, tente novamente mais tarde.';
        }
      })
      .catch(() => {
        setModalButtonsDisabled(false);
        document.getElementById('btn-interromper').style.display = 'none';
        document.getElementById('btn-baixar-arquivo').style.display = 'inline-block';
        text.textContent = 'Falha ao encontrar os documentos, tente novamente mais tarde.';
    });
}
function processarLote(start = 0){
  console.log('processarLote', id, type, start);
  interromper = false;
  document.getElementById('btn-interromper').style.display = 'inline-block';
  document.getElementById('btn-baixar-arquivo').style.display = 'none';
  setModalButtonsDisabled(true);
  document.getElementById('progress-container').style.display = 'block';
  let baseUrl = '{{ routeTenant("tarefas.tarefasabertas.baixar", ["__id__", "__type__"]) }}';
  let url = baseUrl.replace('__id__', id).replace('__type__', type);
    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ start: start, documentos:documentos })
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
        let bar = document.getElementById('progress-bar');
        let text = document.getElementById('progress-text');
        bar.style.width = data.progress + '%';
        bar.textContent = data.progress + '%';
        text.textContent = data.finished ? 'Processamento concluído!' : 'Processando...';
        if (!data.finished && !interromper) {
            setTimeout(() => processarLote(data.start), 500);
        }else if(data.finished && data.progress == 100){
          gerarzip();
        }else {
            setModalButtonsDisabled(false);
            document.getElementById('btn-interromper').style.display = 'none';
            document.getElementById('btn-baixar-arquivo').style.display = 'inline-block';
        }
    })
    .catch(() => {
        setModalButtonsDisabled(false);
        document.getElementById('btn-interromper').style.display = 'none';
        document.getElementById('btn-baixar-arquivo').style.display = 'inline-block';
    });
}
function gerarzip(){
  console.log('gerar-zip', id, type);
  let baseUrl = '{{ routeTenant("tarefas.tarefasabertas.gerar-zip", ["__id__", "__type__"]) }}';
  let url = baseUrl.replace('__id__', id).replace('__type__', type);
    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ documentos:documentos })
    })
    .then(response => response.json())
    .then(data => {
        let bar = document.getElementById('progress-bar');
        let text = document.getElementById('progress-text');
        bar.style.width = 100 + '%';
        bar.textContent = 100 + '%';
        text.textContent = data.finished ? 'Arquivos comprimidos com sucesso!' : 'Comprimindo arquivos...';
        if (data.success && data.url) {
          window.location.href = data.url;
          text.textContent = 'Iniciando download';
        }
        setModalButtonsDisabled(false);
        document.getElementById('btn-interromper').style.display = 'none';
        document.getElementById('btn-baixar-arquivo').style.display = 'inline-block';
        
    })
    .catch(() => {
        setModalButtonsDisabled(false);
        document.getElementById('btn-interromper').style.display = 'none';
        document.getElementById('btn-baixar-arquivo').style.display = 'inline-block';
    });
}
$('#btn-interromper').on('click', function(e) {
    e.preventDefault();
    interromper = true;
    setModalButtonsDisabled(true);
});
$('#btn-baixar-arquivo').on('click', function(e) {
    e.preventDefault();
    $('#progress-container').show();
    $('#progress-bar').css('width', '0%').text('0%');
    console.log('Iniciando processamento...');
    processarDownload();
});
$('.btn-secondary').on('click', function(e) {
    e.preventDefault();
    $('#progress-container').hide();
});
</script>

  <script src="{{ url('') }}/admin/app-assets/vendors/js/tables/datatable/datatables.min.js"></script>
  <script src="{{ url('') }}/admin/app-assets/js/scripts/tables/datatables/datatable-basic.js"></script>
<script>
    $(document).ready(function () {
      let idTables = @json($idTables);
      let tables = [];

      idTables.forEach(function (item) {
        let url = '{{ $route }}'.replace(':tipo', item.type);
        let table = $('#users-table' + item.type).DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Portuguese-Brasil.json"
            },
            processing: true,
            "ordering": false,
            serverSide: true,
            ajax: {
                url: url,
                data: function (d) {
                    d.municipio = $('#municipio').val();
                }
            },
            columns: [
                { data: 'dados', name: 'dados' },
            ]
        });
        tables.push(table);
    });
    $('#municipio').on('change', function () {
        tables.forEach(function (table) {
            table.ajax.reload();
        });

    });
});

</script>
@endsection