@extends('layout.padrao')
@section('content')
@section('title', 'Insurance Certificate Request - ' . ($routeName == 'insuranceCertificate.index' ? "Pending List" : "Processed List"))

@if ($routeName == 'insuranceCertificate.index')
    <span id='myTitle'>Pending List</span>
@else
    <span id='myTitle'>Processed List</span>
@endif

<div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded folhaForm">
    <div class="col">
        <img src="{!! asset('/image/csa_Logo.png') !!}" class="logoCSA">
    </div>
    <!-- Tabela Responsiva -->
    <div class="table-responsive">
        <table class="table-striped text-center" id="table" 
        data-toggle="table" 
        data-search="true"
        data-page-size= "50"
        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="auto" 
        data-show-export="true" 
        data-export-data-type="all" 
        data-query-params="queryParams"
        data-url= {{$routeName == 'insuranceCertificate.index' ? "/insuranceCertificate/json" : "/insuranceCertificateClosed/json"}} 
        data-show-columns="true">
            <thead>
                <tr class="trSuperBlue">
                    @if (Auth::user()->checkCharacteristics(['1', '2', '3']) || Auth::user()->type == 'Client')
                        <th  data-field="id"  data-formatter="operateFormatter" ></th>                        
                    @endif
                    <th data-field="followNotification" data-formatter="followingControl" class="text-center"> </th>
                    <th data-field="SAOE" data-sortable="true" class="text-center">Process Number</th>
                    <th data-field="clients.fantasyName" data-sortable="true" class="text-center">Client</th>
                    <th data-field="platforms.descricao" data-sortable="true" class="text-center">Product</th>
                    <th data-field="booking" data-sortable="true" class="text-center">Booking</th>
                    <th data-field="vessel.descricao" data-sortable="true" class="text-center">Vessel</th>
                    <th data-field="etaPol" data-sortable="true" data-formatter="dateFormatEtaPol" class="text-center">ETD Pol</th>
                    <th data-field="loading_ports.descricao" data-sortable="true" class="text-center">POL</th>
                    <th data-field="code_of_ports1.place" data-sortable="true" class="text-center">POD</th>
                    <th data-field="draftCutoffDate" data-sortable="true" data-formatter="draftFormatter" class="text-center">Draft Cutoff</th>
                    <th data-field="cargoCutoffDate" data-sortable="true" data-formatter="cargoFormatter" class="text-center">Cargo Cutoff</th>
                    <th data-field="containerQty" data-sortable="true" class="text-center">Qty</th>
                    <th data-field="container_types.descricao" data-sortable="true" class="text-center">Equipment</th>
                    <th data-field="BlDate" data-sortable="true" data-formatter="dateFormatBLDate" class="text-center">BL Date</th>
                    <th data-field="id" data-force-hide="true" data-formatter="insuranceImg" class="icon-action text-center">Insurance</th>
                    <th data-field="InsuranceValue" data-visible="false" data-force-export="true" data-formatter="totalFormatter" class="text-center">Insurance Value</th>
                    <th data-field="InsurancePremium" data-visible="false" data-force-export="true" data-formatter="totalFormatter" class="text-center">Insurance Premium</th>
                    <th data-field="Status" data-sortable="true" data-formatter="dynamicStatus" class="text-center">Status</th>
                    <th data-field="approval_date" data-sortable="true" data-formatter="dateFormatApprovalDate" class="text-center">Approval Date</th>
                    @if (Auth::user()->type != 'Insurance Company')
                        <th data-field="ViewDate" data-sortable="true" data-formatter="lastVisit" class="text-center" data-title-tooltip="Last Insurance Company Access" data-tooltip="Last Access by Insurance Company">Last Access</th>                        
                    @endif
                </tr>
            </thead>
        </table>
    </div>

    <script>     
        function insuranceImg(value, row, index) {
            let colorClass = 'blueImg';
            // if (row.BlDate != null && row.Status != null) colorClass = 'greenImg';
            // if (row.BlDate == null && row.Status != null) colorClass = 'yellowImg';
            if (row.Status == 'Amend' || row.Status == 'Requested' || 
                row.Status == 'Waiting for Approval' || row.Status == 'Waiting for Final BL Date'
                 ) colorClass = 'yellowImg';

            if (row.Status == 'Issued') {
                // console.log(row.finalCertificate, row.id);
                if (row.finalCertificate == 'finalCertificate') colorClass = 'greenImg';
                else colorClass = 'yellowImg';
            } 

            return [
                //  +==========================================================================+
                //  | Se Azul      inserir   Classe ".blueImg"    em   class="icone-padding"   |
                //  | Se Verde     inserir   Classe ".greenImg"   em   class="icone-padding"   |
                //  | Se Amarelo   inserir   Classe ".yellowImg"  em   class="icone-padding"   |
                //  +==========================================================================+
                '<a class="icone-padding ' + colorClass + '" ' +
                'href="insuranceCertificate/show/' + value + '" alt="Edit"  data-placement="top" title="View">' +
                '<img src="{!! asset("/image/icons/life-insurance.png") !!}">' +
                '</a>'
            ].join('')
        }

        function maskCurrency(nStr, inD, outD, sep) {
            nStr += '';
            var dpos = nStr.indexOf(inD);
            var nStrEnd = '';
            if (dpos != -1) {
                nStrEnd = outD + nStr.substring(dpos + 1, nStr.length);
                nStr = nStr.substring(0, dpos);
            }
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(nStr)) {
                nStr = nStr.replace(rgx, '$1' + sep + '$2');
            }
            resultMask = nStr + nStrEnd;
            return resultMask;
        }

        function totalFormatter(value, row, index) {
          if(value !== null){
            maskCurrency(value,'.', ',', '.');
            return ['USD ' + resultMask].join('')
          } else {
            return '';
          }
        }

        function dynamicStatus(value, row, index) {
            let localStatus = value
            if (row.Status == 'Waiting for Final BL Date') {
                if (row.BlDate != null) localStatus = 'Waiting for Final Cert';
            }
            return [ localStatus  ].join('')
        }

        function lastVisit(value, row, index) {
            // console.log(row['ViewDate'])
            if (row['ViewDate'] == null) return '';

            let originalDate = row['ViewDate'];
            originalDate = new Date(originalDate);

            var parts = row['ViewDate'].match(/(\d+)/g);
            var date =  new Date(parts[0], parts[1]-1, parts[2]); 
            
            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 [              
                '<p style="margin:0px; padding:0px;"><i class="greenImg fas fa-check"></i></p>' + 
                '<span style="font-size:10px; margin:0px; padding:0px;" title="' + row['ViewUser'] + '">' + data_format_due + ' ' + originalDate.toLocaleTimeString()  + '</span>'
            ].join('')
        }

        function operateFormatter(value, row, index) {
            let iconAction = $('#myTitle').text() == 'Pending List' ? 'fas fa-trash-alt' : 'fas fa-trash-restore-alt';
            let tooltipAction = $('#myTitle').text() == 'Pending List' ? 'Cancelar' : 'Restaurar';
            var Buttons = '<a class="icone-padding"  data-toggle="modal" data-target="#delete" data-catid = "'+value+ '"data-toggle="tooltip" data-placement="top" title="' + tooltipAction + '"><i class="' + iconAction + '"></i></a>';
            
            if  (tooltipAction == 'Restaurar' && row['Status'] != 'Cancel') {
                Buttons = '';
            }

            return [
                Buttons
            ].join('')
        }


        // Concatenando Draft Cutoff
        function draftFormatter(value, row, index) {
            if (row['draftCutoffDate'] === null) return '';

            var parts = row['draftCutoffDate'].match(/(\d+)/g);
            var date =  new Date(parts[0], parts[1]-1, parts[2]); 


            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 + ' ' + row['draftCutofftime']
          ].join('')
        }

        // Concatenando Cargo Cutoff
        function cargoFormatter(value, row, index) {
            if (row['cargoCutoffDate'] === null) return '';

            var parts = row['cargoCutoffDate'].match(/(\d+)/g);
            var date =  new Date(parts[0], parts[1]-1, parts[2]); 

            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 + ' ' + row['cargoCutofftime']
          ].join('')
        }

        // Formatação de data
        function dateFormatBLDate(value, row, index) {
            if (row['BlDate'] === null) return '';

            var parts = row['BlDate'].match(/(\d+)/g);
            var date =  new Date(parts[0], parts[1]-1, parts[2]); 

            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 dateFormatApprovalDate(value, row, index) {
            if (row['approval_date'] === null) return '';

            let originalDate = row['ViewDate'];
            originalDate = new Date(originalDate);

            var parts = row['approval_date'].match(/(\d+)/g);
            var date =  new Date(parts[0], parts[1]-1, parts[2]); 

            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 +  ' ' + originalDate.toLocaleTimeString() 
            ].join('')
        }
        // Formatação de data
        function dateFormatEtaPol(value, row, index) {

            if (row['etaPol'] === null) return '';
           
            // let date = row['etaPol'];
            // date = new Date(date);
            // var data_format_due =  date.getDate() + '-' + date.getMonth()  + '-' + date.getFullYear();

            var parts = row['etaPol'].match(/(\d+)/g);
            var date =  new Date(parts[0], parts[1]-1, parts[2]); 

            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 followingControl(value, row, index) { 
            let icons = ''
            let loading_requests_id = row['id']
            if (row.followNotification) {
                icons =  icons + ' <a class="icone-padding followIcon" data-catid="' + loading_requests_id + '" data-type="4"  href="#/" onclick="notificationJS(' + loading_requests_id + ', 4)" ' + 
                '  data-placement="top" title="Notification"><i id="icon-follow-' + loading_requests_id + '" class="fas fa-eye"></i></a> ';
            }
            else {          
                icons =  icons + ' <a class="icone-padding followIcon" data-catid="' + loading_requests_id + '" data-type="4"  href="#/" onclick="notificationJS(' + loading_requests_id + ', 4)" ' + 
                '  data-placement="top" title="Notification"><i id="icon-follow-' + loading_requests_id + '" class="fas fa-eye-slash"></i></a> ';
            }

            return [icons].join('')
        }



    </script>
</div>

@include('livewire.notification.notification-ajax')

@include('include.modal_deletar', ["rota" => "insuranceCertificate", "type" => $routeName])
@include('insuranceCertificate.style')
{{-- @include('bibliotecas.bootstrapTable2') --}}
@include('bibliotecas.floattheadOverflow')
@include('bibliotecas.bootstrapExport')

@endsection