<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
    <style>
        /*.daily__expense{*/
        /*    padding: 60px 0;*/
        /*}*/
        h6.ml-5 {
    margin-left: 50px;
}
h5.card-title {
    font-weight: bold;
    font-size: 26px;
}
.title {
    text-transform: uppercase;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 19px;
    font-family: consolas;
}
.invoice-details h4 {
    font-size: 26px;
    font-family: consolas;
    font-weight: bold;
}
.date h4 {
    font-size: 26px;
    font-family: consolas;
    font-weight: bold;
}
.invoice-details h5 {
    font-size: 26px;
    font-family: consolas;
    font-weight: bold;
}
.declaration{
  text-decoration: underline;
    font-size: 26px !important;
}
.footer-box {
    text-align: center;
    border: 2px solid #333;
    width: 100%;
    margin: 0 auto;
    padding:12px;
}
.footer-box h4 {
    color: blue;
    font-size: 26px;
}
.orage-box {
    background-color: #fc8204;
    height: 28px;
    width: 100%;
    margin: 0 auto;
    margin-top: 41px;
}
.pl-0{
  padding-left: 0 !important;
}
p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 20px;
    font-family: consolas;
}
th {
    text-transform: uppercase;
    font-size: 26px;
    font-family: consolas;
    border: 1px solid #000 !important;
}
td {
    text-transform: uppercase;
    font-size: 26px;
    font-family: consolas;
    border: 1px solid #000 !important;
}
    </style>
</head>
<body onload="window.print()" style="zoom:53%">
    <div class="container">
        <div class="daily__expense">
            <div class="logo">
                <img src="{{asset('style/assets/img/logo2.jpeg')}}" style="width: 100%;" alt="">
            </div>
            <div class="row">
                 <h3 class="title">RECIEPT VOUCHER</h3>
              <div style="justify-content: space-between;display: flex;margin: 30px 0;">
                <div class="invoice-details" style="width: 600px;">
                  <h4>Voucher No : <span style="color:#fc8204"> {{$bill->voucher_id}}</span></h4>
                  <h4>Customer Name :  {{$customer_name->name}}</h4>
                  <h4>CASH MEMO :- @if($transaction->ledger =='CashMemo') {{$transaction->ledger_value}} @endif  </h4>
                  <h4>Date  : {{date('d-m-Y',strtotime($bill->payment_date))}}</h4>
                 </div>
                <div class="invoice-details">
                   <h5>TRN No :  {{$customer_name->trn_no}} </h5>
                  <h5>DO No :-   @if($transaction->ledger =='') {{$transaction->ledger_value}} @endif </h5>
                      <h5>Cash/Cheque :- {{$bill->payment_type}} </h5>
                </div>
              </div>
            
            </div>
            
            
             <div class="row">
       
        
                  <div class="col-md-12 text-left">
         
                  <div class="row">
                      
                    <div style="display:flex;justify-content: space-between;width: 100%;margin-top: 40px;">
                        
                        
                      <div class="invoice-details" >
                        <h4 class="card-title text-uppercase">Paid Amount : <span style="color:#fc8204">{{$bill->amount}}</span></h4>
                       
                      </div>
                      
                    <div class="invoice-details">
                        <h4 class="card-title text-uppercase">The amount in Dhs : <span style="color:#fc8204">{{$amount_in_word}}</span></h4>
                       
                      </div>
                 
                 
                    </div>
                  
                   
                  </div>
              </div>
        </div>
    
              <div class="row">
       
        
                  <div class="col-md-12 text-left">
         
                  <div class="row">
                    <div style="display:flex;justify-content: space-between;margin-top: 150px;">
                      <div class="invoice-details" >
                        <h4 class="card-title text-uppercase">Signature</h4>
                       
                      </div>
                           <div class="invoice-details" >
                        <h4 class="card-title text-uppercase">Customer Signature</h4>
                       
                      </div>
                  
                    </div>
                  
                    <div class="col-md-12">
                      <div class="orage-box"></div>
                      <div class="footer-box">
                        <h4>PO Box 87556, Office # M118, Al Hilal Building, Al Qusais - Dubai, U.A.E</h4>
                        <h4>EMAIL : srkdieseltrading@gmail.com, TEL : 0091522646001/0553346408</h4>
                      </div>
                    </div>
                  </div>
              </div>
        </div>
    </div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>