@extends('layout.padrao')
@section('title', 'KPI')
@section('content')

<div class="col-12 ajusteMobile margin-bottom-15">
  <div id="tabsKPI">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#pgKpi1" data-toggle="tab">GERAL</a>
      </li>
      <!-- <li>
        <a href="#pgKpi2" data-toggle="tab">Página 2</a>
      </li>-->
      <!-- <li>
        <a href="#pgKpi3" data-toggle="tab">Página 3</a>
      </li>  -->
      <li class="{{ Auth::user()->checkCharacteristics(['1', '2', '3']) ?'' : ' d-none'  }}">
        <a href="#stuffingTerminal" data-toggle="tab">Stuffing terminal</a>
      </li>
      <li class="{{ Auth::user()->checkCharacteristics(['1', '2', '3']) ?'' : ' d-none'  }}">
        <a href="#flexiSupplier" data-toggle="tab">Flexi Supplier</a>
      </li>
      <li class="{{ Auth::user()->checkCharacteristics(['1', '2', '3']) ?'' : ' d-none'  }}">
        <a href="#tankOwner" data-toggle="tab">Tank Owner</a>
      </li>
      <li>
        <button class="btn maximizar" onclick="AtivarDesativarFS();" data-toggle="tooltip" data-placement="top"
          title="abrir no modo tela cheia">
          <i class="bi bi-arrows-angle-expand"></i>
        </button>
        <button class="btn minimizar display-none" onclick="AtivarDesativarFS();" data-toggle="tooltip"
          data-placement="top" title="fechar o modo tela cheia">
          <i class="bi bi-arrows-angle-contract"></i>
        </button>
      </li>
      @can('internalRoutineTITeamOnly', App\Usuario::class)
        <li style="margin-top: -9px; margin-bottom: -6px;">
          <a href="{{ route("flushKPICache","KPI") }}">
            <div class="btn btn-blue">
              <i class="fa-solid fa-arrows-rotate"></i> Atualizar KPI Manual
            </div>
          </a>
        </li>
      @endcan
    </ul>
    
    <div class="tab-content">
      <div class="tab-pane active" id="pgKpi1">
        <div class="col col-sm-12 col-md-12 col-lg-12 shadow folha-interna folha-azul rounded">
          <div class="row padding-15">

            <div class="margin-10 padding-15">
              <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-30 {{ Auth::user()->checkCharacteristics(['1', '2', '3']) ? ' col-lg-8' : ' col-lg-12'  }}">
                  <div class="border-gray radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center mainChartKPI">
                    <div id="effectedShipmentsForecastChart"></div>
                  </div>
                </div>
              </div>

              <div class="row margin-10 padding-15">
                <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12 padding-0">
                    @if(Auth::user()->checkCharacteristics(['1', '2', '3']))
                      <div class="col-lg-6 col-md-12 col-sm-12 margin-bottom-30">
                        <div class="border-gray bg-white folha-branca rounded box">
                          <div id="collapseVolPlatform" class="collapse in" aria-labelledby="headingOne" data-parent="#accordion" style="height: 1045px">
                            <div class="wrap" style="max-height: 1043px;display: flex;flex-wrap: wrap;overflow-y: scroll;">
                              <div class=" col text-center radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center">
                                <div id="volByPlatformChart"></div>           
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-3 col-md-12 col-sm-12">
                        <div class="border-gray radius-5 padding-15 bg-white display-flex flex-direction-column align-items-center justify-content-center align-content-center margin-bottom-30" style="height: 187px !important;min-height: 187px !important;">
                          <span class="titleYearChart" id="ContainerQty0"></span>
                          <span class="valueQtyKPI" id="ContainerQty"></span>
                          <div id="containerQtyChart"></div>
                        </div>
                        <div class="border-gray radius-5 padding-15 bg-white display-flex flex-direction-column align-items-center justify-content-center align-content-center margin-bottom-30" style="height: 187px !important;min-height: 187px !important;">
                          <span class="titleYearChart" id="TEUS1"></span>
                          <span class="valueQtyKPI" id="TEUS"></span>
                          <div id="clientsQtyChart"></div>
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-12 col-sm-12">
                        <div class="border-gray radius-5 padding-15 bg-white display-flex flex-direction-column align-items-center justify-content-center align-content-center margin-bottom-30" style="height: 187px !important;min-height: 187px !important;">
                          <span class="titleYearChart" id="Processes2"></span>
                          <span class="valueQtyKPI" id="Processes"></span>
                          <div id="processQtyChart"></div>
                        </div>
                        <div class="border-gray radius-5 padding-15 bg-white display-flex flex-direction-column align-items-center justify-content-center align-content-center margin-bottom-30" style="height: 187px !important;min-height: 187px !important;">
                          <span class="titleYearChart" id="Clients3"></span>
                          <span class="valueQtyKPI" id="Clients"></span>
                          <div id="teusQtyChart"></div>
                        </div>
                      </div>
                    @else
                      <div class="col-lg-6 col-md-12 col-sm-12 margin-bottom-30">
                        <div class="border-gray col text-center radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center">
                          <div id="volByPlatformChart"></div>           
                        </div>
                      </div>
                    @endif
                    
                    
                    <div class="col-lg-6 col-md-12 col-sm-12 margin-bottom-30">
                      <div class="border-gray text-center radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center" style="height: 611px !important; min-height: 611px !important; ">
                        <div id="volByCarrierChart"></div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-30 {{ Auth::user()->checkCharacteristics(['1', '2', '3']) ?'' : ' d-none'  }}">
                    <div class="border-gray text-center radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center">  
                      <div id="volByClientChart"></div> 
                    </div>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-30">
                    <div class="border-gray text-center radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center">  
                      <div id="dataCarrierChart"></div> 
                    </div>
                  </div>

                  <div class="col-lg-6 col-md-12 col-sm-12 margin-bottom-30">
                    <div class="border-gray text-center radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center" style="height: 700px"> 

                      <div class="wrapper">
                        <p style="font-weight: 900 !important">Vessel x Teus</p>
                        <div class="table-responsive" style="height: 658px">
                          <table id="tableKpi" class="table-striped text-center" data-toggle="table" data-search="true"
                            data-page-size="12" data-detail-formatter="detailFormatter" data-page-list="[100, 200, 300, 400, all]"
                            data-show-footer="false" 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-url="/jsonKpiOperationalTable/json/">
                            <thead>
                              <tr class="trSuperBlue">
                                <th data-field="descricao" class="centralizedObject" data-sortable="true">Vessel</th>
                                <th data-field="ETD" class="centralizedObject" data-sortable="true">ETD</th>
                                <th data-field="TEUS" class="centralizedObject" data-sortable="true">TEUS</th>
                              </tr>
                            </thead>
                          </table>
                        </div>
                      </div>
          
                    </div>
                  </div>

                  <div class="col-lg-6 col-md-12 col-sm-12 margin-bottom-30">
                    <div class="border-gray text-center radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center" style="height: 700px">  
                      <div id="freetimeChart"></div> 
                    </div>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-30">
                    <div class="border-gray text-center radius-5 padding-15 bg-white display-flex flex-direction-column align-content-center">  
                      <div id="loadingPortsDetailChart"></div> 
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="tab-pane" id="stuffingTerminal">
      <div class="col col-sm-12 col-md-12 col-lg-12 shadow folha-interna folha-branca-contornada rounded">
        <div class="row col padding-15">
          <div class="col-12">
            <ul class="nav nav-tabs navInsideStuffingTerminal navStyleKpi"></ul>
            <div class="tab-content tabInsideStuffingTerminal"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="flexiSupplier">
      <div class="col col-sm-12 col-md-12 col-lg-12 shadow folha-interna folha-branca-contornada rounded">
        <div class="row col padding-15">
          <div class="col-12">
            <ul class="nav nav-tabs navInsideFlexiSupplier navStyleKpi"></ul>
            <div class="tab-content tabInsideFlexiSupplier"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tankOwner">
      <div class="col col-sm-12 col-md-12 col-lg-12 shadow folha-interna folha-branca-contornada rounded">
        <div class="row col padding-15">
          <div class="col-12">
            <ul class="nav nav-tabs navInsideTankOwner navStyleKpi"></ul>
            <div class="tab-content tabInsideTankOwner"></div>
          </div>
        </div>
      </div>
    </div>

    </div>

  </div>
</div>

  @include('bibliotecas.apexcharts')
  @include('Dashboard.KPI.style')

  @include('Dashboard.KPI.script.geral.script')
  @include('Dashboard.KPI.script.tabelas.script')
  @include('Dashboard.KPI.script.graficos.script')

  @include('bibliotecas.bootstrapExport')

  @endSection