@section('title', 'VGM LIST')
@section('content')

<div>
  <style>
    .inputTransparent{
      background: transparent !important;
      border: transparent !important;
    }
    .modal-dialog{
      margin-left: 16% !important;
    }

    .modal-header h3{
      padding: none !important;
      margin: none !important;
      display: flex !important;
      align-self: center !important;
      text-align: center !important;
      margin-left: 36% !important;
    }

    .modal-danger{
      margin-left: 16%;
    }

    .differentMethod{
      background: #dfeeff; 
      color: #134a84; 
      border-right: 2px solid #fff;
    }

    .fixed-table-footer{
      display:none !important;
    }
  
    @media(max-width:1938px){
      .modal-danger{
        margin-left: 9%;
      }
    }

    @media(max-width:1618px){
      .modal-danger{
        margin-left: 3%;
      }
    }

    @media(max-width:1343px){
      .modal-danger{
        margin-left: -3%;
      }
    }

    @media(max-width:1200px){
      .modal-danger .modal-dialog{
        width: 360px;
      }
      .modal-danger{
        margin-left: 5%;
      }
    }

    @media(max-width:1000px){
      .modal-danger{
        margin-left: 0%;
      }
    }

    @media(max-width:889px){
      .modal-danger{
        margin-left: -5%;
      }
    }
  </style>
  
   @if(isset($msg_error))
   
   <div class="alert alert-danger">
    <button type="button" class="close" data-dismiss="alert">×</button>
        <p>{{$msg_error}}</p>
   </div>
  @endif
 
  @if(isset($msg))
  
   <div class="alert alert-success">
   <button type="button" class="close" data-dismiss="alert">×</button>
      <p>{{$msg}}</p>
   </div>
  @endif
 
  <table class="table-striped text-center" id="table2"
  data-toggle="table"
  data-search="true"
  data-show-footer="true"
  data-detail-formatter="closeVGMFormatter"
  data-show-pagination-switch="true"
  data-show-refresh="true"
  data-click-to-select="true"
  data-show-fullscreen="true"
  data-pagination="true"
  data-page-size="600"
  data-toolbar="#toolbar"
  data-show-toggle="true"
  data-show-export="true"
  data-export-data-type="all"
  data-url="/vgm/json"
  data-show-columns="true">
    <thead>
      <tr class="trSuperBlue">
          {{-- <th  data-field="id"  data-formatter="operateInputCheckbox" ></th> --}}
          <th class="icon-action" data-field="id" data-width="160" data-formatter="closeVGMFormatter" data-events="operateEvents"></th>
          
          <th data-field="clients_fantasyName" data-sortable="true" class='text-center'> Client </th>
          <th data-field="booking" data-sortable="true" class='text-center'> Booking </th>
          <th data-field="container_types.descricao" data-sortable="true" class='text-center'>Container Type</th>
          <th data-field="containerQty" data-sortable="true" class='text-center'>Container Qty</th>
          <th data-field="vessel.descricao" data-sortable="true" class='text-center'>Vessel</th>
          <th data-field="voyage" data-sortable="true" class='text-center'>Voyage</th>
          <th data-field="carriers.descricao" data-sortable="true" class='text-center'>Carrier</th>
          <th data-field="etaPol" data-sortable="true" class='text-center' data-formatter="dateFormatter">ETD POL</th>
          <th data-field="etaPod" data-sortable="true" class='text-center' data-formatter="dateFormatter">ETA POD</th>
          <th data-field="cargooReference" data-sortable="true" class='text-center'>Cargoo Ref.</th>
          <th data-field="code_of_ports1.place" data-sortable="true" class='text-center'>POD</th>
          <th data-field="loading_ports.descricao" data-sortable="true" class='text-center'>POL</th>
          <th data-formatter="VGMstatus"  class='text-center'> Status </th>
      </tr>
    </thead>
  </table>
</div>
 <!-- ---------------------------------------- Buttons ---------------------------------------- -->

<script>
  
  var $table = $('#table2')
  $(function() {
    $table.bootstrapTable({
                      search: true,
                    cache: false,
                    height: 1000,
                    striped: true,
                    pagination: true,
                    pageSize: 50, //specify 5 here
                    pageList: [50, 100, 150,200,500]//list can be specified here
    });    
  })
 
  function VGMstatus(value, row,index){
    var data;
      if(row.vgm_instructions[0] == undefined){
        data = '-';
      }else{
        data = row.vgm_instructions[0].status;
      }
      return [ data ].join('')
  }
  function dateFormatter(value, row,index){
      let date = value;
      var  data_format_due;
      if(value == '' || value == null){
          data_format_due = '-';
      }else{
          date = new Date(date);
          data_format_due =  value.slice(8,10)
                                  + '-' + 
                                  value.slice(5,7)
                                  + '-' + value.slice(0,4);
      }
      return [
          data_format_due
      ].join('')
  }

  function showDifference(val){
    var element = $('.difference'+val);
    var icon = document.getElementById('chevronDown'+val);
    
    if(!element.hasClass('display-none')){
      element.addClass('display-none');
      icon.style.transform = "rotate(180deg)";
    }else{
      element.removeClass('display-none');
      icon.style.transform = "rotate(0deg)";
    }
  }

  function formatDate(input) {
    const date = input;
    const [year, month, day] = date.split('-');
    const result = [day, month, year].join('/');
    return result;
  }

  function selectMethod(id){
    var valor = $('#Method'+id).val();
    $('.method').val(valor);
  }

/*Função Click para modal dinamico - Evento do bootstrap table*/
  function closeVGMFormatter(value, row, index){
    return[
        '<a class="like icone-padding" href="javascript:void(0)"><i class="fas fa-weight-hanging fa-lg"></i></a> '
    ].join('')
  }
    
  window.operateEvents = {
      'click .like': function (e, value, row, index) {
        var $url = "/VGMequipmentsDetails/json/" + row.id;
        // var $url = "/VGMequipmentsDetails/json/23999";
        var detail = $.ajax({
                                type: "GET",
                                url: $url,
                                async: false
                            }).responseJSON;
        var html = '';

        if(row.cargooReference == null || row.cargooReference == ''){
          var cargooRef = '-';
        } else{
          var cargooRef = row.cargooReference;
        }
           
        console.table(detail);
        if((detail[0]['vgm_instructions'] !== undefined || detail[0]['vgm_instructions'] != null) && !(detail[0]['vgm_instructions'].length === 0)){
          $.each(detail[0]['vgm_instructions'], function (key, value) {
            let lengthOfCharacters = (value.status).length;
            let heightTextearea =
                  lengthOfCharacters >= 85 ? "114px" :
                  lengthOfCharacters >= 58 ? "94px"  :
                  lengthOfCharacters >= 41 ? "73px"  :
                  lengthOfCharacters >= 21 ? "52px"  :
                  "34px";

            html += '<tr> ' + 
                        '<td style="width: 80px;"><input type="text" class="text-center inputTransparent" readonly name="id[]" value="'+value.id+'"/> ' + 
                        '<input type="hidden" name="loading_requests_id" value="'+value.loading_requests_id+'"/></td> ' + 
                        ' <input type="hidden" name="booking" value="'+row.booking+'"/></td> ' + 
                        ' <input type="hidden" name="cargooReference" value="'+row.cargooReference+'"/></td> ' +
                        '<td><input type="text" readonly name="loading_equipment_id[]" class="form-control EquipmanetButton" value="'+value.equipmentNumber+'" required/></td> ' + 
                        '<td style="width: 121px;"> ' + 
                          '<select class="form-control method" id="Method'+key+'" name="Method[]" onclick="selectMethod('+key+')">'+
                            '<option value="1"' + (value.method == 1 ? 'selected' : '') + '>1</option>'+
                            '<option value="2"' + (value.method == 2 ? 'selected' : '') + '>2</option>'+
                          '</select>'+
                        '</td>' + 
                        '<td style="width: 112px;">'+
                          '<select class="form-control" name="WeightMetricType[]">'+
                            '<option value="1"' + (value.weight_metric_type == 1 ? 'selected' : '') +'>KG</option>'+
                            '<option value="2"' + (value.weight_metric_type == 2 ? 'selected' : '') +'>POUNDS (LBS)</option>'+
                          '</select>'+ 
                        '</td>'+ 
                        '<td style="width: 20%;"><input type="text" class="form-control" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="VgmWeight[]"' +
                          'value='  + value.vgm_weight + ' required/></td>' + 
                        '<td style="width: 20%;"><textarea cols="40" rows="1" class="form-control" name="status" style="height:'+heightTextearea+'" disabled> ' + value.status + '</textarea></td>' +
                      '</tr>'; 
          })
        }
        else if((detail[0]['loading_request_equipment'] !== undefined || detail[0]['loading_request_equipment'] != null) && !(detail[0]['loading_request_equipment'].length === 0)){
          $.each(detail[0]['loading_request_equipment'], function (key, value) {
            var gross_weight = '';
            if(value['loading_request_equipment_details'][0] != undefined){
              gross_weight = value['loading_request_equipment_details'][0]['gross_weight'];
            }

            html += '<tr> ' + 
                        '<td style="width: 80px;"><input type="text" class="text-center inputTransparent" readonly name="id[]" value="'+value.id+'"/> ' + 
                        '<input type="hidden" name="loading_requests_id" value="'+value.loading_requests_id+'"/></td> ' + 
                        ' <input type="hidden" name="booking" value="'+row.booking+'"/></td> ' + 
                        ' <input type="hidden" name="cargooReference" value="'+row.cargooReference+'"/></td> ' +
                        '<td><input type="text" readonly name="loading_equipment_id[]" class="form-control EquipmanetButton" value="'+value.equipmentNumber+'" required/></td> ' + 
                        '<td style="width: 121px;"> ' + 
                          '<select class="form-control method" id="Method'+key+'" name="Method[]" onclick="selectMethod('+key+')">'+
                            '<option value="1"' + (value.method == 1 ? 'selected' : '') + '>1</option>'+
                            '<option value="2"' + (value.method == 2 ? 'selected' : '') + '>2</option>'+
                          '</select>'+
                        '</td>' + 
                        '<td style="width: 112px;">'+
                          '<select class="form-control" name="WeightMetricType[]">'+
                            '<option value="1"' + (value.weight_metric_type == 1 ? 'selected' : '') +'>KG</option>'+
                            '<option value="2"' + (value.weight_metric_type == 2 ? 'selected' : '') +'>POUNDS (LBS)</option>'+
                          '</select>'+ 
                        '</td>'+ 
                        '<td style="width: 20%;"><input type="text" class="form-control" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="VgmWeight[]"' +
                          'value="' + gross_weight  +'" required/></td>' + 
                        '<td><input type="text" class="form-control" name=status  disabled/></td> ' + 
                      '</tr>'; 
          })
        }
        else{
          for (count = row.containerQty; count > 0; count--) {
            html += '<style>.idLine{display: none}</style><tr> ' + 
                        '<td class="display-none"><input type="text" readonly name="id[]" />' + 
                        ' <input type="hidden" name="loading_requests_id" value="'+row.id+'"/></td> ' + 
                        ' <input type="hidden" name="booking" value="'+row.booking+'"/></td> ' + 
                        ' <input type="hidden" name="cargooReference" value="'+row.cargooReference+'"/></td> ' + 
                        '<td><input type="text" class="form-control EquipmanetButton" name="loading_equipment_id[]" required /></td> ' + 
                        '<td style="width: 121px;"> ' + 
                          '<select class="form-control method" id="Method'+count+'" name="Method[]" onclick="selectMethod('+count+')">'+ /**Preciso criar a tabela de vgmInstruction e checar os valores**/
                            '<option value="1">1</option>'+
                            '<option value="2">2</option>'+
                          '</select>'+
                        '</td>' + 
                        '<td style="width: 112px;">'+
                          '<select class="form-control" name="WeightMetricType[]">'+
                            '<option value="1">KG</option>'+
                            '<option value="2">TON</option>'+
                          '</select>'+ 
                        '</td>'+ 
                        '<td style="width: 20%;"><input type="text" class="form-control" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="VgmWeight[]" required /></td>' + 
                        '<td><input type="text" class="form-control" name=status disabled /></td> ' + 
                      '</tr>'; 
          }
        }

        $('#closeContract').find('.modal-dynamic-title').text('VGM')
        $('#closeContract').find('.modal-dynamic-form').html('<form id="VGMWeightForm" method="GET" action="/vgm/SaveAndSend"  >' +   
                                                                    // '<div class="contract-modal-body" style="max-height: 373px; overflow: scroll;">' + 
                                                                    '<div class="contract-modal-body">' + 

                                                                      '<div class="row col" style="font-size: 0.9rem">' +
                                                                        
                                                                        '<div class="col-4 margin-top-10"><span><b>SAOE: </b> '+row.SAOE+'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>Booking: </b> '+row.booking+'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>Client: </b> '+row.clients_fantasyName+'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>Cargoo Ref.: </b> '+ cargooRef +'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>POL: </b> '+row.loading_ports.descricao+'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>POD: </b> '+row.code_of_ports1.place+'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>ETD POL: </b> '+ formatDate(row.etaPol) +'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>ETA POD: </b> '+ formatDate(row.etaPod) +'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>Draft Cutoff: </b> '+ formatDate(row.draftCutoffDate) + ' - ' + row.draftCutofftime +'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>VGM Cutoff: </b> '+ formatDate(row.vgmCutoffDate) + ' - ' + row.vgmCutoffTime +'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>Cargo Cutoff:  </b> '+ formatDate(row.cargoCutoffDate) + ' - ' + row.cargoCutofftime +'</span></div>'+
                                                                        '<div class="col-4 margin-top-10"><span><b>Carrier: </b> '+row.carriers.descricao+' - <b>Vessel: </b> '+row.vessel.descricao+' - <b>Voyage: </b> '+row.voyage+'</span></div>'+
                                                                        '<div style="width: 98%; border-bottom: 1px solid var(--blue-tabex); margin: 14px 0px 8px 15px;"></div>' +
                                                                      '</div>'+
                                                                      '<table class="table table-striped table-sm" style="margin-bottom: 1px">'+
                                                                        '<thead> ' +
                                                                          '<tr style="width: 100%; display:contents;"> ' +
                                                                            ' <th style="text-align:center; width: 179px;" class="idLine">ID</th> ' +
                                                                            ' <th style="text-align:center;">Equipment Number</th> ' +
                                                                            ' <th style="text-align:center; width: 130px;">Method (1 or 2)</th> ' +
                                                                            ' <th style="text-align:center; width: 120px;">Weight Metric</th> ' +
                                                                            ' <th style="text-align:center; width: 20%;">VGM Weight</th> ' +
                                                                            ' <th style="text-align:center; width: 20%;">Status</th> ' +
                                                                          '</tr> ' +
                                                                        '</thead>'+ 
                                                                        '<tbody></tbody>'+
                                                                      '</table>'+
                                                    
                                                                      '<div class="table-responsive tableMenor" style="max-height: 373px !important;">'+
                                                                        '<div class="wrapper">'+
                                                                          '<table id="Contract_detailTable" class="table table-striped table-sm" >'+
                                                                            '<thead class="display-none"> ' +
                                                                              '<tr style="width: 100%; display:contents;"> ' +
                                                                                ' <th style="text-align:center;" class="idLine">ID</th> ' +
                                                                                ' <th style="text-align:center;">Equipment Number</th> ' +
                                                                                ' <th style="text-align:center;">Method (1 or 2)</th> ' +
                                                                                ' <th style="text-align:center;">Weight Metric</th> ' +
                                                                                ' <th style="text-align:center;">VGM Weight</th> ' +
                                                                              '</tr> ' +
                                                                            '</thead>'+ 
                                                                            '<tbody>'+
                                                                              html +
                                                                            '</tbody>'+
                                                                          '</table>'+
                                                                        '</div>' + 
                                                                      '</div>' + 
                                                                    '</div>' + 
                                                                    '<div class="modal-footer">' + 
                                                                      '<div class="row col">' +
                                                                        '<div class="col-6 padding-10 text-center differentMethod">' +
                                                                          '<h4 class="margin-top-10"><b><i class="fas fa-truck-moving"></i> Method 1 </b></h4>'+
                                                                          '<h5>Total weight - Truck with fuel </h5>'+
                                                                        '</div>'+
                                                                        '<div class="col-6 padding-10 text-center differentMethod">' +    
                                                  
                                                                          '<h4 class="margin-top-10"><b><i class="fas fa-box"></i> Method 2 </b></h4>'+
                                                                          '<h5>Goods + Packing + Container </h5>'+
                                                                        '</div>'+
                                                                      '</div>'+
                                                                      '<button type="button" class="btn btn-blue" data-dismiss="modal" onClick="$(".modal-backdrop").remove()">No</button>' + 
                                                                      '<button type="submit" class="btn btn-blue" id="submitSaveAndButton" >Save and Send</button>' + 
                                                                    '</div>' + 
                                                                    '</form>')
        $('#closeContract').modal('show').find('.contract-modal-body') 
      }
    }
</script>

@include('bibliotecas.floattheadOverflow')
@include('include.modal_dynamic')
@include('bibliotecas.bootstrapExport')
@include('bibliotecas.multiplyButtons')
@endsection