@extends('admin.layout.app')

@section('more-head')
 <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') }}">
 <title>WPO letter</title>
 <meta name="author" content="Akwesi Kusi" />
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
   text-indent: 0;
  }

  h1 {
   /* color: black; */
   font-family: Calibri, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   font-size: 16pt;
  }

  h2 {
   /* color: black; */
   font-family: Calibri, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   font-size: 12pt;
  }

  .s1 {
   color: black;
   font-family: "Times New Roman", serif;
   font-style: normal;
   font-weight: normal;
   text-decoration: none;
   font-size: 12pt;
  }

  .s2 {
   color: black;
   font-family: Calibri, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: underline;
   font-size: 12pt;
  }

  p {
   /* color: black; */
   font-family: Calibri, sans-serif;
   font-style: normal;
   font-weight: normal;
   text-decoration: none;
   font-size: 12pt;
   margin: 0pt;
  }

  .s3 {
   color: black;
   font-family: Calibri, sans-serif;
   font-style: normal;
   font-weight: normal;
   text-decoration: none;
   font-size: 11pt;
  }

  #container {
   display: flex;
   /* establish flex container */
   flex-direction: row;
   /* default value; can be omitted */
   flex-wrap: nowrap;
   /* default value; can be omitted */
   justify-content: space-between;
   /* switched from default (flex-start, see below) */
  }

  @media print {
   ::-webkit-scrollbar {
    display: none;
   }
  }
 </style>
@endsection

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

  </h1>

 </section>

 <section class="content">

  <!-- Default box -->
  <div class="box">
   <button id="print" class="btn btn-success appr" class="pull-right"
    onclick="$(this).hide(); $('.main-footer').hide();  window.print();$(this).show();"><i class="fa fa-print"
     aria-hidden="true"></i>
    Print </button>
   <div class="box" style="padding-left: 20px; padding-right: 20px;">
    <br>
    <img src="{{ asset('admin/dist/img/cmclogo.png') }}" width="80px" height="80px"
     style="float: left; font-weight:bolder;">
    <h1 style="text-align: center; width: 90%;">COCOA MARKETING COMPANY (GHANA)
     LIMITED<br>
     WAREHOUSING AND PORT OPERATIONS DEPARTMENT <br> ACCRA - GHANA.</h1>
    <p style="text-indent: 0pt;text-align: left;"><br /></p>
    <div id="container">
     <div id="left">
      <h2 style="padding-left: 24pt;text-indent: 0pt;text-align: left;">REF NO:
       {{ App\Model\wpo_allocation_letter::find($fac->wpo_evacuation->cancel_wpo_allocation_letter_id)->ref_number }}
      </h2>
      <p style="text-indent: 0pt;text-align: left;"><br /></p>
      <p class="s1" style="padding-top: 4pt;padding-left: 24pt;text-indent: 0pt;text-align: left;">THE REGIONAL
       MANAGER<br>
       CMC
       (GH.) LIMITED.<br> {{ $fac->loadingport->name }}.</p>
      <h2 style="padding-left: 309pt;text-indent: 0pt;text-align: center;">
       (SP/{{ substr(optional(optional($fac->allocation_letter)->shipping_programme)->sp_ref, -3) }})</h2>
     </div>
     <div id="right">
      <h2 style="padding-left: 24pt;text-indent: 0pt;text-align: center;"> Date:
       {{ Carbon\Carbon::parse(App\Model\wpo_allocation_letter::find($fac->wpo_evacuation->cancel_wpo_allocation_letter_id)->date)->format('d/m/Y') }}
      </h2>
     </div>
     <p style="text-indent: 0pt;text-align: left;"><br /></p>
    </div>
    <p class="s2" style="padding-top: 2pt;padding-left: 24pt;text-indent: 0pt;text-align: left;">CANCELLATION OF
     SHIPPING ADVICE</p>
    <p style="text-indent: 0pt;text-align: left;"><br /></p>
    <p
     style="padding-top: 2pt;padding-left: 24pt;text-indent: 0pt;text-align: left;width: 700px;
     white-space: wrap;">
     With reference to shipping advice/instruction number<b>
      {{ optional($fac->allocation_letter)->ref_number }} </b>dated
     <b>{{ Carbon\Carbon::parse(optional($fac->allocation_letter)->date)->format('d/m/Y') }} </b>, be informed that the
     vessel has been CANCELLED as attached.
    </p>
    <p style="text-indent: 0pt;text-align: left;"><br /></p>
    <p style="padding-left: 24pt;text-indent: 0pt;line-height: 200%;text-align: left;">By a copy of this letter, the
     agent
     <b>{{ optional(optional($fac->allocation_letter)->shipping_line)->shipping_line }}, {{ $fac->loadingport->name }}
     </b>is being informed
     accordingly.
     <br>Please be guided accordingly.
    </p>
    <p style="text-indent: 0pt;text-align: left;"><br /></p>
    <h2 style="padding-left: 24pt;text-indent: 0pt;text-align: left;">COMFORT AYISIBEA ABANQUAH (MRS) <br>WPO MANAGER
    </h2>
    <p style="text-indent: 0pt;text-align: left;"><br /></p>
    <p style="padding-left: 24pt;text-indent: 0pt;line-height: 15pt;text-align: left;">cc: Shipping Manager, Accra.</p>
    <p class="s3" style="padding-left: 60pt;text-indent: 0pt;text-align: left;">
     {{ optional(optional($fac->allocation_letter)->shipping_line)->shipping_line }}<b>,
     </b>{{ $fac->loadingport->name }}</p>
   </div>

  </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();




  })
 </script>
@endsection