@extends('layout.padrao')
@section('title', ((!isset($listType) ? 'Contract Dashboard' : (isset($listType) && $listType == 'Completed' ? 'Completed Contract Dashboard' : 'Cancelled Contract Dashboard'))))

<style>
    tr {
        background: #F5F5F5 !important;
        border: 2px solid #F5F5F5 !important;
    }

    /* Ajuste na seta do dropdown de usuario no navbar */
    .upArrowMenu{
        top: -18px !important;
    }

    @media (max-width: 1929px) {
        .iconsTh{
            font-size: 12px;
        }
    }
</style>

@section('pesquisa')
<form class="form-inline w-100 search-listas-int" method="GET"
    action="{{ route('listContractDetails','contract_details') }}">
    <input class="form-control mr-sm-2 text-primary" type="search" placeholder="Search for Client Name"
        name="contract_details">
    <button class="btn btn-outline-light" type="submit">Pesquisar</button>
</form>
@endsection

@section('content')

<div class="row w-100 col-lg-12 col-sm-12 col-md-12">
    @if(!isset($listType))
        <h3>Contract Dashboard</h3>
        <div class="row w-100 col-lg-12 col-sm-12 col-md-12" style=" margin-bottom: 10px;">
            <!-- primeiro conjunto de gráficos -->
            <div class="col col-md-5 col-lg-5 col-sm-3" style="margin-top: 70px">
                <div class="row">
                    <button class="col-sm-4 bigCircleZoom" style="min-width:180px">
                        <div class="bigCircleChart">
                            <div class="textInsideChart">
                                <!-- Porcentagem do primeiro gráfico circular -->
                                <label class="percentLabel" id="bigChartOneLabel" name="bigChartOneLabel">
                                {{$dashData['NoContractIssued']}}
                                </label>
                                <span class="percentLabel"><b>%</b></span><Br />
                                No Contract Issued
                            </div>
                            <canvas id="firstChart" width="100" height="100"></canvas>
                        </div>
                    </button>
                    <button class="col-sm-4 bigCircleZoom" style="min-width:180px">
                        <div class="bigCircleChart">
                            <div class="textInsideChart">
                                <!-- Porcentagem do segundo gráfico circular -->
                                <label class="percentLabel" id="bigChartTwoLabel" name="bigChartTwoLabel">
                                    {{$dashData['PendingSignature']}}
                                </label>
                                <span class="percentLabel"><b>%</b></span><Br />
                                Pending Signature
                            </div>
                            <canvas id="secondChart" width="100" height="100"></canvas>
                        </div>
                    </button>
                    <button class="col-sm-4 bigCircleZoom" style="min-width:180px">
                        <div class="bigCircleChart">
                            <div class="textInsideChart">
                                <!-- Porcentagem do terceiro gráfico circular -->
                                <label class="percentLabel" id="bigChartThreeLabel" name="bigChartThreeLabel">
                                    {{$dashData['Signed']}}
                                </label>
                                <span class="percentLabel"><b>%</b></span><Br />
                                Signed
                            </div>
                            <canvas id="thirdChart" width="100" height="100"></canvas>
                        </div>
                    </button>
                </div>
            </div>

            <!-- segundo conjunto de graficos -->
            <div class="col-sm folha-branca-contornada shadow" style="background: white; border-radius: 5px;">
                <div class="row" style="margin: 5px 5px 10px 5px;">

                    <!-- sessao A - select, botão e gráfico de barras-->
                    <div class="col-md-3 col-lg-3 col-sm-3" style="align-self:center; min-width:250px;">
                        <div class="row">
                            <div class="col-sm" style="">
                                <label for="traderMarketerSelect"  class="w-100 control-label">Trader/Marketer</label>
                                <select  name="traderMarketerSelect" class="form-control" id="traderMarketerSelect">
                                    @foreach($select['traders'] as $trader_id => $trader_value )
                                        <option value="{{$trader_id}}"> {{$trader_value}}</option>
                                    @endforeach
                                </select>
                                <Br />
                                {{-- <button name="openContractBtn" id="openContractBtn" href="#" class="btn btn-blue w-100">OPEN CONTRACT VOLUME</button> --}}
                            </div>
                            <div class="w-100"></div>
                            <!-- gráfico de barras -->
                            <button class="col otherChartZoom" style="margin-top: 25px;">
                                <canvas id="barChart"></canvas>
                            </button>
                        </div>
                    </div>

                    <!-- sessao B - Mini gráficos e gráfico de linhas -->
                    <div class="col col-md-7 col-lg-7 col-sm-7" style="align-self:center; min-width:300px;">
                        <div class="col-sm" style="margin-top: 20px;">

                            <div class="row justify-content-center align-items-center">
                                <button class="col-sm-3 miniCircleZoom" style="min-width:140px">
                                    <div class="miniCircleChart">
                                        <div class="textInsideMiniChart">
                                            <label class="percentLabelMini" id="miniLabel" name="miniLabel">0</label>
                                            <span class="percentLabelMini"><b>%</b></span><Br />
                                            <span class="miniTextConfig" style="margin-left: -30px;">No Contract</span><Br />
                                            <span class="miniTextConfigBottom" style="margin-left: -17px;">Issued</span>
                                        </div>
                                        <canvas id="miniChart" width="100" height="100"></canvas>
                                    </div>
                                </button>

                                <button class="col-sm-3 miniCircleZoom" style="min-width:140px">
                                    <div class="miniCircleChart">
                                        <div class="textInsideMiniChart">
                                            <label class="percentLabelMini" id="miniTwoLabel" name="miniTwoLabel">0</label>
                                            <span class="percentLabelMini"><b>%</b></span><Br />
                                            <span class="miniTextConfig" style="margin-left: -22px;">Pending</span><Br />
                                            <span class="miniTextConfigBottom" style="margin-left: -24px;">Signature</span>
                                        </div>
                                        <canvas id="secondMiniChart" width="100" height="100"></canvas>
                                    </div>
                                </button>

                                <button class="col-sm-3 miniCircleZoom" style="min-width:140px">
                                    <div class="miniCircleChart">
                                        <div class="textInsideMiniChart">
                                            <label class="percentLabelMini" id="miniThreeLabel" name="miniThreeLabel">0</label>
                                            <span class="percentLabelMini"><b>%</b></span><Br />
                                            <span class="miniTextConfig" style="margin-left: -18px;">Signed</span>
                                        </div>
                                        <canvas id="thirdMiniChart" width="100" height="100"></canvas>
                                    </div>
                                </button>
                            </div>
                        </div>
                        <!-- gráfico de linhas -->
                        <button class="col-sm otherChartZoom" style="margin-top: 40px; min-width: 260px">
                            <canvas id="lineChart" style="max-height:250px;"></canvas>
                        </button>
                    </div>

                    <!-- sessao C - Cards -->
                    <div class="col-sm" style="align-self:center; min-width:200px">
                        <div class="row justify-content-center align-items-center">
                            <div class="card volumeCardsStyle cardZoom shadow"
                                style="background: #084161; border-radius: 3px">
                                <h5>Qty Balance (Tons)</h5>
                                <h3><label class="openVolumeTonsLabel" id="openVolumeTonsLabel">0 K</label></h3>
                            </div>
                            {{-- <div class="card volumeCardsStyle cardZoom shadow"
                                style="background: #326B77; border-radius: 3px">
                                <h5>Qty Balance (Bags)</h5>
                                <h3><label class="openVolumeBagsLabel" id="openVolumeBagsLabel">0 K</label></h3>
                            </div> --}}

                            {{-- <div class="card volumeCardsStyle cardZoom shadow"
                                style="background: #046829; border-radius: 3px">
                                <h5>Pending Sample</h5>
                                <h5 style="margin-top:-5px">Feedback</h5>
                                <h3><label class="pendingSampleFeedback" id="pendingSampleFeedback">2</label></h3>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    
    <h3>Contract Position</h3>
    <div class="table-responsive">
        <div id="toolbar">
            <button onclick="location.href='{{ route('createContractDetails') }}'" id="button"
                class="btn btn-padrao">New Contract</button>
        </div>
        <table class="table-striped text-center" id="table" data-detail-view="true" data-toggle="table"
            data-search="true" data-detail-formatter="closeContractFormatter
            " data-page-list="[100, 200, 300, 400, all]"
            data-show-footer="true" 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="600" data-show-export="true" data-export-data-type="all"
            data-query-params="queryParams" data-url="/contractdetailsdash/json{{  (!isset($listType) ? '/' : '?listType=' . $listType) }}" data-show-columns="true">
            <thead>
                <tr class="trSuperBlue">
                    <th data-field="actions" data-formatter="contractFormatter"></th>
                    {!!(!isset($listType) ? '<th class="iconsTh  text-left" data-field="actions" data-formatter="progressBar" data-width="160"></th>' : '')!!}
                    <th data-field="contract_details_reference" data-sortable="true">Contract Number</th>
                    <th data-field="fantasyName" data-sortable="true">Client</th>
                    <th data-field="bookings" data-sortable="true" class="d-none">Bookings</th>
                    <th data-field="shippingPeriodFrom" data-sortable="true" data-formatter="dateFormatBRDate">Shipping Period From</th>
                    <th data-field="shippingPeriodTo" data-sortable="true" data-formatter="dateFormatBRDate">Shipping Period To</th>
                    <th data-field="platforms" data-sortable="true">Product</th>
                    <th data-field="port_destinations" data-sortable="true">Port Of Destination</th>
                    <th data-field="priceMtonTotal" data-sortable="true">Price m/ton Total</th>
                    <th data-field="totalQtyT" data-sortable="true">Quantity (tons)</th>
                    <th data-field="open_volume" data-formatter="qtyBalanceFormatter">Qty Balance (tons)</th>
                    {!!(!isset($listType) ? '<th data-field="closures" data-formatter="closeContractFormatter" data-events="operateEvents">Close Contract?</th>' : '')!!}
                    @can('gate-client-carac-1[]')
                        <th data-field="di" data-formatter="dataFormatDI">DI</th>
                    @endcan
                    
                    <th data-field="status" data-sortable="true">Status</th>
                    <th data-field="traders_id" data-sortable="true">Trader</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

{{-- classe pra sumir com a coluna
class="d-none"     --}}

<style>
    #Contract_detailTable {
        width: 100%;
        margin: 30px;
    }

    #Contract_detailTable th {
        text-align: center;
    }

</style>


@include('contractDetails.scriptList')
@include('contractDetails.css')
@include('include.modal_delete_reason', ["rota" => "deleteContractDetails"])
@include('contractDetails.contractConfirmation.modal_contractConfirmation', ["formulario" => "contract"])
@include('contractDetails.modal_report_info', ["formulario" => "contract"])
@include('contractDetails.modal_booking_request')

@include('include.modal_dynamic')
@include('include.modal_chat')
@include('bibliotecas.bootstrapExport')


@endSection