@extends('layouts.app')

@section('title', 'New Booking | Saai Cards')

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="flex justify-between items-center mb-xl">
        <div>
            <h2 class="font-headline-md text-headline-md text-on-surface">Create Quotation Booking</h2>
            <p class="font-body-md text-body-md text-secondary">Fill in the details below to create a new quotation booking.</p>
        </div>
        <a href="{{ route('bookings.index', ['type' => 'Quotation Booking']) }}" class="px-lg py-2 border border-outline-variant rounded-xl font-label-md text-label-md text-secondary hover:bg-surface-container transition-colors inline-block text-center">Back to List</a>
    </div>

    {{-- ===== QUOTATION BOOKING FORM ===== --}}
    <form action="{{ route('bookings.store') }}" method="POST" id="quotationForm" class="bg-surface-container-lowest rounded-xl custom-shadow border border-surface-container p-xl">
        @csrf
        <input type="hidden" name="booking_type" value="Quotation Booking">
        <input type="hidden" name="booking_no" value="{{ $booking_no ?? 'BK-'.time() }}">
        <input type="hidden" name="status" value="Pending">

        <div class="space-y-md">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Date</label>
                <div class="md:col-span-2">
                    <input type="date" class="w-full bg-white border border-outline-variant rounded-lg px-md py-sm text-body-md focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all outline-none" id="quot_booking_date" name="booking_date" value="{{ date('Y-m-d') }}" required>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Customer <span class="text-error">*</span></label>
                <div class="md:col-span-2">
                    <select class="w-full select2-tw bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="customer_id" id="quot_customer_id" required>
                        <option value="">Select Customer</option>
                        <option value="walkin" class="text-primary font-bold font-semibold bg-primary/10">Walk-in Customer</option>
                        @foreach($customers as $cust)
                            <option value="{{ $cust->id }}" data-address="{{ $cust->address }}" data-mobile="{{ $cust->mobile }}">{{ $cust->name }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-secondary">Add customers from the Customers menu first.</p>
                </div>
            </div>

            {{-- Walk-in Customer Fields --}}
            <div id="quotWalkinFields" class="hidden grid-cols-1 md:grid-cols-3 gap-md items-center bg-surface-container-low px-md py-sm border border-outline-variant rounded-lg">
                <div class="md:col-start-2 md:col-span-2 space-y-2">
                    <input type="text" name="walkin_name" id="quot_walkin_name" class="w-full bg-white border border-outline-variant rounded-lg px-md py-sm text-body-md outline-none" placeholder="Walk-in Name *">
                    <input type="text" name="walkin_mobile" class="w-full bg-white border border-outline-variant rounded-lg px-md py-sm text-body-md outline-none" placeholder="Mobile">
                    <input type="text" name="walkin_address" class="w-full bg-white border border-outline-variant rounded-lg px-md py-sm text-body-md outline-none" placeholder="Address">
                </div>
            </div>

            <div id="quotCustomerInfo" class="hidden grid-cols-1 md:grid-cols-3 gap-md items-start">
                <label class="font-label-md text-label-md text-on-surface-variant md:text-right pt-1">Customer Info</label>
                <div class="md:col-span-2 text-body-md text-on-surface-variant bg-surface-container-low rounded-lg px-md py-sm border border-outline-variant/30">
                    <div><strong>Address:</strong> <span id="quot_info_address">-</span></div>
                    <div><strong>Mobile:</strong> <span id="quot_info_mobile">-</span></div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Category Name</label>
                <div class="md:col-span-2">
                    <select class="w-full select2-tw price-field bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="category_id" id="quot_category_id" required>
                        <option value="" data-price="0" data-name="">Select Category</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" data-price="{{ $cat->price ?? 0 }}" data-name="{{ $cat->name }}">{{ $cat->name }} (Rs.{{ number_format($cat->price ?? 0, 2) }})</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div id="quotDependentFields" class="space-y-md">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Print Paper Size</label>
                    <div class="md:col-span-2">
                        <select class="w-full select2-tw price-field bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="paper_size_id" id="quot_paper_size_id">
                            <option value="" data-price="0" data-name="">Select Size</option>
                            @foreach($paperSizes as $ps)
                                <option value="{{ $ps->id }}" data-price="{{ $ps->price ?? 0 }}" data-name="{{ $ps->name }}">{{ $ps->name }} (Rs.{{ number_format($ps->price ?? 0, 2) }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">GSM</label>
                    <div class="md:col-span-2">
                        <select class="w-full select2-tw price-field bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="paper_gsm_id" id="quot_paper_gsm_id">
                            <option value="" data-price="0" data-name="">Select</option>
                            @foreach($paperGsms as $gsm)
                                <option value="{{ $gsm->id }}" data-price="{{ $gsm->price ?? 0 }}" data-name="{{ $gsm->name }}">{{ $gsm->name }} (Rs.{{ number_format($gsm->price ?? 0, 2) }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Print Type</label>
                    <div class="md:col-span-2">
                        <select class="w-full select2-tw price-field bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="print_type_id">
                            <option value="" data-price="0">Select</option>
                            @foreach($printTypes as $item)
                                <option value="{{ $item->id }}" data-price="{{ $item->price ?? 0 }}">{{ $item->name }} (Rs.{{ number_format($item->price ?? 0, 2) }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Lamination</label>
                    <div class="md:col-span-2">
                        <select class="w-full select2-tw price-field bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="lamination_id">
                            <option value="" data-price="0">NONE</option>
                            @foreach($laminations as $item)
                                <option value="{{ $item->id }}" data-price="{{ $item->price ?? 0 }}">{{ $item->name }} (Rs.{{ number_format($item->price ?? 0, 2) }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Lamination Side</label>
                    <div class="md:col-span-2">
                        <select class="w-full select2-tw price-field bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="lamination_side_id">
                            <option value="" data-price="0">NONE</option>
                            @foreach($laminationSides as $item)
                                <option value="{{ $item->id }}" data-price="{{ $item->price ?? 0 }}">{{ $item->name }} (Rs.{{ number_format($item->price ?? 0, 2) }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div id="quotBillBookFields" class="space-y-md hidden">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                        <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Carbon Copy</label>
                        <div class="md:col-span-2">
                            <select class="w-full select2-tw price-field bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="carbon_copy" id="quot_carbon_copy">
                                <option value="" data-price="0">Select</option>
                                @foreach($carbonCopies as $cc)
                                    <option value="{{ $cc->name }}" data-price="{{ $cc->price ?? 0 }}">{{ $cc->name }} (Rs.{{ number_format($cc->price ?? 0, 2) }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                        <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Binding</label>
                        <div class="md:col-span-2">
                            <select class="w-full select2-tw price-field bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="bill_binding" id="quot_bill_binding">
                                <option value="" data-price="0">Select</option>
                                @foreach($bindings as $bind)
                                    <option value="{{ $bind->name }}" data-price="{{ $bind->price ?? 0 }}">{{ $bind->name }} (Rs.{{ number_format($bind->price ?? 0, 2) }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Quantity</label>
                    <div class="md:col-span-2">
                        <input type="number" class="w-full bg-white border border-on-surface rounded-sm px-md py-sm text-body-md font-bold focus:border-primary focus:ring-1 focus:ring-primary outline-none" name="quantity" id="quot_quantity" value="200" min="1" required>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-start">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right pt-sm">Enter Job Name <span class="text-error">*</span></label>
                    <div class="md:col-span-2">
                        <textarea class="w-full bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all outline-none resize-none h-24" name="job_name" placeholder="Ex:INVITATION CARDS ABC SIZE" required></textarea>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-start pt-md">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right pt-1">Price Breakup</label>
                    <div class="md:col-span-2">
                        <div id="quot_price_breakdown" class="bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md text-on-surface-variant space-y-1 text-sm">
                            <div>Select options to see pricing</div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Unit Total</label>
                    <div class="md:col-span-2">
                        <input type="text" id="quot_unit_price_display" class="w-full bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md font-bold" value="Rs.0.00" readonly>
                        <p class="mt-1 text-xs text-secondary">Sum of all selected master prices</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center mt-md pt-md border-t border-outline-variant/30">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Discount (Rs.)</label>
                    <div class="md:col-span-2">
                        <input type="number" step="0.01" class="w-full bg-white border border-outline-variant rounded-lg px-md py-sm text-body-md focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all outline-none price-calc" name="discount" id="quot_discount" value="0">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">GST (%)</label>
                    <div class="md:col-span-2">
                        <input type="number" step="0.1" class="w-full bg-white border border-outline-variant rounded-lg px-md py-sm text-body-md focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all outline-none price-calc" name="gst_percentage" id="quot_gst_percentage" value="0">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center border-t border-outline-variant/30 pt-md mt-md">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Advance Amount (Rs.)</label>
                    <div class="md:col-span-2">
                        <input type="number" step="0.01" class="w-full bg-white border border-outline-variant rounded-lg px-md py-sm text-body-md focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all outline-none" name="advance_amount" id="quot_advance_amount" value="0">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Payment Mode</label>
                    <div class="md:col-span-2">
                        <select class="w-full bg-surface-container-low border border-outline-variant/50 rounded-lg px-md py-sm text-body-md" name="payment_mode" id="quot_payment_mode">
                            <option value="">Select Mode</option>
                            <option value="Cash">Cash</option>
                            <option value="DD">DD</option>
                            <option value="UPI">UPI</option>
                            <option value="Bank Transfer">Bank Transfer</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center border-t border-outline-variant/30 pt-md mt-md">
                    <label class="font-label-md text-label-md text-on-surface-variant md:text-right">Final Amount *</label>
                    <div class="md:col-span-2">
                        <input type="number" step="0.01" class="w-full bg-white border border-outline-variant rounded-lg px-md py-sm text-body-md focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all outline-none font-bold" name="grand_total" id="quot_grand_total" required>
                        <p class="mt-1 text-xs text-secondary">Auto: Unit Total x Quantity (editable)</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-md items-center pt-lg mt-lg border-t border-surface-container">
            <div class="md:col-start-2 flex gap-md">
                <button type="submit" class="bg-primary border border-primary text-on-primary px-xl py-sm rounded font-bold hover:brightness-110 transition-all shadow-sm">Book Now</button>
                <button type="button" class="bg-[#2980b9] border border-[#2980b9] text-white px-xl py-sm rounded font-bold hover:bg-[#3498db] transition-all shadow-sm" onclick="document.getElementById('quotationForm').reset();quotCalcAmount();">Refresh</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    var depMap = {
        'Invitations':{sizes:['A4','A3','22.5" X 11.5"','DEMI','A4 - ROYAL','A3 - ROYAL','DEMI ROYAL','24.5" X 11.5"','20" X 30"','14.5"X19.5" / 29"X9"','19"X7" / 14"X9.5"','35"x11" (or) 22"x17.5"'],gsms:['60 Gsm Maplitho','70 Gsm Maplitho','80 Gsm Maplitho','90 Gsm Maplitho','120 Gsm Maplitho','100 Gsm Art Paper','105 Gsm Art Paper','130 Gsm Art Paper','170 Gsm Art Paper','220 Gsm Art Board','250 Gsm Art Board','300 Gsm Art Board','350 Gsm Art Board']},
        'Invitation Covers':{sizes:['Cover A4'],gsms:['70 Gsm Maplitho','80 Gsm Maplitho','100 Gsm Art Paper','105 Gsm Art Paper','130 Gsm Art Paper','170 Gsm Art Paper','220 Gsm Art Board','250 Gsm Art Board','300 Gsm Art Board']},
        'Office Covers':{sizes:['Cover A4','Cover 10.5" x 4.5"','Cover 9" x 4"','Cover 6" x 4"'],gsms:['60 Gsm Maplitho','70 Gsm Maplitho','80 Gsm Maplitho','90 Gsm Maplitho','120 Gsm Maplitho','100 Gsm Art Paper','105 Gsm Art Paper','130 Gsm Art Paper','170 Gsm Art Paper']},
        'Brouchre':{sizes:['A3','22.5" X 11.5"','DEMI','A3 - ROYAL','DEMI ROYAL','20" X 30"','14.5"X19.5" / 29"X9"','19"X7" / 14"X9.5"','A4','A4 - ROYAL','28" X 40"','35"x11" (or) 22"x17.5"'],gsms:['60 Gsm Maplitho','70 Gsm Maplitho','80 Gsm Maplitho','90 Gsm Maplitho','120 Gsm Maplitho','100 Gsm Art Paper','105 Gsm Art Paper','130 Gsm Art Paper','170 Gsm Art Paper','80 Gsm Bond Paper','100 Gsm Bond Paper']},
        'Catalogues':{sizes:['A3','22.5" X 11.5"','DEMI','A3 - ROYAL','DEMI ROYAL','24.5" X 11.5"','14.5"X19.5" / 29"X9"','19"X7" / 14"X9.5"','22" X 28"','21.5" X 13.5"','A4','A4 - ROYAL','28" X 40"'],gsms:['170 Gsm Art Paper','220 Gsm Art Board','250 Gsm Art Board','300 Gsm Art Board']},
        'Letter Head':{sizes:['A4 Bond (210 X 280)','A4 Bond Royal (210 X 297)'],gsms:['80 Gsm Bond Paper','100 Gsm Bond Paper']},
        'Sticker':{sizes:['Sticker - Demi Royal','Sticker - A4','Sticker - A3','Sticker - Demi','Sticker - 15" x 20"','Sticker - 20" x 30"'],gsms:['Sticker Chrome Art (20" X 30" / 23" X 36")','Sticker Mirror Coat (23" X 36")']},
        'Calendars':{sizes:['DEMI','20" X 30"','DEMI ROYAL','28" X 40"'],gsms:['60 Gsm Maplitho','70 Gsm Maplitho','80 Gsm Maplitho','90 Gsm Maplitho','120 Gsm Maplitho','100 Gsm Art Paper','105 Gsm Art Paper','130 Gsm Art Paper','170 Gsm Art Paper','220 Gsm Art Board','250 Gsm Art Board','300 Gsm Art Board','350 Gsm Art Board']},
        'Bill Book':{sizes:['A4','A3','DEMI','A4 - ROYAL','A3 - ROYAL','DEMI ROYAL'],gsms:['60 Gsm Maplitho','70 Gsm Maplitho','80 Gsm Maplitho','90 Gsm Maplitho','120 Gsm Maplitho','100 Gsm Art Paper','105 Gsm Art Paper','130 Gsm Art Paper']}
    };

    var qCatSel  = document.querySelector('#quotationForm [name="category_id"]');
    var qSizeSel = document.getElementById('quot_paper_size_id');
    var qGsmSel  = document.getElementById('quot_paper_gsm_id');
    var qQtyInp  = document.getElementById('quot_quantity');
    var qGT      = document.getElementById('quot_grand_total');
    var qUD      = document.getElementById('quot_unit_price_display');
    var qBBF     = document.getElementById('quotBillBookFields');
    var qBD      = document.getElementById('quot_price_breakdown');

    var pFields = {paper_size_id:'Paper Size',paper_gsm_id:'GSM',print_type_id:'Print Type',lamination_id:'Lamination',lamination_side_id:'Lamination Side',carbon_copy:'Carbon Copy',bill_binding:'Binding'};

    function qCN(){ var o=qCatSel&&qCatSel.options[qCatSel.selectedIndex]; return (o&&o.dataset&&o.dataset.name)?o.dataset.name:''; }
    function qP(el){ if(!el||!el.value)return 0; return parseFloat((el.options[el.selectedIndex]&&el.options[el.selectedIndex].dataset.price)||0)||0; }
    function qL(el){ if(!el||!el.value)return ''; var o=el.options[el.selectedIndex]; return (o&&o.dataset&&o.dataset.name)?o.dataset.name:(o?o.text.replace(/\s*\(Rs\..*\)$/,''):''); }

    function quotCalcAmount(){
        var ut=0,lines=[];
        Object.keys(pFields).forEach(function(n){
            var el=document.querySelector('#quotationForm [name="'+n+'"]');
            if(!el)return;
            if((n==='carbon_copy'||n==='bill_binding')&&qBBF.classList.contains('hidden'))return;
            if(!el.value)return;
            var p=qP(el); ut+=p;
            lines.push('<div class="flex justify-between gap-2"><span>'+pFields[n]+': '+qL(el)+'</span><span class="font-semibold text-on-surface">Rs.'+p.toFixed(2)+'</span></div>');
        });
        var qty=parseFloat(qQtyInp?qQtyInp.value:0)||0;
        var disc=parseFloat(document.getElementById('quot_discount')?document.getElementById('quot_discount').value:0)||0;
        var gst=parseFloat(document.getElementById('quot_gst_percentage')?document.getElementById('quot_gst_percentage').value:0)||0;
        qUD.value='Rs.'+ut.toFixed(2);
        var sub=ut*qty-disc;
        if(qGT)qGT.value=(sub+sub*(gst/100)).toFixed(2);
        if(lines.length){
            lines.push('<div class="flex justify-between gap-2 border-t border-outline-variant/40 pt-1 mt-1"><span class="font-semibold">Unit Total x Qty ('+qty+')</span><span class="font-bold text-primary">Rs.'+(ut*qty).toFixed(2)+'</span></div>');
            qBD.innerHTML=lines.join('');
        } else { qBD.innerHTML='<div>Select options to see pricing</div>'; }
    }
    window.quotCalcAmount=quotCalcAmount;

    function qTBB(){ if(qCN()==='Bill Book'){qBBF.classList.remove('hidden');}else{qBBF.classList.add('hidden');if($('#quot_carbon_copy').length)$('#quot_carbon_copy').val('').trigger('change');if($('#quot_bill_binding').length)$('#quot_bill_binding').val('').trigger('change');} }

    function qON(o){ return (o.dataset&&o.dataset.name)?o.dataset.name:o.text.replace(/\s*\(Rs\..*\)$/,''); }

    function quotUpdateDropdowns(){
        var cn=qCN(), rules=depMap[cn];
        if(qSizeSel){Array.from(qSizeSel.options).forEach(function(o){ if(!o.value){o.hidden=false;o.disabled=false;}else if(rules){var m=rules.sizes.indexOf(qON(o))>=0;o.hidden=!m;o.disabled=!m;}else{o.hidden=true;o.disabled=true;} });qSizeSel.selectedIndex=0;if($(qSizeSel).data('select2'))$(qSizeSel).trigger('change');}
        if(qGsmSel){Array.from(qGsmSel.options).forEach(function(o){ if(!o.value){o.hidden=false;o.disabled=false;}else if(rules){var m=rules.gsms.indexOf(qON(o))>=0;o.hidden=!m;o.disabled=!m;}else{o.hidden=true;o.disabled=true;} });qGsmSel.selectedIndex=0;if($(qGsmSel).data('select2'))$(qGsmSel).trigger('change');}
        qTBB(); quotCalcAmount();
    }

    if(qCatSel)$(qCatSel).on('change',quotUpdateDropdowns);
    if(qQtyInp)$(qQtyInp).on('input change',quotCalcAmount);
    $('#quotationForm .price-field, #quotationForm .price-calc').on('input change',quotCalcAmount);
    quotUpdateDropdowns();

    $('#quot_customer_id').on('change',function(){
        var opt=this.options[this.selectedIndex];
        if(this.value === 'walkin') {
            document.getElementById('quotWalkinFields').classList.remove('hidden');
            document.getElementById('quotWalkinFields').classList.add('grid');
            document.getElementById('quot_walkin_name').required = true;
            var ci=document.getElementById('quotCustomerInfo');
            ci.classList.add('hidden');ci.classList.remove('grid');
        } else if(this.value){
            document.getElementById('quotWalkinFields').classList.add('hidden');
            document.getElementById('quotWalkinFields').classList.remove('grid');
            document.getElementById('quot_walkin_name').required = false;
            document.getElementById('quot_info_address').textContent=opt.dataset.address||'-';
            document.getElementById('quot_info_mobile').textContent=opt.dataset.mobile||'-';
            var ci=document.getElementById('quotCustomerInfo');
            ci.classList.remove('hidden');ci.classList.add('grid');
        } else {
            document.getElementById('quotWalkinFields').classList.add('hidden');
            document.getElementById('quotWalkinFields').classList.remove('grid');
            document.getElementById('quot_walkin_name').required = false;
            var ci=document.getElementById('quotCustomerInfo');
            ci.classList.add('hidden');ci.classList.remove('grid');
        }
    });

});
</script>
@endpush