@extends('layout.padrao')
@section('title', 'Equipment x Booking')

@section('content')

<style>
  .modal-header .close {
    margin-top: -10px;
  }

  .modalComment .modal-header .close {
      margin: none !important;
  }

  .modalComment .modal-content {
      width: 80rem;
      margin-left: -20%;
  }

  .modalComment .modal-title {
      margin-left: 18%;
  }

  .disabledLink{
    pointer-events: none !important;
  }
</style>

<form id='checkedsDN' method="post" action="{{ route('LoadingRequestEquipmentController.loadingEquipmentsEmptiesLink') }}">
  {{method_field('post')}}
  {{ csrf_field() }} 
<div class="table-responsive" style="overflow:clip; white-space: nowrap;">
  <div id="toolbar">
    <div class="obj">
      <a class="link" id="linkModalBooking" data-toggle="modal" data-target="#link" data-placement="top" title="Link a Booking">
        <button id="btnLinkBooking" class="btn btn-padrao">Link a Booking</button>
      </a>
    </div>
  </div>
  <table class="table-striped text-center" id="table" data-toggle="table" data-search="true"
    data-detail-formatter="detailFormatter" data-height="750" data-page-list="[100, 200, 300, 400, all]" data-show-footer="true"
    data-show-refresh="true" data-click-to-select="true" data-show-fullscreen="true" data-toolbar="#toolbar"
    data-show-toggle="true" data-show-export="true" data-export-data-type="all" data-query-params="queryParams"
    data-url="/loadingEquipmentsEmpties/json/" data-multiple-select-row="true" data-show-columns="true">
    <thead>
      <tr class="trSuperBlue">
        <th class="text-center" data-field="id" data-formatter="inputCheckbox"></th>
        <th class="text-center" data-field="id" data-sortable="true">ID do Equipamento</th>
        <th class="text-center" data-field="equipmentNumber" data-sortable="true">Número do Equipamento</th>
        <th class="display-none" data-field="hauling_process_details">Hauling</th>
        <th class="display-none" data-field="stuffing_process_loadings">Stuffing</th>
        <th class="text-center" data-field="stuffing_process_loadings" data-sortable="true" data-formatter="flexitankNumber">Número do Flexitank</th>
        <th class="text-center" data-field="stuffing_process_loadings" data-sortable="true" data-formatter="taraNumber">Tara</th>
        <th class="text-center Etapa" data-field="menus" data-sortable="true" data-formatter="etapa" >Etapa</th>
      </tr>
    </thead>
  </table>
</div>
</form>

@include('bibliotecas.bootstrapExport')
@include('loadingRequest.loadingEquipmentsEmpties.script')
@include('include.modal_link', ["rota" => "LoadingRequestEquipmentController.loadingEquipmentsEmptiesLink"])

@endsection