<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <style>
        /* Add your CSS styles here */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .container{
            width:-300px;
        }
        .container .pay_to{
            width:-180px;
            float:left;
        }   
        .container .voucher_data{
            width:-180px;
            float:right;
        }
        .invoice-details {
            margin-top: -20px;
        }
        .item-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .item-table th, .item-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .item-table th {
            background-color: #f2f2f2;
        }
        .invoice-total {
            margin-top: 20px;
            text-align: right;
        }
        .container {
            width:300px;
            height:90px;
            background-color:green;
            padding-top:20px;
            padding-left:15px;
            padding-right:15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
                    <h5 style="color: #13A2B7;">Logo</h5>
                    <ul style="list-style-type: none; padding: 0;">
                        <li class="logo" style="margin-right: 20px;">
                            <img src="{{public_path('assets\img\kia_new.jpg')}}" alt="Company Logo" style="text-left;">
                        </li>
                        <li class="pay_to" style="margin-right: 20px;">
                            Pay to<span>Rinku Madam</span>
                        </li>
                        <li class="voucher_data" style="margin-right: 20px;">
                            <p style="background-color:black; color:white;">VOUCHER</p>
                            <p>No.1</p>
                            <p>Date :14/09/2023</p>
                        </li>
                    </ul>
            </div>
        </div>
    </div>
    <table class="item-table">
        <thead>
            <tr>
                <th>Description</th>
                <th>Quantity</th>
                <th>Unit Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Product 1</td>
                <td>2</td>
                <td>$50.00</td>
                <td>$100.00</td>
            </tr>
            <tr>
                <td>Product 2</td>
                <td>3</td>
                <td>$30.00</td>
                <td>$90.00</td>
            </tr>
        </tbody>
    </table>
    <div class="invoice-total">
        <div class="logo">
            <span>Authorized by</span>
        </div>
        <div class="pay_to">
            <span>Accountant</span>            
        </div>
        <div class="voucher_data">
            <span>Receiver Signature</span>
        </div>
    </div>
</body>
</html>
