@extends('layout.padrao')
@section('content')
@section('title', 'Conferências de CutOff Dates')

<style>
  .align-top h2 {
    display: none;
  }

  .place-content-center{
    place-content: center;
  }

  .margin-table-cuttoff{
    margin-right: 8px;
  }

  .table-striped .fa-arrow-down{
    color: #a0a0a0;
  }
</style>

<div class="row folha-interna shadow col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded folhaForm">

  <div class="col-lg-12">
    <div class="row">

      <div class="col-12 margin-bottom-15">
        <h2>Conferências de CutOff Dates</h2>
      </div>
      <!-- Barra de pesquisa -->  
      <div class="col col-lg-12 col-sm-12 col-md-12 folha-interna shadow folha-branca-contornada rounded min-height-auto" style="margin-bottom: 50px;">
        <form method="GET" action="">
            <div class="formulario" id="formPesquisa" style="display: none;">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 display-flex flex-direction-column-reverse justify-content-center margin-bottom-15">
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 mxWidth50 margin-bottom-15">
                              <label for="commodity_id" class="font-weight-normal smallFont">Search by Commodity: </label>
                              {!! Form::select('commodity_id[]', $select['platforms'], ($params['commodity_id'] ?? null), ['class' => 'form-control select2', 'multiple'=>'multiple']) !!}
                            </div>

                            <div class="col-lg-3 col-sm-6 mxWidth50 margin-bottom-15">
                              <label for="carrier_id" class="font-weight-normal smallFont">Search by Carrier: </label>
                              {!! Form::select('carrier_id[]', $select['carriers'], ($params['carrier_id'] ?? null), ['class' => 'form-control select2', 'multiple'=>'multiple']) !!}
                            </div>

                            <div class="col-lg-3 col-sm-6 mxWidth50 margin-bottom-15">
                              <label for="loading_ports_id" class="font-weight-normal smallFont">Search by Loading Port: </label>
                              {!! Form::select('loading_ports_id[]', $select['loadingPorts'],  ($params['loading_ports_id'] ?? null), ['class' => 'form-control select2', 'multiple'=>'multiple']) !!}
                            </div>

                            <div class="col-lg-2 col-sm-12 mxWidth50 btnX margin-bottom-15 align-self-end">
                              <button class="btn btn-blue" type="submit">Search</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>  
        <!-- Botão para recolher a pesquisa -->
        <div class="col-12 text-center">
            <div class="btn" id="dropSearch">
                <div title="Open Search" style="color: #0d6397 !important; font-size: 1.1 rem;">
                    <span id="spanSearch" style="margin-bottom:-23px">Search</span> <br><i id="openBtn" class="fas fa-chevron-down"></i> 
                </div>
            </div>
        </div>
    </div>

    @include('include.filtro_result')

      <form action="{{route('scrapeFiles.update.conference')}}" method="post" style="width:100%">

        {{ csrf_field() }}

        <div class="col-12">
          <!-- Tabela Responsiva -->
          <div class="table-responsive">
            <div id="toolbar">
              <button id="buttonQuickSave" type="submit" class="btn btn-padrao">QUICK SAVE</button>
              
            </div>
            <table class="table-striped text-center" id="table" data-toggle="table" data-search="true" data-page-size="50"
              data-detail-formatter="detailFormatter" data-page-list="[100, 200, 300, 400, all]" data-show-footer="true"
              data-show-pagination-switch="true" data-show-refresh="true" data-click-to-select="true"
              data-show-fullscreen="true" data-pagination="true" data-toolbar="#toolbar" data-show-toggle="true"
              data-height="auto" data-show-export="true" data-export-data-type="all" data-query-params="queryParams"
              data-url="/scrapeFiles/details/bookings/json{{"?" . http_build_query($params)}}" data-show-columns="true">
              <thead>
                <tr class="trSuperBlue">
                  <th data-field="loading_requests-id" data-formatter="operateInputCheckbox"></th>
                  <th data-field="booking" data-sortable="true" data-formatter="linkBooking" class="text-center">Booking</th>
                  <th data-field="loading_requests-client" data-sortable="true" class="text-center">Client</th>
                  <th data-field="fantasyName" data-sortable="true" class="text-center">Carrier</th>
                  <th data-field="descricao" data-sortable="true" class="text-center">Vessel</th>
                  <th data-field="voyage" data-sortable="true" class="text-center">Voyage (PDF)</th>
                  <th data-field="loading_requests-voyage" data-sortable="true" class="text-center">Process Voyage</th>
                  <th data-field="file-terminal_description" data-sortable="true" class="text-center">Terminal</th>
                  <th data-field="loading_requests-draftCutoffDate" data-sortable="true" data-formatter="dataFormatDates" class="text-center">DRAFT CutOff Date</th>
                  <th data-field="loading_requests-cargoCutoffDate" data-sortable="true" data-formatter="dataFormatDates" class="text-center">Cargoo CutOff Date</th>
                  <th data-field="loading_requests-vgmCutoffDate" data-sortable="true" data-formatter="dataFormatDates" class="text-center">VGM CutOff Date</th>
                  <th data-field="loading_requests-usuario" data-sortable="true"  class="text-center">User Resp.</th>   
                </tr>
              </thead>
            </table>
          </div>
        </div>
      
      </form>

    </div>


    <script>
      var objToggle = [];
      var elem = null;

      $(".select2").select2({
        placeholder: "Select one or more Options",
        allowClear:true,
        maximumSelectionLength: 1000,
    });

      // Botão Quick Save
      $('#buttonQuickSave').click(function (value, row, index) {
          console.table(objToggle);
      });

      function toggleCheckbox(element){
        // console.log(element)
        elem = element;

        if(element.checked === true){
          // console.log("checado: " + element.value);
          objToggle.push(elem)
        } else{
          const index = objToggle.indexOf(elem);
          objToggle.splice(index, 1)
        }

      }

      // Coluna 1 - Formatando checkbox
      function operateInputCheckbox(value, row, index) {
        // console.log(row)
        return [
          '<input type="checkbox" name="loading_requests-id[]" value="'+index+'"  /> '  +
          '<input type="hidden" name="loading_requests-id2[]" value="'+row['loading_requests-id']+'"  /> '  +
          '<input type="hidden" name="carriers-id[]" value="'+row['carriers-id']+'"  /> '  +
          '<input type="hidden" name="file-cargoCutoffDate[]" value="'+row['file-cargoCutoffDate']+'"  /> '  +
          '<input type="hidden" name="file-code_of_port[]" value="'+row['file-code_of_port']+'"  /> '  +
          '<input type="hidden" name="file-draftCutoffDate[]" value="'+row['file-draftCutoffDate']+'"  /> '  +
          '<input type="hidden" name="file-etaPod[]" value="'+row['file-etaPod']+'"  /> '  +
          '<input type="hidden" name="file-etaPol[]" value="'+row['file-etaPol']+'"  /> '  +
          '<input type="hidden" name="file-terminal_description[]" value="'+row['file-terminal_description']+'"  /> '  +
          '<input type="hidden" name="file-vgmCutoffDate[]" value="'+row['file-vgmCutoffDate']+'"  /> '  +
          '<input type="hidden" name="loading_requests-cargoCutoffDate[]" value="'+row['loading_requests-cargoCutoffDate']+'"  /> '  +
          '<input type="hidden" name="loading_requests-cargoCutofftime[]" value="'+row['loading_requests-cargoCutofftime']+'"  /> '  +
          '<input type="hidden" name="loading_requests-draftCutoffDate[]" value="'+row['loading_requests-draftCutoffDate']+'"  /> '  +
          '<input type="hidden" name="loading_requests-draftCutofftime[]" value="'+row['loading_requests-draftCutofftime']+'"  /> '  +
          '<input type="hidden" name="loading_requests-etaPod[]" value="'+row['loading_requests-etaPod']+'"  /> '  +
          '<input type="hidden" name="loading_requests-etaPol[]" value="'+row['loading_requests-etaPol']+'"  /> '  +
          '<input type="hidden" name="loading_requests-vgmCutoffDate[]" value="'+row['loading_requests-vgmCutoffDate']+'"  /> '  +
          '<input type="hidden" name="loading_requests-vgmCutoffTime[]" value="'+row['loading_requests-vgmCutoffTime']+'"  /> '  +
          '<input type="hidden" name="vessel-id[]" value="'+row['vessel-id']+'"  /> '  +
          '<input type="hidden" name="voyage[]" value="'+row['voyage']+'"  /> ' 




        ].join('')
        // return [
        //   '<input type="checkbox" id="check'+index+'"  name="check'+value+'" value='+row['loading_requests-id']+' onchange="toggleCheckbox(check'+index+')" /> ' 
        // ].join('')
      }

      // Coluna 2 - Linkando Booking
      function linkBooking(value, row, index){
        if (row['booking'] == null) return '-';
        
        let link = '/scrapeFiles/conference/BookManual?lrId='+(row['loading_requests-id']) + '&draft=' + (row['file-draftCutoffDate']) + '&vgm=' + (row['file-vgmCutoffDate']) + '&cargo=' + (row['file-cargoCutoffDate']);
        return ['<a href="'+link + value +'" target="_blank">'+ value +'</a>'].join('')
      }

      // Coluna 6 - Formatando datas Draft Cuttoff
      function dataFormatDates(value, row, index, field) {

        if (field == 'loading_requests-draftCutoffDate') {
          $dbFieldDate = field
          $dbFieldtime = 'loading_requests-draftCutofftime'
          $fileFieldDatetime = 'file-draftCutoffDate'
        }
        else if (field == 'loading_requests-cargoCutoffDate') {
          $dbFieldDate = field
          $dbFieldtime = 'loading_requests-cargoCutofftime'
          $fileFieldDatetime = 'file-cargoCutoffDate'          
        }
        else if (field == 'loading_requests-vgmCutoffDate') {
          $dbFieldDate = field
          $dbFieldtime = 'loading_requests-vgmCutoffTime'
          $fileFieldDatetime = 'file-vgmCutoffDate'          
        }
        else {
          return 'error'
        }

        

        $originDateTime = 'Not filled';
        $destineDateTime = 'Not filled';

        if (row[$dbFieldDate] != null) {
          let originalDate = row[$dbFieldDate] ;
          originalDate = new Date(originalDate);

          var parts = row[$dbFieldDate].match(/(\d+)/g);
          var date = new Date(parts[0], parts[1] - 1, parts[2]);

          var data_format_due = ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) +
            '-' + ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) +
            '-' + date.getFullYear();

            $originDateTime = data_format_due + ' ' + row[$dbFieldtime];
        }

        if (row[$fileFieldDatetime] != null) {
            let originalDate2 = row[$fileFieldDatetime];
            originalDate2 = new Date(originalDate2);

            var parts2 = row[$fileFieldDatetime].match(/(\d+)/g);
            var date2 = new Date(parts2[0], parts2[1] - 1, parts2[2]);

            var data_format_due2 = ((date2.getDate() > 9) ? date2.getDate() : ('0' + date2.getDate())) +
              '-' + ((date2.getMonth() > 8) ? (date2.getMonth() + 1) : ('0' + (date2.getMonth() + 1))) +
              '-' + date2.getFullYear();

              $destineDateTime = data_format_due2 + ' ' + originalDate2.toLocaleTimeString();
        }
        

        return ['<div class="row place-content-center"><div class="margin-table-cuttoff align-self-center text-right" ><i class="fas fa-arrow-down" ></i></div> <div class="text-left">' + $originDateTime + '</br>' + $destineDateTime + '</div></div>'].join('')
      }

      // search
      $(document).on('click', '#dropSearch', function (click) {
          var formulario = document.getElementById("formPesquisa");
          var seta = document.getElementById("dropSearch");
          var spanSearch = document.getElementById("spanSearch");
          var icone = document.getElementById("openBtn"); 

          if (formulario.style.display == "none") {
            formulario.style.display = "block";
            spanSearch.style.display = "none";
            icone.style.transition = "0.3s";
            icone.style.transform = "rotate(180deg)";
          } else {
            formulario.style.display = "none";
            spanSearch.style.display = "block";
            icone.style.transition = "0.3s";
            icone.style.transform = "rotate(0deg)";
          }
      })

    </script>

    @include('scrapeFile.style')
    @include('bibliotecas.bootstrapExport')

    @endsection