<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Retail Order & Booking Form</title>
        <style>
            body {
              font-family: Arial, sans-serif;
              margin: 0;
              padding: 20px;
              background: #fff;
            }
            .container {
              width: 850px;
              margin: auto;
              border: 2px solid #000;
              padding: 20px;
            }
            .container_two {
                width: 850px;
                margin: auto;
                padding: 20px;
            }
            .header {
              text-align: center;
              background-color: #0d2c54;
              color: white;
              padding: 5px 0;
              font-weight: bold;
            }
            .section {
              border: 1px solid #000;
              margin: 10px 0;
            }
            .row {
              display: flex;
              flex-wrap: wrap;
              border-top: 1px solid #000;
            }
            .row div {
              flex: 1;
              padding: 4px 8px;
              /*border-right: 1px solid #000;*/
              font-size: 13px;
            }
            .row div:last-child {
              border-right: none;
            }
            .row:first-child {
              border-top: none;
            }
            .sub-header {
              background: #0d2c54;
              color: white;
              text-align: center;
              padding: 4px 8px;
              font-size: 14px;
              font-weight: bold;
            }
            .table-container {
              display: flex;
              justify-content: space-between;
              gap: 20px; 
            }
        
            table {
              width: 100%; 
              border-collapse: collapse;
              font-size: 13px;
            }
            
            th, td {
              border: 1px solid black;
              padding: 6px;
              text-align: left;
            }
            
            th {
              color: black;
            }
            
            .totals td {
              font-weight: bold;
              background: #0d2c54;
              color: #fff;
            }
            
            .table-1 .totals td {
              font-weight: bold;
              background: #0d2c54;
              color: #fff;
            }
            
            .table-1 {
              background-color: #fff; 
              font-size: 12px;
            }
            .table-2 {
              background-color: #fff; 
              font-size: 12px;
            }
            
            .table-2 th {
              display: inline-block;
              background-color: #000;
              color: #fff;
              padding: 14px 10px;
              font-weight: bold;
              border-radius: 0px;
            }
        
        
            .signature-section {
              display: flex;
              justify-content: space-between;
              gap: 20px;
              margin-top: 15px;
              margin-bottom: 15px;
            }
            
            .signature-wrapper {
              display: flex;
              flex-direction: column;
              align-items: center;
            }
            
            .signature-label {
              font-weight: bold;
              margin-bottom: 4px;
              font-size: 13px;
              text-align: center;
            }
            
            .signature-box {
              width: 200px;
              height: 40px;
              border: 1px solid #000;
            }
        
        
            .disclaimer {
              font-size: 11px;
              margin-top: 20px;
            }
            .kia-header-bar {
                display: flex;
                align-items: center;
                padding: 10px 20px;
            }
            
            .gp_logo1 {
                height: 30px;
                margin-right: 20px;
                vertical-align: middle;
            }
            
            .gp_logo2 {
                height: 75px;
                margin-right: 20px;
                vertical-align: middle;
            }
            
            .shivam-kia-heading {
              font-family: 'Arial Black', sans-serif;
              font-size: 14px;
              font-weight: 600;
              color: white;
              text-transform: uppercase;
              margin: 0;
              line-height: 1.5;
              padding: 10px 0;
              background: linear-gradient(to right, black, #444, #777, #bbb, white);
              width: 100%;
              text-align: left;
            }
            .header-row {
                display: flex;
                align-items: right;
                font-size: 14px;
                gap: 225px;
                margin-bottom: -8px;
            }
            
            .header-1 {
              /*display: inline-block;*/
              background-color: #000;
              color: #fff;
              padding: 4px 68px;
              font-weight: bold;
              border-radius: 0px;
            }
            .header-2 {
                display: inline-block;
                background-color: #000;
                color: #fff;
                padding: 4px 1px;
                font-weight: bold;
                border-radius: 0px;
            }
            .t1{
                background-color: #fff;
                color: #000;
            }
            .payment-header {
              text-align: center;
              font-weight: bold;
              font-size: 16px;
              margin-bottom: 10px;
            }
            
            .payment-tables {
              display: flex;
              gap: 20px;
              justify-content: center;
              flex-wrap: wrap;
            }
            
            .payment-table {
              width: 100%;
              max-width: 400px;
              border-collapse: collapse;
              font-size: 13px;
            }
            
            .payment-table td {
              border: 1px solid #000;
              padding: 6px;
            }
            
            .payment-table .totals td {
              font-weight: bold;
              background: #0d2c54;
            }
        
            .table-1 td {
                text-align: center;
            }
            
            .table-2 td {
                text-align: center;
            }
            
            .car-on-road-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 14px;
            }
        
            .car-on-road-table th, .car-on-road-table td {
                padding: 8px;
                vertical-align: top;
            }
        
            .car-on-road-table .spacer {
                border: none !important;
                background-color: #fff;
                width: 30px;
            }
        
            .car-on-road-table thead th {
                background-color: #0d3e5f;
                color: #fff;
                text-align: center;
            }
        
            .car-on-road-table .label {
                font-weight: bold;
                background-color: #f2f2f2;
            }
        
            .car-on-road-table .highlight-row {
                background-color: #0d3e5f;
                color: #fff;
                font-weight: bold;
            }
            
            .right_border {
                width: 200px;
                border-right: 1px solid #000000;
                text-align: right;
            }
            
            .left_border {
                width: 100px;
                border-left: 1px solid #000000;
                text-align: right;
            }
            
            .padding_words{
                padding: 7px;
                letter-spacing: 1px;
            }
            
            .custom_section{
                margin-top: 2px;
                border-bottom: 1px solid #000;
            }
            
            .text-center {
                text-align: center;   
            }
            
            .text-right {
                text-align: right;   
            }
            
            @media print {
                * {
                    page-break-before: auto !important;
                    page-break-after: auto !important;
                    page-break-inside: auto !important;
                    break-inside: auto !important;
                }
                body {
                    -webkit-print-color-adjust: exact;
                    print-color-adjust: exact;
                }
                
                body {
                  font-family: Arial, sans-serif;
                  margin: 0;
                  padding: 10px;
                  background: #fff;
                  height: 100vh;
                }
                .container {
                  width: 850px;
                  margin: auto;
                  border: 2px solid #000;
                }
                .container_two {
                    width: 850px;
                    margin: auto;
                    padding: 20px;
                }
                .header {
                  text-align: center;
                  background-color: #0d2c54;
                  color: white;
                  padding: 5px 0;
                  font-weight: bold;
                }
                .section {
                  border: 1px solid #000;
                  margin: 10px 0;
                }
                .row {
                  display: flex;
                  flex-wrap: wrap;
                  border-top: 1px solid #000;
                }
                .row div {
                  flex: 1;
                  padding: 4px 8px;
                  /*border-right: 1px solid #000;*/
                  font-size: 13px;
                }
                .row div:last-child {
                  border-right: none;
                }
                .row:first-child {
                  border-top: none;
                }
                .sub-header {
                  background: #0d2c54;
                  color: white;
                  text-align: center;
                  padding: 4px 8px;
                  font-size: 14px;
                  font-weight: bold;
                }
                .table-container {
                  display: flex;
                  justify-content: space-between;
                  gap: 20px; 
                }
            
                table {
                  width: 100%; 
                  border-collapse: collapse;
                  font-size: 13px;
                }
                
                th, td {
                  border: 1px solid black;
                  padding: 6px;
                  text-align: left;
                }
                
                th {
                  color: black;
                }
                
                .totals td {
                  font-weight: bold;
                  background: #0d2c54;
                  color: #fff;
                }
                
                .table-1 .totals td {
                  font-weight: bold;
                  background: #0d2c54;
                  color: #fff;
                }
                
                .table-1 {
                  background-color: #fff; 
                  font-size: 12px;
                }
                .table-2 {
                  background-color: #fff; 
                  font-size: 12px;
                }
                
                .table-2 th {
                  display: inline-block;
                  background-color: #000;
                  color: #fff;
                  padding: 14px 10px;
                  font-weight: bold;
                  border-radius: 0px;
                }
            
            
                .signature-section {
                  display: flex;
                  justify-content: space-between;
                  gap: 20px;
                  margin-bottom: 15px;
                }
                
                .signature-wrapper {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                }
                
                .signature-label {
                  font-weight: bold;
                  margin-bottom: 4px;
                  font-size: 13px;
                  text-align: center;
                }
                
                .signature-box {
                  width: 200px;
                  height: 40px;
                  border: 1px solid #000;
                }
            
            
                .disclaimer {
                  font-size: 11px;
                  margin-top: 20px;
                }
                .kia-header-bar {
                    display: flex;
                    align-items: center;
                    padding: 10px 20px;
                }
                
                .gp_logo1 {
                    height: 30px;
                    margin-right: 20px;
                    vertical-align: middle;
                }
                
                .gp_logo2 {
                    height: 75px;
                    margin-right: 20px;
                    vertical-align: middle;
                }
                
                .shivam-kia-heading {
                  font-family: 'Arial Black', sans-serif;
                  font-size: 14px;
                  font-weight: 600;
                  color: white;
                  text-transform: uppercase;
                  margin: 0;
                  line-height: 1.5;
                  padding: 10px 0;
                  background: linear-gradient(to right, black, #444, #777, #bbb, white);
                  width: 100%;
                  text-align: left;
                }
                .header-row {
                    display: flex;
                    align-items: right;
                    font-size: 14px;
                    gap: 225px;
                    margin-bottom: -8px;
                }
                
                .header-1 {
                  /*display: inline-block;*/
                  background-color: #000;
                  color: #fff;
                  padding: 4px 68px;
                  font-weight: bold;
                  border-radius: 0px;
                }
                .header-2 {
                    display: inline-block;
                    background-color: #000;
                    color: #fff;
                    padding: 4px 1px;
                    font-weight: bold;
                    border-radius: 0px;
                }
                .t1{
                    background-color: #fff;
                    color: #000;
                }
                .payment-header {
                  text-align: center;
                  font-weight: bold;
                  font-size: 16px;
                  margin-bottom: 10px;
                }
                
                .payment-tables {
                  display: flex;
                  gap: 20px;
                  justify-content: center;
                  flex-wrap: wrap;
                }
                
                .payment-table {
                  width: 100%;
                  max-width: 400px;
                  border-collapse: collapse;
                  font-size: 13px;
                }
                
                .payment-table td {
                  border: 1px solid #000;
                  padding: 6px;
                }
                
                .payment-table .totals td {
                  font-weight: bold;
                  background: #0d2c54;
                }
            
                .table-1 td {
                    text-align: center;
                }
                
                .table-2 td {
                    text-align: center;
                }
                
                .car-on-road-table {
                    width: 100%;
                    border-collapse: collapse;
                    font-size: 14px;
                }
            
                .car-on-road-table th, .car-on-road-table td {
                    padding: 8px;
                    vertical-align: top;
                }
            
                .car-on-road-table .spacer {
                    border: none !important;
                    background-color: #fff;
                    width: 30px;
                }
            
                .car-on-road-table thead th {
                    background-color: #0d3e5f;
                    color: #fff;
                    text-align: center;
                }
            
                .car-on-road-table .label {
                    font-weight: bold;
                    background-color: #f2f2f2;
                }
            
                .car-on-road-table .highlight-row {
                    background-color: #0d3e5f;
                    color: #fff;
                    font-weight: bold;
                }
                
                .right_border {
                    width: 200px;
                    border-right: 1px solid #000000;
                    text-align: right;
                }
                
                .left_border {
                    width: 100px;
                    border-left: 1px solid #000000;
                    text-align: right;
                }
                
                .padding_words{
                    padding: 7px;
                    letter-spacing: 1px;
                }
                
                .custom_section{
                    margin-top: 2px;
                    border-bottom: 1px solid #000;
                }
                
                .text-center {
                    text-align: center;   
                }
                
                .text-right {
                    text-align: right;   
                }
                
                .column-left {
                    line-height: 4px;
                }
                
                .column-right{
                    line-height: 4px;
                }
            }
            h3 {
              margin-top: 1em;
              margin-bottom: 0.5em;
              background-color: #000;
              color: #fff;
              padding: 4px 8px;
              -webkit-print-color-adjust: exact;
              print-color-adjust: exact;
            }
            h2{
                margin-top: 1em;
                margin-bottom: 0.5em;
                background-color: red;
                color: white;
                text-align: center;
                padding: 6px 10px;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        </style>
    </head>
    <body>
        <div class="container" id="content-to-print">
          
            <div class="kia-header-bar">
                @php 
                    $logo_1 = $images->gatepass_logo1 ?? '';
                    $logo_2 = $images->gatepass_logo2 ?? ''; 
                @endphp
                <img class="gp_logo2" src="{{ asset('uploads/global_configuration/gatepass_logo_two/' . $logo_2) }}" alt="IB Logo">
                <div class="shivam-kia-heading"><span style="margin-left:20px;">Shivam Kia ( IB Group)</span></div>
                <img class="gp_logo1" src="{{ asset('uploads/global_configuration/gatepass_logo_one/' . $logo_1) }}" alt="Kia Logo">
            </div>
            
            <div class="header">ACCESSORY FORM</div>
    
            <div class="section">
                <div class="row">
                    <div><b>Booking Dt.:</b> {{ \Carbon\Carbon::parse($data->booking_date)->format('d-m-Y') }}</div>
                    <div><b>Place:</b> {{ $data->branch_name }}</div>
                    <div class="text-right"><b>Delivery Date:</b> {{ \Carbon\Carbon::parse($data->tentetive_delivery_date)->format('d-m-Y') }}</div>
                </div>
                
                <div class="row">
                    <div><b>Customer Name:</b> {{ $data->customer_name ?? '' }}</div>
                </div>
                
                <div class="row">
                    <div><b>Company Name:</b> {{ $data->company_name ?? '' }}</div>
                    <div><b>GST No.:</b> {{ $data->gst ?? '' }}</div>
                </div>
                
                <div class="row">
                    <div><b>Address Correspondence:</b> {{ $data->address ?? '' }}</div>
                </div>
                
                <div class="row">
                    <div><b>Dist.:</b> {{ $data->district_name ?? '' }}</div>
                    <div><b>Mobile No.:</b> {{ $data->contact_number ?? '' }}</div>
                </div>
                
                <div class="row">
                    <div><b>Model:</b> {{ $data->car_model_name ?? '' }}</div>
                    <div><b>Varient:</b> {{ $data->car_varient_name ?? '' }}</div>
                    <div class="text-right"><b>Invoice No.:</b> {{ $data->invoice_no ?? '' }}</div>
                </div>
                
                <div class="row">
                    <div><b>VIN No.:</b> {{ $data->vin_number ?? '' }}</div>
                    <div><b>Engine No.:</b> {{ $data->engine_number ?? '' }}</div>
                    <div class="text-right"><b>Key:</b> {{ $data->key_number ?? '' }}</div>
                </div>
                
                <div class="row">
                    <div><b>Accessory Fitment On_______________________________FOC / Discount / Chargeable Basis</b></div>
                </div>
            </div>
            
            <div class="section">
                <table>
                    <thead>
                        <tr>
                            <th>Sr. No.</th>
                            <th>Perticulars</th>
                            <th>Part Code No.</th>
                            <th>No.of QTY</th>
                            <th>Rate</th>
                            <th>Amount</th>
                        </tr>
                    </thead>    
                    <tbody>
                        @for ($i = 1; $i <= 18; $i++)
                            <tr>
                                <td>{{ $i }}</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        @endfor
                    </tbody>
                </table>
            </div>

            <div class="signature-section">
                <div class="signature-wrapper">
                    <div class="signature-label">Customer Signature</div>
                    <div class="signature-box"></div>
                </div>
                <div class="signature-wrapper">
                    <div class="signature-label">KEC / Sales Manager</div>
                    <div class="signature-box"></div>
                </div>
                <div class="signature-wrapper">
                    <div class="signature-label">CEO / CCM</div>
                    <div class="signature-box"></div>
                </div>
            </div> 
        </div>  
        
        <div class="container_two">
            <div class="row">
                <div class="row col-sm-12">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-4 text-center">
                        <div class="customize-input float-right">
                            <button onclick="printDiv('content-to-print')" style="color: #4e73df; border-color: #4e73df; font-size: 30px; background-color: transparent; font-weight: 700; border-radius: 0.35rem;">
                                Print Content
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-4"></div>
                </div>    
            </div>   
        </div>    
    </body>
    
    <script>
        function printDiv(divId) {
            var content = document.getElementById(divId).innerHTML;
    
            var printWindow = window.open('', '', 'height=600,width=800');
    
            var stylesheets = document.querySelectorAll('link[rel="stylesheet"], style');
    
            var watermarkURL = "{{ asset('uploads/global_configuration/gatepass_logo_one/' . ($images->gatepass_logo1 ?? '')) }}";
    
            printWindow.document.write('<html><head><title>Print Content</title>');
    
            stylesheets.forEach(function(style) {
                if (style.tagName === 'LINK') {
                    printWindow.document.write('<link rel="stylesheet" href="' + style.href + '" type="text/css">');
                } else {
                    printWindow.document.write('<style>' + style.innerHTML + '</style>');
                }
            });
    
            printWindow.document.write(`
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        margin: 0;
                        position: relative;
                    }
    
                    .watermark {
                        position: fixed !important;
                        width: 250px;
                        opacity: 0.06;
                        z-index: -1 !important;
                        pointer-events: none;
                        transform: rotate(-30deg);
                    }
    
                    .wm1 { top: 15%; left: 5%; }
                    .wm2 { top: 30%; left: 25%; }
                    .wm3 { top: 50%; left: 45%; }
                    .wm4 { top: 70%; left: 65%; }
    
                    .print-content {
                        position: relative;
                        z-index: 1;
                        padding: 20px;
                        box-sizing: border-box;
                    }
    
                    .payment-section {
                        padding: 20px;
                        background: white;
                        border-radius: 8px;
                    }
    
                    .payment-tables {
                        display: flex;
                        justify-content: space-between;
                        gap: 20px;
                    }
    
                    .payment-table {
                        flex: 1 1 0;
                        max-width: 48%;
                        border-collapse: collapse;
                        margin: 0;
                        box-sizing: border-box;
                    }
    
                    .payment-table td {
                        padding: 6px 10px;
                        border: 1px solid #ccc;
                        vertical-align: top;
                    }
    
                    .payment-table .totals td {
                        font-weight: bold;
                        background-color: #003366;
                        color: white;
                    }
    
                    @media print {
                        @page {
                            size: auto;
                            margin: 10mm;
                        }
    
                        html, body {
                            height: auto !important;
                            max-height: 100% !important;
                            overflow: hidden !important;
                            margin: 0 !important;
                            padding: 0 !important;
                        }
    
                        .watermark {
                            display: block !important;
                        }
    
                        .print-content, .payment-section, .payment-table, .signature-section {
                            page-break-inside: avoid;
                            break-inside: avoid;
                        }
    
                        .footer, .end-of-page, .print-buffer {
                            display: none !important;
                        }
                    }
                </style>
            `);
    
            printWindow.document.write('</head><body>');
    
            printWindow.document.write(`
                <img src="${watermarkURL}" class="watermark wm1">
                <img src="${watermarkURL}" class="watermark wm2">
                <img src="${watermarkURL}" class="watermark wm3">
                <img src="${watermarkURL}" class="watermark wm4">
            `);
    
            printWindow.document.write('<div class="print-content">');
            printWindow.document.write(content);
            printWindow.document.write('</div></body></html>');
    
            printWindow.document.close();
    
            printWindow.onload = function () {
                printWindow.focus();
                printWindow.print();
                printWindow.close();
            };
        }
</script>
</html>
