<!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.1;
            font-size: 17px; /* Increased base font size */
        }

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

        /* .header-section {
            width: calc(100% + 30mm); 
            height: 130px;
            margin: -10mm -15mm 20px -15mm; 
            background-image: url('/invoiceheader2.png');
            background-size: 100% 100%; 
            background-repeat: no-repeat;
            background-position: top center;
            border-bottom: 2px solid #333;
        } */


                .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('{{ url('Invoiceheader2.png') }}');
            background-size: 100% 100%; /* Make it fit exactly */
            background-repeat: no-repeat;
            background-position: top center;
            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('{{ url('footer.jpeg') }}');
            background-size: 100% 100%; /* Make it fit exactly */
            background-repeat: no-repeat;
            background-position: bottom center;
            border-bottom: 0px solid #333;
        }      


        .watermark {
            position: fixed;
            /* position: absolute; */
            top: 50%;
            left: 50%;
            width: 700px;
            height: 700px;
            opacity: 0.05;
            transform: translate(-50%, -50%);
            background-image: url('{{ url('header1.png')  }}') ;
            background-size: contain;
            z-index: 0;
            align: center;
            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;
            position: relative;
            z-index: 2;
        }

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

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

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

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

        

        .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;
        }

        .signature-container {
            display: flex;
            justify-content: space-between; /* Pushes one to the left and the other to the right */
            align-items: center; /* Ensures vertical alignment */
            margin-top: 2rem;
            width: 100%; /* Takes full width */
        }

        .signature {
            font-weight: 400;
            line-height: 1.3;
            text-align: center;
            width: 50%; /* Adjust width as needed */
        }

        .signature-containere {
            display: flex;
            justify-content: space-between; /* Pushes one to the left and the other to the right */
            align-items: right; /* Ensures vertical alignment */
            margin-top: 0rem;
            width: 100%; /* Takes full width */
        }

        /* .signaturee {
            font-weight: 400;
            font-size:10px;
            line-height: 1.1;
            text-align: center;
            width: 50%; 
        } */
        
        .printee {
            font-size:10px;
            line-height: 0.1;
            text-align: right;
            width: 95%; /* Adjust width as needed */
        }
        .sign-field {
            width: 320px;
            height: 5px;
            float: left;
        }


        .detail-item strong {
            max-width: 60%;
            word-wrap: break-word;
            word-break: break-word;
            text-align: right;
            display: inline-block;
        }
        .detail-item span {
            max-width: 35%;
            display: inline-block;
        }
        .detail-item {
            align-items: flex-start;
        }


        
    </style>
</head>
<body>

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

    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
        <div style="font-size: 14px;">
        <strong>Receipt No:</strong> KM-{{ \Carbon\Carbon::parse($sale->date)->format('Y') }}-{{ $sale->id }}
        </div>
        <h2 style="margin: 0; flex-grow: 1; text-align: center;">Sales Invoice</h2>
        <div style="font-size: 14px; text-align: right;">
            <strong>Date:</strong> {{ $sale->date }}
        </div>
    </div>


    <div class="detail-grid">
        <div>
        <h3>Seller Information</h3>
            <div class="detail-item"><span>Seller Name</span><strong style="text-transform: uppercase ;">{{ $sale->seller_name }}</strong></div>
            <div class="detail-item"><span>CNIC</span><strong >{{ $sale->seller_cnic }}</strong></div>
            <div class="detail-item"><span>Phone No</span><strong>{{ $sale->seller_phone }}</strong></div>
            <div class="detail-item"><span>Address</span><strong >{{ $sale->seller_address }}</strong></div>
            <!-- <p>I was responsible for the vehicle and any damages until now.</p> -->
        </div>

        <div>
        <h3>Buyer Information</h3>
            <div class="detail-item"><span>Buyer Name</span><strong style="text-transform: uppercase ;">{{ $sale->buyer_name }}</strong></div>
            <div class="detail-item"><span>CNIC</span><strong>{{ $sale->buyer_cnic }}</strong></div>
            <div class="detail-item"><span>Phone No</span><strong>{{ $sale->buyer_phone }}</strong></div>
            <div class="detail-item"><span>Address</span><strong>{{ $sale->buyer_address }}</strong></div>
            <!-- <p>From now on, I take full responsibility for the vehicle and any damages.</p> -->
        </div>
    </div>

        <!-- Section 2: Car Information -->
        <div class="detail-grid">
        <div>
            <h3>Car Information</h3>
            <div class="detail-item"><span>Registration No:</span><strong>{{ $sale->registration_no }}</strong></div>
            <div class="detail-item"><span>Make:</span><strong>{{ $sale->make }}</strong></div>
            <div class="detail-item"><span>Model:</span><strong>{{ $sale->model }}</strong></div>
            <div class="detail-item"><span>Varient:</span><strong>{{ $sale->varient }}</strong></div>
            <div class="detail-item"><span>Transmission:</span><strong>{{ $sale->transmission }}</strong></div>
            </div>
            <!-- <p><strong>Registration No:</strong> {{ $sale->registration_no }}</p>
            <p><strong>Make:</strong> {{ $sale->make }}</p>
            <p><strong>Model:</strong> {{ $sale->model }}</p> -->
        

            <!-- Section 3: Payment Information -->
        <div>
        <h3>.</h3>
            <div class="detail-item">Registred Year:<strong>{{ $sale->reg_year }}</strong></div>
            <div class="detail-item"><span>Chassis:</span><strong>{{ $sale->chassis_no }}</strong></div>
            <div class="detail-item"><span>Engine No:</span><strong>{{ $sale->engine_no }}</strong></div>
            <div class="detail-item"><span>Color:</span><strong>{{ $sale->color }}</strong></div>

            <!-- <p><strong>Sold Price:</strong> {{ $sale->soled_price }}</p>
            <p><strong>Received Amount:</strong> {{ $sale->received_amount }}</p>
            <p><strong>Remaining Payment:</strong> {{ $sale->remaining_payment }}</p> -->
        </div>
        </div>
        <h3>Payment Information</h3>
            <div class="detail-item"><span>Sold Price:</span><strong>{{ number_format($sale->soled_price) }}</strong></div>
            <div class="detail-item"><span>Received Amount:</span><strong>{{ number_format($sale->payments->sum('amount') + $sale->received_amount) }}</strong></div>
                        <!--<div class="detail-item"><span>Remaining Payment:</span><strong>{{ number_format($sale->soled_price - $sale->received_amount) }}</strong></div> -->
        
            <div class="highlight-note" align="justify">
                * This invoice dated {{ $sale->date }} confirms the Seller’s responsibility for any prior FIRs, legal disputes, and obligates the Seller to provide all original documents. The Buyer confirms full inspection of the vehicle’s physical condition and documentation prior to signing and agrees to transfer ownership into their name within 15 days.
            </div>
 <br>           
            
            <div class="signature-container">
                <p class="signature">
                    Seller Signature _________________
                </p> 
                <p class="signature">
                    Buyer Signature _________________
                </p>
            </div>
<br>
            <div class="signature-container">
                <p class="signature"  style="text-align: left; margin-left:25px;">
                Seller Witness _________________ <br> Name : {{ $sale->seller_witness_name }} <br> CNIC : {{ $sale->seller_witness_cnic }}
                </p> 
                <p class="signature" style="text-align: left; margin-left:25px;">
                Buyer  Witness _________________ <br> Name : {{ $sale->buyer_witness_name }} <br> CNIC : {{ $sale->buyer_witness_cnic }}
                </p> 
            </div>
<br>
            <div class="signature-containere">

                <p class="printee">
                Printed By: {{ Auth::user()->name }}
                    
                </p>
            </div>
            
      
        <!-- Print Button -->
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
    <!-- <button class="print-btn" onclick="window.print()">Print</button>
    <button class="print-btn" onclick="window.location.href='{{ route('car.sales') }}'">Back</button> -->
</div><br>
    <!-- <div class="bottom-section"></div> -->
        
    </div>




