@extends('layout.padrao')
@section('title', 'View Pending Bookings For Clients')

@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">230</h3>
                                <h4 name="nameCard1">TEUS</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">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">32</h3>
                                <h4 name="nameCard3">SANTOS</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">22</h3>
                                <h4 name="nameCard4">PARANAGUÁ</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">50</h3>
                                <h4 name="nameCard5">SALVADOR</h4>
                            </div>
                            <div id="grafico5"></div>
                        </div>
                    </div>
                    <div class="col"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row folha-interna folha-clients shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded">
    <div class="col col-lg-12 col-sm-12 col-md-12">
        <!-- Tabela -->
        <div class="table-responsive">
            <div id="toolbar"></div>
            <table class="table-striped text-center" id="table" 
                data-toggle="table" 
                data-search="true"
                data-detail-formatter="detailFormatter" 
                data-show-footer="false" 
                data-show-pagination-switch="true"
                data-page-list="[100, 200, 300, 400, all]"
                data-show-refresh="true" 
                data-click-to-select="true" 
                data-show-fullscreen="true" 
                data-pagination="true"
                data-locale="en-US" 
                data-toolbar="#toolbar" 
                data-show-toggle="false" 
                data-height="750"
                data-show-export="true" 
                data-export-data-type="all" 
                data-query-params="queryParams"
                data-url="/FrontEndTest" 
                data-show-columns="true"
                style="3px solid #3686EF !important">
                <thead>
                    <tr class="trTableLine">
                        <th class="icon-action" data-field="id" data-formatter="floatButton"></th>
                        <th class="text-center" data-field="testClient" data-sortable="true">Client</th>
                        <th class="text-center" data-field="testSAOE" data-sortable="true">Loading Ref.</th>
                        <th class="text-center" data-field="testProduct" data-sortable="true">Product</th>
                        <th class="text-center" data-field="testDate" data-sortable="true">From (Date)</th>
                        <th class="text-center" data-field="testDate" data-sortable="true">To (Date)</th>
                        <th class="text-center" data-field="testQty" data-sortable="true">Qty</th>
                        <th class="text-center" data-field="testEquipment" data-sortable="true">Equipment</th>
                        <th class="text-center" data-field="testPOL" data-sortable="true">POL</th>
                        <th class="text-center" data-field="testPOD" data-sortable="true">POD</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script>
    function floatButton(value, row, index) {
        return [
          ' <div class="btn-group dropup">' +
          '   <div style="z-index: 9;"class="btn-group-fab-table botaoFlutuante circle" name="circle" role="group" aria-label="FAB Menu" > ' +
          '     <div type="button" class="btn btn-main-fab-table dropdown-toggle" title="Menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
          '       <a href="/sistemaDeChamados/show" data-toggle="tooltip" title="Go to Allocation" >' + 
          '         <img src="{!! asset("/image/Icon3Lines.svg") !!}" class="btnFabTable1">' +
          '       </a>'
          '       </div>' +
          '       <div class="dropdown-menu openButton">' +
          '           <div type="button" class="btn dropdown-item btn-sub-fab-table openButton firstButton" title="">' +
          '               <i class="fas fa-crosshairs"></i>' +
          '           </div>' +
          '           <div type="button" class="btn dropdown-item btn-sub-fab-table openButton" title="">' +
          '               <i class="fas fa-comment-dots"></i>' +
          '           </div>' +
          '           <a type="button" class="btn dropdown-item btn-sub-fab-table openButton" title="">' +
          '               <i class="fas fa-link" style="color: #3686ef;"></i>' +
          '           </a>' +
          '       </div>' +
          '   </div>' +
          '</div>'
        ].join('')
    }

</script>

@include('bibliotecas.apexcharts')
@include('clientBookingRequest.style')
@include('clientBookingRequest.script')
@include('bibliotecas.bootstrapExport')
@endSection