@extends('template.app') 

@section('meta')
    
@endsection

@section('styles')
    <link href="{{ asset('assets/css/dropify.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/sweetalert2.bundle.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/select2.css') }}" rel="stylesheet">

    <style type="text/css">
        .card-body {
            padding: 0.25rem!important;
            align-content: center!important;;
            border: 1px solid white!important;;
            border-radius: 15px!important;;
        }
        body {
            font-family: Arial, sans-serif;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            color: black;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
            line-height: 1.8;
        }
        th {
            background-color: #f2f2f2;
        }
        .right-align {
            text-align: right;
        }
        .final-deal {
            background-color: lightgray;
            font-weight: bold;
        }
        .light_gray{
            background-color: lightgray;
        }
        .text-center {
            text-align: center !important;
        }

        @media print {
            body {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            th, td {
                background-color: inherit !important;
            }
            .final-deal, .light_gray {
                background-color: lightgray !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            .card-body {
                margin-left: -75px;
            }
            .no-print {
                display: none !important;
            }
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield; /* For Firefox */
        }

        .form-group {
            margin-bottom: 0rem!important;
        }

    </style>
    <style>
        /* Prevent content from being cut between pages */
        #content-to-print {
            width: 100%;
        }
        
        /* Force breaks where needed */
        .page-break {
            page-break-before: always;
        }
        
        /* Optional: Prevent breaking inside images or headings */
        img, h3, h4, h5 {
            page-break-inside: avoid;
        }
    </style>
@endsection

@section('content')
    <div class="page-breadcrumb">
        <div class="row">
            <div class="col-7 align-self-center">
                <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Make Deal</h4>
                <div class="d-flex align-items-center">
                    <nav aria-label="breadcrumb" class="d-flex justify-content-between align-items-center">
                        <ol class="breadcrumb m-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('obf_completed') }}" class="text-muted">Order Completed</a></li>
                            <li class="breadcrumb-item text-muted active" aria-current="page">Docket PDF</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="col-5 align-self-center">
                <div class="customize-input float-right">
                    <button id="pdfBtn" style="background-color: green; color: white; margin-left: -130px; border: none; cursor: pointer; border-radius: 5px; font-size:22px;">
                        <i class="fa-solid fa-download" style="margin-right: 5px;"></i> PDF
                    </button>
                </div>
            </div>
        </div>    
    
        <div class="container-fluid" id="content-to-print">
            
            @include('obf_completed.partials.make_deal')
            
            <div class="mt-2"></div>

            @include('obf_completed.partials.summary')
            
            <div class="mt-2"></div>
            
            @include('obf_completed.partials.personal_details_pics')
        </div> 
    </div>    
@endsection

@section('scripts') 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function () {
            $('#pdfBtn').on('click', function () {
                const element = document.getElementById('content-to-print');

                const opt = {
                    margin:       0,                 // No extra margin
                    filename:     'Docket.pdf',
                    image:        { type: 'jpeg', quality: 0.98 },
                    html2canvas:  { scale: 2, useCORS: true }, // High quality + fix for images
                    jsPDF:        { orientation: 'portrait', unit: 'pt', format: 'a4', compressPDF: true },
                    pagebreak:    { mode: ['css', 'legacy'] } // Handle multi-page content automatically
                };
            
                // Auto page-breaks using CSS
                html2pdf().set(opt).from(element).save();
            });
            
            
            //For GST Calculation For Purchase Price
            var purchase_price = parseFloat(jQuery('.purchase_price').text().replace(/,/g, '')) || 0;
            var hidden_gst_tax = parseFloat(jQuery('#hidden_gst_tax').val()) || 0;
            var purchase_gst_calculation = purchase_price * hidden_gst_tax / 100;
            purchase_gst_calculation = Math.round(purchase_gst_calculation);
            jQuery('#purchase_gst_tax_deal').val(purchase_gst_calculation);

            //For Get Total On Road Price With Extended Warranty
            var ex_showroom_price = parseFloat(jQuery('.ex_showroom_price').text().replace(/,/g, '')) || 0;
            var gst_price = parseFloat(jQuery('.gst_price').text().replace(/,/g, '')) || 0;
            var cess_price = parseFloat(jQuery('.cess_price').text().replace(/,/g, '')) || 0;
            var tcs_price = parseFloat(jQuery('.tcs_price').text().replace(/,/g, '')) || 0;
            var municipal_price = parseFloat(jQuery('.municipal_price').text().replace(/,/g, '')) || 0;
            var municipal_custom_handling_charges = parseFloat(jQuery('.municipal_custom_handling_charges').text().replace(/,/g, '')) || 0;
            var rto_price = parseFloat(jQuery('.rto_price').text().replace(/,/g, '')) || 0;
            var rto_custom_handling_charges_price = parseFloat(jQuery('.rto_custom_handling_charges_price').text().replace(/,/g, '')) || 0;
            var insurance_price = parseFloat(jQuery('.insurance_price').text().replace(/,/g, '')) || 0;
            var fastage_price = parseFloat(jQuery('.fastage_price').text().replace(/,/g, '')) || 0;
            var extended_warranty = parseFloat(jQuery('.extended_warranty').text().replace(/,/g, '')) || 0;
            var accessories_price = parseFloat(jQuery('.accessories_price').text().replace(/,/g, '')) || 0;
            var rsa_price = parseFloat(jQuery('.rsa_price').text().replace(/,/g, '')) || 0;
            var mcp_price = parseFloat(jQuery('.mcp_price').text().replace(/,/g, '')) || 0;
            var other_price = parseFloat(jQuery('.other_price').text().replace(/,/g, '')) || 0;

            var final_on_road_price = ex_showroom_price + gst_price + cess_price + tcs_price + municipal_price + municipal_custom_handling_charges + rto_price + rto_custom_handling_charges_price + insurance_price + fastage_price + extended_warranty + accessories_price + rsa_price + mcp_price + other_price;
            jQuery('.on_road_price').text(final_on_road_price.toLocaleString());


            var on_road_price = parseFloat(jQuery('.on_road_price').text().replace(/,/g, '')) || 0;
            var final_deal_amt = parseFloat(jQuery('.final_deal_amt').text().replace(/,/g, '')) || 0;
            var difference = on_road_price - final_deal_amt;
            jQuery('.diff_amount').text(difference.toLocaleString());

            jQuery('.final_deal_deal').text(final_deal_amt);
            
            
            var ex_showroom_price_deal = parseFloat(jQuery('.ex_showroom_price_deal').text().replace(/,/g, '')) || 0;
            var gst_tax_deal = parseFloat(jQuery('.gst_tax_deal').text().replace(/,/g, '')) || 0;
            var cess_tax_deal = parseFloat(jQuery('.cess_tax_deal').text().replace(/,/g, '')) || 0;
            var tcs_tax_deal = parseFloat(jQuery('.tcs_tax_deal').text().replace(/,/g, '')) || 0;
            var municipal_tax_deal = parseFloat(jQuery('.municipal_tax_deal').text().replace(/,/g, '')) || 0;
            var municipal_custom_handling_charges_deal = parseFloat(jQuery('.municipal_custom_handling_charges_deal').text().replace(/,/g, '')) || 0;
            var rto_deal = parseFloat(jQuery('.rto_deal').text().replace(/,/g, '')) || 0;
            var rto_custom_handling_charges_deal = parseFloat(jQuery('.rto_custom_handling_charges_deal').text().replace(/,/g, '')) || 0;
            var insurance_deal = parseFloat(jQuery('.insurance_deal').text().replace(/,/g, '')) || 0;
            var fastage_amt_deal = parseFloat(jQuery('.fastage_amt_deal').text().replace(/,/g, '')) || 0;
            var ew_deal = parseFloat(jQuery('.ew_deal').text().replace(/,/g, '')) || 0;
            var accessories_deal = parseFloat(jQuery('.accessories_deal').text().replace(/,/g, '')) || 0;
            var rsa_deal = parseFloat(jQuery('.rsa_deal').text().replace(/,/g, '')) || 0;
            var mcp_deal = parseFloat(jQuery('.mcp_deal').text().replace(/,/g, '')) || 0;
            var other_deal = parseFloat(jQuery('.other_deal').text().replace(/,/g, '')) || 0;

            var on_road_price = ex_showroom_price_deal + gst_tax_deal + cess_tax_deal + tcs_tax_deal + municipal_tax_deal + municipal_custom_handling_charges_deal + rto_deal + rto_custom_handling_charges_deal + insurance_deal + fastage_amt_deal + ew_deal + accessories_deal + rsa_deal + mcp_deal + other_deal;
            jQuery('.on_road_price_deal').text(on_road_price.toLocaleString());

            //For Deal Side Showing Difference
            var on_road_price_deal = parseFloat(jQuery('.on_road_price_deal').text().replace(/,/g, '')) || 0;
            var final_deal_deal = parseFloat(jQuery('.final_deal_deal').text().replace(/,/g, '')) || 0;
            var deal_difference = on_road_price_deal - final_deal_deal;
            jQuery('.diff_amount_deal').text(deal_difference.toLocaleString());
        });
    </script>
@endsection