@extends('layouts.master')

@section('page_title', 'Edit Billing')
@section('title', 'Edit Billing')
@section('main_item', 'Edit Billing')

@section('content')
    @if (session('pdf'))
        <script>
            var pdfData = "{{ session('pdf') }}";
            var fileName = "{{ session('file_name') }}";
            if (pdfData) {
                var link = document.createElement("a");
                link.href = "data:application/pdf;base64," + pdfData;
                link.download = fileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        </script>
    @endif
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <span class="input-group-addon">
                                    <i class="fa fa-user"></i>
                                </span>
                                <label style="font-weight: bold" style="font-weight: bold">Customer *</label>
                                <div class="input-group">
                                    <select class="form-control select2 customer-dropdown" id="customer" name="customer_id"
                                        required>
                                        <option value="">Select Customer </option>
                                        @foreach ($customers as $customer)
                                            @if ($sale->contact_id == $customer->id)
                                                <option value="{{ $customer->id }}" selected>{{ $customer->name }} |
                                                    {{ $customer->mobile }}
                                                    |
                                                    {{ $customer->landmark }} </option>
                                            @else
                                                <option value="{{ $customer->id }}">{{ $customer->name }} |
                                                    {{ $customer->mobile }}
                                                    |
                                                    {{ $customer->landmark }} </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <span class="input-group-btn">
                                <a id="add-customer" href="javascript:void(0)" class="btn btn-primary"
                                    style="background:#ed4b00; float: right; margin-top: 28px; color: white; border-radius: 5px;"
                                    type="button" data-toggle="modal" data-target="#exampleModal2">Add</a>
                            </span>
                            <div class="col-md-4" @if ($setting->business_location != '1') style="display: none" @endif>
                                <div class="form-group">
                                    <label class="required" style="font-weight: bold" for="activate_code">business
                                        Location</label>
                                    <select class="form-control select2" id="business_location_id" name="location" required>
                                        @if (Auth::user()->role_id == '1')
                                            @foreach ($users_access_location as $business_location)
                                                @if ($business_location->is_active == '1')
                                                    @if ($business_location->id == $sale->location)
                                                        <option value="{{ $business_location->id }}" selected>
                                                            {{ $business_location->name }}</option>
                                                    @else
                                                        <option value="{{ $business_location->id }}">
                                                            {{ $business_location->name }}
                                                        </option>
                                                    @endif
                                                @else
                                                @endif
                                            @endforeach
                                        @else
                                            @foreach ($users_access_location as $business_location)
                                                @if ($business_location->is_active == '1')
                                                    @if ($business_location->business_location_id == $sale->location)
                                                        <option value="{{ $business_location->business_location_id }}"
                                                            selected>
                                                            {{ $business_location->name }}</option>
                                                    @else
                                                        <option value="{{ $business_location->business_location_id }}">
                                                            {{ $business_location->name }}
                                                        </option>
                                                    @endif
                                                @else
                                                @endif
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body" style="margin-top: -40px;">
                        <form action="{{ route('billings.update', $sale->id) }}" method="POST" id="product_form">
                            @csrf
                            @method('PUT')
                            <div class="table-responsive dash-social" style="height: 276px;" style="overflow: scroll;">
                                <table id="datatable" class="table table-striped">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th>Image</th>
                                            <th>Product</th>
                                            <th>Quantity</th>
                                            <th>Selling Price</th>
                                            <th class="text-right">Line Total</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($sale->saleItems as $count => $item)
                                            @php
                                                // Fetch the stock using the stock_id from the SaleItem
                                                $stock = App\Stock::find($item->stock_id);

                                                // Fetch the attribute values if stock exists
                                                if ($stock) {
                                                    $attribute_value = App\AttributeValue::find($stock->attribute_value_id);
                                                    $second_attribute_value = App\AttributeValue::find($stock->second_attribute_value_id);
                                                }
                                            @endphp

                                            <tr>
                                                <td>
                                                    @php
                                                        $product = App\Product::find($item->product_id);
                                                        if (!empty($product->parent_product_id)) {
                                                            $product = App\Product::find($product->parent_product_id);
                                                        }
                                                    @endphp
                                                    @if (!empty($product->image))
                                                        <img style="width: 50px;height: 50px;object-fit: cover"
                                                            src="{{ asset($product->image) }}" alt="">
                                                    @else
                                                        <img src="{{ asset('img/placeholder.jpg') }}"
                                                                style="width: 50px;height: 50px;object-fit: cover"
                                                                 alt="">
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $item->product->product_name }}

                                                    @if ($setting->show_sub_category)
                                                        |
                                                        @php
                                                            $product_sub_category = DB::table('product_has_subcategories')
                                                                ->where('product_id', $item->product->id)
                                                                ->first();

                                                            $sub_category = $product_sub_category ? \App\SubCategory::find($product_sub_category->sub_category_id) : null;
                                                        @endphp

                                                        @if (isset($sub_category) && $sub_category)
                                                            {{ $sub_category->sub_category_name }}
                                                        @else
                                                            (N/A)
                                                        @endif
                                                    @endif
                                                    @if ($stock && $attribute_value && $attribute_value->value)
                                                        | {{ $attribute_value->value }}
                                                        @if ($second_attribute_value && $second_attribute_value->value)
                                                            | {{ $second_attribute_value->value }}
                                                        @endif
                                                    @else
                                                        (single)
                                                    @endif
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control qty text-center touchspin" name="sale_qty[]" required value="{{ $item->qty }}">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control s_price text-right"
                                                        id="re_date" placeholder="" name="sale_s_price[]" required
                                                        value="{{ $item->sale_unit_price }}">
                                                    <input type="text" class="form-control s_price text-right"
                                                        id="re_date" placeholder="" name="purchase_price[]" required
                                                        value="{{ $item->purchase_unit_cost }}" hidden>
                                                    <input type="hidden" class="form-control" placeholder="" id="re_date"
                                                        name="sale_product_id[]" readonly value="{{ $item->product_id }}"
                                                        required>
                                                    <input type="hidden" class="form-control " placeholder=""
                                                        id="re_date" name="sale_stock_id[]" readonly
                                                        value="{{ $item->stock_id }}" required>
                                                    <input type="hidden" class="form-control available_qty"
                                                        id="stock{{ $count }}" placeholder=""
                                                        name="sale_available_qty[]" value="1" required>
                                                    <input type="text" hidden class="form-control text-center touchspin"
                                                        placeholder="" id="attribute_val" name="sale_att_value[]"
                                                        value="{{ $item->attribute_value }}">
                                                </td>
                                                <td class="line_total text-right">{{ $item->sale_line_total }}
                                                </td>
                                                <td>
                                                    <a href="javascript:void(0)" class="remove_row"><i
                                                            class="fas fa-trash-alt text-danger font-16"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                    </div>
                    <div>
                        <input type="text" class="form-control" placeholder="Reference Number" id="invoice_no"
                            name="invoice_no" value="{{ $sale->invoice_no }}" readonly hidden>
                        <input type="text" class="form-control" placeholder="" id="" name="sale_date"
                            value="{{ $sale->sale_date }}" readonly hidden>
                        <input type="text" class="form-control" placeholder="" id="" name="ref_no"
                            value="{{ $sale->ref_no }}" readonly hidden>
                        <input type="text" class="form-control" placeholder="" id="currency_type"
                            name="currency_type" value="{{ $sale->currency_type }}" value="" hidden>
                        <input type="text" class="form-control" placeholder="" id="supplier_copy" name="contact_id"
                            readonly hidden>
                        <input type="hidden" id="order_currency_type" name="currency_type" value="lkr" hidden>
                        <div class="">
                            <input type="hidden" id="user_id" name="user_id" value="{{ Auth::user()->id }}">
                            <select class="form-control select2" id="location_id_copy" name="location">
                                @if (Auth::user()->role_id == '1')
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            @if ($business_location->id == $sale->location)
                                                <option value="{{ $business_location->id }}" selected>
                                                    {{ $business_location->name }}</option>
                                            @else
                                                <option value="{{ $business_location->id }}">
                                                    {{ $business_location->name }}
                                                </option>
                                            @endif
                                        @else
                                        @endif
                                    @endforeach
                                @else
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            @if ($business_location->business_location_id == $sale->location)
                                                <option value="{{ $business_location->business_location_id }}" selected>
                                                    {{ $business_location->name }}</option>
                                            @else
                                                <option value="{{ $business_location->business_location_id }}">
                                                    {{ $business_location->name }}
                                                </option>
                                            @endif
                                        @else
                                        @endif
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="input-group" hidden>
                            <select class="form-control select2 customer-dropdown" id="customer_id_set"
                                name="customer_id_set" required>
                                @foreach ($customers as $customer)
                                    @if ($sale->contact_id == $customer->id)
                                        <option value="{{ $customer->id }}" selected>{{ $customer->name }} |
                                            {{ $customer->mobile }}
                                            |
                                            {{ $customer->landmark }} </option>
                                    @else
                                        <option value="{{ $customer->id }}">{{ $customer->name }} |
                                            {{ $customer->mobile }}
                                            |
                                            {{ $customer->landmark }} </option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                {{-- reset button --}}
                <div class="row mt-1 mb-2 col-md-12">
                    <div class="col-md-12 text-right">
                        <button type="button" id="resetButton" class="btn btn-danger"  style="margin-top: -16px; height: 28px; line-height: 18px; text-align: center;">Reset</button>
                    </div>
                </div>
                {{-- category filter --}}
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                        <label style="font-weight: bold" for="category" style="font-weight: bold">Category</label>            
                        <select id="category" name="category_id" class="form-control select2">
                                <option value="">Select</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- sub category filter --}}
                    <div class="col-md-3">
                        <div class="form-group">
                        <label style="font-weight: bold" for="sub_category" style="font-weight: bold">Sub Category</label>
                        <select id="subCategory" name="sub_category_id" class="form-control select2">
                                @foreach ($subCategories as $subCategory)
                                    <option value="{{ $subCategory->id }}">{{ $subCategory->sub_category_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- attribute filter --}}
                    <div class="col-md-3">
                        <div class="form-group">
                        <label style="font-weight: bold" for="attr" style="font-weight: bold">Attribute Value</label>            
                        <select id="attributeValue" name="attribute_value_id" class="form-control select2">
                                <option value="">Select</option>
                                @foreach ($attributeValues as $attributeValue)
                                    <option value="{{ $attributeValue->id }}">{{ $attributeValue->value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- unit filter --}}
                    <div class="col-md-3">
                        <div class="form-group">
                        <label style="font-weight: bold" for="unit" style="font-weight: bold">Unit</label>            
                        <select id="unit" name="unit_id" class="form-control select2">
                                <option value="">Select</option>
                                @foreach ($units as $unit)
                                    <option value="{{ $unit->id }}">{{ $unit->short_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <input type="text" class="form-control" id="product_search_text"
                    placeholder="Enter Product name / SKU"><br>
                <input type="hidden" id="suggestion_page" value="1">
                <div class="">
                    <div class="" id="product_list_body" style="height: 1000px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="row g-3">
        <div class="col-md-12">
            <div class="card" style="height: 170px;">
                <div class="card-body">
                    <h4 class="header-title mt-0"><b>Add Payment</b></h4>
                    <div class="row g-3">
                        <div class="col-md">
                            <label style="font-weight: bold" for="sub_total">Sub Total</label>
                            <input type="text" class="form-control @error('invoice_total') is-invalid @enderror"
                                placeholder="0.00" id="sub_total" name="invoice_total"
                                value="{{ $sale->invoice_total }}" readonly required value="0.00">
                            @error('invoice_total')
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ $message }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @enderror
                        </div>
                        <div class="col-md">
                            <label style="font-weight: bold" for="discount_type">Discount Type</label>
                            <select class="form-control " id="discount_type" name="discount_type" required>
                                <option value="fixed" {{ $sale->discount_type == 'fixed' ? 'selected' : '' }}>Fixed
                                </option>
                                <option value="percentage" {{ $sale->discount_type == 'percentage' ? 'selected' : '' }}>
                                    Percentage</option>
                            </select>
                        </div>
                        <div class="col-md">
                            @php
                                $percentage = 0;
                                if ($sale->discount_type == 'fixed') {
                                    $percentage = $sale->invoice_discount;
                                } else {
                                    if ($sale->invoice_discount != 0) {
                                        $percentage = ($sale->invoice_discount / $sale->invoice_total) * 100;
                                    }
                                }
                            @endphp
                            <label style="font-weight: bold" for="discount">Discount</label>
                            <input type="text" class="form-control" placeholder="" id="discount" required=""
                                value="{{ $percentage }}">
                            <input type="hidden" id="invoice_discount" name="invoice_discount"
                                value="{{ $sale->invoice_discount }}">
                        </div>
                        <div class="col-md">
                            <label style="font-weight: bold" for="net_total">Net Total</label>
                            <input type="text" class="form-control" placeholder="" id="net_total"
                                name="invoice_subtotal" required value="{{ $sale->invoice_subtotal }}" readonly
                                style="font-weight: bold">
                        </div>
                        <div class="col-md" hidden>
                            <label style="font-weight: bold" for="total_payable">Total Payable</label>
                            <input type="text" class="form-control" placeholder="" id="total_payable"
                                name="total_payable" required value="{{ $sale->invoice_subtotal }}" readonly
                                style="font-weight: bold">
                        </div>
                        <div class="col-md-6 account_div" style="display:none">
                            <label style="font-weight: bold">Payment Account</label>
                            <select class="form-control select2" id="account" name="payment_account">
                                @foreach ($payment_accounts as $payment_account)
                                    <option value="{{ $payment_account->id }}">{{ $payment_account->account_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 text-right ">
                <button type="submit" class="btn btn-primary px-5 py-2" id="product_form_btn"><b>Cash</b>
                </button>
            </div>
            </form>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $(document).on('click', '#customer_quick_add', function() {
                if ($('#name').val() != '' && $('#mobile').val() != '' && $('#landmark').val() != '' && $(
                        '#city').val() != '' && $('#province_id').val() != '' && $('#country_id').val() !=
                    '') {
                    $.ajax({
                        method: 'post',
                        url: '/orders/customer/quick-add',
                        data: $("#quick_customer_form").serialize(),
                        success: function(response) {
                            if (response.success == 1) {
                                $.toast({
                                    heading: 'Success',
                                    text: response.msg,
                                    position: 'top-right',
                                    bgColor: '#006400',
                                    showHideTransition: 'fade',
                                    loaderBg: '#ecf0f1'
                                });
                                $("#customer_id_set").val(response.data);
                                $('#lable_name').text($('#name').val());
                                $('#lable_mobile').text($('#mobile').val());
                                $('#lable_address').text($('#landmark').val());
                                $('#exampleModal2').modal('hide');
                                $('.customer-dropdown').append($('<option>', {
                                    value: response.data,
                                    text: $('#name').val() + ' | ' + $('#mobile')
                                        .val() + " | " + $('#landmark').val()
                                }));

                                $("#quick_customer_form")[0].reset();
                                $(".customer-dropdown").val("").change();
                            } else {
                                $.toast({
                                    heading: 'Error',
                                    text: response.msg,
                                    position: 'top-right',
                                    bgColor: '#b30000',
                                    showHideTransition: 'fade',
                                    loaderBg: '#ecf0f1'
                                });
                            }
                            $("#customer_copy").val($("#customer").find(':selected').val());
                        }
                    })
                } else {
                    $.toast({
                        heading: 'Error',
                        text: "Fill all required fields..!",
                        position: 'top-right',
                        bgColor: '#b30000',
                        icon: 'error',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                }
            })
            $(document).on('input', '#product_search_text', function() {
                var term = $(this).val();
                let search = $('#product_search_text').val();
                $.ajax({
                    method: 'GET',
                    url: '/order/products/all/new',
                    data: {
                        term: term,
                    },
                    success: function(result) {
                        $('div#product_list_body').empty().html(result);
                        $('#suggestion_page_loader').fadeOut(700);
                    },
                });
            });
            $(document).on('click', '.product_card', function() {
                if ($('#currency_type').val() != '') {
                    let selected = $(this).data('stock_id');
                    var rowCount = $('#datatable tbody tr').length;
                    $.ajax({
                        method: 'GET',
                        url: '/orders/product/add/' + selected + '/' + rowCount + '/' + $('#currency_type').val(),
                        success: function(response) {
                            $(response).appendTo($("#datatable tbody"));
                            calucalte();
                        }
                    });
                } else {
                    $.toast({
                        heading: 'Error',
                        text: 'Please select currency type..!',
                        position: 'top-right',
                        bgColor: '#b30000',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                }

            })
            $(document).on('change', '#grn-product-list', function() {
                var selected = $('#grn-product-list').find(':selected').val();
                var rowCount = $('#datatable tbody tr').length;
                $.ajax({
                    method: 'GET',
                    url: '/orders/product/add/',
                    data: {
                        selected: selected,
                        rowCount: rowCount,
                        currency_type: $('#currency_type').val(),
                    },
                    success: function(response) {
                        $(response).appendTo($("#datatable tbody"));
                        calucalte();
                    }
                });
            });
            $(document).on('change', '.qty, .s_price', function() {
                let qty = $(this).closest("tr").find(".qty").val();
                let p_price = $(this).closest("tr").find(".s_price").val();
                let line_total = parseFloat(qty) * parseFloat(p_price);
                console.log('qty ' + qty)
                console.log('price ' + p_price)
                console.log('total ' + line_total)
                $(this).closest("tr").find(".line_total").html(line_total);
                calucalte();
            })

            $(document).on('click', '.remove_row', function() {
                $(this).closest("tr").remove();
                calucalte();
            })

            $(document).on('change', '#weight_package', function() {
                calucalte();
            })

            let type = $('#delivery_fee_type').val();

            function calucalte() {
                if (type == 'from_list') {
                    let sub_total = 0.00;
                    let net_total = 0.00;
                    let total = 0.00;
                    let balance = 0.00;
                    $('#datatable tbody tr').each(function() {
                        total += parseFloat($(this).find(".line_total").html());
                    });
                    let delivery_fee = $('#delivery_fee').val();
                    let discount_type = $("#discount_type").val();
                    let discount_value = $("#discount").val();
                    let payment_amount = $('#payment_amount').val();
                    sub_total = total;
                    net_total = sub_total + parseInt(delivery_fee);
                    let discount = 0.00;
                    let percentage = 0;
                    if (discount_type === 'fixed') {
                        discount = parseFloat(discount_value);
                        net_total -= parseFloat(discount);
                        $('#invoice_discount').val(discount);
                    } else {
                        percentage = net_total * discount_value / 100;
                        net_total -= parseFloat(percentage);
                        $('#invoice_discount').val(percentage);
                    }
                    if (payment_amount == '') {
                        payment_amount = 0.00;
                        $('#payment_amount').val(0);
                    }
                    balance = net_total - payment_amount;
                    $('#sub_total').val(sub_total.toFixed(2));
                    $('#net_total').val(net_total.toFixed(2));
                    $('#p_amount').val(sub_total.toFixed(2));
                    $('#balance').val(balance.toFixed(2));
                } else {
                    let sub_total = 0.00;
                    let net_total = 0.00;
                    let total = 0.00;
                    let balance = 0.00;
                    $('#datatable tbody tr').each(function() {
                        total += parseFloat($(this).find(".line_total").html());
                    });
                    let t_weight = 0;
                    let basic_courier_cost = $('#basic_courier_cost').val();
                    let additional_courier_cost = $('#additional_courier_cost').val();
                    let weight = Math.ceil($('#weight_package').val());
                    let discount_type = $("#discount_type").val();
                    let discount_value = $("#discount").val();
                    let payment_amount = $('#payment_amount').val();
                    if (weight == 1) {
                        t_weight = 1 * basic_courier_cost;
                    } else if (weight > 1) {
                        t_weight = 1 * basic_courier_cost;
                        weight = weight - 1;
                        t_weight = t_weight + weight * additional_courier_cost;
                    }
                    let delivery_fee = t_weight;
                    sub_total = total;
                    net_total = sub_total + parseInt(delivery_fee);
                    let discount = 0.00;
                    let percentage = 0;
                    if (discount_type === 'fixed') {
                        discount = parseFloat(discount_value);
                        net_total -= parseFloat(discount);
                        $('#invoice_discount').val(discount);
                    } else {
                        percentage = net_total * discount_value / 100;
                        net_total -= parseFloat(percentage);
                        $('#invoice_discount').val(percentage);
                    }
                    if (payment_amount == '') {
                        payment_amount = 0.00;
                        $('#payment_amount').val(0);
                    }
                    balance = net_total - payment_amount;
                    $('#sub_total').val(sub_total);
                    $('#net_total').val(net_total);
                    $('#p_amount').val(sub_total);
                    $('#balance').val(balance);
                }
            }

            $(document).on('click', '#discount', function() {
                this.select();
            })
            $(document).on('change', '#discount', function() {
                calucalte();
            })
            $(document).on('change', '#sub_total', function() {
                let discount_type = $("#discount_type").val();
                let delivery_fee = $('#delivery_fee').val();
                let total = $("#sub_total").val();
                let discount = $("#discount").val();
                let sub = total - discount + parseInt(delivery_fee);
                $("#net_total").val(sub);
                $("#p_amount").val(sub);
            });

            $('#suggestion_page_loader').fadeIn(700);
            var page = $('input#suggestion_page').val();
            if (page == 1) {
                $('div#product_list_body').html('');
            }
            if ($('div#product_list_body').find('input#no_products_found').length > 0) {
                $('#suggestion_page_loader').fadeOut(700);
                return false;
            }

            $('div#product_list_body').on('scroll', function() {
                if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                    var page = parseInt($('#suggestion_page').val());
                    page += 1;
                    $('#suggestion_page').val(page);
                }
            });

            function getProductsRelatedImage(business_location_id) {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('sale.image_product_location') }}",
                    data: {
                        business_location_id: business_location_id,
                    },
                    success: function(options) {
                        $('#product_list_body').empty().html(options)
                    }
                });
            }
            $('.customer-dropdown').change(function() {
                $("#customer_id_set").val($(this).val());
                $('#lable_name').text($(".customer-dropdown :selected").text().split('|')[0]);
                $('#lable_mobile').text($(".customer-dropdown :selected").text().split('|')[1]);
                $('#lable_address').text($(".customer-dropdown :selected").text().split('|')[2]);
                if ($(this).val() != '') {
                    $('#product_form_btn').prop('disabled', false);

                } else {
                    $('#lable_name').text('');
                    $('#lable_mobile').text('');
                    $('#lable_address').text('');
                }
            });
            $('#product_form_btn').click(function(event) {
                event.preventDefault();
                $('#product_form_btn').prop('disabled', true);
                var rowCount = $('#datatable tbody tr').length;
                let flag = !$("#supplier_copy").val();
                let customer_id = $('#customer_id_set').val();

                if (customer_id != '') {
                    if (rowCount == 0) {
                        $.toast({
                            heading: 'Error',
                            text: 'Please select product..!',
                            position: 'top-right',
                            bgColor: '#ff1a1a',
                            showHideTransition: 'fade',
                            loaderBg: '#b30000'
                        });
                        $('#product_form_btn').prop('disabled', false);
                    } else {
                        $('#product_form').submit();

                    }
                } else {
                    $.toast({
                        heading: 'Error',
                        text: 'Please select customer..!',
                        position: 'top-right',
                        bgColor: '#b30000',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                }

            });
            // quick add customer
            let country_id = $('#country_id').val();
            if (country_id == '200') {
                $('#district_div1').show();
                $('#city_div1').show();
                $('#state_div1').hide();
            } else {
                $('#district_div1').hide();
                $('#city_div1').hide();
                $('#state_div1').show();
            }
            $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
            $('#mdate_copy').val(moment(new Date()).format("YYYY-MM-DD"));
            let courior_id = $('#courior').val();
            $.ajax({
                method: 'POST',
                url: "{{ route('oders.delivery-charge') }} ",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'courior_id': courior_id,
                },
                success: function(response) {
                    $('#delivery_fee').val(response.courier_charges);
                    $('#additional_courier_cost').val(response.additional);
                    $('#basic_courier_cost').val(response.basic);
                }
            });
        });
        $(document).on('change',
            '#ref_number, #supplier, #mdate ,#courior ,#ref_no, #resources, #business_location_id, #order_campgin_id',
            function() {
                $("#mdate_copy").val($("#mdate").val());
                $("#courior_copy").val($("#courior").val());
                $("#ref_no_copy").val($("#ref_no").val());
                $("#supplier_copy").val($("#supplier").find(':selected').val());
                $("#customer_id_set").val($("#supplier").find(':selected').val());
                $("#order_resources").val($("#resources").find(':selected').val());
                $("#location_id_copy").val($("#business_location_id").find(':selected').val());
                $("#order_copy_batch").val($("#order_campgin_id").find(':selected').val());
            })
        $(document).on('change', '#city', function() {
            let city_id = $(this).val();
            let url = "{{ route('get-district') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    _token: "{{ csrf_token() }}",
                    city_id: city_id,
                },
                success: function(response) {
                    $('#province_id').val(response).change();
                },
            });
        });
        $(document).on('change', '#city', function() {
            let city_id = $(this).val();
            let url = "{{ route('get_city_name') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    _token: "{{ csrf_token() }}",
                    city_id: city_id,
                },
                success: function(response) {
                    if (response == 'Other') {
                        $('#other_city_div').show();
                    } else {
                        $('#other_city_div').hide();
                    }
                }
            });
        });

        $(document).on('change', '#courior', function() {
            let courior_id = $('#courior').val();
            $.ajax({
                method: 'POST',
                url: "{{ route('oders.delivery-charge') }} ",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'courior_id': courior_id,
                },
                success: function(response) {
                    $('#delivery_fee').val(response.courier_charges);
                    $('#additional_courier_cost').val(response.additional);
                    $('#basic_courier_cost').val(response.basic);
                    calucalte();
                }
            })
        });

        $(document).on('change', '#country_id', function() {
            $("#other_city").val('');
            let country_id = $(this).val();
            if (country_id == '200') {
                $('#district_div1').show();
                $('#city_div1').show();
                $('#state_div1').hide();
            } else {
                $('#district_div1').hide();
                $('#city_div1').hide();
                $('#state_div1').show();
            }
        });
        $(document).on('change', '#currency_type', function() {
            $('#order_currency_type').val($(this).val());
            getProductsRelatedToCurrency($(this).val());
        });

        //initialize to fetch product grid
        function initializeProductList() {
            const productListBody = $('#product_list_body');
            const businessLocationId = $('#business_location_id').val();

            // Function to get filter form data
            function getFilterData() {
                return {
                    category_id: $('#category').val(),
                    sub_category_id: $('#subCategory').val(),
                    attribute_value_id: $('#attributeValue').val(),
                    unit_id: $('#unit').val(),
                    businessLocationId: businessLocationId
                };
            }

            $('#product_list_body').empty();

            const filterData = getFilterData();

            $.ajax({
                url: "{{ route('fetch.products') }}",
                method: "GET",
                data: {
                    search: $('#search').val(),
                    businessLocationId: filterData.businessLocationId,
                    category_id: filterData.category_id,
                    sub_category_id: filterData.sub_category_id,
                    attribute_value_id: filterData.attribute_value_id,
                    unit_id: filterData.unit_id
                },
                success: function (data) {
                    const productListBody = $('#product_list_body');
                    productListBody.empty();

                    if (data.length === 0) {
                        productListBody.append('<div class="col-md-12"><h4 class="text-center">No products found</h4></div>');
                        return;
                    }

                    data.forEach(stock => {
                        let qty = stock.stock_quantity || 0;
                        let productImage = stock.product_image || stock.parent_image || "{{ asset('/img/placeholder.jpg') }}";

                        let hiddenAttr = qty === 0 ? 'hidden' : '';
                        let productCardHTML = `
                            <div class="col-md-4 col-xs-4 product_list no-print product_card" 
                                id="product_card" 
                                data-stock_id="${stock.stock_id}" 
                                ${hiddenAttr}>
                                <div class="product_box" 
                                    data-variation_id="${stock.stock_id}" 
                                    title="${stock.product_name}">
                                    <div class="image-container"
                                        style="background-image: url(${productImage});
                                            object-fit: cover; 
                                            background-repeat: no-repeat; 
                                            background-position: center; 
                                            background-size: contain;">
                                    </div>
                                    <div class="text_div">
                                        <small class="text text-muted">
                                            ${stock.product_name}
                                        </small>
                                        <small class="text-muted">
                                            ${stock.product_sku || '(No SKU)'}
                                        </small><br>
                                        <small style="font-weight: bold; color: red">
                                            (${qty})
                                        </small>
                                        <small style="font-weight: bold; color: black">
                                            ${stock.attribute_value_1 || '(single)'} ${stock.attribute_value_2 ? ` | ${stock.attribute_value_2}` : ''}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        `;
                        productListBody.append(productCardHTML);
                    });
                }
            });
        }

        // Filtering logic when the filter is changed
        $('#category, #subCategory, #attributeValue, #unit').on('change', function () {
            initializeProductList();
        });

        $(document).ready(function () {
            // Fetch the subcategories if there's a selected category
            function fetchSubCategories(selectedCategory = null) {
                let subCategorySelect = $('#subCategory');
                subCategorySelect.empty();

                $.ajax({
                    url: '/order/get-filters',
                    type: 'GET',
                    data: {
                        category_id: selectedCategory 
                    },
                    success: function (response) {

                        if (response.subcategories && response.subcategories.length > 0) {
                            subCategorySelect.append('<option value="">Select</option>');
                            $.each(response.subcategories, function (index, subcategory) {
                                subCategorySelect.append('<option value="' + subcategory.id + '">' + subcategory.sub_category_name + '</option>');
                            });
                        }
                    }
                });
            }

            // Initialize subcategories and products when page loads
            let selectedCategory = $('#category').val();
            if (selectedCategory) {
                fetchSubCategories(selectedCategory);
            } else {
                fetchSubCategories();
            }
            initializeProductList();

            // When category is selected, fetch subcategories for that category
            $('#category').on('change', function () {
                let selectedCategory = $(this).val();
                if (selectedCategory) {
                    fetchSubCategories(selectedCategory);
                } else {
                    fetchSubCategories();
                }
            });
        });

        // Reset the filters
        document.getElementById('resetButton').addEventListener('click', function () {
            $('#category').val('').trigger('change');
            $('#subCategory').val('').trigger('change');
            $('#attributeValue').val('').trigger('change');
            $('#unit').val('').trigger('change');
        });

    </script>
@endsection