@php use App\Enums\DateTimeFormats; @endphp
<x-app-layout>
    @push('styles')
        <!-- Tom Select CSS -->
        <link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.default.min.css" rel="stylesheet">

        <style>
            .bg-white.overflow-hidden {
                overflow: visible !important;
            }

            /* TomSelect wrapper for input + arrow Start*/
            .ts-control {
                display: flex !important;
                align-items: center !important;
                min-height: 38px;
                position: relative;
                padding-right: 2.5rem;
            }

            .ts-control .ts-values {
                display: flex;
                align-items: center;
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
            }

            .ts-control .item,
            .ts-control input {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                flex-shrink: 1;
            }

            .ts-control .dropdown-toggle {
                position: absolute;
                right: 0.5rem;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: none;
            }

            /*End*/
        </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">

                <!-- Header -->
                <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                    <p class="text-lg font-semibold text-gray-900">
                        Dealer Payments
                    </p>

                    @if($productOrders->isNotEmpty())
                        <div class="flex items-center gap-3">
                            <a href="{{ route('report.dealer_payments.downloadReport', [
                                    'brand_id' => request('brand_id'),
                                    'dealer_id' => request('dealer_id'),
                                    'customer_id' => request('customer_id'),
                                    'product_id' => request('product_id'),
                                    'transaction_type' => request('transaction_type'),
                                    'payment_method' => request('payment_method'),
                                    'start_date' => request('start_date'),
                                    'end_date' => request('end_date'),
                                ]) }}"
                               target="_blank"
                               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-print"></i> Print
                            </a>

                            <form action="{{ route('report.dealer_payments.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="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-blue-600 text-white rounded hover:bg-blue-700 text-sm flex items-center gap-1">
                                    <i class="fa fa-file-excel"></i> XL
                                </button>
                            </form>
                        </div>
                    @endif
                </div>

                <x-session-message class="mt-4"/>

                @if($productOrders->isEmpty() && request()->hasAny(['dealer_id','customer_id','transaction_type','payment_method','start_date','end_date']))
                    <div class="mt-4 text-center text-red-500 font-semibold">
                        No matching data found for your search criteria.
                    </div>
                @endif

                <div
                    x-data="collectionFilter({
                                initialBrand: '{{ request('brand_id','All') }}',
                                initialDealer: '{{ request('dealer_id','All') }}',
                                initialCustomer: '{{ request('customer_id','All') }}',
                                initialProduct: '{{ request('product_id','All') }}'
                            })"
                    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="tom-select w-full border border-gray-300 rounded-md">
                                    <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="tom-select w-full border border-gray-300 rounded-md">
                                    <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 -->
                            <div>
                                <x-input-label for="dealerId" :value="__('Dealer *')"/>
                                <select x-model="dealerId" name="dealer_id"
                                        @change="loadCustomers()"
                                        class="tom-select w-full border border-gray-300 rounded-md">
                                    <option value="">All</option>
                                    <template x-for="dealer in dealers" :key="dealer.id">
                                        <option :value="dealer.id"
                                                x-text="dealer.dealer_code ? `${dealer.shop_name} - ${dealer.dealer_code}` : dealer.shop_name"
                                                :selected="dealer.id == dealerId"></option>
                                    </template>
                                </select>
                            </div>
                            <!-- Date Range -->
                            <div>
                                <x-input-label for="start_date" :value="__('From *')"/>
                                <x-text-input
                                    class="flatpickr block w-full border border-gray-300 rounded-md"
                                    id="start_date" name="start_date" required
                                    value="{{ request('start_date') }}"
                                />
                            </div>
                            <div>
                                <x-input-label for="end_date" :value="__('To *')"/>
                                <x-text-input
                                    class="flatpickr block w-full border border-gray-300 rounded-md"
                                    id="end_date" name="end_date" required
                                    value="{{ request('end_date') }}"
                                />
                            </div>

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

                <div x-data="{ open: {{ session('modal_error') ? 'true' : 'false' }},
                                 selectedCollectionPayment: {
                                    id: '{{ old('product_order_id') }}',
                                    shop_name: '{{ old('shop_name') }}',
                                    dealer_code: '{{ old('dealer_code') }}',
                                    bill_number: '{{ old('bill_number') }}',
                                    rest_amount: '{{ old('rest_amount') }}',
                                    transaction_id: '{{ old('transaction_id') }}',
                                    transaction_date: '{{ old('transaction_date') }}'
                                 }
                            }">
                    <div class="overflow-x-auto mt-5 w-full">
                        <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" :value="__('SL')"/>
                                <x-th rowspan="2" :value="__('Shop Name')"/>
                                <x-th rowspan="2" :value="__('Shop Code')"/>
                                <x-th rowspan="2" :value="__('Customer')"/>
                                <x-th rowspan="2" :value="__('Product')"/>
                                <x-th colspan="2" class="text-center">Order</x-th>
                                <x-th colspan="2" class="text-center">Sale</x-th>
                                <x-th rowspan="2" :value="__('Product Price')"/>
                                <x-th colspan="2" class="text-center">Payment Received</x-th>
                                <x-th rowspan="2" :value="__('Net Payable')"/>
                                <x-th colspan="2" class="text-center">Payment Date</x-th>
                                <x-th rowspan="2" :value="__('Action')"/>
                            </tr>
                            <tr>
                                <x-th :value="__('Date')" class="text-center"/>
                                <x-th :value="__('Number')" class="text-center"/>

                                <x-th :value="__('Date')" class="text-center"/>
                                <x-th :value="__('Number')" class="text-center"/>

                                <x-th :value="__('Down Payment')" class="text-center"/>
                                <x-th :value="__('Security Money')" class="text-center"/>

                                <x-th :value="__('Transaction ID')"/>
                                <x-th :value="__('Date')"/>
                            </tr>
                            </thead>

                            <tbody>
                            @php $totalAmount = 0; @endphp
                            @foreach($productOrders as $productOrder)
                                <tr class="hover:bg-gray-50">
                                    <x-td class="text-center">{{ $loop->iteration }}</x-td>
                                    <x-td>{{ $productOrder->dealerDetail->shop_name }}</x-td>
                                    <x-td class="text-center">{{ $productOrder->dealerDetail->dealer_code }}</x-td>
                                    <x-td class="text-left">{{ $productOrder->customerDetail->cust_nid_name_en }}</x-td>
                                    <x-td class="text-left">{{ $productOrder->product->product_name }}</x-td>

                                    <x-td
                                        class="text-center">{{ \Carbon\Carbon::parse($productOrder->product_order_created_at)->format('d-m-Y') }}</x-td>
                                    <x-td class="text-center">{{ $productOrder->order_number }}</x-td>

                                    <x-td
                                        class="text-center">{{ \Carbon\Carbon::parse($productOrder->delivery_date)->format('d-m-Y') }}</x-td>
                                    <x-td
                                        class="text-center"> {{ explode('.', $productOrder->bill_number)[3] ?? '-' }}</x-td>

                                    <x-td class="text-right">
                                        {{ number_format($productOrder->cash_price, 2) }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ number_format($productOrder->down_payment, 2) }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ number_format($productOrder->security_money, 2) }}
                                    </x-td>
                                    <x-td class="text-right">
                                        {{ number_format($productOrder->rest_amount, 2)}}
                                    </x-td>

                                    <x-td class="text-center">{{ $productOrder->transaction_id ?? ' ' }}</x-td>
                                    <!-- Display Transaction ID -->
                                    <x-td
                                        class="text-center">{{ $productOrder->transaction_date ? \Carbon\Carbon::parse($productOrder->transaction_date)->format('d-m-Y') : ' ' }}</x-td>

                                    <x-td class="text-right">
                                        @if(!$productOrder->payment_exists)
                                            <button @click="open = true; selectedCollectionPayment = {
                                                        id: {{ $productOrder->id }},
                                                        shop_name: '{{ $productOrder->dealerDetail->shop_name }}',
                                                        dealer_code: '{{ $productOrder->dealerDetail->dealer_code }}',
                                                        customer_name: '{{ $productOrder->customerDetail->cust_nid_name_en }}',
                                                        bill_number: '{{ isset(explode('.', $productOrder?->bill_number)[3]) ? explode('.', $productOrder?->bill_number)[3] : '' }}',
                                                        rest_amount: {{ $productOrder->rest_amount }},
                                                        transaction_id: '{{ $productOrder->transaction_id }}',
                                                        transaction_date: '{{ $productOrder->transaction_date ? \Carbon\Carbon::parse($productOrder->transaction_date)->format('d-m-Y') : '' }}',
                                                    }" class="px-4 py-2 bg-blue-500 text-white rounded">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
                                                     viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          stroke-width="2" d="M12 5v14M5 12h14"/>
                                                </svg>
                                            </button>
                                        @endif
                                    </x-td>
                                </tr>
                            @endforeach
                            </tbody>
                            <tfoot class="bg-gray-100 shadow font-semibold">
                            <tr>
                                <x-td colspan="9" class="text-center">Total</x-td>
                                <x-td
                                    class="text-right">{{ number_format($productOrders->sum('cash_price'), 2) }}</x-td>
                                <x-td
                                    class="text-right">{{ number_format($productOrders->sum('down_payment'), 2) }}</x-td>
                                <x-td
                                    class="text-right">{{ number_format($productOrders->sum('security_money'), 2) }}</x-td>
                                <x-td
                                    class="text-right">{{ number_format($productOrders->sum('rest_amount'), 2) }}</x-td>

                                <x-td class="text-right"></x-td>
                                <x-td class="text-right"></x-td>
                                <x-td class="text-right"></x-td>
                            </tr>
                            </tfoot>
                        </table>

                        <!-- Modal (conditionally open based on Alpine.js) -->
                        <div x-show="open"
                             class="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center">
                            <div class="bg-white p-6 rounded-lg w-3/4">
                                @if(session('modal_error'))
                                    <div class="mb-4 p-3 rounded bg-red-100 text-red-700 border border-red-300">
                                        {{ session('modal_error') }}
                                    </div>
                                @endif

                                <h3 class="text-xl font-semibold mb-4">Add Payment Details</h3>
                                <form action="{{ route('dealer.payments.store') }}" method="POST">
                                    @csrf <!-- CSRF Token -->

                                    <input type="hidden" id="product_order_id" name="product_order_id"
                                           class="w-full p-2 border border-gray-300 rounded"
                                           x-bind:value="selectedCollectionPayment.id">

                                    <div class="flex space-x-4">
                                        <!-- Shop Name Field -->
                                        <div class="flex-1">
                                            <label for="shop_name" class="block">Shop Name</label>
                                            <input type="text" id="shop_name" name="shop_name"
                                                   class="w-full p-2 border border-gray-300 rounded"
                                                   x-bind:value="selectedCollectionPayment.shop_name"
                                                   value="{{ old('shop_name') }}"
                                                   readonly style="background: aliceblue; cursor: grab">
                                        </div>
                                        <!-- Shop Code Field -->
                                        <div class="flex-1">
                                            <label for="dealer_code" class="block">Shop Code</label>
                                            <input type="text" id="dealer_code" name="dealer_code"
                                                   class="w-full p-2 border border-gray-300 rounded"
                                                   x-bind:value="selectedCollectionPayment.dealer_code"
                                                   value="{{ old('dealer_code') }}"
                                                   readonly style="background: aliceblue; cursor: grab">
                                        </div>
                                        <!-- Bill Number Field -->
                                        <div class="flex-1">
                                            <label for="bill_number" class="block">Bill Number</label>
                                            <input type="text" id="bill_number" name="bill_number"
                                                   class="w-full p-2 border border-gray-300 rounded"
                                                   x-bind:value="selectedCollectionPayment.bill_number"
                                                   value="{{ old('bill_number') }}"
                                                   readonly style="background: aliceblue; cursor: grab">
                                        </div>
                                        <!-- Net Payable Field -->
                                        <div class="flex-1">
                                            <label for="rest_amount" class="block">Net Payable</label>
                                            <input type="text" id="rest_amount" name="rest_amount"
                                                   class="w-full p-2 border border-gray-300 rounded text-right"
                                                   x-bind:value="selectedCollectionPayment.rest_amount"
                                                   value="{{ old('rest_amount') }}"
                                                   readonly style="background: aliceblue; cursor: grab">
                                        </div>
                                    </div>

                                    <!-- Transaction ID Field -->
                                    <div class="mt-3">
                                        <x-input-label for="transaction_id" :value="__('Transaction ID *')"/>
                                        <x-text-input
                                            id="transaction_id"
                                            name="transaction_id"
                                            required
                                            class="block w-full border border-gray-300 rounded-md px-3 py-2"
                                            x-bind:value="selectedCollectionPayment.transaction_id"
                                            value="{{ old('transaction_id') }}"
                                        />
                                    </div>
                                    <!-- Transaction Date Field -->
                                    <div class="mt-3">
                                        <x-input-label for="transaction_date" :value="__('Transaction Date *')"/>
                                        <x-text-input
                                            id="transaction_date"
                                            name="transaction_date"
                                            required
                                            class="block w-full border border-gray-300 rounded-md px-3 py-2 flatpickr"
                                            x-bind:value="selectedCollectionPayment.transaction_date"
                                            value="{{ old('transaction_date') }}"
                                        />
                                    </div>

                                    <div class="flex justify-between mt-10">
                                        <button type="button" @click="open = false"
                                                class="px-4 py-2 bg-gray-300 text-black rounded">Cancel
                                        </button>
                                        <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">Submit
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('script-libs')
        <!-- Tom Select JS -->
        <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
    @endpush

    @push('scripts')
        <!-- Alpine JS -->
        <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);
                        if (this.dealerId !== 'All') {
                            await this.loadCustomers(true);
                        }

                        // Initialize Tom Select after options are loaded
                        this.initTomSelect();
                        this.initFlatpickr();
                    },

                    initTomSelect() {
                        document.querySelectorAll('.tom-select').forEach(el => {
                            if (!el.tomselect) new TomSelect(el, {plugins: ['remove_button'], dropdownParent: 'body',});
                        });
                    },

                    initFlatpickr() {
                        flatpickr('.flatpickr', {
                            dateFormat: "d-m-Y",
                            allowInput: true,
                        });
                    },

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

                        await this.loadDealers(false);
                        await this.loadProducts(false);

                        this.initTomSelect();
                    },

                    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>


{{--Back Up--}}
{{--@php use App\Enums\DateTimeFormats; @endphp--}}
{{--<x-app-layout>--}}

{{--    <div class="py-12">--}}
{{--        <div class="max-w-full mx-auto sm:px-6 lg:px-8">--}}
{{--            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">--}}
{{--                <div class="p-6 text-gray-900">--}}

{{--                    <!-- Header -->--}}
{{--                    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">--}}
{{--                        <!-- Left side: Title -->--}}
{{--                        <p class="text-lg font-semibold text-gray-900">--}}
{{--                            Dealer Payments--}}
{{--                        </p>--}}

{{--                        <!-- Right side: Buttons -->--}}
{{--                        @if($productOrders->isNotEmpty())--}}
{{--                            <div class="flex items-center gap-3">--}}
{{--                                <!-- Print Button -->--}}
{{--                                <a href="{{ route('report.dealer_payments.downloadReport', [--}}
{{--                            'brand_id' => request('brand_id'),--}}
{{--                            'dealer_id' => request('dealer_id'),--}}
{{--                            'customer_id' => request('customer_id'),--}}
{{--                            'product_id' => request('product_id'),--}}
{{--                            'transaction_type' => request('transaction_type'),--}}
{{--                            'payment_method' => request('payment_method'),--}}
{{--                            'start_date' => request('start_date'),--}}
{{--                            'end_date' => request('end_date'),--}}
{{--                        ]) }}"--}}
{{--                                   target="_blank"--}}
{{--                                   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-print"></i> Print--}}
{{--                                </a>--}}

{{--                                <!-- XL Download Button -->--}}
{{--                                <form action="{{ route('report.dealer_payments.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="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-blue-600 text-white rounded hover:bg-blue-700 text-sm flex items-center gap-1">--}}
{{--                                        <i class="fa fa-file-excel"></i> XL--}}
{{--                                    </button>--}}
{{--                                </form>--}}
{{--                            </div>--}}
{{--                        @endif--}}
{{--                    </div>--}}

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

{{--                    <!-- No Data Message -->--}}
{{--                    @if($productOrders->isEmpty() && request()->hasAny(['dealer_id','customer_id','transaction_type','payment_method','start_date','end_date']))--}}
{{--                        <div class="mt-4 text-center text-red-500 font-semibold">--}}
{{--                            No matching data found for your search criteria.--}}
{{--                        </div>--}}
{{--                    @endif--}}


{{--                    <!-- Filter Form -->--}}
{{--                    <div--}}
{{--                        x-data="collectionFilter({--}}
{{--                                initialBrand: '{{ request('brand_id','All') }}',--}}
{{--                                initialDealer: '{{ request('dealer_id','All') }}',--}}
{{--                                initialCustomer: '{{ request('customer_id','All') }}',--}}
{{--                                initialProduct: '{{ request('product_id','All') }}'--}}
{{--                            })"--}}
{{--                        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 -->--}}
{{--                                <div>--}}
{{--                                    <x-input-label for="dealerId" :value="__('Dealer *')"/>--}}
{{--                                    <select x-model="dealerId" name="dealer_id"--}}
{{--                                            @change="loadCustomers()"--}}
{{--                                            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="dealer in dealers" :key="dealer.id">--}}
{{--                                            <option :value="dealer.id"--}}
{{--                                                    x-text="dealer.dealer_code ? `${dealer.shop_name} - ${dealer.dealer_code}` : dealer.shop_name"--}}
{{--                                                    :selected="dealer.id == dealerId"></option>--}}
{{--                                        </template>--}}
{{--                                    </select>--}}
{{--                                </div>--}}
{{--                                <!-- Date Range -->--}}
{{--                                <div>--}}
{{--                                    <x-input-label for="start_date" :value="__('From *')"/>--}}
{{--                                    <x-text-input--}}
{{--                                        class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-indigo-200 flatpickr"--}}
{{--                                        id="start_date" name="start_date" required--}}
{{--                                        value="{{ request('start_date') }}"--}}
{{--                                    />--}}
{{--                                </div>--}}
{{--                                <div>--}}
{{--                                    <x-input-label for="end_date" :value="__('To *')"/>--}}
{{--                                    <x-text-input--}}
{{--                                        class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-indigo-200 flatpickr"--}}
{{--                                        name="end_date" id="end_date" required--}}
{{--                                        value="{{ request('end_date') }}"--}}
{{--                                    />--}}
{{--                                </div>--}}
{{--                                <!-- Button -->--}}
{{--                                <div class="flex items-center mt-5">--}}
{{--                                    <x-buttons.primary class="px-4">--}}
{{--                                        {{__('Search')}}--}}
{{--                                    </x-buttons.primary>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </form>--}}
{{--                    </div>--}}

{{--                    <div x-data="{ open: {{ session('modal_error') ? 'true' : 'false' }},--}}
{{--                                 selectedCollectionPayment: {--}}
{{--                                    id: '{{ old('product_order_id') }}',--}}
{{--                                    shop_name: '{{ old('shop_name') }}',--}}
{{--                                    dealer_code: '{{ old('dealer_code') }}',--}}
{{--                                    bill_number: '{{ old('bill_number') }}',--}}
{{--                                    rest_amount: '{{ old('rest_amount') }}',--}}
{{--                                    transaction_id: '{{ old('transaction_id') }}',--}}
{{--                                    transaction_date: '{{ old('transaction_date') }}'--}}
{{--                                 }--}}
{{--                            }"--}}
{{--                        >--}}

{{--                        <div class="overflow-x-auto mt-5 w-full">--}}
{{--                            <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" :value="__('SL')"/>--}}
{{--                                        <x-th rowspan="2" :value="__('Shop Name')"/>--}}
{{--                                        <x-th rowspan="2" :value="__('Shop Code')"/>--}}
{{--                                        <x-th rowspan="2" :value="__('Customer')"/>--}}
{{--                                        <x-th rowspan="2" :value="__('Product')"/>--}}
{{--                                        <x-th colspan="2" class="text-center">Order</x-th>--}}
{{--                                        <x-th colspan="2" class="text-center">Sale</x-th>--}}
{{--                                        <x-th rowspan="2" :value="__('Product Price')"/>--}}
{{--                                        <x-th colspan="2" class="text-center">Payment Received</x-th>--}}
{{--                                        <x-th rowspan="2" :value="__('Net Payable')"/>--}}
{{--                                        <x-th colspan="2" class="text-center">Payment Date</x-th>--}}
{{--                                        <x-th rowspan="2" :value="__('Action')"/>--}}
{{--                                    </tr>--}}
{{--                                    <tr>--}}
{{--                                        <x-th :value="__('Date')" class="text-center"/>--}}
{{--                                        <x-th :value="__('Number')" class="text-center"/>--}}

{{--                                        <x-th :value="__('Date')" class="text-center"/>--}}
{{--                                        <x-th :value="__('Number')" class="text-center"/>--}}

{{--                                        <x-th :value="__('Down Payment')" class="text-center"/>--}}
{{--                                        <x-th :value="__('Security Money')" class="text-center"/>--}}

{{--                                        <x-th :value="__('Transaction ID')"/>--}}
{{--                                        <x-th :value="__('Date')"/>--}}
{{--                                    </tr>--}}
{{--                                </thead>--}}

{{--                                <tbody>--}}
{{--                                @php $totalAmount = 0; @endphp--}}
{{--                                @foreach($productOrders as $productOrder)--}}
{{--                                    <tr class="hover:bg-gray-50">--}}
{{--                                        <x-td class="text-center">{{ $loop->iteration }}</x-td>--}}
{{--                                        <x-td>{{ $productOrder->dealerDetail->shop_name }}</x-td>--}}
{{--                                        <x-td class="text-center">{{ $productOrder->dealerDetail->dealer_code }}</x-td>--}}
{{--                                        <x-td class="text-left">{{ $productOrder->customerDetail->cust_nid_name_en }}</x-td>--}}
{{--                                        <x-td class="text-left">{{ $productOrder->product->product_name }}</x-td>--}}

{{--                                        <x-td class="text-center">{{ \Carbon\Carbon::parse($productOrder->product_order_created_at)->format('d-m-Y') }}</x-td>--}}
{{--                                        <x-td class="text-center">{{ $productOrder->order_number }}</x-td>--}}

{{--                                        <x-td class="text-center">{{ \Carbon\Carbon::parse($productOrder->delivery_date)->format('d-m-Y') }}</x-td>--}}
{{--                                        <x-td class="text-center"> {{ explode('.', $productOrder->bill_number)[3] ?? '-' }}</x-td>--}}

{{--                                        <x-td class="text-right">--}}
{{--                                            {{ number_format($productOrder->cash_price, 2) }}--}}
{{--                                        </x-td>--}}
{{--                                        <x-td class="text-right">--}}
{{--                                            {{ number_format($productOrder->down_payment, 2) }}--}}
{{--                                        </x-td>--}}
{{--                                        <x-td class="text-right">--}}
{{--                                            {{ number_format($productOrder->security_money, 2) }}--}}
{{--                                        </x-td>--}}
{{--                                        <x-td class="text-right">--}}
{{--                                            {{ number_format($productOrder->rest_amount, 2)}}--}}
{{--                                        </x-td>--}}

{{--                                        <x-td class="text-center">{{ $productOrder->transaction_id ?? ' ' }}</x-td> <!-- Display Transaction ID -->--}}
{{--                                        <x-td class="text-center">{{ $productOrder->transaction_date ? \Carbon\Carbon::parse($productOrder->transaction_date)->format('d-m-Y') : ' ' }}</x-td>--}}

{{--                                        <x-td class="text-right">--}}
{{--                                            @if(!$productOrder->payment_exists)--}}
{{--                                                <button @click="open = true; selectedCollectionPayment = {--}}
{{--                                                        id: {{ $productOrder->id }},--}}
{{--                                                        shop_name: '{{ $productOrder->dealerDetail->shop_name }}',--}}
{{--                                                        dealer_code: '{{ $productOrder->dealerDetail->dealer_code }}',--}}
{{--                                                        customer_name: '{{ $productOrder->customerDetail->cust_nid_name_en }}',--}}
{{--                                                        bill_number: '{{ isset(explode('.', $productOrder?->bill_number)[3]) ? explode('.', $productOrder?->bill_number)[3] : '' }}',--}}
{{--                                                        rest_amount: {{ $productOrder->rest_amount }},--}}
{{--                                                        transaction_id: '{{ $productOrder->transaction_id }}',--}}
{{--                                                        transaction_date: '{{ $productOrder->transaction_date ? \Carbon\Carbon::parse($productOrder->transaction_date)->format('d-m-Y') : '' }}',--}}
{{--                                                    }" class="px-4 py-2 bg-blue-500 text-white rounded">--}}
{{--                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">--}}
{{--                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14M5 12h14"/>--}}
{{--                                                    </svg>--}}
{{--                                                </button>--}}
{{--                                            @endif--}}
{{--                                        </x-td>--}}
{{--                                    </tr>--}}
{{--                                @endforeach--}}
{{--                                </tbody>--}}
{{--                                <tfoot class="bg-gray-100 shadow font-semibold">--}}
{{--                                    <tr>--}}
{{--                                        <x-td colspan="9" class="text-center">Total</x-td>--}}
{{--                                        <x-td class="text-right">{{ number_format($productOrders->sum('cash_price'), 2) }}</x-td>--}}
{{--                                        <x-td class="text-right">{{ number_format($productOrders->sum('down_payment'), 2) }}</x-td>--}}
{{--                                        <x-td class="text-right">{{ number_format($productOrders->sum('security_money'), 2) }}</x-td>--}}
{{--                                        <x-td class="text-right">{{ number_format($productOrders->sum('rest_amount'), 2) }}</x-td>--}}

{{--                                        <x-td class="text-right"></x-td>--}}
{{--                                        <x-td class="text-right"></x-td>--}}
{{--                                        <x-td class="text-right"></x-td>--}}
{{--                                    </tr>--}}
{{--                                </tfoot>--}}
{{--                            </table>--}}

{{--                            <!-- Modal (conditionally open based on Alpine.js) -->--}}
{{--                            <div x-show="open" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center">--}}
{{--                                <div class="bg-white p-6 rounded-lg w-3/4">--}}
{{--                                    @if(session('modal_error'))--}}
{{--                                        <div class="mb-4 p-3 rounded bg-red-100 text-red-700 border border-red-300">--}}
{{--                                            {{ session('modal_error') }}--}}
{{--                                        </div>--}}
{{--                                    @endif--}}

{{--                                    <h3 class="text-xl font-semibold mb-4">Add Payment Details</h3>--}}
{{--                                    <form action="{{ route('dealer.payments.store') }}" method="POST">--}}
{{--                                        @csrf <!-- CSRF Token -->--}}

{{--                                        <input type="hidden" id="product_order_id" name="product_order_id"--}}
{{--                                               class="w-full p-2 border border-gray-300 rounded"--}}
{{--                                               x-bind:value="selectedCollectionPayment.id">--}}

{{--                                        <div class="flex space-x-4">--}}
{{--                                            <!-- Shop Name Field -->--}}
{{--                                            <div class="flex-1">--}}
{{--                                                <label for="shop_name" class="block">Shop Name</label>--}}
{{--                                                <input type="text" id="shop_name" name="shop_name"--}}
{{--                                                       class="w-full p-2 border border-gray-300 rounded"--}}
{{--                                                       x-bind:value="selectedCollectionPayment.shop_name"--}}
{{--                                                       value="{{ old('shop_name') }}"--}}
{{--                                                       readonly style="background: aliceblue; cursor: grab">--}}
{{--                                            </div>--}}
{{--                                            <!-- Shop Code Field -->--}}
{{--                                            <div class="flex-1">--}}
{{--                                                <label for="dealer_code" class="block">Shop Code</label>--}}
{{--                                                <input type="text" id="dealer_code" name="dealer_code"--}}
{{--                                                       class="w-full p-2 border border-gray-300 rounded"--}}
{{--                                                       x-bind:value="selectedCollectionPayment.dealer_code"--}}
{{--                                                       value="{{ old('dealer_code') }}"--}}
{{--                                                       readonly style="background: aliceblue; cursor: grab">--}}
{{--                                            </div>--}}
{{--                                            <!-- Bill Number Field -->--}}
{{--                                            <div class="flex-1">--}}
{{--                                                <label for="bill_number" class="block">Bill Number</label>--}}
{{--                                                <input type="text" id="bill_number" name="bill_number"--}}
{{--                                                       class="w-full p-2 border border-gray-300 rounded"--}}
{{--                                                       x-bind:value="selectedCollectionPayment.bill_number"--}}
{{--                                                       value="{{ old('bill_number') }}"--}}
{{--                                                       readonly style="background: aliceblue; cursor: grab">--}}
{{--                                            </div>--}}
{{--                                            <!-- Net Payable Field -->--}}
{{--                                            <div class="flex-1">--}}
{{--                                                <label for="rest_amount" class="block">Net Payable</label>--}}
{{--                                                <input type="text" id="rest_amount" name="rest_amount"--}}
{{--                                                       class="w-full p-2 border border-gray-300 rounded text-right"--}}
{{--                                                       x-bind:value="selectedCollectionPayment.rest_amount"--}}
{{--                                                       value="{{ old('rest_amount') }}"--}}
{{--                                                       readonly style="background: aliceblue; cursor: grab">--}}
{{--                                            </div>--}}
{{--                                        </div>--}}

{{--                                        <!-- Transaction ID Field -->--}}
{{--                                        <div class="mt-3">--}}
{{--                                            <x-input-label for="transaction_id" :value="__('Transaction ID *')"/>--}}
{{--                                            <x-text-input--}}
{{--                                                id="transaction_id"--}}
{{--                                                name="transaction_id"--}}
{{--                                                required--}}
{{--                                                class="block w-full border border-gray-300 rounded-md px-3 py-2"--}}
{{--                                                x-bind:value="selectedCollectionPayment.transaction_id"--}}
{{--                                                value="{{ old('transaction_id') }}"--}}
{{--                                            />--}}
{{--                                        </div>--}}
{{--                                        <!-- Transaction Date Field -->--}}
{{--                                        <div class="mt-3">--}}
{{--                                            <x-input-label for="transaction_date" :value="__('Transaction Date *')"/>--}}
{{--                                            <x-text-input--}}
{{--                                                id="transaction_date"--}}
{{--                                                name="transaction_date"--}}
{{--                                                required--}}
{{--                                                class="block w-full border border-gray-300 rounded-md px-3 py-2 flatpickr"--}}
{{--                                                x-bind:value="selectedCollectionPayment.transaction_date"--}}
{{--                                                value="{{ old('transaction_date') }}"--}}
{{--                                            />--}}
{{--                                        </div>--}}

{{--                                        <div class="flex justify-between mt-10">--}}
{{--                                            <button type="button" @click="open = false" class="px-4 py-2 bg-gray-300 text-black rounded">Cancel</button>--}}
{{--                                            <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">Submit</button>--}}
{{--                                        </div>--}}
{{--                                    </form>--}}
{{--                                </div>--}}
{{--                            </div>--}}

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

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


{{--<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);--}}
{{--                if (this.dealerId !== 'All') {--}}
{{--                    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>--}}