@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" 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="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="/ContractRequestDash/Json" 
                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="sellers.name" data-sortable="true">Client</th>
                        <th class="text-center" data-field="contract_details_reference" data-sortable="true">Loading Ref.</th>
                        <th class="text-center" data-field="platforms.descricao" data-sortable="true">Product</th>
                        <th class="text-center" data-field="contract_qty_per_months.0.dtfrom" data-sortable="true">From (Date)</th>
                        <th class="text-center" data-field="contract_qty_per_months.0.dtto" data-sortable="true">To (Date)</th>
                        <th class="text-center" data-field="contract_qty_per_months.0.qtyTons" data-sortable="true">Qty</th>
                        <th class="text-center" data-field="contract_qty_per_months.0.container_types.descricao" data-sortable="true">Equipment</th>
                        <th class="text-center" data-field="contract_qty_per_months.0.loading_ports.descricao" data-sortable="true">POL</th>
                        <th class="text-center" data-field="port_destination.code" data-formatter="getfullname" 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="/allocationPosition/list" data-toggle="tooltip" title="Go to Allocation" >' + 
            '              <i class="fa fa-crosshairs styleIcon"></i>' + 
            '           </a>' + 
            '           <img src="{!! asset("/image/Icon3Lines.svg") !!}" class="btnFabTable1">' +
            '       </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" style="margin-left: -7px;margin-bottom: 5px;margin-top: -1px;"></i>' +
            '           </div>' +
            '           <div type="button" class="btn dropdown-item btn-sub-fab-table openButton" title="">' +
            '               <i class="fas fa-comment-dots" style="margin-left: -7px;margin-top: -1px;margin-bottom: 5px;"></i>' +
            '           </div>' +
            '           <a type="button" class="btn dropdown-item btn-sub-fab-table openButton" title="">' +
            '               <i class="fas fa-link" style="margin-left: -7px;margin-bottom: 6px;margin-top: -1px;color: #3686ef;"></i>' +
            '           </a>' +
            '       </div>' +
            '   </div>' +
            '</div>'
        ].join('')
    }

    function getfullname(value, row, inde){
        console.log(row['port_destination']['place']);
        return [
            row['port_destination']['place'] + ' (' + row['port_destination']['code'] + ')'
        ].join('')
    }

</script>

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