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

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

@section('pesquisa')
    <form class="form-inline w-100 search-listas-int" method="GET" action="{{ route('listTradeRecaps','trade_recaps') }}">
        <input class="form-control mr-sm-2 text-primary" type="search" placeholder="Search for Client Name" name="trade_recaps">   
        <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">
        <div class="table-responsive">
            <div id="toolbar">
                <button onclick="location.href='{{ route('createTradeRecaps') }}'"   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="detailFormatter"  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="traderecapdash/json/" data-show-columns="true" 
            >
            <thead>
              <tr>
                  <th  data-field="actions"  data-formatter="contractFormatter" ></th>
                  <th  data-field="actions"  data-formatter="progressBar" data-width="160"></th>
                  <th data-field="id" data-sortable="true">Contract Number</th>
                  <th data-field="fantasyName" data-sortable="true">Client</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="traders_id" data-sortable="true">Trader</th>

              </tr>
            </thead>
        </table>
      </div>
      
    <script>
        var $table = $('#table')

        $(function() {
            $table.bootstrapTable({
                            cache: false,
                            height: 1000,
                            striped: true,
                            pagination: true,
                            detailFormatter: detailFormatter,
                            pageSize: 100, //specify 5 here
                            pageList: [100, 200, 300,400,500]//list can be specified here
            });   
           
        })

        function detailFormatter(index, row) {
            var $url = "/traderecapdash/json/" + row.id; 
            var detail = $.ajax({
                type: "GET",
                url: $url,
                async: false
            }).responseJSON;

            var html = [];
            html.push(' <table id="Contract_detailTable"  class="table-striped text-center" id="table"> ' +
                            ' <thead> ' +
                            ' <tr> ' +
                                ' <th  data-field="id"></th> ' +
                                ' <th  data-field="booking" data-sortable="true"  >Booking</th> ' +
                                ' <th  data-field="vessel_id" data-sortable="true"  >Vessel</th> ' +
                                ' <th  data-field="voyage" data-sortable="true"  >Voyage</th> ' +
                                ' <th  data-field="etaPol" data-sortable="true"  >ETA</th> ' +
                                ' <th  data-field="containerQty" data-sortable="true"  >Container Qty</th> ' +                           
                                ' <th  data-field="shipperReference" data-sortable="true"  >Shipper Ref.</th> ' +                           
                            ' </tr> ' +
                        ' </thead>');

            $.each(detail, function (key, value) {
                if(key == 0){
                    html.push(
                    ' <div class="progress">  ' +                                      
                        '      <div class="progress-bar '+ value.progressClass +'" role="progressbar" style="width:'+ value.porcent + '%;" aria-valuenow="'+ value.porcent + '" aria-valuemin="0" aria-valuemax="100">'+ value.porcent + ' % ' +
                        ' <p>Progress:'+ value.porcent + '% </p>' +      
                        ' </div>' +
                    ' </div>' );
                }
                html.push('<tr>');
                html.push(' <td>'+ ((value.id === null) ? '-' : value.id)  + '</td>');
                html.push(' <td>'+ ((value.booking === null) ? '-' : value.booking)  + '</td>');
                html.push(' <td>'+ ((value.vessel.descricao === null) ? '-' : value.vessel.descricao)  + '</td>');
                html.push(' <td>'+ ((value.voyage === null) ? '-' : value.voyage)  + '</td>');
                html.push(' <td>'+ ((value.etaPol === null) ? '-' : value.etaPol)  + '</td>');
                html.push(' <td>'+ ((value.containerQty === null) ? '-' : value.containerQty)  + '</td>');
                html.push(' <td>'+ ((value.shipperReference === null) ? '-' : value.shipperReference)  + '</td>');
                // console.log(value.cargooReference);
                html.push('</tr>');
            })
            html.push('</table>');

            return html.join('')
        }
        function progressBar(index, row) {
            var $url = "/traderecapdash/json/" + row.id;
            var detail = $.ajax({
                type: "GET",
                url: $url,
                async: false
            }).responseJSON;

            var html = [];
            html.push('<a class="icone-padding" href="/tradeRecaps/'+row['id']+'/edit" alt="Edit"  data-placement="top" title="View"><i alt="Edit" class="fas fa-pencil-alt fa-lg"></i></a> '  +
            '<a class="icone-padding" href="/tradeRecaps/'+row['id']+'" alt="Cancel"  data-placement="top" title="View"><i alt="Cancel" class="fas fa-trash-alt fa-lg"></i></a> '  +
            '<a class="icone-padding" href="/tradeRecaps/'+row['id']+'/sendEmail" alt="Send E-mail"  data-placement="top" title="View"><i alt="EdiSend E-mailt" class="fas fa-paper-plane fa-lg"></i></a> '  +
            '<a class="icone-padding" href="/tradeRecaps/'+row['id']+'/clone" alt="Clone"  data-placement="top" title="View"><i alt="Clone" class="fas fa-clone fa-lg"></i></a> '  );

            $.each(detail, function (key, value) {
                if(key == 0){
                    html.push(
                    ' <div class="progress">  ' +                                      
                        '      <div class="progress-bar   '+ value.progressClass +'" role="progressbar" style="width:'+ value.porcent + '%;" aria-valuenow="'+ value.porcent + '" aria-valuemin="0" aria-valuemax="100">'+ value.porcent + ' % ' +
                        '       </div>' +
                    ' </div>' );
                }                
            })

            return html.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 contractFormatter(value, row, index) {
            return [
            '<a class="icone-padding" href="/tradeRecaps/'+row['id']+'/contract" alt="Contract Info"  data-placement="top" title="View"><i alt="Contract Info" class="fas fa-file-contract fa-lg"></i></a> ' 
            ].join('')
        }   
    </script>

    <style>
        #Contract_detailTable{
            width: 100%;
            margin: 30px;
        }
        #Contract_detailTable th{
            text-align: center;
        }
    </style>

@endSection