@php
    use App\Enums\DateTimeFormats;
    use Carbon\Carbon;
@endphp
<x-app-layout>
    @push('styles')
        <!-- Tom Select CSS for dropdown -->
        <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;
            }
        </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" x-data="{
                    selectedRows: [],
                    batchStart: null,
                    batchEnd: null,
                    shiftKeyPressed: false,
                    
                    toggleSelection(id) {
                        if (this.selectedRows.includes(id)) {
                            this.selectedRows = this.selectedRows.filter(item => item !== id);
                        } else {
                            this.selectedRows.push(id);
                        }
                        this.updateCheckboxes();
                        this.highlightRows();
                    },
                    
                    isSelected(id) {
                        return this.selectedRows.includes(id);
                    },
                    
                    toggleAll() {
                        const allIds = @json($productOrders->pluck('id'));
                        if (this.selectedRows.length === allIds.length) {
                            this.selectedRows = [];
                        } else {
                            this.selectedRows = allIds;
                        }
                        this.updateCheckboxes();
                        this.highlightRows();
                    },
                    
                    // Manual range selection by numbers
                    selectRange(from, to) {
                        const allIds = @json($productOrders->pluck('id'));
                        const startIndex = Math.max(0, from - 1);
                        const endIndex = Math.min(allIds.length - 1, to - 1);
                        
                        // Clear previous selection if Shift is not pressed
                        if (!this.shiftKeyPressed) {
                            this.selectedRows = [];
                        }
                        
                        for (let i = startIndex; i <= endIndex; i++) {
                            const id = allIds[i];
                            if (!this.selectedRows.includes(id)) {
                                this.selectedRows.push(id);
                            }
                        }
                        this.updateCheckboxes();
                        this.highlightRows();
                    },
                    
                    // Function to manually highlight rows
                    highlightRows() {
                        this.$nextTick(() => {
                            const rows = document.querySelectorAll('tbody tr[data-id]');
                            rows.forEach(row => {
                                const orderId = parseInt(row.dataset.id);
                                if (this.selectedRows.includes(orderId)) {
                                    row.classList.add('bg-purple-100', 'text-gray-900', 'font-medium');
                                    row.classList.remove('hover:bg-gray-50');
                                } else {
                                    row.classList.remove('bg-purple-100', 'text-gray-900', 'font-medium');
                                    row.classList.add('hover:bg-gray-50');
                                }
                            });
                        });
                    },
                    
                    updateCheckboxes() {
                        this.$nextTick(() => {
                            const checkboxes = document.querySelectorAll('.orderCheckbox');
                            checkboxes.forEach(cb => {
                                const orderId = parseInt(cb.dataset.id);
                                cb.checked = this.selectedRows.includes(orderId);
                            });
                            
                            const selectAll = document.getElementById('selectAll');
                            const totalCheckboxes = document.querySelectorAll('.orderCheckbox').length;
                            if (selectAll) {
                                selectAll.checked = this.selectedRows.length === totalCheckboxes && totalCheckboxes > 0;
                            }
                        });
                    },
                    
                    init() {
                        this.shiftKeyPressed = false;
                        
                        // Listen for Shift key
                        const handleKeyDown = (e) => {
                            if (e.key === 'Shift') {
                                this.shiftKeyPressed = true;
                            }
                        };
                        
                        const handleKeyUp = (e) => {
                            if (e.key === 'Shift') {
                                this.shiftKeyPressed = false;
                            }
                        };
                        
                        document.addEventListener('keydown', handleKeyDown);
                        document.addEventListener('keyup', handleKeyUp);
                        
                        this.updateCheckboxes();
                        this.highlightRows(); // Initialize highlighting
                        
                        // Cleanup
                        this.$el._cleanup = () => {
                            document.removeEventListener('keydown', handleKeyDown);
                            document.removeEventListener('keyup', handleKeyUp);
                        };
                    }
                }" x-init="init()">

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

                <!-- Search Form -->
                <div class="flex justify-between mt-6 items-start gap-x-6">
                    <div class="w-1/2">
                        <form id="searchUserForm" class="flex w-full">
                            <div class="w-3/4 mt-1" x-data x-init=" 
                                    new TomSelect($refs.recoverySelect, {
                                                    create: false,
                                                    placeholder: 'Select Recovery User'
                                                });
                                ">
                                <x-input-label for="mobile_number" :value="__('Recovery User *')"/>
                                <select x-ref="recoverySelect" id="mobile_number" name="mobile_number" required
                                        class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">Select Recovery User (Follow)</option>
                                    @foreach($recoveryUsers as $user)
                                        <option value="{{ $user->mobile_number }}">
                                            {{ $user->name }} | {{ $user->mobile_number }}
                                        </option>
                                    @endforeach
                                </select>
                                <x-input-error :messages="$errors->get('mobile_number')" class="mt-2"/>
                            </div>

                            <div>
                                <x-buttons.primary type="submit" class="text-base font-semibold shadow-md mt-7 ml-2">
                                    {{ __('Select') }}
                                </x-buttons.primary>
                            </div>
                        </form>
                    </div>

                    <!-- Messages / User Info -->
                    <div class="w-1/2">
                        <div id="ajaxUserResult" class="mt-4"></div>
                    </div>
                </div>
                <!-- Batch Selection Controls -->
                <div class="flex items-center gap-4 mt-4 mb-4 p-3 bg-gray-50 rounded-lg">
                    <div class="flex items-center gap-2">
                        <span class="text-sm font-medium text-gray-700">Batch Select:</span>
                        
                        <!-- Range by Numbers -->
                        <div class="flex items-center gap-2">
                            <x-input-label for="rangeFrom" :value="__('From')" class="sr-only"/>
                            <x-text-input 
                                id="rangeFrom" 
                                type="number" 
                                min="1" 
                                :max="$productOrders->count()"
                                placeholder="Row"
                                class="w-20 text-sm"
                            />
                            
                            <span class="text-gray-500">to</span>
                            
                            <x-input-label for="rangeTo" :value="__('To')" class="sr-only"/>
                            <x-text-input 
                                id="rangeTo" 
                                type="number" 
                                min="1" 
                                :max="$productOrders->count()"
                                placeholder="Row"
                                class="w-20 text-sm"
                            />
                            
                            <x-buttons.primary 
                                @click="selectRange(
                                    document.getElementById('rangeFrom').value, 
                                    document.getElementById('rangeTo').value
                                )"
                                class="text-sm px-3 py-1"
                            >
                                Select Range
                            </x-buttons.primary>
                        </div>                         
                    </div>                    
                    <!-- Selection Info -->
                    <div class="ml-auto text-sm">
                        <span class="text-gray-600">Selected:</span>
                        <span class="font-semibold text-blue-600 ml-1" x-text="selectedRows.length"></span>
                        <span class="text-gray-500 ml-1">/ {{ $productOrders->count() }}</span>
                    </div>
                </div>
                  

                <!-- Product Orders Table -->
                <div class="overflow-x-auto" x-data="remarksModal()" x-cloak>
                    <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" class="text-center w-10">
                                <div class="flex justify-center items-center">
                                    <input type="checkbox"
                                        id="selectAll"
                                        :checked="selectedRows.length > 0 && selectedRows.length === @json($productOrders->count())"
                                        @change="toggleAll()"
                                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 cursor-pointer">
                                </div>
                            </x-th>
                            <x-th rowspan="2">SL</x-th>
                            <x-th rowspan="2">Customer Name</x-th>
                            <x-th rowspan="2">Customer Mobile Number</x-th>
                            <x-th colspan="3">Sale</x-th>
                            <x-th rowspan="2">Product Price</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>Bill Number</x-th>
                            <x-th>No of Inst.</x-th>
                        </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200 text-center">
                        @foreach($productOrders as $productOrder)
                            <tr
                                data-id="{{ $productOrder->id }}"
                                @click="if (!$event.target.classList.contains('orderCheckbox') && !$event.target.closest('button')) { 
                                    toggleSelection({{ $productOrder->id }});
                                }"
                                class="cursor-pointer transition-colors duration-150 hover:bg-gray-50"
                            >
                            <x-td class="text-center w-10">
                                <div class="flex justify-center items-center">
                                    <input type="checkbox"
                                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 cursor-pointer orderCheckbox"
                                        :checked="isSelected({{ $productOrder->id }})"
                                        @change.stop="toggleSelection({{ $productOrder->id }})"
                                        data-id="{{ $productOrder->id }}">
                                </div>
                            </x-td>

                            <x-td>{{ $productOrders->firstItem() + $loop->index }}</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-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?->total_price }}
                            </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>
                                <button
                                    @click="openRemarksModal({{ $productOrder->id }})"
                                    class="px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 items-center justify-center"
                                >
                                    <!-- Heroicons Eye Icon -->
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                </button>
                            </x-td>

                        </tr>
                        @endforeach
                        </tbody>

                    </table>

                    <!-- Modal -->
                    <div x-show="show"
                         class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
                        <div @click.away="close()"
                             class="bg-white rounded-lg shadow-lg w-3/4 max-h-[80vh] flex flex-col">
                            <!-- Header -->
                            <div class="p-4 border-b">
                                <h2 class="text-lg font-semibold">Regular Recovery Assign Details</h2>
                            </div>

                            <!-- Scrollable Content -->
                            <div class="p-4 overflow-y-auto" style="max-height: calc(80vh - 100px);">
                                <!-- Order info -->
                                <div class="grid grid-cols-2 gap-4 mb-4 text-sm">
                                    <div><strong>Customer Name:</strong> <span x-text="order?.customer_name"></span>
                                    </div>
                                    <div><strong>Mobile:</strong> <span x-text="order?.mobile"></span></div>
                                    <div><strong>Delivery Date:</strong> <span x-text="order?.delivery_date"></span>
                                    </div>
                                    <div><strong>Bill Number:</strong> <span x-text="order?.bill_number"></span></div>
                                    <div><strong>No. of Installments:</strong> <span
                                            x-text="order?.tenure_months"></span></div>
                                    <div><strong>Total Price:</strong> <span x-text="order?.total_price"></span></div>
                                    <div><strong>Outstanding:</strong> <span x-text="order?.outstanding_amount"></span>
                                    </div>
                                    <div><strong>Due Amount:</strong> <span x-text="order?.due_amount"></span></div>
                                    <div><strong>Due Days:</strong> <span x-text="order?.due_days"></span></div>
                                    <div><strong>Assigned By:</strong> <span x-text="order?.assigned_by"></span></div>
                                    <div><strong>Assigned To:</strong> <span x-text="order?.assigned_to"></span></div>
                                    <div><strong>Assigned Date:</strong> <span x-text="order?.assigned_date"></span>
                                    </div>
                                </div>

                                <!-- Remarks -->
                                <h3 class="text-md font-semibold mb-2">Remarks</h3>
                                <template x-for="remark in remarks" :key="remark.id">
                                    <div class="py-2"
                                         style="background: aliceblue;border-radius: 10px;padding-left: 1rem;">
                                        <span class="text-gray-500 text-xs block" x-text="remark.created_at"></span>
                                        <p x-text="remark.remarks" class="mt-1"></p>
                                    </div>
                                </template>
                            </div>

                            <!-- Footer -->
                            <div class="p-4 border-t text-right">
                                <button @click="close()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    {{ $productOrders->links() }}
                </div>
            </div>
        </div>
    </div>

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

    @push('scripts')

        {{--For modal--}}
        <script>
            function remarksModal() {
                return {
                    show: false,
                    orderId: null,
                    order: null,
                    remarks: [],
                    openRemarksModal(id) {
                        this.orderId = id;
                        this.order = @json($remarksForJs)[id] || null;
                        this.remarks = this.order?.remarks || [];
                        this.show = true;
                    },
                    close() {
                        this.show = false;
                        this.orderId = null;
                        this.order = null;
                        this.remarks = [];
                    }
                }
            }
        </script>

        <script>
            // Handle AJAX search
            document.getElementById('searchUserForm').addEventListener('submit', function (e) {
                e.preventDefault();
                let mobile_number = document.getElementById('mobile_number').value.trim();
                let resultDiv = document.getElementById('ajaxUserResult');
                resultDiv.innerHTML = 'Searching...';

                fetch("{{ route('recovery_assign.ajaxSearchUser') }}?mobile_number=" + mobile_number, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status === 'success') {
                            resultDiv.innerHTML = `
                                <div class="flex flex-col">
                                    <p class="text-green-600 font-semibold mb-1">Selected Recovery User</p>
                                    <div class="flex items-center justify-between gap-4">
                                        <p>Name: ${data.user.name} | Username: ${data.user.username}</p>
                                        <button type="button" id="assignOrdersBtn"
                                                class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm">
                                            Assign
                                        </button>
                                    </div>
                                </div>
                            `;

                            // Assign orders click - Alternative method
                            document.getElementById('assignOrdersBtn').addEventListener('click', async function () {
                                // Method 1: Get selected rows directly from checkboxes
                                const selectedRows = [];
                                const checkboxes = document.querySelectorAll('.orderCheckbox:checked');
                                checkboxes.forEach(cb => {
                                    selectedRows.push(parseInt(cb.dataset.id));
                                });
                                
                                console.log('Selected rows:', selectedRows);
                                
                                if (selectedRows.length === 0) {
                                    resultDiv.innerHTML = '<div class="text-red-600 mt-2">Please select at least one order to assign.</div>';
                                    return;
                                }

                                // Show loading
                                const assignBtn = this;
                                const originalText = assignBtn.textContent;
                                assignBtn.textContent = 'Assigning...';
                                assignBtn.disabled = true;

                                try {
                                    // Get CSRF token
                                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || 
                                                    '{{ csrf_token() }}';
                                    
                                    const response = await fetch("{{ route('recovery_assign.assignDueOrder') }}", {
                                        method: 'POST',
                                        headers: {
                                            'X-CSRF-TOKEN': csrfToken,
                                            'Content-Type': 'application/json',
                                            'Accept': 'application/json',
                                            'X-Requested-With': 'XMLHttpRequest'
                                        },
                                        body: JSON.stringify({
                                            mobile_number: data.user.mobile_number,
                                            selected_orders: selectedRows.join(',')
                                        })
                                    });

                                    const responseData = await response.json();

                                    if (response.ok && responseData.status === 'success') {
                                        // Show success message
                                        resultDiv.innerHTML = `<div class="text-green-600 font-semibold mt-2">✓ ${responseData.message}</div>`;

                                        // Remove assigned rows from table with animation
                                        if (responseData.updated_orders && Array.isArray(responseData.updated_orders)) {
                                            responseData.updated_orders.forEach(order => {
                                                const row = document.querySelector(`tr[data-id="${order.id}"]`);
                                                if (row) {
                                                    // Add fade-out animation
                                                    row.style.transition = 'all 0.5s ease';
                                                    row.style.opacity = '0';
                                                    row.style.transform = 'translateX(-100px)';
                                                    
                                                    setTimeout(() => {
                                                        row.remove();
                                                    }, 500);
                                                }
                                            });
                                            
                                            // Also clear the selected checkboxes
                                            checkboxes.forEach(cb => {
                                                cb.checked = false;
                                                cb.closest('tr').classList.remove('bg-purple-100');
                                            });
                                            
                                            // Update select all checkbox
                                            const selectAll = document.getElementById('selectAll');
                                            if (selectAll) {
                                                selectAll.checked = false;
                                            }
                                        }
                                        
                                    } else {
                                        resultDiv.innerHTML = `<div class="text-red-600 mt-2">${responseData.message || 'Failed to assign orders'}</div>`;
                                    }
                                } catch (error) {
                                    console.error('Fetch error:', error);
                                    resultDiv.innerHTML = '<div class="text-red-600 mt-2">Something went wrong. Please try again.</div>';
                                } finally {
                                    // Reset button after 2 seconds
                                    setTimeout(() => {
                                        assignBtn.textContent = originalText;
                                        assignBtn.disabled = false;
                                    }, 2000);
                                }
                            });

                        } else {
                            resultDiv.innerHTML = `<div class="bg-red-100 p-4 rounded text-red-600">${data.message}</div>`;
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        resultDiv.innerHTML = '<div class="bg-red-100 p-4 rounded text-red-600">Something went wrong</div>';
                    });
            });
        </script>
    @endpush
</x-app-layout>