@extends('layout.padrao')
@section('title', 'Contract Booking Request')

@section('content')
<!-- Cards com gráficos -->
<div id="wrapper">
  <div class="content-area">
      <div class="container-fluid">
          <div class="main">
              <div class="row cardGraficos">
                  <div class="col"></div>
                  <div class="col col-lg-2 col-md-12 col-sm-12 col-xs-12">
                      <!-- Grafico 1 -->
                      <div class="box box1">
                          <div class="details">
                              <h3 name="totalCard1" id="totalCard1">230</h3>
                              <h4 name="nameCard1">TONS</h4>
                          </div>
                          <div id="grafico1"></div>
                      </div>
                  </div>
                  <div class="col col-lg-2 col-md-12 col-sm-12 col-xs-12">
                      <!-- Grafico 2 -->
                      <div class="box box2">
                          <div class="details">
                              <h3 name="totalCard2" id="totalCard2">100</h3>
                              <h4 name="nameCard2">PROCESS</h4>
                          </div>
                          <div id="grafico2"></div>
                      </div>
                  </div>
                  <div class="col col-lg-2 col-md-12 col-sm-12 col-xs-12">
                      <!-- Grafico 3 -->
                      <div class="box box3">
                          <div class="details">
                              <h3 name="totalCard3" id="totalCard3">32</h3>
                              <h4 name="nameCard3">SANTOS, BRAZIL</h4>
                          </div>
                          <div id="grafico3"></div>
                      </div>
                  </div>
                  <div class="col col-lg-2 col-md-12 col-sm-12 col-xs-12">
                      <!-- Grafico 4 -->
                      <div class="box box4">
                          <div class="details">
                              <h3 name="totalCard4" id="totalCard4">22</h3>
                              <h4 name="nameCard4">PARANAGUÁ, BRAZIL</h4>
                          </div>
                          <div id="grafico4"></div>
                      </div>
                  </div>
                  <div class="col col-lg-2 col-md-12 col-sm-12 col-xs-12">
                      <!-- Grafico 5 -->
                      <div class="box box5">
                          <div class="details">
                              <h3 name="totalCard5" id="totalCard5">50</h3>
                              <h4 name="nameCard5">RIO GRANDE, BRAZIL</h4>
                          </div>
                          <div id="grafico5"></div>
                      </div>
                  </div>
                  <div class="col"></div>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="table-responsive" style="overflow:clip;">
    <table class="table-striped text-center" id="table" data-toggle="table" data-search="true" data-detail-view="true"
        data-detail-view-icon="false" data-detail-formatter="detailFormatter" data-show-footer="true" data-flat="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="/ContractRequestDash/Json" 
        data-show-columns="true">
        <thead>
            <tr class="trSuperBlue">
                <th data-formatter="actionsTable"> Actions </th>
                <th data-field="contract_details.sellers.name" data-sortable="true"> Client </th>
                <th data-field="loading_plants.descricao" data-formatter="loadingPlantFormatter" data-sortable="true"> Supplier </th>
                <th data-field="contract_details_sub_reference" data-sortable="true"> Loading Ref </th>
                <th data-field="contract_details.platforms.descricao" data-sortable="true"> Product </th>
                <th data-field="dtfrom" data-sortable="true" data-formatter="dateFormatBRDate"> From </th>
                <th data-field="dtto" data-sortable="true" data-formatter="dateFormatBRDate"> To </th>
                <th data-field="qtyTons" data-sortable="true"> Qty </th>
                <th data-field="container_types.descricao" data-sortable="true"> Equipment </th>
                <th data-field="loading_ports.descricao" data-sortable="true"> POL </th>
                <th data-field="contract_details.port_destination.code" data-sortable="true"> POD </th>
            </tr>
        </thead>
    </table>
</div>

<script>
    function loadingPlantFormatter(value, row, index) {
        if((typeof row?.loading_plants?.cities?.descricao) !== 'undefined') {
            return value + " - " + row.loading_plants.cities.descricao;
        }
        return value;
    }

    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });

    function actionsTable(value, row, index) {
        return [
          '<div class="actionsRow row">',
              // Icone Allocation -----------------------------------------------------------------------------------------------------------------------------------
              '<div class="obj">',
                '<a href="/allocationPosition/list" data-toggle="tooltip" title="Go to Allocation" target="_blank" >', 
                  '<i class="fa fa-crosshairs styleIcon"  style="color:#428bca;"></i>',
                '</a>',
              '</div>',
              // Icone Link a Booking -------------------------------------------------------------------------------------------------------------------------------
              '<div class="obj">',
                '<a class="link" data-toggle="modal" data-target="#link" data-placement="top" title="Link a Booking" data-catid='+ row.id +'>',
                  '<i class="fas fa-link styleIcon" style="color:#428bca;"></i> ',
                '</a>',
              '</div>',

              // Icone Add a Comment --------------------------------------------------------------------------------------------------------------------------------
              '<div class="obj" >',
                '<a href="#" onclick="showChat('+ row.id +',\'ContractQtyPerMonth\');"  ' ,
                'data-toggle="modal" data-target="#myModalChat" style=" text-decoration: none;  position: relative;  display: inline-block;  border-radius: 2px;">'+
                '<div class="open-AddComment" data-toggle="tooltip" title="Add a comment" data-container="body">',
                    '<div class="d-flex justify-content-center commentBubble" style="position: relative; margin-top: -10px;">',
                        '<i class="fas fa-comments  fa-2x" ></i>'+
                        // número de comentários
                        '<span style="position: absolute;  top: 3px;  right: ' + (row.message_count <= 9 ? 12 : 10) + 'px;  padding: 0px 6px;  border-radius: 50%; color: white; font-size:11px;">'+row.message_count+'</span>'+

                        // '<div class="smallValue" id="comment'+row.id+'">' +row.message_count+ '</div>',
                    '</div>',
                '</div>',
              '</div>',
          '</div>'
        ].join('')
    }

    function dateFormatBRDate(value, row, index) {
        let date = value;
        date = new Date(date);
        var data_format_due = ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) +
            '-' +
            ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) +
            '-' + date.getFullYear();
        return [
            data_format_due
        ].join('')
    }

    $(function () {
        $table.bootstrapTable({
            cache: false,
            height: 730,
            striped: true,
            pagination: true,
            pageSize: 100,
            pageList: [100, 200, 300, 400, 500]
        });
    })
    
</script>

@include('bibliotecas.floattheadOverflow')
@include('contractDetails.contractRequest.style')
{{-- @include('contractDetails.clientBookingRequest.style') --}}

@include('bibliotecas.apexcharts')
@include('contractDetails.clientBookingRequest.script')
@include('bibliotecas.bootstrapExport')
@include('include.modal_chat')
@include('include.modal_link', ["rota" => "contractBookLink"])

@endSection