@extends('admin.layout.app')

@section('more-head')
 <link rel="stylesheet" href="{{ asset('admin/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}">

 <link rel="stylesheet" type="text/css" href="{{ asset('admin/bower_components/select2/dist/css/select2.min.css') }}">
 <link rel="stylesheet" href="{{ asset('admin/dist/css/AdminLTE.min.css') }}">
 <script>
  function exportTableToExcel(tableID, filename = 'field_report') {
   var downloadLink;
   var dataType = 'application/vnd.ms-excel';
   var tableSelect = document.getElementById(tableID);
   var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

   // Specify file name
   filename = filename ? filename + '.xls' : 'excel_data.xls';

   // Create download link element
   downloadLink = document.createElement("a");

   document.body.appendChild(downloadLink);

   if (navigator.msSaveOrOpenBlob) {
    var blob = new Blob(['\ufeff', tableHTML], {
     type: dataType
    });
    navigator.msSaveOrOpenBlob(blob, filename);
   } else {
    // Create a link to the file
    downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

    // Setting the file name
    downloadLink.download = filename;

    //triggering the function
    downloadLink.click();
   }
  }
 </script>

 <style>
  .form-inline .form-group>div.col-xs-8 {
   padding-left: 0;
   padding-right: 0;
  }

  // vertical align label
  .form-inline label {
   line-height: 34px;
  }

  // force inline control to fit container width
  // http://getbootstrap.com/css/#forms-inline
  .form-inline .form-control {
   width: 100%;
  }

  // Reset margin-bottom for our multiline form
  @media (min-width: 768px) {
   .form-inline .form-group {
    margin-bottom: 15px;
   }
  }
 </style>
@endsection

@section('main-content')
 <section class="content-header">
  <h1>
   OPERATIONS MANAGEMENT SYSTEM
  </h1>

 </section>

 <section class="content">

  <div class="box">
   <div class="box-header with-border hiide">
    <h3 class="box-title">SHIPPING PROGRAMME</h3>

    @can('pending.invoices', Auth::user())
     <div class="box-tools pull-right">
      <button class="btn btn-danger disappr"
       @if ($shipping_programme->approved == null) disabled onclick="event.preventDefault();" oncontextmenu="return false;"
          @else @endif
       onclick="return confirm('Are you sure you want to disapprove')">DISAPPROVE</button>

     </div>
    @endcan
   </div>
   <div class="box-body">

    <div class="col-md-12 table-responsive">
     <div class="">

      <div class=""><button id="printscrn" class="btn btn-success">Print</button></div>
      <button onclick="exportTableToExcel('example3')" class="btn btn-warning pull-right"><i
        class="fa fa-excel-o text-white"></i> Export to Excel</button>
      <div class="showee">
       <img class="col-md-2" style="width: 150px; height: 100px;" src="{{ asset('admin/dist/img/cmclogo.png') }}"
        class="img-circle" alt="User Image">
       <br>

       <br>

      </div>

     </div>

     <table id="example3" class="table-bordered table-striped table">
      <thead>
       <tr>
        <th colspan="9" style="text-align: center;">
         <h2>SHIPPING PROGRAMME</h2>
        </th>
       </tr>
       <tr>
        <th colspan="5" style="font-weight: bolder; text-align: center;"> REF: {{ $shipping_programme->sp_ref }}</th>
        <th></th>
        <th colspan="3" style="font-weight: bolder; text-align: center;">DTD: {{ $shipping_programme->dtd }}</th>
       </tr>
       <tr>
        <th>No.</th>
        <th>VESSEL</th>
        <th>ETA</th>
        <th>CONTRTACT NO.</th>
        <th>TONNAGE</th>
        <th>DESTINATION</th>
        <th>MODE</th>
        <th>SHIPPING LINE</th>
        <th>BUYER</th>
        <th>PORT OF LOADING</th>
        <!--
                                         <th>DRAFT INVOICE</th>
                                       -->
       </tr>
      </thead>
      <tbody>

       @foreach ($shipping_programme->facs as $fac)
        <tr>
         <td>{{ $loop->index + 1 }}.</td>
         <td style="font-weight: bold; color: darkcyan;">{{ $fac->vessel->name }}</td>
         <td style="color: indigo; font-weight: bold;">{{ $fac->eta }}</td>
         <td>{{ $fac->contract->number }}</td>
         <th>{{ strtoupper($fac->fac_tonnage) }}</th>
         <td>{{ strtoupper($fac->contract->destinationport->name) }}</td>
         <td style="font-weight: bold;">{{ $fac->contract->shippingmode->name }}</td>

         <!--<td>{{ $fac->contract->shipping_instruction->shipping_line->shipping_line }}</td> -->
         @if (empty($fac->shipping_line))
          <td>{{ optional(optional(optional($fac->contract)->shipping_instruction)->shipping_line)->shipping_line }}
          </td>
         @else
          <td>
           {{ optional($fac->shipping_line)->shipping_line }}
          </td>
         @endif
         <td>{{ $fac->contract->consignee->name }}</td>
         <td style="font-weight: bold; color: red">{{ $fac->loadingport->name }}</td>
         <!--
                                           @if ($fac->contract->shipment->count() < 1)
 <td><a href="{{ route('prepare.draft_invoice', $fac) }}" class="btn btn-primary" >DRAFT INVOICE</a></td>
@else
 <td><a href="#" class="btn btn-warning" >VIEW DRAFT INVOICE</a></td>
 @endif
                                         -->
        </tr>
       @endforeach
       <tr>
        <th colspan="4">TOTAL</th>
        <th> {{ $sbw = $shipping_programme->facs->sum('fac_tonnage') }} </th>
        <th colspan="5"></th>
       </tr>

      </tbody>
     </table>

    </div>

    <div class="col-md-12">

    </div>

   </div>

   <!-- /.box-body -->
   <div class="box-footer">

   </div>
   <!-- /.box-footer-->
  </div>
  <!-- /.box -->

 </section>
@endsection

@section('more-scripts')
 <script src="{{ asset('admin/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
 <script src="{{ asset('admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
 <script src="{{ asset('admin/bower_components/select2/dist/js/select2.full.min.js') }}"></script>
 <script>
  $(function() {
   $('.select2').select2();
   $('#example1').DataTable()
   $('#example2').DataTable({
    'paging': true,
    'lengthChange': false,
    'searching': false,
    'ordering': true,
    'info': true,
    'autoWidth': false
   })

   $('#printscrn').on('click', function(event) {
    event.preventDefault();
    $('.hiide').hide();
    $('.btn').hide();
    $(this).hide();
    window.print();
    $(this).show();
    $('.hiide').show();
    $('.btn').show();
    //$('.showee').hide();
   });

   $('.disappr').on('click', function(event) {
    //event.preventDefault();
    /* Act on the event */

    var sp_id = parseInt({{ $shipping_programme->id }}, 10);
    $.ajax({
      url: '{{ url('disapprove_shipping_programme') }}',
      type: 'PUT',
      data: {
       sp_id: sp_id
      },
      success: setTimeout(location.reload(history.back), 5000),
     })
     .done(function(data) {
      console.log(data);
      $('.appr').attr('disabled', true);
      console.log("done");
     })


   });

  })
 </script>
@endsection