<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Car Inspection Report</title>
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <style>
        @media  print {
            body { -webkit-print-color-adjust: exact; }
            .comments-section { background: #fff9e6 !important; }
            .print-btn { display: none !important; }
            .payments-wrapper { max-height: none !important; overflow: hidden !important; }
        }

        body {
            margin: 0 auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: black;
            line-height: 1.1;
            font-size: 17px;
        }

        .print-container {
            position: relative;
            margin: 0 auto;
            width: 210mm;
            min-height: 297mm;
            padding: 10mm 15mm;
            background: white;
            box-sizing: border-box;
            /* page-break-after: always; */
            display: flex;
            flex-direction: column;
        }

        .header-section {
            width: calc(100% + 30mm);
            height: 138px;
            margin: -10mm -15mm 20px -15mm;
            background-image: url('<?php echo e(url('Invoiceheader2.png')); ?>');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: top center;
        }


        .watermark {
            position: fixed;
            top: 50%; left: 50%;
            width: 700px; height: 700px;
            opacity: 0.05;
            transform: translate(-50%, -50%);
            background-image: url('<?php echo e(url('header1.png')); ?>');
            background-size: contain;
            z-index: 0;
            background-repeat: no-repeat;

        }

        h2 {
            text-align: center;
            margin-bottom: 8px;
            text-transform: uppercase;
            font-size: 20px;
            position: relative;
            z-index: 2;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 35px;
            margin: 5px 0 15px;
            position: relative;
            z-index: 2;
        }

        .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 3px 0;
            border-bottom: 1px solid #ddd;
            font-size: 15px;
        }

        .comments-section {
            border: 2px solid #ffc107;
            padding: 10px 15px;
            margin-top: auto;
            background: #fff9e6;
            font-size: 15px;
            page-break-inside: avoid;
            z-index: 2;
        }

        .comments-section[contenteditable="true"] {
            outline: none;
            min-height: 50px;
            cursor: text;
            z-index: 2;
        }

        .signature-container {
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
            width: 100%;
            page-break-inside: avoid;
        }

        .signature {
            font-weight: 400;
            line-height: 1.3;
            text-align: left;
            width: 50%;
        }

        .signature-containere {
            display: flex;
            justify-content: space-between;
            margin-top: 0rem;
            width: 100%;
        }

        .printee {
            font-size:10px;
            line-height: 0.1;
            text-align: right;
            width: 95%;
        }

        .payments-wrapper { flex: 1; }
        table { width: 100%; border-collapse: collapse; font-size: 14px; }
        table th, table td { border: 1px solid #000; padding: 5px; }
        table th { background: #f1f1f1; }
    </style>
</head>
<body>
<div class="print-container">
    <div class="header-section"></div>
    <div class="watermark"></div>

    <h2>Payment Receipt</h2>

    <div class="detail-grid">
        <div>
            <h3>Invoice Details</h3>
            <div class="detail-item"><span>Invoice No:</span><strong>KM-<?php echo e(\Carbon\Carbon::parse($sale->date)->format('Y')); ?>-<?php echo e($sale->id); ?></strong></div>
            <div class="detail-item"><span>Invoice Date:</span><strong><?php echo e($sale->date); ?></strong></div>
            <div class="detail-item"><span>Buyer Name:</span><strong><?php echo e($sale->buyer_name); ?></strong></div>
            <div class="detail-item"><span>Buyer CNIC:</span><strong><?php echo e($sale->buyer_cnic); ?></strong></div>
        </div>

        <div>
            <h3>Car Details</h3>
            <div class="detail-item"><span>Make:</span><strong><?php echo e($sale->make); ?></strong></div>
            <div class="detail-item"><span>Model:</span><strong><?php echo e($sale->model); ?></strong></div>
            <div class="detail-item"><span>Variant:</span><strong><?php echo e($sale->varient); ?></strong></div>
            <div class="detail-item"><span>Color:</span><strong><?php echo e($sale->color); ?></strong></div>
            <div class="detail-item"><span>Registration No:</span><strong><?php echo e($sale->registration_no); ?></strong></div>
        </div>
    </div>

    <!-- Payments Table -->
    <div class="payments-wrapper">
    <table >
        <tr>
            <td colspan="2" style="text-align:center; font-weight:bold; background:#235849; color: white; height: 25px;">
                Payment Information
            </td>
        </tr>
        <tr>
            <th>Date</th>
            <th>Amount</th>
            <!-- <th>Remarks</th> -->
        </tr>
        <tr>
            <td>Invoice Amount</td>
            <td ><?php echo e(number_format($sale->received_amount)); ?></td>
        </tr>
        <?php $__currentLoopData = $sale->payments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $payment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <tr>
                <td><?php echo e(\Carbon\Carbon::parse($payment->payment_date)->format('d-m-Y')); ?></td>
                <td><?php echo e(number_format($payment->amount)); ?></td>
                <!-- <td>Payment <?php echo e($loop->iteration); ?></td> -->
            </tr>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <tr>
    <td style="font-weight:bold; text-align:right; border:none;">Total Amount</td>
    <td style="font-weight:bold; border:none;">
        <?php echo e(number_format($sale->soled_price)); ?>

    </td>
</tr>
<tr>
    <td style="font-weight:bold; text-align:right; border:none;">Amount Paid</td>
    <td style="font-weight:bold; border:none;">
        <?php echo e(number_format($sale->payments->sum('amount') + $sale->received_amount)); ?>

    </td>
</tr>
<tr>
    <td style="font-weight:bold; text-align:right; border:none;">Balance Due</td>
    <td style="font-weight:bold; border:none;">
        <?php echo e(number_format($sale->soled_price - ($sale->payments->sum('amount') + $sale->received_amount))); ?>

    </td>
</tr>

    </table>
</div>


    <!-- Editable Notes -->
    <div class="comments-section" id="editableNote" contenteditable="true" data-id="<?php echo e($sale->id); ?>">
        <strong>Notes:</strong> <?php echo e($sale->note); ?>

    </div>

    <div class="signature-container">
        <p class="signature">Seller Signature _________________ <br> Name : <?php echo e($sale->seller_name); ?> <br> CNIC : <?php echo e($sale->seller_cnic); ?></p>
        <p class="signature">Buyer Signature _________________ <br> Name : <?php echo e($sale->buyer_name); ?> <br> CNIC : <?php echo e($sale->buyer_cnic); ?></p>
    </div>

    <div class="signature-containere">
        <p class="printee">Printed By: <?php echo e(Auth::user()->name); ?></p>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const noteDiv = document.getElementById("editableNote");
        let timeout = null;

        noteDiv.addEventListener("input", function() {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                saveNote(noteDiv.dataset.id, noteDiv.innerText.replace("Notes:", "").trim());
            }, 1000); // save 1s after typing stops
        });

        function saveNote(saleId, noteText) {
            fetch(`/sales/${saleId}/update-note`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ note: noteText })
            })
            .then(res => res.json())
            .then(data => console.log(data.message))
            .catch(err => console.error("Error saving note:", err));
        }
    });
</script>
</body>
</html>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/laravel-app12/resources/views/car_sales/print2.blade.php ENDPATH**/ ?>