<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <section>
      <style>
          body::before {
              content: ' ';
              position: fixed;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              background: url("lasaa-web-logo.png");
              opacity: 0.1;
              pointer-events: none;
          }
        section {
          max-width: 720px;
          margin: 0 auto;
        }

        .table-container {
          border: gray 2px solid;
        }

        .table-container h4 {
          border: gray 2px solid;
          margin: 0;
          background: #6fc0fa;
          padding: 20px 10px;
        }

        .table-container table {
          width: 100%;
          background-color: gray;
          border: none;
        }

        .table-container table th,
        .table-container table td {
          margin: 0;
          background: #fff;
          padding: 10px;
          text-align: left;
        }

        p {
          font-size: large;
        }

        .address table {
          width: 100%;
        }

        .address p {
          max-width: 300px;
          line-height: 1.25rem;
          margin: 10px 0;
        }

        .center *{
            text-align: center;
            line-height: 1rem;
            margin: 6px 0;
        }
        .center h4{
            font-size: x-large;
        }
        .mainT{
            font-size: x-large;
            margin: 5px 0;
        }
        .yours *{
            margin: 0;
        }
        .closing {
            border-top: gray 2px solid;
            margin-top: 50px;
            font-size: small;
        }

        img.logo{
            display: block;
            margin: 0px auto;
            padding: 40px 0;
        }
        section{
            position: relative;
        }
        section::after {
            content: "";
            position: absolute;
            opacity: 10%;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background-image: url(/lasaa-web-logo.png);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
        }
        footer {
            position: relative;
            width: 100%;
            background-color: #333333;
        }
        p.copyright {
            position: absolute;
            width: 100%;
            color: #fff;
            line-height: 40px;
            font-size: 0.7em;
            text-align: center;
            bottom: 0;
        }
      </style>
      <div>
        <img src="lasaa-web-logo.png" alt="" class="logo">
      </div>
      <div class="address">
        <table>
          <tr>
            <td>
              <p>{{$data['data']}}</p>
            </td>
            <td>
                <p><b>Ref</b>: {{ $data['refNo'] }}</p>
            </td>
          </tr>
          <tr>
            <td>
              <p><b>{{ $data['businessname'] }}</b></p>
              <p><b>{{ $data['address'] }}</b></p>

            </td>
          </tr>
        </table>
      </div>

      <div>
        <p>Dear Sir/ Madam,</p>
        <h4 class="mainT">
            PERMIT FOR PROMOTIONAL ADVERT VEHICLE
        </h4>
        <p>
            We hereby grant you a temporary permit for your:
            @for( $i=0; $i<= $countType; $i++)
               <br> <b>{{ $getUnique[$i] }}</b>  , campaign with registration numbers
            @foreach($combinedArray as $item)
            <b> {{ $item['key'] }}</b>, @endforeach in line with the photograph attached to your application.
            @endfor
        </p>
          <p>Your permit is valid for {{$data['duration']}}; {{$data['startdate']}} to {{ $data['duedate'] }}.</p>
          <p>At the end of the campaign, you will be expected to discontinue the display since failure to do so shall be considered illegal and appropriate action will ensue.</p>
          <p>However, in case of your desire to extend display, a fresh application must be obtained and duly submitted to the Agency for an extension of approval with a minimum notice of 72 hours before expiration of this approval.</p>
          <p>Kindly note that failure to renew for extension of display or remove the advert as at when due would attract a fine.</p>
          <p>Also note that in the event of a cancellation or change of a campaign date, 20% of the total amount paid would be deducted as administrative charges and a refund would only be granted if a supporting letter from the client is submitted to the Agency stating cogent reason(s) for such a change.</p>
      </div>
      <div>
        <p>Thank you for your cooperation.</p>
        <p>Yours faithfully,</p>
      </div>

      <div class="yours">
          <img src="MD-SIGNATURE.png" alt="MD signature">
        <p>Prince Fatiu Akiolu</p>
        <p><b>Managing Director/CEO.</b></p>
      </div>
    <p>
        <b>{{ $data['refNo'] }}</b> &nbsp; &nbsp; <b> {{ $data['refNo'] }} </b>  &nbsp; &nbsp; <b> {{ $data['refNo'] }} </b>   &nbsp; &nbsp;
    </p>
        <footer>
            <p class="copyright">&copy; LASAA  {{ \Carbon\Carbon::now()->year }}</p>
        </footer>

    </section>
  </body>
</html>
