{{-- resources/views/backend/orders/details_ajax.blade.php --}}
<style>
    /* Drawer Specific Compact Styles */
    .drawer-form-label { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 2px; text-transform: uppercase; }
    .drawer-form-control { font-size: 12px; padding: 6px 10px; border-radius: 6px; border-color: #cbd5e1; }
    .drawer-form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.1); }
    .drawer-section { background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 15px; }
    .drawer-product-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
    .select2-container--default .select2-selection--single { border: 1px solid #cbd5e1; border-radius: 6px; height: 32px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px; font-size: 12px; }
    .ui-autocomplete { z-index: 9999999 !important; max-height: 200px; overflow-y: auto; font-size: 12px; }
</style>

{{-- Form tag with NO action or method to completely block native submission --}}
<form id="drawer_edit_form">
    @csrf
    @method('PUT')
    
    <div class="d-flex justify-content-between align-items-center mb-3 pb-2" style="border-bottom: 1px dashed #cbd5e1;">
        <h6 class="m-0 fw-bold text-primary">Invoice #{{ $order->invoice_no }}</h6>
        <span class="badge bg-light text-dark border"><i class="mdi mdi-clock-outline"></i> {{ $order->created_at->format('d M, h:i A') }}</span>
    </div>

    {{-- 1. Status & Basic Info --}}
    <div class="row g-2 mb-3">
        <div class="col-6">
            <label class="drawer-form-label">Order Status</label>
            <select class="form-select drawer-form-control" name="status">
                @foreach($status as $key => $s)
                    <option value="{{ $key }}" {{ $key == $order->status ? 'selected' : '' }}>{{ $s }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-6">
            <label class="drawer-form-label">Order Date</label>
            <input type="date" class="form-control drawer-form-control" value="{{ $order->date ?? $order->created_at->format('Y-m-d') }}" name="date" required/>
        </div>
    </div>

    {{-- 2. Customer Info --}}
    <div class="drawer-section">
        <div class="row g-2">
            <div class="col-12">
                <label class="drawer-form-label">Customer Name</label>
                <input type="text" class="form-control drawer-form-control" value="{{ trim($order->first_name.' '.$order->last_name) }}" name="first_name" required/>
            </div>
            <div class="col-12">
                <label class="drawer-form-label">Mobile Number</label>
                <input type="text" class="form-control drawer-form-control" value="{{ $order->mobile }}" name="mobile" required/>
            </div>
            <div class="col-12">
                <label class="drawer-form-label">Shipping Address</label>
                <textarea rows="2" name="shipping_address" id="drawer_shipping_address" class="form-control drawer-form-control" required>{{ $order->shipping_address }}</textarea>
            </div>
        </div>
    </div>

    {{-- 3. Customer Previous Order History Section --}}
    <div class="drawer-section mt-2" style="border: 1px solid #cce5ff; background: #f8fbff; margin-bottom: 10px;">
        <div class="d-flex justify-content-between align-items-center mb-1">
            <h6 class="fw-bold text-primary m-0" style="font-size: 11px; text-transform: uppercase;">
                <i class="mdi mdi-history"></i> Previous Order History
            </h6>
        </div>
        <div id="drawer_customer_history" style="max-height: 250px; overflow-y: auto;">
            <div class="text-center text-muted" style="font-size: 11px; padding: 10px 0;">
                <i class="mdi mdi-spin mdi-loading fs-5"></i><br>
                Loading history...
            </div>
        </div>
    </div>

    {{-- 4. Fraud Check Auto Load Section --}}
    <div class="drawer-section mt-2" style="border: 1px dashed #f5c6cb; background: #fffafb;">
        <div class="d-flex justify-content-between align-items-center mb-1">
            <h6 class="fw-bold text-danger m-0" style="font-size: 11px; text-transform: uppercase;">
                <i class="mdi mdi-shield-alert"></i> Courier History (Fraud Check)
            </h6>
        </div>
        <div id="drawer_fraud_result">
            <div class="text-center text-muted" style="font-size: 11px; padding: 10px 0;">
                <i class="mdi mdi-spin mdi-loading fs-5"></i><br>
                Fetching data from API...
            </div>
        </div>
    </div>

    {{-- 5. Product Section --}}
    <h6 class="fw-bold text-muted mb-2" style="font-size: 11px; text-transform: uppercase;">Products</h6>
    <div class="mb-2 position-relative">
        <input type="text" id="drawer_product_search" class="form-control drawer-form-control" placeholder="🔍 Search to add product...">
    </div>

    <div id="drawer_product_list">
        @foreach($order->details as $line)
            @php
                $product   = $line->product;
                $variants  = $product->variations ?? collect();
                $selectedV = $line->variation;
                $priceNow  = $line->unit_price;
                $lineTotal = $priceNow * $line->quantity;
            @endphp
            <div class="drawer-product-card drawer-product-row">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div class="d-flex gap-2">
                        <img src="{{ function_exists('getImage') ? getImage('products', $product?->image ?? 'default-product.png') : asset('uploads/products/'.($product?->image ?? 'default-product.png')) }}" style="width: 40px; height: 40px; border-radius: 4px; object-fit: cover;">
                        <div>
                            <div class="fw-bold text-dark" style="font-size: 12px; line-height: 1.2;">{{ $product?->name ?? 'Product Not Found' }}</div>
                            <div class="text-muted" style="font-size: 10px;">SKU: {{ $product?->sku ?? 'N/A' }}</div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm text-danger p-0 remove-drawer-product"><i class="mdi mdi-close-circle fs-5"></i></button>
                </div>
                
                <div class="row g-2 align-items-end">
                    <div class="col-12">
                        @if($variants->count() > 0)
                            <select class="form-select drawer-form-control drawer-variant-select" name="variant_display[]">
                                @foreach($variants as $v)
                                    @php
                                        $text = $v->display_title ?? trim(($v->size_label ?? $v->size ?? '') . (($v->color_label ?? $v->color ?? '') ? ' - ' . ($v->color_label ?? $v->color) : '')) ?: 'Default';
                                        $vPrice = $v->discount_price ?? $v->price ?? $priceNow;
                                    @endphp
                                    <option value="{{ $v->id }}" data-price="{{ $vPrice }}" {{ $selectedV && $selectedV->id === $v->id ? 'selected' : '' }}>
                                        {{ $text }}
                                    </option>
                                @endforeach
                            </select>
                        @else
                            <div class="text-muted" style="font-size:11px;">No Variants</div>
                        @endif
                        <input type="hidden" name="variation_id[]" class="drawer-hidden-variation-id" value="{{ $line->variation_id }}"/>
                        <input type="hidden" name="order_line_id[]" value="{{ $line->id }}"/>
                        <input type="hidden" name="product_id[]" value="{{ $line->product_id }}"/>
                        <input type="hidden" name="is_stock" value="{{ $product?->is_stock ?? 1 }}">
                    </div>
                    
                    <div class="col-4">
                        <label class="drawer-form-label">Qty</label>
                        <input type="number" class="form-control drawer-form-control drawer-qty" name="quantity[]" value="{{ $line->quantity }}" min="1" required>
                    </div>
                    <div class="col-4">
                        <label class="drawer-form-label">Price</label>
                        <input type="number" class="form-control drawer-form-control drawer-price" name="unit_price[]" value="{{ $priceNow }}" step="0.01" required>
                    </div>
                    <div class="col-4 text-end pb-1">
                        <div class="fw-bold text-dark">৳ <span class="drawer-row-total">{{ number_format($lineTotal, 2, '.', '') }}</span></div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- 6. Courier & Calculation --}}
    <div class="drawer-section mt-3">
        <div class="row g-2 mb-2">
            <div class="col-6">
                <label class="drawer-form-label">Delivery Charge</label>
                <select class="form-select drawer-form-control" name="delivery_charge_id" id="drawer_delivery_charge">
                    <option value="" data-charge="0">Select One</option>
                    @foreach($charges as $charge)
                        <option value="{{ $charge->id }}" {{ $charge->id == $order->delivery_charge_id ? 'selected' : '' }} data-charge="{{ $charge->amount }}">{{ $charge->title }} (৳{{$charge->amount}})</option>
                    @endforeach
                </select>
                <input type="hidden" value="{{ $order->shipping_charge ?? 0 }}" name="shipping_charge" id="drawer_shipping_charge_val"/>
            </div>
            <div class="col-6">
                <label class="drawer-form-label">Courier Service</label>
                <select class="form-select drawer-form-control" name="courier_id" id="drawer_courier_select">
                    <option value="" data-charge="0">Select One</option>
                    @foreach($couriers as $courier)
                        <option value="{{ $courier->id }}" {{ $courier->id == $order->courier_id ? 'selected' : '' }}>{{ $courier->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Redx Extra --}}
        <div class="row g-2 mt-1 drawer-for-redx {{ $order->courier_id != 1 ? 'd-none' : '' }}">
            <div class="col-12">
                <label class="drawer-form-label text-danger">Redx Area</label>
                <select class="form-control select2-drawer" id="drawer_area_select" style="width: 100%;">
                    <option value="">Select Area</option>
                    @if($areas!==null)
                        @foreach($areas as $area)
                            <option value="{{ $area['id'] }}" {{ $order->area_id == $area['id'] ? 'selected' : '' }}>{{ $area['name'] }}</option>
                        @endforeach
                    @endif
                </select>
                <input type="hidden" id="drawer_area_id" name="redx_area_id" value="{{ $order->area_id }}"/>
                <input type="hidden" id="drawer_area_name" name="area_name" value="{{ $order->area_name }}"/>
            </div>
        </div>

        {{-- Pathao Extra --}}
        <div class="drawer-for-pathao {{ $order->courier_id != 2 ? 'd-none' : '' }} mt-2">
            <label class="drawer-form-label text-danger">Pathao Delivery Info</label>
            <div class="row g-2">
                <div class="col-12">
                    <select class="form-select drawer-form-control" id="drawer_city_select" name="city">
                        <option value="">Select City</option>
                        @foreach($cities as $city)
                            <option value="{{ $city['city_id'] }}" {{ $order->city == $city['city_id'] ? 'selected' : '' }}>{{ $city['city_name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6">
                    <select class="form-select drawer-form-control" id="drawer_zone_select" name="state">
                        <option value="{{ $order->state }}">Zone Selected</option>
                    </select>
                </div>
                <div class="col-6">
                    <select class="form-select drawer-form-control" id="drawer_pathao_area_id" name="pathao_area_id">
                        <option value="{{ $order->area_id }}">Area Selected</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="mt-2">
            <label class="drawer-form-label">Note (Optional)</label>
            <textarea class="form-control drawer-form-control" name="note" rows="1">{{ $order->note }}</textarea>
        </div>

        <hr style="border-color: #cbd5e1; margin: 15px 0;">
        
        <div class="d-flex justify-content-between align-items-center">
            <div class="text-muted fw-bold">Grand Total</div>
            <div class="fs-4 fw-bold text-dark">৳ <span id="drawer_grand_total">{{ (int)$order->final_amount }}</span></div>
            <input type="hidden" name="final_amount" id="drawer_final_amount_input" value="{{ $order->final_amount }}">
            <input type="hidden" name="discount" value="{{ $order->discount ?? 0 }}">
        </div>
    </div>

    {{-- SUBMIT BUTTON: Added onclick event --}}
    <div class="mt-3">
        <button type="button" onclick="submitOrderForm(this)" class="btn btn-success w-100 fw-bold shadow-sm" style="height: 45px; border-radius: 8px;">
            <i class="mdi mdi-content-save"></i> Save Changes
        </button>
    </div>
</form>

{{-- ===============================================
     DRAWER JAVASCRIPT (LOCALIZED LOGIC)
     =============================================== --}}
<script>
    window.submitOrderForm = function(btnElem) {
        let form = $('#drawer_edit_form');
        let btn = $(btnElem);
        
        if(form.find('.drawer-product-row').length === 0) {
            if (typeof toastr !== 'undefined') toastr.error('Please add at least one product!');
            else alert('Please add at least one product!');
            return;
        }

        $.ajax({
            type: 'POST',
            url: "{{ route('admin.orders.update', $order->id) }}", 
            data: form.serialize(),
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json' 
            },
            beforeSend: function() {
                btn.html('<i class="mdi mdi-spin mdi-loading"></i> Saving...').prop('disabled', true);
            },
            success: function(res) {
                if(res.status) {
                    if (typeof toastr !== 'undefined') toastr.success(res.msg || 'Order updated successfully!');
                    
                    btn.html('<i class="mdi mdi-content-save"></i> Save Changes').prop('disabled', false);
                    
                    if (typeof smartReload === 'function') {
                        smartReload(); 
                    } else if ($('.order_sts:checked').length) {
                        $('.order_sts:checked').trigger('change');
                    } else if ($('#submit_search').length) {
                        $('#submit_search').trigger('click');
                    }
                    
                    if (typeof closeRightPanel === 'function') closeRightPanel(); 
                    else if ($('.offcanvas').length) $('.offcanvas').offcanvas('hide');
                    
                } else {
                    if (typeof toastr !== 'undefined') toastr.error(res.msg || 'Something went wrong!');
                    btn.html('<i class="mdi mdi-content-save"></i> Save Changes').prop('disabled', false);
                }
            },
            error: function(err) {
                btn.html('<i class="mdi mdi-content-save"></i> Save Changes').prop('disabled', false);
                if(err.status === 422) {
                    let errors = err.responseJSON.errors;
                    for(let key in errors) {
                        if (typeof toastr !== 'undefined') toastr.error(errors[key][0]); 
                        else alert(errors[key][0]);
                    }
                } else {
                    if (typeof toastr !== 'undefined') toastr.error('Server error occurred!');
                    else alert('Server error occurred!');
                }
            }
        });
    };

    $(document).ready(function() {
        
        let customerMobile = "{{ $order->mobile }}";
        let historyUrl = "{{ route('admin.orders.customerHistory') }}"; 

        $.ajax({
            url: historyUrl,
            type: 'GET',
            data: { mobile: customerMobile },
            success: function(res) {
                if(res.html) {
                    let compactHtml = res.html.replace('table ', 'table table-sm text-center" style="font-size: 11px; ');
                    $('#drawer_customer_history').html(compactHtml);
                } else {
                    $('#drawer_customer_history').html('<div class="text-center text-muted" style="font-size:11px;">No history found.</div>');
                }
            }
        });

        let orderId = "{{ $order->id }}";
        let fraudUrl = "{{ url('/admin/order/fraud-check') }}/" + orderId; 

        $.ajax({
            url: fraudUrl,
            type: 'GET',
            success: function(response) {
                $('#drawer_fraud_result').html(response);
            }
        });

        if($('.select2-drawer').length) {
            $('.select2-drawer').select2({
                dropdownParent: $('#rightDetailsPanel'),
                width: '100%'
            });
        }

        // --- 4. SECURE CALCULATION LOGIC ---
        function calcDrawerTotal() {
            let itemsTotal = 0;
            
            $('#drawer_edit_form .drawer-product-row').each(function() {
                let qty = parseFloat($(this).find('.drawer-qty').val());
                let price = parseFloat($(this).find('.drawer-price').val());
                
                if (isNaN(qty) || qty < 0) qty = 0;
                if (isNaN(price) || price < 0) price = 0;
                
                let rowTotal = qty * price;
                $(this).find('.drawer-row-total').text(rowTotal.toFixed(2));
                
                itemsTotal += rowTotal;
            });

            // Use .attr('data-charge') to be extra safe against jQuery cache
            let delivery = parseFloat($('#drawer_delivery_charge option:selected').attr('data-charge'));
            if(isNaN(delivery)) delivery = 0;
            $('#drawer_shipping_charge_val').val(delivery);

            // FIX: Removed the discount subtraction to exactly match the edit.blade.php calculation!
            let grandTotal = itemsTotal + delivery;

            $('#drawer_grand_total').text(grandTotal.toFixed(2));
            $('#drawer_final_amount_input').val(grandTotal.toFixed(2));
        }

        // Trigger on load so it syncs immediately
        calcDrawerTotal();

        // --- EVENT DELEGATION ---
        $('#drawer_edit_form').off('input').on('input', '.drawer-qty, .drawer-price', calcDrawerTotal);
        $('#drawer_edit_form').off('change').on('change', '#drawer_delivery_charge', calcDrawerTotal);
        
        $('#drawer_edit_form').on('change', '.drawer-variant-select', function() {
            let $opt = $(this).find('option:selected');
            let price = parseFloat($opt.attr('data-price'));
            if(!isNaN(price)) {
                $(this).closest('.drawer-product-row').find('.drawer-price').val(price);
            }
            $(this).closest('.drawer-product-row').find('.drawer-hidden-variation-id').val($(this).val());
            calcDrawerTotal();
        });

        $('#drawer_edit_form').on('click', '.remove-drawer-product', function() {
            $(this).closest('.drawer-product-row').remove();
            calcDrawerTotal();
        });

        // 5. Courier Toggles
        $('#drawer_courier_select').on('change', function() {
            let val = $(this).val();
            // ✅ Carrybee API or Steadfast (val == 3 or 4) automatically falls into the else block
            // which cleanly hides the extra Redx and Pathao location inputs
            if(val == '1') {
                $('.drawer-for-redx').removeClass('d-none');
                $('.drawer-for-pathao').addClass('d-none');
            } else if(val == '2') {
                $('.drawer-for-pathao').removeClass('d-none');
                $('.drawer-for-redx').addClass('d-none');
            } else {
                $('.drawer-for-redx, .drawer-for-pathao').addClass('d-none');
            }
        });

        // Redx Area Sync
        $('#drawer_area_select').on('change', function() {
            $('#drawer_area_id').val($(this).val());
            $('#drawer_area_name').val($(this).find('option:selected').text());
        });

        // Pathao API Logic (City -> Zone -> Area)
        $('#drawer_city_select').on('change', function() {
            let city = $(this).val();
            let url = "{{ url('/admin/zones-by-city') }}/" + city;
            $('#drawer_zone_select').html("<option value=''>Select Zone</option>");
            $('#drawer_pathao_area_id').html("<option value=''>Select Area</option>");
            if(!city) return;

            $.get(url, function(res) {
                if(res.success && res.zones) {
                    let html = "<option value=''>Select Zone</option>";
                    res.zones.forEach(z => html += `<option value='${z.zone_id}'>${z.zone_name}</option>`);
                    $('#drawer_zone_select').html(html);
                }
            });
        });

        $('#drawer_zone_select').on('change', function() {
            let zone = $(this).val();
            let url = "{{ url('/admin/areas-by-zone') }}/" + zone;
            $('#drawer_pathao_area_id').html("<option value=''>Select Area</option>");
            if(!zone) return;

            $.get(url, function(res) {
                if(res.success && res.areas) {
                    let html = "<option value=''>Select Area</option>";
                    res.areas.forEach(a => html += `<option value='${a.area_id}'>${a.area_name}</option>`);
                    $('#drawer_pathao_area_id').html(html);
                }
            });
        });

        // Auto pathao address sync
        $('#drawer_shipping_address').on('change', function() {
            let address = $(this).val();
            if(address.length < 3) return;
            $.post("{{ route('admin.fetch.address.details') }}", { _token: "{{ csrf_token() }}", address: address }, function(res) {
                if(res.city_id) {
                    $("#drawer_city_select").val(res.city_id).trigger("change");
                    setTimeout(() => { if(res.zone_id) $("#drawer_zone_select").val(res.zone_id).trigger("change"); }, 500);
                    setTimeout(() => { if(res.area_id) $("#drawer_pathao_area_id").val(res.area_id).trigger("change"); }, 1000);
                }
            });
        });

        // 6. Product Autocomplete
        $("#drawer_product_search").autocomplete({
            appendTo: "#rightDetailsPanel", 
            minLength: 2,
            source: function(request, response){
                $.getJSON("{{ route('admin.products.search') }}", { q: request.term }, function(list){
                    response($.map(list, function(p){
                        return { label: (p.sku ? '['+p.sku+'] ' : '') + p.name, value: p.name, data : p };
                    }));
                });
            },
            select: function(e, ui){
                e.preventDefault();
                addDrawerProduct(ui.item.data);
                $(this).val('');
            }
        });

        function getBestDrawerPrice(obj) {
            const cands = [
                obj?.discount_price,
                obj?.after_discount_price,
                obj?.after_discount,
                obj?.price,
                obj?.sell_price,
                obj?.regular_price
            ];
            for (const v of cands) {
                const n = parseFloat(v);
                if (!isNaN(n) && n > 0) return n;
            }
            return 0;
        }

        function addDrawerProduct(p) {
            let hasVar = Array.isArray(p.variations) && p.variations.length > 0;
            
            let defPrice = hasVar ? getBestDrawerPrice(p.variations[0]) : getBestDrawerPrice(p);
            let firstVarId = hasVar ? (p.variations[0].id || '') : '';
            let imgUrl = p.image_url || p.image || ''; 
            if(!imgUrl.includes('http')) imgUrl = '/uploads/products/' + imgUrl;

            let varHtml = hasVar ? `<select class="form-select drawer-form-control drawer-variant-select" name="variant_display[]">` + 
                p.variations.map(v => `<option value="${v.id}" data-price="${getBestDrawerPrice(v)}">${v.display_title || v.size_label || v.size || 'Variant'}</option>`).join('') + `</select>` 
                : `<div class="text-muted" style="font-size:11px;">No Variants</div>`;

            let row = `
            <div class="drawer-product-card drawer-product-row">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div class="d-flex gap-2">
                        <img src="${imgUrl}" style="width: 40px; height: 40px; border-radius: 4px; object-fit: cover;">
                        <div>
                            <div class="fw-bold text-dark" style="font-size: 12px; line-height: 1.2;">${p.name}</div>
                            <div class="text-muted" style="font-size: 10px;">SKU: ${p.sku || 'N/A'}</div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm text-danger p-0 remove-drawer-product"><i class="mdi mdi-close-circle fs-5"></i></button>
                </div>
                <div class="row g-2 align-items-end">
                    <div class="col-12">
                        ${varHtml}
                        <input type="hidden" name="variation_id[]" class="drawer-hidden-variation-id" value="${firstVarId}"/>
                        <input type="hidden" name="order_line_id[]" value=""/>
                        <input type="hidden" name="product_id[]" value="${p.id}"/>
                        <input type="hidden" name="is_stock" value="${p.is_stock || 1}">
                    </div>
                    <div class="col-4">
                        <label class="drawer-form-label">Qty</label>
                        <input type="number" class="form-control drawer-form-control drawer-qty" name="quantity[]" value="1" min="1" required>
                    </div>
                    <div class="col-4">
                        <label class="drawer-form-label">Price</label>
                        <input type="number" class="form-control drawer-form-control drawer-price" name="unit_price[]" value="${defPrice}" step="0.01" required>
                    </div>
                    <div class="col-4 text-end pb-1">
                        <div class="fw-bold text-dark">৳ <span class="drawer-row-total">${defPrice.toFixed(2)}</span></div>
                    </div>
                </div>
            </div>`;

            $('#drawer_product_list').prepend(row);
            calcDrawerTotal();
        }

    });
</script>