<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    
    <title>Naksha Invoice</title>
<style type="text/css">
    .parent {
  border: 0px solid black;
  padding: 1rem 0rem;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 1rem 0rem;
  vertical-align: top;
}
.child-inner {
  display: inline-block;
  vertical-align: middle;
}
  body {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
    margin: auto;
  }
  .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  </style>  
<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
.item-row td {
        border-left: 1px solid black!important;
}
.footer-tr td{
    border: 0px !important;
    border-top: 1px solid !important;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: right; margin-top: 25px; }
/* #customer { overflow: hidden; } */
#logo { text-align: left; float: left; position: relative; margin-top: 25px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right;  }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; text-align:left; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
td {
    border: 1px solid;
}
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
</style>
</head>
<body>
    <div style="size:a4; margin:0; padding:0 50px;" id="page-wrap">
<!--        <div id="header">INVOICE</div>
 -->        
        <div id="identity">
        
            <div id="logo">
            <img src="{{ asset('/images/logo.png') }}" alt="any">
            </div>
            <div id="address">
                <h3>Naksha Travels Limited</h3>
                <span>Maruti Heights - 3G-02</span><br>
                <span>P.O BOX78264-00507 NAIROBI</span>
           </div>
        
        </div>
        <div style="clear:both"></div>
        <p>
                <span style="border:1px solid black;width:120px;padding:5px 10px;text-align:center;background:#EEEE;">
                        <b>TAX INOVOICE  </b>
                    
</span>
                <span style="height:21px;vertical-align:center;border:1px solid black;background:#EEEE;width:200px;padding:2px 2px;text-align:center;float:right;">
                        <span class="parent" style="padding:0;">
                            <text class="child" style="height:20px;float:left;padding:0;border:0px;padding-left:20px;">Currency</span>
                            <text class="child" style="height:20px;float:right;width:100px;padding:0;border:0px;background:white;">US Dollar</span>

</span>
</span>
                </p>
                
                <br>
                
                <br>
        <div style="clear:both"></div>
        
        <div id="customer" style="margin-bottom:30px;">

            <table style="float: left;" id="meta">
                <tr style="background:#EEEE;text-align:center;">
                    <td class="" style="background:#EEEE;text-align:center;" >Quotation No</td>
                    <td class="" style="background:#EEEE;text-align:center;">Tax Date</td>
                    <td class="" style="background:#EEEE;text-align:center;">Company Pin</td>
                </tr>
                <tr>
                    <td>{{$invoice->invoice_id}}</td>
                    <td>{{$invoice->invoice_date}}</td>
                    <td>87618685</td>
                </tr>
                <tr style="border:0px solid black;">
                <td style="border:0px solid black;" colspan="3"></td>
                </tr>
                <tr style="background:#EEEE;text-align:center;">
                    <td class="" style="background:#EEEE;text-align:center;" >Terms</td>
                    <td class="" style="background:#EEEE;text-align:center;">Due Date</td>
                    <td class="" style="background:#EEEE;text-align:center;">Customer Pin</td>
                </tr>
                <tr>
                    <td>{{$invoice->invoice_id}}</td>
                    <td>{{$invoice->invoice_id}}</td>
                    <td>87618685</td>
                </tr>
                
                <!-- <tr>
                    <td class="meta-head">Invoice #</td>
                    <td><div>000123</div></td>
                </tr>
                <tr>
                    <td class="meta-head">Date</td>
                    <td><div id="date">March 06, 2023</div></td>
                </tr>
                <tr>
                    <td class="meta-head">Amount Due</td>
                    <td><div class="due">$875.00</div></td>
                </tr> -->
            </table>
            
            
            <table id="meta">
                <tr>
                    <td class="meta-head">Invoice To</td>
                </tr>
                <tr>
                    <td><div style="text-align: left;height:120px;" id="">{{$invoice->invoice_to}}</div></td>
                </tr>
            </table>
        
        </div>
        <br>
        <div style="clear:both"></div>
        <table style="height:10%;margin-top:20px;" id="items">
        
          <tr>
              <th>Description</th>
              <th>Quantity</th>
              <th>VAT</th>
              <th>Price</th>
              <th>Amount</th>
          </tr>
         
         
          @foreach($services['hotel'] as $data)
          @php
    $totalRate = 0;
@endphp

@foreach($data as $row)
    @php
        $totalRate += $data->tax_amount;
    @endphp
@endforeach
          <tr class="item-row">
              <td class="description"><div> {{$data->item_details}} </div></td>
              <td><div class="qty">{{$data->quantity}}</div></td>
              <td class="item-name"><div class="delete-wpr"><div>{{$data->tax_amount}}</div></div></td>
              <td><div class="cost">{{$data->rate}}</div></td>
              <td><span class="price">{{$data->total}}</span></td>
          </tr>
          @endforeach
          
          @foreach($invoiceServices as $data)
          <tr class="item-row">
		      <td class="description"><div> {{$data->description}} </div></td>
		      <td><div class="qty">{{$data->quantity}}</div></td>
		      <td class="item-name"><div class="delete-wpr"><div>{{$data->vat}}</div></div></td>
		      <td><div class="cost">{{$data->price}}</div></td>
		      <td><span class="price">{{$data->amount}}</span></td>
		  </tr>
          @endforeach
         
        </table>
        <div style="clear:both"></div>
        
        <div class='parent'>
            <div class='child' style="width:44.7%;border:0px solid black;">
                
                <div style="border:0px solid black;padding:5px 0px;background:#EEEE;margin-bottom:10px;">
                        <h4 style="padding-left:10px;">Bank Details</h4>
                </div>


                Account Name: Naksha Travels Limited
                Bank Name: Diamond Trust Bank
                Branch: DTB Centre
                A/C No KSH: 0587122001
                A/C No USD: 0587122002

            </div>
            <div class='child' style="width:44.03%;margin-left:71px;border:0px solid black;">
                
                <div style="border:1px solid black;border-bottom: none;padding:5px 0px;">
                    <div class='child-inner' style="width:40%;">
                        <span style="padding-left:10px;">SUB TOTAL</span>
                    </div>
                    <div class='child-inner' style="width:50%;text-align:right;">
                        <span style="padding-left:10px;">10,340.00</span>
                    </div>
                </div>

                <div style="border:1px solid black;border-bottom: none;padding:5px 0px;">
                    <div class='child-inner' style="width:40%;">
                        <span style="padding-left:10px;">VAT</span>
                    </div>
                    <div class='child-inner' style="width:50%;text-align:right;">
                        <span style="padding-left:10px;">0.00</span>
                    </div>
                </div>
                <div style="border:1px solid black;padding:5px 0px;">
                    <div class='child-inner' style="width:40%;">
                        <span style="padding-left:10px;">GRAND TOTAL</span>
                    </div>
                    <div class='child-inner' style="width:50%;text-align:right;">
                        <span style="padding-left:10px;">0.00</span>
                    </div>
                </div>
                <br>
                
                <img src="https://png.pngtree.com/png-clipart/20220402/ourmid/pngtree-black-and-white-icons-of-barcode-numbers-png-image_4520081.png
                " alt="QR Code" width="150" height="120"><br>
                
                <br><span>
                    CU Trans ID: 0090968720000000101
                </span>
                <br><span>
                    CU Serial NO: KRAMW009202208096872
                </span>
                <br><span>
                    Date Time: 06/01/2023 10:01
                </span>
                
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <!-- <div id="terms">
          <h5>Terms</h5>
          <textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
        </div>
 -->    
    </div>
    
</body>
</html>