@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>Allocation Letter</title>
 <meta name="author" content="WPO" />
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
   text-indent: 0;
  }

  h1 {
   color: black;
   font-family: Arial, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   font-size: 18pt;
  }

  .s1 {
   color: black;
   font-family: Arial, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   font-size: 9.5pt;
  }

  .h4,
  h4 {
   color: black;
   font-family: Arial, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   font-size: 11.5pt;
  }

  .s2 {
   color: black;
   font-family: Arial, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   font-size: 9.5pt;
  }

  .s3 {
   color: black;
   font-family: Arial, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   font-size: 7.5pt;
   vertical-align: 4pt;
  }

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

  h2 {
   color: black;
   font-family: Verdana, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: underline;
   font-size: 14pt;
  }

  .s5 {
   color: black;
   font-family: Verdana, sans-serif;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   font-size: 14pt;
  }

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

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

  .s6 {
   color: black;
   font-family: "Bodoni MT", serif;
   font-style: normal;
   font-weight: normal;
   text-decoration: none;
   font-size: 12pt;
  }

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

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

  table,
  tbody {
   vertical-align: top;
   overflow: visible;
  }

  hr {
   position: relative;
   border-top: solid 2px #000;
  }

  #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">
   @if ($allocation_letter->complete_status == 'yes')
    <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>
   @else
    <button class="btn btn-danger appr">APPROVE</button>
   @endif

   <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 class="page-header" style="width: 90%; text-align: center;">COCOA MARKETING COMPANY (GHANA) LIMITED</h1>
    <br>
    <div id="container">
     <div id="left">
      <p class="s4" style="padding-top: 11pt;padding-left: 8pt;text-indent: 0pt;text-align: left;">TELEPHONES:
       668352/668464/668281</p>
      <p class="s4" style="padding-left: 8pt;text-indent: 0pt;text-align: left;">CABLE: COCOAMAK </p>
      <p class="s4" style="padding-left: 8pt;text-indent: 0pt;text-align: left;">FAX: 233 21667057, 22665076</p>
      <p class="s2" style="padding-top: 6pt;padding-left: 8pt;text-indent: 0pt;text-align: left;"><span
        class="h4">Our Ref: {{ $allocation_letter->ref_number }} </p>
      <p style="text-indent: 0pt;text-align: left;"><br /></p>
      <p class="s4" style="padding-left: 8pt;text-indent: 0pt;text-align: left;">THE WPO MANAGER CMC (GH) LTD</p>
      <p class="s4" style="padding-left: 8pt;text-indent: 0pt;text-align: left;">ACCRA
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(SP/{{ substr($old_allocation_letter->shipping_programme->sp_ref, -3) }})
      </p>
     </div>
     <div>
      <p class="s4" style="padding-right: 38pt;text-indent: 50pt;text-align: right;">P.O.BOX 1017</p>
      <p class="s4" style="padding-right: 38pt;text-indent: 50pt;text-align: right;">ACCRA, GHANA</p>
      <br>
      <p class="s4" style="padding-right: 38pt;text-indent: 50pt;text-align: right;width:300pt;">DATE:
       {{ \Carbon\Carbon::parse($allocation_letter->date)->format('jS F, Y') }}</p>
     </div>
    </div>
    <p style="text-indent: 0pt;text-align: left;"><br /></p>
    <h4 style="padding-left: 8pt;text-indent: 0pt;text-align: left;">Dear Sir,</h4>
    <h2 style="padding-top: 5pt;padding-left: 8pt;text-indent: 0pt;text-align: left;">RE: MV
     “{{ $old_allocation_letter->vessel->name }}” ETA: @if ($old_allocation_letter->eta_dfrom == $old_allocation_letter->eta_dto)
      {{ Carbon\Carbon::parse($old_allocation_letter->eta_dfrom)->format('d/m') }}
     @else
      {{ Carbon\Carbon::parse($old_allocation_letter->eta_dfrom)->format('d') }} -
      {{ Carbon\Carbon::parse($old_allocation_letter->eta_dto)->format('d/m') }}
     @endif
     <br>{{ $full_season_name }}
    </h2>
    <p style="padding-left: 8pt;text-indent: 0pt;text-align: left;width: 700px;
     white-space: wrap;
">
     Further to the reference <b>
      {{ $old_allocation_letter->ref_number }} Dated
      {{ Carbon\Carbon::parse($old_allocation_letter->date)->format('d-m-y') }}</b>, we wish to advise that the
     booking on the above vessel has been cancelled.
    </p>
    <p style="text-indent: 0pt;text-align: left;"><br /></p>

    <p style="text-indent: 0pt;text-align: left;"><br /></p>

    <p style="padding-left: 8pt;text-indent: 0pt;line-height: 200%;text-align: left;">Kindly amend your records
     accordingly
     <br>This
     allocation is for <b>{{ $old_allocation_letter->shipping_line->shipping_line }}</b>
    </p>
    <p style="padding-left: 8pt;text-indent: 0pt;text-align: left;">Yours faithfully</p>
    <h3 style="padding-left: 8pt;text-indent: 0pt;text-align: left;">COCOA MARKETING COMPANY (GH) LIMITED</h3>
    <p style="text-indent: 0pt;text-align: left;"><br /></p>
    <p style="padding-left: 8pt;text-indent: 0pt;text-align: left;">{{ $manager->name }}<br> ({{ $manager->rank }})
    </p>
    <p style="padding-left: 8pt;text-indent: 0pt;line-height: 15pt;text-align: left;">FOR MANAGING DIRECTOR</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();

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

    var al_id = parseInt({{ $allocation_letter->id }}, 10);
    var old_al_id = parseInt({{ $old_allocation_letter->id }}, 10);
    $.ajax({
      url: '{{ url('cancel_allocation_letter') }}',
      type: 'PUT',
      data: {
       al_id: al_id,
       old_al_id: old_al_id
      },
      success: setTimeout(window.location.reload(), 3000),
     })
     .done(function(data) {
      console.log(data);
      $('.appr').attr('disabled', true);
      console.log("done");
     })


   });


  })
 </script>
@endsection