<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cash Voucher</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 20px;
        }

        .voucher-container {
            max-width: 800px;
            margin: auto;
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .voucher-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .voucher-header h4 {
            margin: 0;
            font-weight: bold;
        }

        .voucher-header h5 {
            margin-top: 10px;
            font-weight: normal;
        }

        .voucher-details {
            margin-bottom: 20px;
        }

        .voucher-details td {
            padding: 5px;
        }

        .voucher-table th,
        .voucher-table td {
            text-align: right;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .voucher-table th {
            background-color: #f1f1f1;
        }

        .voucher-footer {
            margin-top: 20px;
            text-align: center;
        }

        .voucher-footer div {
            display: inline-block;
            width: 150px;
            margin: 10px;
        }

        .text-left {
            text-align: left;
        }

        .text-right {
            text-align: right;
        }

        .invoice-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .invoice-header h2 {
            font-size: 24px;
            margin: 0;
        }

        .invoice-table th,
        .invoice-table td {
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 10px;
        }

        .invoice-table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        .total-row td {
            font-weight: bold;
            background-color: #e9ecef;
        }

        .text-center {
            margin-top: 30px;
            text-align: right;
        }
    </style>
</head>

<body>

    <!-- Cash Receipt Voucher -->
    <div class="voucher-container">
        <div class="voucher-header">
            <h4>M.D.S</h4>
            <h5>CASH RECEIPT VOUCHER</h5>
        </div>

        <div class="voucher-details">
            <table class="table table-borderless">
                <tr>
                    <td><b><center>  غلام رسول سجاول </center></b></td>
                </tr>
                <tr>
                    <td>Dated: <strong>21/11/2024</strong></td>
                </tr>
            </table>

        </div>

        <table class="voucher-table table table-bordered">
            <thead>
                <tr>
                    <th class="text-right">قیمت</th>
                    <th class="text-right">ریت</th>
                    <th class="text-left">وزن</th>
                    <th class="text-left">بوری</th>
                    <th class="text-left">مال</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>258,966</td>
                    <td>2,050</td>
                    <td>5,053</td>
                    <td class="text-right">50</td>
                    <td class="text-left">سفیدآلو موزےکا </td>
                </tr>
            </tbody>
        </table>

        <div class="text-center">
            <strong  >بنام :   </strong> 258,966
            <br>
            <strong> سابقہ بیلنس : </strong> 0
            <br>

            <strong> حالیہ بیلنس :</strong> 258,966
        </div>




        <div class="mt-3 text-center">
            <small>Print Date & Time: 21/11/2024 2:31 PM</small>
        </div>
    </div>

    <!-- Bootstrap JS (Optional, for any Bootstrap functionalities like modals) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
