<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Car Inspection Report</title>
    <style>
        @media  print {
            body {
                -webkit-print-color-adjust: exact;
            }
            .comments-section {
                background: #fff9e6 !important;
            }
            .print-btn {
                display: none !important;
            }
        }

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

        .print-container {
            position: relative;
            text-transform: uppercase;
            font-family: Arial, sans-serif;
            margin: 0 auto;
            width: 210mm;
            min-height: 297mm;
            padding: 10mm 15mm;
            background: white;
            box-sizing: border-box;
            page-break-after: always;
            overflow: hidden;
        }

        .header-section {
            width: calc(100% + 30mm); /* 15mm left + 15mm right padding */
            height: 138px;
            margin: -10mm -15mm 20px -15mm; /* negative margins to cancel the container padding */
            background-image: url('<?php echo e(url('header.jpeg')); ?>');
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100% 100%; /* Make it fit exactly */
            border-bottom: 0px solid #333;
        }

        .bottom-section {
            width: calc(100% + 30mm); /* 15mm left + 15mm right padding */
            height: 95px;
            margin: -10mm -15mm 20px -15mm; /* negative margins to cancel the container padding */
            background-image: url('<?php echo e(url('footer.jpeg')); ?>');
            background-position: top center;
            background-size: 100% 100%; /* Make it fit exactly */
            background-repeat: no-repeat;
            background-position: bottom center;
            border-bottom: 0px solid #333;
        }        


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

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

        h3 {
            text-align: center;
            margin-bottom: 25px;
            text-transform: uppercase;
            font-size: 40px;
            position: relative;
            z-index: 2;
        }

        .demand {
            text-align: center;
            margin-bottom: 25px;
            text-transform: uppercase;
            font-size: 40px;
            position: relative;
            z-index: 2;
        }

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

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

        .detail-item2 {
            border-bottom: none;
            font-size: 14px;
        }

        .highlight-note {
            background: #f8f4fa;
            padding: 12px;
            font-style: italic;
            font-size: 14px;
            margin: 20px 0;
            border-left: 5px solid #ccc;
        }

        .comments-section {
            border: 2px solid #ffc107;
            padding: 1px 5px;
            margin-top: 5px;
            background: #fff9e6;
            font-size: 10px;
        }

        .canvas-box {
            margin-top: 30px;
            position: relative;
            z-index: 2;
        }

        .canvas-box h4 {
            margin-bottom: 10px;
        }

        canvas {
            border: 1px solid #ccc;
        }

        .print-btn {
            display: block;
            margin: 30px auto 10px;
            padding: 12px 25px;
            background: #007bff;
            color: #fff;
            font-size: 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .print-btn:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>

<div class="print-container">
    <div class="header-section"></div>
    <div class="watermark"></div>

    <!-- <h2>Car Inspection Report <br> <?php echo e($car->registration_no); ?></h2> -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
        <div style="font-size: 14px;">
        <strong>Report No:</strong><br> KM-<?php echo e(\Carbon\Carbon::parse($car->inspection_date)->format('Y')); ?>-<?php echo e($car->id); ?>

        </div>
        <h2 style="margin: 0; flex-grow: 1; text-align: center;">Car Inspection Report <br> <?php echo e($car->registration_no); ?></h2>
        <div style="font-size: 14px; text-align: right;">
            <strong>Date:</strong> <?php echo e(\Carbon\Carbon::parse($car->inspection_date)->format('d-m-Y')); ?>

        </div>
    </div>    

    <div class="detail-grid">
        <div>
            <div class="detail-item"><Strong><span>Make</span></Strong><strong><?php echo e($car->make); ?></strong></div>
            <div class="detail-item"><strong><span>Variant</span></strong><strong><?php echo e($car->varient); ?></strong></div>
            <div class="detail-item"><strong><span>Chassis No</span></strong><strong><?php echo e($car->chassis_no); ?></strong></div>
            <div class="detail-item"><strong><span>Reg City</span></strong><strong><?php echo e($car->registered_city); ?></strong></div>
            <div class="detail-item"><strong><span>Color</span></strong><strong><?php echo e($car->color); ?></strong></div>
        </div>

        <div>
            <div class="detail-item"><strong><span>Model</span></strong><strong><?php echo e($car->model); ?></strong></div>
            <div class="detail-item"><strong><span>Reg Year</span></strong><strong><?php echo e($car->reg_year); ?></strong></div>
            <div class="detail-item"><strong><span>Mileage</span></strong><strong><?php echo e($car->mileage); ?></strong></div>
            <div class="detail-item"><strong><span>Transmission</span></strong><strong><?php echo e($car->transmission); ?></strong></div>
            <div class="detail-item"><strong><span>Registration No</span></strong><strong><?php echo e($car->registration_no); ?></strong></div>
        </div>
    </div>

    <!-- <div class="highlight-note">
        * Seller did not allow us to test drive the vehicle so some ratings might vary from actual condition.
    </div> -->

 
    <div class="comments-section">
        <p> <strong>Inspector Comments: <?php echo e($car->inspector_comments); ?></strong></p>
    </div>


    <div class="canvas-box">
        <canvas id="print-sketch" width="700" height="300"></canvas>
    </div>

    <div class="detail-item2">
        <p><strong>S: Scratch</strong></p>
        <p><strong>SF: Scratch filled</strong></p>
        <p><strong>P: Paint marked</strong></p>
        <p><strong>MS: Minor Scratches</strong></p>
        <p><strong>D: Dents</strong></p>
    </div>

    <h3><span>Demand:</span> <strong><?php echo e($car->demond); ?></strong></h3><br>
    <!-- <div class="bottom-section"></div> -->

    <button class="print-btn" onclick="window.print()">Print Report</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
<script>
    const canvas = new fabric.Canvas('print-sketch', {
        isDrawingMode: false
    });

    const sketchData = <?php echo json_encode($car->exterior_sketch_data, 15, 512) ?>;
    canvas.loadFromJSON(sketchData, canvas.renderAll.bind(canvas));
</script>

</body>
</html>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/laravel-app12/resources/views/cars/print.blade.php ENDPATH**/ ?>