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

<head>
    <meta charset="UTF-8">
    <title>Invoice Print</title>
    <style>
        @media  print {

            /* Hide the URL */
            .url {
                display: none !important;
            }

            @page  {
                margin: 0;
            }
        }

        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        .container {
            width: 796px;
            display: block;
            margin: auto;
            padding: 0px 30px
        }

        h1 {
            font-size: 40px;
            font-weight: 400;
        }

        .invoice h1 {
            color: #00000088
        }

        p {
            font-weight: 400;
            margin-bottom: 5px;
        }

        .contact p {
            text-align: end;
        }

        .custom-header-text-color {
            color: #00000088
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 20px 15px;

            background: {
                    {
                    $invoiceData['invoice_color']
                }
            }

            ;
            color: #fff;
            margin-bottom: 40px;
        }

        .header .invoice img {
            max-width: 180px;
            margin-top: 0px;
        }

        .text-uppercase {
            text-transform: uppercase;
        }

        .client-info {
            display: flex;
            flex-direction: row;
            padding: 0 15px;
        }

        .client-info .client-left {
            width: 50%;
        }

        .client-middel,
        .client-right {
            width: 25%;
        }

        .client-info h5,
        .terms h5 {
            font-weight: 400;
            color: #959595;
            text-transform: capitalize;
            margin-bottom: 10px;
        }

        .client-right h2 {
            font-size: 40px;
            color: #0D83DD;
            font-weight: 400;
            margin-top: 10px
        }

        .table-info {
            margin-top: 40px;
            width: 100%;
        }

        .total-info {
            display: flex;
            justify-content: flex-end;
            margin-top: 40px;
        }

        .table-total-info {
            width: 40%;
        }

        .table-total-info p {
            position: relative;
            color: #0D83DD;
            text-align: end;
            padding: 0px 120px 0px 0px;
        }

        .terms {
            width: 60%;
        }

        .custom-invoice-terms p {
            color: #00000088 !important;
            font-size: 15px;
        }

        .custom-invoice-terms-bold-color {
            color: #00000088;
            font-size: 15px;
        }

        .table-total-info p span {
            position: absolute;
            right: 0px;
            color: #000;
        }

        .margin-top {
            margin-top: 30px;
        }

        .custom-text-justify {
            text-align: justify;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 1rem;
            background-color: transparent;
            border-collapse: collapse;
        }

        .table td,
        .table th {
            padding: .75rem;
            vertical-align: top;
            border-top: 1px solid #dee2e6;
            text-align: center
        }

        .table thead th {
            vertical-align: bottom;
            border-bottom: 2px solid #dee2e6;
            text-align: left;
            text-transform: capitalize;
            color: #0D83DD;
            font-weight: 400;
            border-top: 3px solid #0D83DD;
            text-align: center;
            font-weight: 600;
        }

        .table tbody+tbody {
            border-top: 2px solid #dee2e6
        }

        .table .table {
            background-color: #fff
        }


        .table-bordered {
            border: 1px solid #dee2e6
        }

        .table-bordered td,
        .table-bordered th {
            border: 1px solid #dee2e6
        }

        .table-bordered thead td,
        .table-bordered thead th {
            border-bottom-width: 2px
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, .05)
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="invoice">
                <?php if(isset($invoiceData['invoice_logo']) && $invoiceData['invoice_logo'] != null): ?>
                <img class="custom-invoice-logo"
                    src="<?php echo e(asset('backend/uploads/invoiceLogoImg/'.$invoiceData['invoice_logo'])); ?>"
                    class="img-fluid" />
                <?php else: ?>
                <h1>Invoice</h1>
                <?php endif; ?>
            </div>
        </div>
        <div class="client-info">
            <div class="client-left">
                <h5>invoice number</h5>
                <p>#<?php echo e($invoiceData['invoice']); ?></p>
                <h5>date of issue</h5>
                <p><?php echo e(Carbon\Carbon::parse($invoiceData['date'])->format('d-m-Y')); ?></p>
            </div>
            <div class="client-middel">
            </div>
            <div class="client-right">
                <h5>invoice total</h5>
                <h2><?php echo e($invoiceData['expense_service_amount']); ?>৳</h2>
            </div>
        </div>
        <div class="table-info">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Expense</th>
                        <th>Details</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $invoiceData['unpaid_expense_service_data']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php if(isset($item) && $item != null): ?>
                    <tr>
                        <td class="text-no-wrap">
                            <b>Category: </b><?php echo e($item->expenseCategoryData->category_name); ?> <br>
                            <b>Expense: </b><?php echo e($item->expenseData->expense_name); ?>

                        </td>
                        <td class="text-no-wrap"><?php echo e($item->expense_details); ?></td>
                        <td class="text-center"><?php echo e($item->expense_amount); ?></td>
                    </tr>
                    <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
        <div class="total-info">
            <div class="terms custom-invoice-terms custom-text-justify">
                <h5>invoice terms</h5>
                <p class="custom-invoice-terms-bold-color"><b><?php echo $invoiceData['invoice_terms']; ?></b></p>
            </div>
            <div class="table-total-info">
                <p>Service Qty: <span><?php echo e($invoiceData['expense_service_qty']); ?></span></p>
                <p>Net Amount: <span><?php echo e($invoiceData['expense_service_amount']); ?>৳</span></p>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>

    </script>
</body>

</html><?php /**PATH E:\Project\Personal-Project\Office-Project\Next-Web-Service\mastering-dashboard\resources\views/admin/printInvoice/expenseServicePaymentInvoice.blade.php ENDPATH**/ ?>