@php
    use App\Enums\DateTimeFormats;
    use Carbon\Carbon;
@endphp
<x-app-layout>
    @push('styles')
        <style>
            /*loading dropdown hiding issue*/
            [x-show="open"] {
                position: fixed !important;
                left: auto !important;
                right: auto !important;
                z-index: 99999 !important;
                background-color: #fff;
                border: 1px solid #ddd;
                border-radius: 6px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                width: 180px;
                max-height: 200px;
                overflow-y: auto;
            }

            [x-show="open"][x-cloak] {
                display: none !important;
            }

            [x-show="open"]::-webkit-scrollbar {
                width: 6px;
            }

            [x-show="open"]::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: 3px;
            }

            [x-data] {
                overflow: visible !important;
                position: static !important;
            }

            /*Dropdown custom design css*/
            .dropdown-button {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                display: block;
                text-align: left;
            }

            .dropdown-menu {
                max-height: 12rem;
                overflow-y: auto;
                min-width: max-content;
                position: absolute;
                z-index: 50;
                background-color: #fff;
                border-radius: 0.375rem;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            }

            .dropdown-menu input[type="text"] {
                width: 100%;
                box-sizing: border-box;
                border-bottom: 1px solid #ddd;
                padding: 0.25rem;
            }

            .dropdown-menu div {
                white-space: nowrap;
            }

            /*SVG Custom CSS*/
            .dropdown_carrot_icon_initial {
                float: right;
            }

            .dropdown_carrot_icon {
                float: right;
                margin-right: -0.5rem;
                margin-top: -1.2rem
            }
        </style>
    @endpush

    <div class="max-w-full mx-auto sm:px-1 lg:px-1">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 relative">

                <!-- Header -->
                <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                    <p class="text-lg font-semibold text-gray-900">
                        {{ __('Customer Due & Outstanding Report') }}
                    </p>

                    @if($productOrders->isNotEmpty())
                        <div class="flex items-center gap-2">
                            <a href="{{ route('outstanding_report.print', request()->query()) }}"
                               target="_blank"
                               class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm flex items-center gap-1">
                                <i class="fa fa-print"></i> Print
                            </a>

                            <form action="{{ route('outstanding_report.download_xl') }}" method="POST" target="_blank">
                                @csrf
                                <input type="hidden" name="dealer_id" value="{{ request('dealer_id','All') }}">
                                <input type="hidden" name="brand_id" value="{{ request('brand_id','All') }}">
                                <input type="hidden" name="product_id" value="{{ request('product_id','All') }}">
                                <input type="hidden" name="customer_id" value="{{ request('customer_id','All') }}">
                                <input type="hidden" name="paid_status" value="{{ request('paid_status','0') }}">
                                <input type="hidden" name="customer_type" value="{{ request('customer_type','0') }}">
                                <input type="hidden" name="start_date" value="{{ request('start_date') }}">
                                <input type="hidden" name="end_date" value="{{ request('end_date') }}">
                                <button type="submit"
                                        class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm flex items-center gap-1">
                                    <i class="fa fa-file-excel"></i> XL
                                </button>
                            </form>
                        </div>
                    @endif
                </div>

                <!-- Filter Form -->
                <form action="{{ url()->current() }}" method="GET"
                      x-data="filterSystem({
                              allProducts: {{ Js::from($allProducts) }},
                              allCustomers: {{ Js::from($customers) }},
                              allDealers: {{ Js::from($dealers) }},
                              initBrand: '{{ request('brand_id', 'All') }}',
                              initDealer: '{{ request('dealer_id', 'All') }}',
                              initProduct: '{{ request('product_id', 'All') }}',
                              initCustomer: '{{ request('customer_id', 'All') }}'
                          })"
                      x-init="init()"
                      @submit.prevent="validateAndSubmit($el)"
                >

                    <div class="flex flex-nowrap gap-3 w-full items-end flex-wrap">
                        <!-- Brand -->
                        <div class="w-[180px]">
                            <x-input-label for="brand_id" value="Brand"/>
                            <select id="brand_id" name="brand_id" x-model="brandId" @change="filterProducts()"
                                    class="border rounded-md w-full p-2">
                                <option value="All">All</option>
                                @foreach($brands as $brand)
                                    <option
                                        value="{{ $brand->id }}" @selected(request('brand_id','All') == $brand->id)>{{ $brand->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Product Dropdown -->
                        <div class="w-[180px]"
                             x-data="searchableDropdown('product', products, '{{ request('product_id','All') }}')">
                            <x-input-label value="Model"/>
                            <div class="relative">
                                <button type="button"
                                        @click="open=!open"
                                        :class="open ? 'border-[#2196f3]' : 'border-black'"
                                        class="dropdown-button rounded-lg border p-2 bg-white w-full flex items-center justify-between">
                                    <span class="truncate" x-text="selectedLabel"></span>
                                    <svg class="w-4 h-4 text-gray-500 flex-shrink-0 ml-2"
                                         :class="selectedValue !== 'All' ? 'dropdown_carrot_icon' : 'dropdown_carrot_icon_initial'"
                                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M19 9l-7 7-7-7"/>
                                    </svg>
                                </button>
                                <div x-show="open" @click.away="open=false" class="dropdown-menu">
                                    <input type="text" x-model="search" placeholder="Search..."
                                           class="text-sm p-1 border-b border-gray-300 w-full"/>
                                    <div @click="select('All','All')"
                                         class="p-1 hover:bg-gray-100 cursor-pointer text-sm">All
                                    </div>
                                    <template x-for="item in filtered" :key="item.id">
                                        <div @click="select(item.id,item.product_name)"
                                             class="p-1 hover:bg-gray-100 cursor-pointer text-sm"
                                             x-text="item.product_name"></div>
                                    </template>
                                </div>
                            </div>
                            <input type="hidden" name="product_id" :value="selectedValue">
                        </div>
                        <!-- Dealer Dropdown -->
                        <div class="w-[180px]"
                             x-data="searchableDropdown('dealer', dealers, '{{ request('dealer_id','All') }}')"
                             @dealer-change.window="updateDealer($event.detail)">
                            <x-input-label value="Dealer"/>
                            <div class="relative">
                                <button type="button"
                                        @click="open=!open"
                                        :class="open ? 'border-[#2196f3]' : 'border-black'"
                                        class="dropdown-button rounded-lg border p-2 bg-white w-full flex items-center justify-between">
                                    <span class="truncate" x-text="selectedLabel"></span>
                                    <svg class="w-4 h-4 text-gray-500 flex-shrink-0 ml-2"
                                         :class="selectedValue !== 'All' ? 'dropdown_carrot_icon' : 'dropdown_carrot_icon_initial'"
                                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M19 9l-7 7-7-7"/>
                                    </svg>
                                </button>
                                <div x-show="open" @click.away="open=false" class="dropdown-menu">
                                    <input type="text" x-model="search" placeholder="Search..."
                                           class="text-sm p-1 border-b border-gray-300 w-full"/>
                                    <div @click="select('All','All')"
                                         class="p-1 hover:bg-gray-100 cursor-pointer text-sm">All
                                    </div>
                                    <template x-for="item in filtered" :key="item.id">
                                        <div @click="select(item.id,item.shop_name+' - '+item.dealer_code)"
                                             class="p-1 hover:bg-gray-100 cursor-pointer text-sm"
                                             x-text="item.shop_name+' - '+item.dealer_code"></div>
                                    </template>
                                </div>
                            </div>
                            <input type="hidden" name="dealer_id" :value="selectedValue">
                        </div>
                        <!-- Customer Dropdown -->
                        <div class="w-[180px]"
                             x-data="searchableDropdown('customer', customers, '{{ request('customer_id','All') }}')">
                            <x-input-label value="Customer"/>
                            <div class="relative">
                                <button type="button"
                                        @click="open=!open"
                                        :class="open ? 'border-[#2196f3]' : 'border-black'"
                                        class="dropdown-button rounded-lg border p-2 bg-white w-full flex items-center justify-between">
                                    <span class="truncate" x-text="selectedLabel"></span>
                                    <svg class="w-4 h-4 text-gray-500 flex-shrink-0 ml-2"
                                         :class="selectedValue !== 'All' ? 'dropdown_carrot_icon' : 'dropdown_carrot_icon_initial'"
                                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M19 9l-7 7-7-7"/>
                                    </svg>
                                </button>
                                <div x-show="open" @click.away="open=false" class="dropdown-menu">
                                    <input type="text" x-model="search" placeholder="Search..."
                                           class="text-sm p-1 border-b border-gray-300 w-full"/>
                                    <div @click="select('All','All')"
                                         class="p-1 hover:bg-gray-100 cursor-pointer text-sm">All
                                    </div>
                                    <template x-for="item in filtered" :key="item.id">
                                        <div @click="select(item.id,item.cust_nid_name_en)"
                                             class="p-1 hover:bg-gray-100 cursor-pointer text-sm"
                                             x-text="item.cust_nid_name_en"></div>
                                    </template>
                                </div>
                            </div>
                            <input type="hidden" name="customer_id" :value="selectedValue">
                        </div>
                        <!-- Customer Type -->
                        <div class="w-[150px]">
                            <x-input-label for="customer_type" value="Customer Type"/>
                            <select name="customer_type" id="customer_type" class="w-full border rounded-md p-2">
                                @foreach($customerTypeOptions as $key => $value)
                                    <option
                                        value="{{ $key }}" @selected($key == request('customer_type','0'))>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Paid Status -->
                        <div class="w-[150px]">
                            <x-input-label for="paid_status" value="Paid Status"/>
                            <select name="paid_status" id="paid_status" class="w-full border rounded-md p-2">
                                @foreach($paidStatus as $key => $value)
                                    <option
                                        value="{{ $key }}" @selected($key == request('paid_status','0'))>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- End Date -->
                        <div class="w-[150px]" x-data x-init="flatpickr($refs.endDate,{dateFormat:'d-m-Y'})">
                            <x-input-label for="end_date" value="To *"/>
                            <input
                                x-ref="endDate"
                                type="text"
                                name="end_date"
                                value="{{ request('end_date') }}"
                                placeholder="dd-mm-yyyy"
                                class="w-full border border-black rounded-md p-2"
                            />
                        </div>
                        <!-- Search Button -->
                        <div class="w-[60px]">
                            <x-buttons.primary class="px-4 py-2 h-full">{{ __('Search') }}</x-buttons.primary>
                        </div>

                    </div>
                </form>

                <!-- Table -->
                <div
                    x-data="{
                            open: false,
                            productOrder: {},
                        }"
                    >
                    <div class="overflow-x-auto">
                        <table class="min-w-full table-auto border-collapse border border-gray-300 text-xs mt-4">
                            <thead class="bg-gray-200 text-gray-700">
                            <tr>
                                <x-th rowspan="2">SL</x-th>
                                <x-th rowspan="2">Shop Name</x-th>
                                <x-th rowspan="2">Shop Code</x-th>
                                <x-th rowspan="2">Customer Name</x-th>
                                <x-th rowspan="2">Customer Mobile Number</x-th>
                                <x-th rowspan="2">Guarantor Mobile Number</x-th>
                                <x-th rowspan="2">Product</x-th>
                                <x-th colspan="2">Order</x-th>
                                <x-th colspan="4">Sale</x-th>
                                <x-th rowspan="2">Product Price</x-th>
                                <x-th colspan="3">Payment Received</x-th>
                                <x-th rowspan="2">Outstanding</x-th>
                                <x-th rowspan="2">Due Amount (TK)</x-th>
                                <x-th rowspan="2">Status</x-th>
                                <x-th rowspan="2">Action</x-th>
                            </tr>
                            <tr>
                                <x-th>Date</x-th>
                                <x-th>Number</x-th>

                                <x-th>Date</x-th>
                                <x-th>Bill Number</x-th>
                                <x-th>No of Inst.</x-th>
                                <x-th>Inst. Amount (TK)</x-th>

                                <x-th>Down Payment</x-th>
                                <x-th>Security Money</x-th>
                                <x-th>EMI</x-th>
                            </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200 text-center">
                            @foreach($productOrders as $productOrder)
                                <tr>
                                    <x-td>{{ $productOrders->firstItem() + $loop->index }}</x-td>
                                    <x-td class="text-left">
                                        {{ $productOrder?->dealerDetail?->shop_name }}
                                    </x-td>
                                    <x-td>
                                        {{ $productOrder?->dealerDetail?->dealer_code }}
                                    </x-td>
                                    <x-td class="text-left">
                                        {{ $productOrder?->customerDetail?->cust_nid_name_en }}
                                    </x-td>
                                    <x-td>
                                        {{ $productOrder?->customerDetail?->user?->mobile_number }}
                                    </x-td>
                                    <x-td>
                                        {{ $productOrder?->guarantor->pluck('guar_mobile_number')->implode(', ') }}
                                    </x-td>
                                    <x-td class="text-left">
                                        {{ $productOrder?->product?->product_name }}
                                    </x-td>
                                    <x-td class="text-nowrap">
                                        {{ $productOrder?->created_at?->format(DateTimeFormats::CLIENT_DATE) }}
                                    </x-td>
                                    <x-td>
                                        {{ $productOrder?->order_number }}
                                    </x-td>
                                    <x-td class="text-nowrap">
                                        {{ $productOrder?->delivery_date ? Carbon::parse($productOrder?->delivery_date)?->format(DateTimeFormats::CLIENT_DATE) : null }}
                                    </x-td>
                                    <x-td>
                                        {{ isset(explode('.', $productOrder?->bill_number)[3]) ? explode('.', $productOrder?->bill_number)[3] : '' }}
                                    </x-td>
                                    <x-td>
                                        {{ $productOrder?->tenure_months }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ $productOrder?->installment_amount }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ $productOrder?->total_price }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ $productOrder?->down_payment }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ $productOrder?->security_money }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ $productOrder?->collected_emi_amount }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ $productOrder->outstanding_amount }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ $productOrder->due_amount }}
                                    </x-td>
                                    <x-td>
                                        {{$productOrder->due_days }}
                                    </x-td>
                                    <x-td>
                                        <x-buttons.success
                                            @click="
                                                productOrder = {{ json_encode($productOrder) }};
                                                open = true;
                                            "
                                            title="View">
                                            <x-icons.eye class="w-4 h-4"/>
                                        </x-buttons.success>
                                    </x-td>
                                </tr>
                            @endforeach
                            </tbody>
                            <tfoot

                            >
                            <tr>
                                <x-td></x-td>
                                <x-td colspan="12" class="text-left font-bold">Total</x-td>
                                <x-td class="text-right font-bold">
                                    {{$allProductOrders->sum('total_price')}}
                                </x-td>
                                <x-td class="text-right font-bold">
                                    {{$allProductOrders->sum('down_payment')}}
                                </x-td>
                                <x-td class="text-right font-bold">
                                    {{$allProductOrders->sum('security_money')}}
                                </x-td>
                                <x-td class="text-right font-bold">
                                    {{$allProductOrders->sum('collected_emi_amount')}}
                                </x-td>
                                <x-td class="text-right font-bold">
                                    {{$allProductOrders->sum('outstanding_amount')}}
                                </x-td>
                                <x-td class="text-right font-bold">
                                    {{$allProductOrders->sum('due_amount')}}
                                </x-td>
                                <x-td></x-td>
                                <x-td></x-td>
                            </tr>
                            </tfoot>
                        </table>

                        <div class="mt-4">
                            {{ $productOrders->withQueryString()->links() }}
                        </div>
                    </div>


                    <!-- Modal -->
                    <template x-if="open">
                        <div
                            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
                            <div
                                class="bg-white rounded-lg shadow-lg p-6 w-full max-w-screen-md my-8 max-h-[90vh] overflow-y-auto">
                                <h3 class="text-xl font-semibold mb-2">Sale Details</h3>
                                <div class="">
                                    <div class="flex justify-between">
                                        <strong>Sale Bill Number:</strong>
                                        <span x-text="productOrder.bill_number"></span>
                                    </div>
                                    <div class="flex justify-between">
                                        <strong>Product:</strong>
                                        <span
                                            x-text="productOrder.product ? productOrder.product.product_name : ''"></span>
                                    </div>
                                    <div class="flex justify-between">
                                        <strong>Sale Price (TK):</strong>
                                        <span x-text="productOrder.total_price"></span>
                                    </div>
                                    <div class="flex justify-between">
                                        <strong>Down Payment (TK):</strong>
                                        <span x-text="productOrder.down_payment"></span>
                                    </div>
                                    <div class="flex justify-between">
                                        <strong>Security Money (TK):</strong>
                                        <span x-text="productOrder.security_money"></span>
                                    </div>
                                </div>

                                <hr class="my-2">

                                <h3 class="text-xl font-semibold mb-2">Customer Details</h3>
                                <div class="">
                                    <div class="flex justify-between">
                                        <strong>Name:</strong>
                                        <span
                                            x-text="productOrder.customer_detail ? productOrder.customer_detail.cust_nid_name_en : ''"></span>
                                    </div>
                                    <div class="flex justify-between mb-2">
                                        <strong>Mobile Number:</strong>
                                        <span
                                            x-text="productOrder.customer_detail && productOrder.customer_detail.user ? productOrder.customer_detail.user.mobile_number : ''"></span>
                                    </div>
                                </div>

                                <hr class="my-2">

                                <h3 class="text-xl font-semibold mb-2">Guarantor Details</h3>
                                <div class="">
                                    <div class="flex justify-between">
                                        <strong>Name:</strong>
                                        <span
                                            x-text="productOrder.guarantor ? productOrder.guarantor.guar_nid_name_en  : ''"></span>
                                    </div>
                                    <div class="flex justify-between">
                                        <strong>Mobile Number:</strong>
                                        <span
                                            x-text="productOrder.guarantor ? productOrder.guarantor.guar_mobile_number : ''"></span>
                                    </div>
                                    <div class="flex justify-between">
                                        <strong>Relation with Guarantor:</strong>
                                        <span
                                            x-text="productOrder.guarantor ? productOrder.guarantor.relation : ''"></span>
                                    </div>
                                </div>

                                <hr class="my-2">

                                <h3 class="text-md font-semibold mb-2">EMI Installments</h3>
                                <table class="min-w-full table-auto border border-gray-300 text-sm mb-4">
                                    <thead class="bg-gray-100">
                                    <tr>
                                        <x-th class="px-2 py-1 border">#</x-th>
                                        <x-th class="px-2 py-1 border">Due Date</x-th>
                                        <x-th class="px-2 py-1 border">Amount</x-th>
                                        <x-th class="px-2 py-1 border">Due</x-th>
                                        <x-th class="px-2 py-1 border">Status</x-th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <template x-for="(emi, idx) in productOrder.emi_installments"
                                              :key="emi.id || idx">
                                        <tr>
                                            <x-td class="text-center" x-text="emi.index"></x-td>
                                            <x-td class="text-center" x-text="emi.date"></x-td>
                                            <x-td class="text-right" x-text="emi.amount"></x-td>
                                            <x-td class="text-right" x-text="emi.due"></x-td>
                                            <x-td class="text-center">
                                                        <span class="px-2 py-1 rounded text-xs font-semibold"
                                                              :class="emi.status === 'paid'
                                                              ? 'bg-green-100 text-green-800'
                                                              : emi.status === 'partial'
                                                                  ? 'bg-yellow-100 text-yellow-800'
                                                                  :  'bg-red-100 text-red-800' "
                                                              x-text="emi.status"></span>
                                            </x-td>
                                        </tr>
                                    </template>
                                    </tbody>
                                </table>


                                <div class="flex justify-end mt-4">
                                    <button @click="open = false"
                                            class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">Close
                                    </button>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('filterSystem', (data) => ({
                    brandId: data.initBrand,
                    dealerId: data.initDealer,
                    allProducts: data.allProducts,
                    allCustomers: data.allCustomers,
                    allDealers: data.allDealers,
                    products: data.allProducts,
                    customers: data.allCustomers,
                    dealers: data.allDealers,

                    init() {
                        this.filterProducts();
                        this.filterCustomers();
                    },
                    filterProducts() {
                        if (this.brandId !== 'All') {
                            this.products = this.allProducts.filter(p => p.brand_id == this.brandId);
                        } else {
                            this.products = this.allProducts;
                        }
                        this.$dispatch('update-products', this.products);
                    },
                    filterCustomers() {
                        if (this.dealerId !== 'All') {
                            this.customers = this.allCustomers.filter(c => c.dealer_id == this.dealerId);
                        } else {
                            this.customers = this.allCustomers;
                        }
                        this.$dispatch('update-customers', this.customers);
                    },
                    updateDealer(value) {
                        this.dealerId = value;
                        this.filterCustomers();
                    },
                }));

                Alpine.data('searchableDropdown', (type, items, initialValue = 'All') => ({
                    open: false,
                    search: '',
                    selectedValue: initialValue,
                    selectedLabel: 'All',
                    allItems: items,
                    filtered: items,

                    select(value, label) {
                        this.selectedValue = value;
                        this.selectedLabel = label;
                        this.open = false;
                        if (type === 'dealer') this.$dispatch('dealer-change', value);
                    },

                    getFiltered() {
                        const term = this.search.toLowerCase();
                        this.filtered = this.allItems.filter(i =>
                            Object.values(i).join(' ').toLowerCase().includes(term)
                        );
                    },

                    init() {
                        // Set initial label based on initialValue
                        if (initialValue !== 'All') {
                            const match = this.allItems.find(i => i.id == initialValue);
                            if (match) {
                                if (type === 'product') this.selectedLabel = match.product_name;
                                if (type === 'dealer') this.selectedLabel = match.shop_name + ' - ' + match.dealer_code;
                                if (type === 'customer') this.selectedLabel = match.cust_nid_name_en;
                            }
                        }

                        this.$watch('search', () => this.getFiltered());

                        window.addEventListener('update-products', e => {
                            if (type === 'product') {
                                this.allItems = e.detail;
                                this.filtered = e.detail;
                            }
                        });
                        window.addEventListener('update-customers', e => {
                            if (type === 'customer') {
                                this.allItems = e.detail;
                                this.filtered = e.detail;
                            }
                        });
                        window.addEventListener('dealer-change', e => {
                            if (type === 'dealer') this.selectedValue = e.detail;
                        });
                    }
                }));

            });
        </script>

        <script>
            function validateAndSubmit(el) {
                const endDateInput = el.querySelector('[x-ref="endDate"]');
                if (!endDateInput || !endDateInput.value) {
                    alert('Please Select To Date !');
                    endDateInput.focus();
                    return;
                }
                el.submit();
            }
        </script>
    @endpush
</x-app-layout>


{{--BackUp Code--}}
{{--@php--}}
{{--    use App\Enums\DateTimeFormats;--}}
{{--    use Carbon\Carbon;--}}
{{--@endphp--}}
{{--<x-app-layout>--}}
{{--    @push('styles')--}}
{{--        <style>--}}
{{--            .bg-white.overflow-hidden {--}}
{{--                overflow: visible !important;--}}
{{--            }--}}
{{--        </style>--}}
{{--    @endpush--}}
{{--    <div class="py-12">--}}
{{--        <div class="max-w-full mx-auto sm:px-1 lg:px-1">--}}
{{--            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">--}}
{{--                <div class="p-6 text-gray-900" x-data="{ showCollectModal: false }">--}}

{{--                    <!-- Header -->--}}
{{--                    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">--}}
{{--                        <p class="text-lg font-semibold text-gray-900">--}}
{{--                            {{__('Customer Due & Outstanding Report')}}--}}
{{--                        </p>--}}

{{--                        @if($productOrders->isNotEmpty())--}}
{{--                            <a href="{{ route('outstanding_report.print',request()->query()) }}"--}}
{{--                               target="_blank"--}}
{{--                               class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm whitespace-nowrap">--}}
{{--                                Print--}}
{{--                            </a>--}}
{{--                        @endif--}}
{{--                    </div>--}}

{{--                    <!-- Session Message -->--}}
{{--                    <x-session-message class="mt-4"/>--}}

{{--                    <!-- Filter Form -->--}}
{{--                    <div--}}
{{--                        x-data="collectionFilter({--}}
{{--                                initialBrand: '{{ request('brand_id','All') }}',--}}
{{--                                initialDealer: '{{ request('dealer_id','') }}',--}}
{{--                                initialCustomer: '{{ request('customer_id','') }}',--}}
{{--                                initialProduct: '{{ request('product_id','') }}'--}}
{{--                            })"--}}
{{--                        x-init="init()"--}}
{{--                    >--}}
{{--                        <form action="{{ url()->current() }}" method="GET">--}}
{{--                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-8 gap-4 w-full">--}}
{{--                                <!-- Brand -->--}}
{{--                                <div>--}}
{{--                                    <x-input-label for="brandId" :value="__('Brand')"/>--}}
{{--                                    <select x-model="brandId" @change="onBrandChange()" name="brand_id"--}}
{{--                                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-indigo-200">--}}
{{--                                        <option value="">All</option>--}}
{{--                                        @foreach($brands as $brand)--}}
{{--                                            <option value="{{ $brand->id }}">{{ $brand->name }}</option>--}}
{{--                                        @endforeach--}}
{{--                                    </select>--}}
{{--                                </div>--}}
{{--                                <!-- Product -->--}}
{{--                                <div>--}}
{{--                                    <x-input-label for="productId" :value="__('Model')"/>--}}
{{--                                    <select x-model="productId" name="product_id"--}}
{{--                                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-indigo-200">--}}
{{--                                        <option value="">All</option>--}}
{{--                                        <template x-for="product in products" :key="product.id">--}}
{{--                                            <option :value="product.id" x-text="product.product_name"--}}
{{--                                                    :selected="product.id == productId"></option>--}}
{{--                                        </template>--}}
{{--                                    </select>--}}
{{--                                </div>--}}

{{--                                <!-- Dealer Dropdown (same Alpine parent as customers/products) -->--}}
{{--                                <div--}}
{{--                                    class="fixed_width relative"--}}
{{--                                    style="overflow: visible;"--}}
{{--                                    x-data="{--}}
{{--                                        open:false,--}}
{{--                                        search: '{{ old('dealer_id', request('dealer_id')) && isset($selectedDealer) ? $selectedDealer->shop_name . ' - ' . $selectedDealer->dealer_code : '' }}'--}}
{{--                                    }"--}}
{{--                                >--}}
{{--                                    <x-input-label for="dealerId" :value="__('Dealer')"/>--}}
{{--                                    <input type="text"--}}
{{--                                           x-model="search"--}}
{{--                                           @focus="open = true"--}}
{{--                                           @blur="setTimeout(() => open = false, 150)"--}}
{{--                                           placeholder="Search dealer..."--}}
{{--                                           class="w-full border rounded px-2 py-2"/>--}}

{{--                                    <!-- Dropdown -->--}}
{{--                                    <div x-show="open"--}}
{{--                                         class="absolute z-10 w-full bg-white border rounded shadow max-h-60 overflow-auto">--}}
{{--                                        <div class="p-1 hover:bg-gray-100 cursor-pointer"--}}
{{--                                             @click="dealerId = ''; search='All'; open = false; customerId='All'">--}}
{{--                                            All--}}
{{--                                        </div>--}}

{{--                                        <template x-for="dealer in dealers.filter(d => (`${d.shop_name} - ${d.dealer_code}`).toLowerCase().includes(search.toLowerCase()))"--}}
{{--                                            :key="dealer.id">--}}
{{--                                            <div class="p-1 hover:bg-gray-100 cursor-pointer"--}}
{{--                                                 @click="dealerId = dealer.id;--}}
{{--                                                     search = `${dealer.shop_name} - ${dealer.dealer_code}`;--}}
{{--                                                     open = false;--}}
{{--                                                     customerId = 'All';--}}
{{--                                                   ">--}}
{{--                                                <span x-text="dealer.dealer_code ? `${dealer.shop_name} - ${dealer.dealer_code}` : dealer.shop_name"></span>--}}
{{--                                            </div>--}}
{{--                                        </template>--}}
{{--                                    </div>--}}
{{--                                    <input type="hidden" name="dealer_id" :value="dealerId">--}}
{{--                                </div>--}}

{{--                                <!-- Customer Dropdown -->--}}
{{--                                <div class="fixed_width relative" x-data="{ open:false, search:'' }">--}}
{{--                                    <x-input-label for="customerId" :value="__('Customer')"/>--}}
{{--                                    <input type="text"--}}
{{--                                           x-model="search"--}}
{{--                                           @focus="open = true"--}}
{{--                                           @blur="setTimeout(() => open = false, 150)"--}}
{{--                                           placeholder="Search customer..."--}}
{{--                                           class="w-full border rounded px-2 py-2"/>--}}

{{--                                    <div x-show="open"--}}
{{--                                         class="absolute z-10 w-full bg-white border rounded shadow max-h-60 overflow-auto">--}}
{{--                                        <div class="p-1 hover:bg-gray-100 cursor-pointer"--}}
{{--                                             @click="customerId = ''; search='All'; open = false">--}}
{{--                                            All--}}
{{--                                        </div>--}}

{{--                                        <template--}}
{{--                                            x-for="customer in customers--}}
{{--                                                .filter(c => dealerId === 'All' || c.dealer_id == dealerId)--}}
{{--                                                .filter(c => c.cust_nid_name_en.toLowerCase().includes(search.toLowerCase()))"--}}
{{--                                            :key="customer.id">--}}
{{--                                            <div class="p-1 hover:bg-gray-100 cursor-pointer"--}}
{{--                                                 @click="customerId = customer.id; search = customer.cust_nid_name_en; open = false">--}}
{{--                                                <span x-text="customer.cust_nid_name_en"></span>--}}
{{--                                            </div>--}}
{{--                                        </template>--}}
{{--                                    </div>--}}
{{--                                    <input type="hidden" name="customer_id" :value="customerId">--}}
{{--                                </div>--}}

{{--                                <div>--}}
{{--                                    <x-input-label for="customer_type" :value="__('Customer Type')"/>--}}
{{--                                    <select name="customer_type"--}}
{{--                                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-indigo-200">--}}
{{--                                        @foreach($customerTypeOptions as $value => $customerTypeOption)--}}
{{--                                            <option--}}
{{--                                                value="{{ $value }}"--}}
{{--                                                @selected($value == request('customer_type', ''))--}}
{{--                                            >--}}
{{--                                                {{ $customerTypeOption }}--}}
{{--                                            </option>--}}
{{--                                        @endforeach--}}
{{--                                    </select>--}}
{{--                                </div>--}}

{{--                                <div>--}}
{{--                                    <x-input-label for="paid_status" :value="__('Paid Status')"/>--}}
{{--                                    <select name="paid_status"--}}
{{--                                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-indigo-200">--}}
{{--                                        @foreach($paidStatus as $value => $status)--}}
{{--                                            <option--}}
{{--                                                value="{{ $value }}"--}}
{{--                                                @selected($value == request('paid_status', 0))--}}
{{--                                            >--}}
{{--                                                {{ $status }}--}}
{{--                                            </option>--}}
{{--                                        @endforeach--}}
{{--                                    </select>--}}
{{--                                </div>--}}

{{--                                <div class="fixed_width">--}}
{{--                                    <x-input-label for="end_date" :value="__('To *')"/>--}}
{{--                                    <x-text-input--}}
{{--                                        class="block w-full flatpickr" type="text"--}}
{{--                                        id="end_date" name="end_date"--}}
{{--                                        :value="request()->end_date"--}}
{{--                                        placeholder="dd-mm-yyyy"--}}
{{--                                        required--}}
{{--                                    />--}}
{{--                                    <x-input-error :messages="$errors->get('end_date')" class="mt-2"/>--}}
{{--                                </div>--}}

{{--                                <!-- Button -->--}}
{{--                                <div class="mt-5">--}}
{{--                                    <x-buttons.primary class="px-4">--}}
{{--                                        {{__('Search')}}--}}
{{--                                    </x-buttons.primary>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </form>--}}
{{--                    </div>--}}

{{--                    <!-- Data Table -->--}}
{{--                    <div--}}
{{--                        x-data="{--}}
{{--                            open: false,--}}
{{--                            productOrder: {},--}}
{{--                        }"--}}
{{--                        class="overflow-x-auto">--}}
{{--                        <table class="min-w-full table-auto border-collapse border border-gray-300 text-xs mt-4">--}}
{{--                            <thead class="bg-gray-200 text-gray-700">--}}
{{--                            <tr>--}}
{{--                                <x-th rowspan="2">SL</x-th>--}}
{{--                                <x-th rowspan="2">Shop Name</x-th>--}}
{{--                                <x-th rowspan="2">Shop Code</x-th>--}}
{{--                                <x-th rowspan="2">Customer Name</x-th>--}}
{{--                                <x-th rowspan="2">Customer Mobile Number</x-th>--}}
{{--                                <x-th rowspan="2">Product</x-th>--}}
{{--                                <x-th colspan="2">Order</x-th>--}}
{{--                                <x-th colspan="4">Sale</x-th>--}}
{{--                                <x-th rowspan="2">Product Price</x-th>--}}
{{--                                <x-th colspan="3">Payment Received</x-th>--}}
{{--                                <x-th rowspan="2">Outstanding</x-th>--}}
{{--                                <x-th rowspan="2">Due Amount (TK)</x-th>--}}
{{--                                <x-th rowspan="2">Status</x-th>--}}
{{--                                <x-th rowspan="2">Action</x-th>--}}
{{--                            </tr>--}}
{{--                            <tr>--}}
{{--                                <x-th>Date</x-th>--}}
{{--                                <x-th>Number</x-th>--}}

{{--                                <x-th>Date</x-th>--}}
{{--                                <x-th>Bill Number</x-th>--}}
{{--                                <x-th>No of Inst.</x-th>--}}
{{--                                <x-th>Inst. Amount (TK)</x-th>--}}

{{--                                <x-th>Down Payment</x-th>--}}
{{--                                <x-th>Security Money</x-th>--}}
{{--                                <x-th>EMI</x-th>--}}
{{--                            </tr>--}}
{{--                            </thead>--}}
{{--                            <tbody class="bg-white divide-y divide-gray-200 text-center">--}}
{{--                            @foreach($productOrders as $productOrder)--}}
{{--                                <tr>--}}
{{--                                    <x-td>{{ $productOrders->firstItem() + $loop->index }}</x-td>--}}
{{--                                    <x-td class="text-left">--}}
{{--                                        {{ $productOrder?->dealerDetail?->shop_name }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td>--}}
{{--                                        {{ $productOrder?->dealerDetail?->dealer_code }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-left">--}}
{{--                                        {{ $productOrder?->customerDetail?->cust_nid_name_en }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td>--}}
{{--                                        {{ $productOrder?->customerDetail?->user?->mobile_number }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-left">--}}
{{--                                        {{ $productOrder?->product?->product_name }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-nowrap">--}}
{{--                                        {{ $productOrder?->created_at?->format(DateTimeFormats::CLIENT_DATE) }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td>--}}
{{--                                        {{ $productOrder?->order_number }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-nowrap">--}}
{{--                                        {{ $productOrder?->delivery_date ? Carbon::parse($productOrder?->delivery_date)?->format(DateTimeFormats::CLIENT_DATE) : null }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td>--}}
{{--                                        {{ explode('.', $productOrder?->bill_number)[3] }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td>--}}
{{--                                        {{ $productOrder?->tenure_months }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-right">--}}
{{--                                        {{ $productOrder?->installment_amount }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-right">--}}
{{--                                        {{ $productOrder?->total_price }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-right">--}}
{{--                                        {{ $productOrder?->down_payment }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-right">--}}
{{--                                        {{ $productOrder?->security_money }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-right">--}}
{{--                                        {{ $productOrder?->collected_emi_amount }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-right">--}}
{{--                                        {{ $productOrder->outstanding_amount }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td class="text-right">--}}
{{--                                        {{ $productOrder->due_amount }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td>--}}
{{--                                        {{$productOrder->due_days }}--}}
{{--                                    </x-td>--}}
{{--                                    <x-td>--}}
{{--                                        <x-buttons.success--}}
{{--                                            @click="--}}
{{--                                                productOrder = {{ json_encode($productOrder) }};--}}
{{--                                                open = true;--}}
{{--                                            "--}}
{{--                                            title="View">--}}
{{--                                            <x-icons.eye class="w-4 h-4"/>--}}
{{--                                        </x-buttons.success>--}}
{{--                                    </x-td>--}}
{{--                                </tr>--}}
{{--                            @endforeach--}}
{{--                            </tbody>--}}
{{--                            <tfoot--}}

{{--                            >--}}
{{--                            <tr>--}}
{{--                                <x-td></x-td>--}}
{{--                                <x-td colspan="11" class="text-left font-bold">Total</x-td>--}}
{{--                                <x-td class="text-right font-bold">--}}
{{--                                    {{$allProductOrders->sum('total_price')}}--}}
{{--                                </x-td>--}}
{{--                                <x-td class="text-right font-bold">--}}
{{--                                    {{$allProductOrders->sum('down_payment')}}--}}
{{--                                </x-td>--}}
{{--                                <x-td class="text-right font-bold">--}}
{{--                                    {{$allProductOrders->sum('security_money')}}--}}
{{--                                </x-td>--}}
{{--                                <x-td class="text-right font-bold">--}}
{{--                                    {{$allProductOrders->sum('collected_emi_amount')}}--}}
{{--                                </x-td>--}}
{{--                                <x-td class="text-right font-bold">--}}
{{--                                    {{$allProductOrders->sum('outstanding_amount')}}--}}
{{--                                </x-td>--}}
{{--                                <x-td class="text-right font-bold">--}}
{{--                                    {{$allProductOrders->sum('due_amount')}}--}}
{{--                                </x-td>--}}
{{--                                <x-td></x-td>--}}
{{--                                <x-td></x-td>--}}
{{--                            </tr>--}}
{{--                            </tfoot>--}}
{{--                        </table>--}}

{{--                        <div class="mt-4">--}}
{{--                            {{ $productOrders->withQueryString()->links() }}--}}
{{--                        </div>--}}

{{--                        <!-- Modal -->--}}
{{--                        <template x-if="open">--}}
{{--                            <div--}}
{{--                                class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">--}}
{{--                                <div--}}
{{--                                    class="bg-white rounded-lg shadow-lg p-6 w-full max-w-screen-md my-8 max-h-[90vh] overflow-y-auto">--}}
{{--                                    <h3 class="text-xl font-semibold mb-2">Sale Details</h3>--}}
{{--                                    <div class="">--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Sale Bill Number:</strong>--}}
{{--                                            <span x-text="productOrder.bill_number"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Product:</strong>--}}
{{--                                            <span--}}
{{--                                                x-text="productOrder.product ? productOrder.product.product_name : ''"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Sale Price (TK):</strong>--}}
{{--                                            <span x-text="productOrder.total_price"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Down Payment (TK):</strong>--}}
{{--                                            <span x-text="productOrder.down_payment"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Security Money (TK):</strong>--}}
{{--                                            <span x-text="productOrder.security_money"></span>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <hr class="my-2">--}}

{{--                                    <h3 class="text-xl font-semibold mb-2">Customer Details</h3>--}}
{{--                                    <div class="">--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Name:</strong>--}}
{{--                                            <span--}}
{{--                                                x-text="productOrder.customer_detail ? productOrder.customer_detail.cust_nid_name_en : ''"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="flex justify-between mb-2">--}}
{{--                                            <strong>Mobile Number:</strong>--}}
{{--                                            <span--}}
{{--                                                x-text="productOrder.customer_detail && productOrder.customer_detail.user ? productOrder.customer_detail.user.mobile_number : ''"></span>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <hr class="my-2">--}}

{{--                                    <h3 class="text-xl font-semibold mb-2">Guarantor Details</h3>--}}
{{--                                    <div class="">--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Name:</strong>--}}
{{--                                            <span--}}
{{--                                                x-text="productOrder.guarantor ? productOrder.guarantor.guar_nid_name_en  : ''"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Mobile Number:</strong>--}}
{{--                                            <span--}}
{{--                                                x-text="productOrder.guarantor ? productOrder.guarantor.guar_mobile_number : ''"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="flex justify-between">--}}
{{--                                            <strong>Relation with Guarantor:</strong>--}}
{{--                                            <span--}}
{{--                                                x-text="productOrder.guarantor ? productOrder.guarantor.relation : ''"></span>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <hr class="my-2">--}}

{{--                                    <h3 class="text-md font-semibold mb-2">EMI Installments</h3>--}}
{{--                                    <table class="min-w-full table-auto border border-gray-300 text-sm mb-4">--}}
{{--                                        <thead class="bg-gray-100">--}}
{{--                                        <tr>--}}
{{--                                            <x-th class="px-2 py-1 border">#</x-th>--}}
{{--                                            <x-th class="px-2 py-1 border">Due Date</x-th>--}}
{{--                                            <x-th class="px-2 py-1 border">Amount</x-th>--}}
{{--                                            <x-th class="px-2 py-1 border">Due</x-th>--}}
{{--                                            <x-th class="px-2 py-1 border">Status</x-th>--}}
{{--                                        </tr>--}}
{{--                                        </thead>--}}
{{--                                        <tbody>--}}
{{--                                        <template x-for="(emi, idx) in productOrder.emi_installments"--}}
{{--                                                  :key="emi.id || idx">--}}
{{--                                            <tr>--}}
{{--                                                <x-td class="text-center" x-text="emi.index"></x-td>--}}
{{--                                                <x-td class="text-center" x-text="emi.date"></x-td>--}}
{{--                                                <x-td class="text-right" x-text="emi.amount"></x-td>--}}
{{--                                                <x-td class="text-right" x-text="emi.due"></x-td>--}}
{{--                                                <x-td class="text-center">--}}
{{--                                                        <span class="px-2 py-1 rounded text-xs font-semibold"--}}
{{--                                                              :class="emi.status === 'paid'--}}
{{--                                                              ? 'bg-green-100 text-green-800'--}}
{{--                                                              : emi.status === 'partial'--}}
{{--                                                                  ? 'bg-yellow-100 text-yellow-800'--}}
{{--                                                                  :  'bg-red-100 text-red-800' "--}}
{{--                                                              x-text="emi.status"></span>--}}
{{--                                                </x-td>--}}
{{--                                            </tr>--}}
{{--                                        </template>--}}
{{--                                        </tbody>--}}
{{--                                    </table>--}}


{{--                                    <div class="flex justify-end mt-4">--}}
{{--                                        <button @click="open = false"--}}
{{--                                                class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">Close--}}
{{--                                        </button>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </template>--}}
{{--                    </div>--}}

{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    @push('scripts')--}}
{{--        <script>--}}
{{--            document.addEventListener('alpine:init', () => {--}}
{{--                Alpine.data('collectionFilter', ({initialBrand, initialDealer, initialCustomer, initialProduct}) => ({--}}
{{--                    brandId: initialBrand,--}}
{{--                    dealerId: initialDealer,--}}
{{--                    customerId: initialCustomer,--}}
{{--                    productId: initialProduct,--}}
{{--                    dealers: [],--}}
{{--                    customers: [],--}}
{{--                    products: [],--}}

{{--                    async init() {--}}
{{--                        await this.loadDealers(true);--}}
{{--                        await this.loadProducts(true);--}}
{{--                        await this.loadCustomers(true);--}}
{{--                    },--}}

{{--                    async onBrandChange() {--}}
{{--                        this.dealerId = 'All';--}}
{{--                        this.customerId = 'All';--}}
{{--                        this.productId = 'All';--}}

{{--                        await this.loadDealers(false);--}}
{{--                        await this.loadProducts(false);--}}
{{--                    },--}}

{{--                    async loadProducts(isInit = false) {--}}
{{--                        try {--}}
{{--                            this.products = [];--}}
{{--                            const apiUrl = "{{ url('api/report/products') }}/" + this.brandId;--}}
{{--                            const response = await fetch(apiUrl);--}}
{{--                            if (!response.ok) console.error('Products fetch failed', response.status, apiUrl);--}}
{{--                            this.products = await response.json();--}}

{{--                            if (isInit && this.productId !== 'All') {--}}
{{--                                const exists = this.products.some(p => p.id == this.productId);--}}
{{--                                if (!exists) this.productId = 'All';--}}
{{--                            }--}}
{{--                        } catch (e) {--}}
{{--                            console.error('Products network error', e);--}}
{{--                        }--}}
{{--                    },--}}

{{--                    async loadDealers(isInit = false) {--}}
{{--                        try {--}}
{{--                            this.dealers = [];--}}
{{--                            this.customers = [];--}}

{{--                            if (!isInit) {--}}
{{--                                this.dealerId = 'All';--}}
{{--                                this.customerId = 'All';--}}
{{--                            }--}}

{{--                            const apiUrl = "{{ url('api/report/dealers') }}/" + this.brandId;--}}
{{--                            const response = await fetch(apiUrl);--}}
{{--                            if (!response.ok) console.error('Dealers fetch failed', response.status, apiUrl);--}}
{{--                            const data = await response.json();--}}

{{--                            this.dealers = data.dealers;--}}
{{--                            this.customers = data.customers;--}}

{{--                            if (isInit && this.dealerId !== 'All') {--}}
{{--                                const exists = this.dealers.some(d => d.id == this.dealerId);--}}
{{--                                if (!exists) this.dealerId = 'All';--}}
{{--                            }--}}
{{--                        } catch (e) {--}}
{{--                            console.error('Dealers network error', e);--}}
{{--                        }--}}
{{--                    },--}}

{{--                    async loadCustomers(isInit = false) {--}}
{{--                        try {--}}
{{--                            this.customers = [];--}}
{{--                            if (!isInit) {--}}
{{--                                this.customerId = 'All';--}}
{{--                            }--}}

{{--                            let apiUrl;--}}
{{--                            if (this.dealerId === 'All') {--}}
{{--                                apiUrl = "{{ url('api/report/customers') }}/All/" + this.brandId;--}}
{{--                            } else {--}}
{{--                                apiUrl = "{{ url('api/report/customers') }}/" + this.dealerId + "/" + this.brandId;--}}
{{--                            }--}}

{{--                            const response = await fetch(apiUrl);--}}
{{--                            if (!response.ok) console.error('Customers fetch failed', response.status, apiUrl);--}}
{{--                            this.customers = await response.json();--}}

{{--                            if (isInit && this.customerId !== 'All') {--}}
{{--                                const exists = this.customers.some(c => c.id == this.customerId);--}}
{{--                                if (!exists) this.customerId = 'All';--}}
{{--                            }--}}
{{--                        } catch (e) {--}}
{{--                            console.error('Customers network error', e);--}}
{{--                        }--}}
{{--                    }--}}
{{--                }));--}}
{{--            });--}}
{{--        </script>--}}
{{--    @endpush--}}

{{--</x-app-layout>--}}