@extends('template.app') 

@section('meta')

@endsection

@section('title')

Obf Leasing Tax Invoice

@endsection

@section('styles')
    <style>
    
        body {
            font-family: Arial, sans-serif;
            font-size: 11px;
            margin: 0;
            padding: 15px;
            color: #000;
        }
    
        .invoice-container {
            width: 100%;
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
        }
    
        .invoice-wrapper{
            width:100%;
            border:1px solid #000;
            padding:0;
            box-sizing:border-box;
        }
    
        .invoice-title{
            font-size:18px;
            font-weight:bold;
            padding:5px 0;
            letter-spacing:1px;
        }
    
        .company-name{
            font-size:12px;
            font-weight:bold;
        }
    
        .footer-text{
            text-align:center;
            margin-top:10px;
            font-size:11px;
            line-height:18px;
        }
    
        .signature-box{
            height:70px;
        }
    
        .tiny{
            font-size:10px;
        }
    
        .full-width{
            width:100%;
        }
    
        .no-padding{
            padding:0 !important;
        }
    
        .border-none{
            border:none !important;
        }
    
        .no-border-top{
            border-top:none !important;
        }
    
        .no-border-bottom{
            border-bottom:none !important;
        }
    
        .no-border-left{
            border-left:none !important;
        }
    
        .no-border-right{
            border-right:none !important;
        }
    
        .text-center {
            text-align: center;
        }
    
        .text-right {
            text-align: right;
        }
    
        .bold {
            font-weight: bold;
        }
    
        table {
            width: 100%;
            border-collapse: collapse;
        }
    
        td,
        th {
            border: 1px solid #000;
            padding: 4px;
            vertical-align: top;
        }
    
        .no-border td {
            border: none;
        }
    
        .header-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
    
        .small-text {
            font-size: 10px;
        }
    
        .company-section td {
            height: 90px;
        }
    
        .item-table th {
            background: #f2f2f2;
        }
    
        .summary-table td {
            padding: 3px 5px;
        }
    
        .footer-note {
            margin-top: 10px;
            font-size: 10px;
        }
    
        .qr-box {
            border: none;
            text-align: center;
        }
    
        .qr-box img{
            width:120px;
            height:120px;
        }
    
        .signature {
            height: 60px;
        }
    
        .main-header{
            width:100%;
            border-collapse:collapse;
            table-layout:fixed;
        }
    
        .main-header > tbody > tr > td{
            border:1px solid #000;
            vertical-align:top;
            padding:0;
        }
    
        .left-section{
            padding:5px !important;
        }
    
        .left-inner-table tr{
            height:auto;
        }
    
        .right-section{
            padding:0 !important;
        }
    
        .right-inner-table{
            width:100%;
            height:100%;
            border-collapse:collapse;
            table-layout:fixed;
        }
    
        .right-inner-table tr{
            height:auto;
        }
    
        .right-inner-table td{
            border:1px solid #000;
            vertical-align:top;
            padding:5px;
        }
    
        .goods-table{
            width:100%;
            border-collapse:collapse;
            table-layout:fixed;
            font-family:Arial, sans-serif;
            font-size:11px;
        }
    
        .goods-table th,
        .goods-table td{
            border:1px solid #000;
            padding:4px;
        }
    
        .goods-table th{
            text-align:center;
            font-weight:bold;
        }
    
        .top-align{
            vertical-align:top;
        }
    
        .text-center{
            text-align:center;
        }
    
        .text-right{
            text-align:right;
        }
    
        .bold{
            font-weight:bold;
        }
    
        .product-row{
            height:230px;
        }
    
        .vin-no{
            font-size:22px;
            letter-spacing:1px;
            margin-bottom:20px;
        }
    
        .vehicle-name{
            font-style:italic;
            font-size:12px;
            margin-bottom:35px;
        }
    
        .tax-details{
            width:100%;
        }
    
        .tax-inner-table{
            width:100%;
            border-collapse:collapse;
        }
    
        .tax-inner-table td{
            border:none !important;
            padding:1px 0;
            font-size:12px;
        }
    
        .label-cell{
            width:100%;
            text-align:right;
            padding-right:10px !important;
            font-weight:bold;
            letter-spacing:1px;
        }
    
        .rate-cell{
            width:8%;
            text-align:right;
        }
    
        .per-cell{
            width:5%;
            text-align:center;
        }
    
        .tax-amount-cell{
            width:19%;
            text-align:right;
        }
    
        .amount-words{
            margin-top:5px;
            font-size:14px;
            font-weight:bold;
        }
    
        .print-btn-wrapper{
            text-align:right;
            margin-bottom:10px;
        }
    
        .print-btn{
            background:#000;
            color:#fff;
            border:none;
            padding:10px 18px;
            cursor:pointer;
            font-size:14px;
            border-radius:4px;
        }
    
        .print-btn:hover{
            background:#333;
        }
        
        .p-0 {
            border: none;
            padding: 0 !important;
        }
    
        @media print{

            body{
                margin:0 !important;
                padding:0 !important;
                background:#fff;
                font-size:10.5px !important;
                line-height:1.34 !important;
            }
        
            .print-btn-wrapper,
            .page-breadcrumb,
            .navbar-nav,
            .left-sidebar,
            .scroll-sidebar,
            .sidebar-nav,
            .topbar,
            header,
            footer,
            .card-header,
            .card-footer,
            .no-print{
                display:none !important;
            }
        
            body *{
                visibility:hidden;
            }
        
            #content-to-print,
            #content-to-print *{
                visibility:visible;
            }
        
            #content-to-print{
                position:absolute;
                left:0;
                top:0;
                width:100%;
                margin:0 !important;
                padding:0 !important;
                background:#fff;
            }
        
            .container-fluid,
            .card,
            .card-body,
            .row,
            .col-12,
            .col-lg-12,
            .col-md-12{
                margin:0 !important;
                padding:0 !important;
            }
        
            .invoice-wrapper{
                width:100%;
                border:1px solid #000;
                transform:scale(1);
                transform-origin:top left;
            }
        
            table{
                margin:0 !important;
            }
        
            td,
            th{
                padding:3px 4px !important;
                font-size:10.3px !important;
                line-height:1.3 !important;
            }
        
            .invoice-title{
                font-size:17.5px !important;
                padding:4px 0 !important;
            }
        
            .company-name{
                font-size:11.3px !important;
            }
        
            .vin-no{
                font-size:16px !important;
                margin-bottom:14px !important;
            }
        
            .vehicle-name{
                font-size:11.3px !important;
                margin-bottom:20px !important;
            }
        
            .product-row{
                height:200px !important;
            }
        
            .amount-words{
                font-size:13.5px !important;
                margin-top:4px !important;
            }
        
            .footer-text{
                margin-top:7px !important;
                font-size:10.3px !important;
                line-height:16px !important;
            }
        
            .signature-box{
                height:58px !important;
            }
        
            .qr-box img{
                width:110px !important;
                height:110px !important;
            }
        
            .tax-inner-table td{
                padding:1px 0 !important;
                font-size:10.3px !important;
            }
        
            br{
                line-height:11px !important;
            }
        
            @page{
                size:A4 portrait;
                margin:5mm;
            }
        }
    
    </style>
@endsection

@section('content')


<div class="page-breadcrumb">

   <div class="row">

      <div class="col-7 align-self-center">

         <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">OBF Leasing Tax Invoice</h4>

         <div class="d-flex align-items-center">

            <nav aria-label="breadcrumb">

               <ol class="breadcrumb m-0 p-0">

                  <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>

                  <li class="breadcrumb-item"><a href="{{ route('obf') }}" class="text-muted">OBF Leasing</a></li>

                  <li class="breadcrumb-item text-muted active" aria-current="page">Tax Invoice</li>

               </ol>
    
            </nav>

         </div>

      </div>

      <div class="col-5 align-self-center">

        <div class="customize-input float-right print-btn-wrapper no-print">
            <button class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" type="button" onclick="window.print()"> Print Invoice </button>
        </div>

      </div>

   </div>

</div>

<div class="container-fluid" id="content-to-print">

<div class="row">

    <div class="col-12">
    
        <div class="card">
    
            <div class="card-body">
    
                <div class="col-md-offset-3">
    
                    <div class="row">
    
                        <div class="col-lg-12 ">
    
                            <div class="col-md-12">
    
                                <div class="invoice-wrapper">
                                
                                    <table class="no-border">
                                        <tr>
                                            <td width="75%"></td>
                                            <td width="25%" class="text-center tiny">
                                                <b>e-Invoice</b>
                                            </td>
                                        </tr>
                                    </table>
                                
                                    <div class="invoice-title text-center">
                                        TAX INVOICE
                                    </div>
                                
                                    <table>
                                        <tr>
                                
                                            <td width="68%" class="p-0">
                                
                                                <table class="no-border full-width">
                                                    <tr>
                                                        <td width="15%" class="bold">IRN</td>
                                                        <td>d6ff1aa30cf00eea30f5c77bf2b5ddbc7b207703991804c51-1d67e8c91387a192</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="bold">Ack No.</td>
                                                        <td>12242345934742</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="bold">Ack Date</td>
                                                        <td>24-Jul-24</td>
                                                    </tr>
                                                </table>
                                
                                            </td>
                                
                                            <td width="32%" class="qr-box text-center">
                                                <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=InvoiceQRCode">
                                            </td>
                                
                                        </tr>
                                    </table>
                                
                                    <table class="main-header">
                                
                                        <tr>
                                
                                            <td width="50%">