{{-- Product-Supplier Pivot Form Modal --}}
<div id="pivotModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <!-- Modal Header -->
            <div class="flex items-center justify-between p-6 border-b">
                <h3 class="text-lg font-semibold text-gray-900" id="pivotModalTitle">
                    {{ isset($pivotData) ? 'ویرایش اطلاعات' : 'افزودن تامین‌کننده' }}
                </h3>
                <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closePivotModal()">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <!-- Modal Body -->
            <form id="pivotForm" method="POST" class="p-6">
                @csrf
                @if(isset($pivotData))
                    @method('PUT')
                @endif

                <!-- Hidden fields for relationship -->
                <input type="hidden" name="supplier_id" id="pivotSupplierId" value="">
                <input type="hidden" name="product_id" id="pivotProductId" value="">

                <!-- Supplier Selection (only for add operation) -->
                <div id="supplierSelection" class="mb-4 hidden">
                    <label for="pivot_supplier_select" class="block text-sm font-medium text-gray-700 mb-2">انتخاب تامین‌کننده</label>
                    <select name="supplier_id" id="pivot_supplier_select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">انتخاب کنید...</option>
                        @foreach(\App\Models\Supplier::orderBy('name')->get() as $supplier)
                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                        @endforeach
                    </select>
                    @error('supplier_id')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Price -->
                <div class="mb-4">
                    <label for="pivot_price" class="block text-sm font-medium text-gray-700 mb-2">قیمت</label>
                    <input type="number" 
                           step="0.01" 
                           min="0" 
                           name="price" 
                           id="pivot_price" 
                           value="{{ $pivotData->price ?? old('price') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    @error('price')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Currency -->
                <div class="mb-4">
                    <label for="pivot_currency" class="block text-sm font-medium text-gray-700 mb-2">واحد پول</label>
                    <select name="currency" id="pivot_currency" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="IRR" {{ ($pivotData->currency ?? old('currency')) == 'IRR' ? 'selected' : '' }}>ریال ایران</option>
                        <option value="USD" {{ ($pivotData->currency ?? old('currency')) == 'USD' ? 'selected' : '' }}>دلار آمریکا</option>
                        <option value="EUR" {{ ($pivotData->currency ?? old('currency')) == 'EUR' ? 'selected' : '' }}>یورو</option>
                    </select>
                    @error('currency')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Grade -->
                <div class="mb-4">
                    <label for="pivot_grade" class="block text-sm font-medium text-gray-700 mb-2">درجه</label>
                    <input type="text" 
                           name="grade" 
                           id="pivot_grade" 
                           value="{{ $pivotData->grade ?? old('grade') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="مثال: صنعتی، آزمایشگاهی">
                    @error('grade')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Purity -->
                <div class="mb-4">
                    <label for="pivot_purity" class="block text-sm font-medium text-gray-700 mb-2">خلوص</label>
                    <input type="text" 
                           name="purity" 
                           id="pivot_purity" 
                           value="{{ $pivotData->purity ?? old('purity') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="مثال: 99%، 99.9%">
                    @error('purity')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Packaging -->
                <div class="mb-4">
                    <label for="pivot_packaging" class="block text-sm font-medium text-gray-700 mb-2">بسته‌بندی</label>
                    <input type="text" 
                           name="packaging" 
                           id="pivot_packaging" 
                           value="{{ $pivotData->packaging ?? old('packaging') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="مثال: بطری 1 لیتری، کیسه 25 کیلوگرمی">
                    @error('packaging')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Last Quoted At -->
                <div class="mb-6">
                    <label for="pivot_last_quoted_at" class="block text-sm font-medium text-gray-700 mb-2">تاریخ آخرین پیشنهاد</label>
                    <input type="text" 
                           id="pivot_last_quoted_at_shamsi" 
                           placeholder="برای انتخاب تاریخ کلیک کنید" 
                           readonly
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
                           style="cursor: pointer;">
                    <input type="hidden" 
                           name="last_quoted_at" 
                           id="pivot_last_quoted_at" 
                           value="{{ isset($pivotData->last_quoted_at) ? $pivotData->last_quoted_at->format('Y-m-d') : old('last_quoted_at') }}">
                    @error('last_quoted_at')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Modal Footer -->
                <div class="flex justify-end space-x-3 space-x-reverse">
                    <button type="button" 
                            onclick="closePivotModal()" 
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                        انصراف
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        {{ isset($pivotData) ? 'بروزرسانی' : 'افزودن' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openPivotModal(type, id, data = null) {
    const modal = document.getElementById('pivotModal');
    const form = document.getElementById('pivotForm');
    const title = document.getElementById('pivotModalTitle');
    const supplierSelection = document.getElementById('supplierSelection');
    
    // Reset form
    form.reset();
    
    if (type === 'add') {
        title.textContent = 'افزودن تامین‌کننده';
        form.action = `/admin/products/${id}/suppliers`;
        form.method = 'POST';
        
        // Show supplier selection
        supplierSelection.classList.remove('hidden');
        
        // Remove method override if exists
        const methodOverride = form.querySelector('input[name="_method"]');
        if (methodOverride) methodOverride.remove();
    } else if (type === 'edit') {
        title.textContent = 'ویرایش اطلاعات';
        form.action = `/admin/products/${id}/suppliers/${data.supplier_id}`;
        form.method = 'POST';
        
        // Hide supplier selection
        supplierSelection.classList.add('hidden');
        
        // Add method override
        if (!form.querySelector('input[name="_method"]')) {
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'PUT';
            form.appendChild(methodInput);
        }
        
        // Fill form with existing data
        if (data) {
            document.getElementById('pivot_price').value = data.price || '';
            document.getElementById('pivot_currency').value = data.currency || 'IRR';
            document.getElementById('pivot_grade').value = data.grade || '';
            document.getElementById('pivot_purity').value = data.purity || '';
            document.getElementById('pivot_packaging').value = data.packaging || '';
            // Set date values
            const pivotLastQuotedAtHidden = document.getElementById('pivot_last_quoted_at');
            const pivotLastQuotedAtShamsi = document.getElementById('pivot_last_quoted_at_shamsi');
            if (pivotLastQuotedAtHidden) {
                pivotLastQuotedAtHidden.value = data.last_quoted_at || '';
            }
            if (pivotLastQuotedAtShamsi && data.last_quoted_at) {
                // Convert Gregorian to Persian for display
                // We'll leave it empty for user to select from calendar
                pivotLastQuotedAtShamsi.value = '';
            }
        }
    }
    
    modal.classList.remove('hidden');
}

function closePivotModal() {
    document.getElementById('pivotModal').classList.add('hidden');
}

// Close modal when clicking outside
document.getElementById('pivotModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closePivotModal();
    }
});

// Persian Calendar for pivot_last_quoted_at
document.addEventListener('DOMContentLoaded', function() {
    const pivotLastQuotedAtShamsiInput = document.getElementById('pivot_last_quoted_at_shamsi');
    const pivotLastQuotedAtHiddenInput = document.getElementById('pivot_last_quoted_at');
    
    if (pivotLastQuotedAtShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = pivotLastQuotedAtShamsiInput.value;
            if (currentValue && currentValue.includes('/')) {
                const parts = currentValue.split('/');
                return {
                    year: parseInt(parts[0]),
                    month: parseInt(parts[1])
                };
            }
            // Get from server
            @php
                $now = \Morilog\Jalali\Jalalian::now();
                $currentYear = $now->getYear();
                $currentMonth = $now->getMonth();
            @endphp
            return {
                year: {{ $currentYear }},
                month: {{ $currentMonth }}
            };
        };
        
        // Function to show Persian calendar
        window.showPivotLastQuotedAtCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-pivot-last-quoted');
            if (existingCalendar) {
                existingCalendar.remove();
            }
            
            // Fetch calendar view from server
            const calendarUrl = '{{ route('api.calendar-view') }}';
            fetch(calendarUrl + '?year=' + year + '&month=' + month, {
                headers: {
                    'Accept': 'text/html',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                }
            })
                .then(response => {
                    return response.text().then(text => {
                        if (!response.ok) {
                            if (text.includes('persian-calendar-container')) {
                                return text;
                            }
                            throw new Error('Failed to load calendar: ' + response.status);
                        }
                        return text;
                    });
                })
                .then(html => {
                    if (!html || html.trim().length === 0 || !html.includes('persian-calendar-container')) {
                        throw new Error('Invalid calendar HTML');
                    }
                    
                    // Create modal container
                    const modal = document.createElement('div');
                    modal.id = 'persian-calendar-modal-pivot-last-quoted';
                    modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; pointer-events: none;';
                    
                    // Create backdrop
                    const backdrop = document.createElement('div');
                    backdrop.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); pointer-events: auto;';
                    backdrop.addEventListener('click', function(e) {
                        e.stopPropagation();
                        modal.remove();
                    });
                    
                    // Create calendar container
                    const calendarContainer = document.createElement('div');
                    calendarContainer.style.cssText = 'position: relative; z-index: 100000; background: transparent; pointer-events: auto;';
                    calendarContainer.innerHTML = html;
                    calendarContainer.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });
                    
                    modal.appendChild(backdrop);
                    modal.appendChild(calendarContainer);
                    document.body.appendChild(modal);
                    
                    setTimeout(() => {
                        const calendarDiv = calendarContainer.querySelector('.persian-calendar-container');
                        if (calendarDiv) {
                            calendarDiv.style.display = 'block';
                            calendarDiv.style.visibility = 'visible';
                            calendarDiv.style.opacity = '1';
                        }
                    }, 50);
                    
                    // Handle day selection
                    setTimeout(() => {
                        const dayElements = calendarContainer.querySelectorAll('.calendar-day');
                        dayElements.forEach(dayEl => {
                            dayEl.addEventListener('click', function(e) {
                                e.stopPropagation();
                                
                                // Remove selected class from all days
                                dayElements.forEach(day => {
                                    day.classList.remove('selected');
                                    const dayNumber = day.querySelector('.day-number');
                                    const dayGregorian = day.querySelector('.day-gregorian');
                                    if (dayNumber) {
                                        dayNumber.style.color = '';
                                    }
                                    if (dayGregorian) {
                                        dayGregorian.style.color = '';
                                    }
                                });
                                
                                // Add selected class to clicked day
                                this.classList.add('selected');
                                const dayNumber = this.querySelector('.day-number');
                                const dayGregorian = this.querySelector('.day-gregorian');
                                if (dayNumber) {
                                    dayNumber.style.color = '#ffffff';
                                }
                                if (dayGregorian) {
                                    dayGregorian.style.color = '#ffffff';
                                }
                                
                                const gregorian = this.getAttribute('data-gregorian');
                                const shamsi = this.getAttribute('data-shamsi');
                                
                                if (pivotLastQuotedAtShamsiInput) {
                                    pivotLastQuotedAtShamsiInput.value = shamsi;
                                }
                                if (pivotLastQuotedAtHiddenInput) {
                                    pivotLastQuotedAtHiddenInput.value = gregorian;
                                }
                                
                                modal.remove();
                            });
                        });
                        
                        // Handle month navigation
                        const prevBtn = calendarContainer.querySelector('.prev-month');
                        const nextBtn = calendarContainer.querySelector('.next-month');
                        
                        if (prevBtn) {
                            prevBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth < 1) {
                                    newMonth = 12;
                                    newYear--;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showPivotLastQuotedAtCalendar(newYear, newMonth);
                            });
                        }
                        
                        if (nextBtn) {
                            nextBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth > 12) {
                                    newMonth = 1;
                                    newYear++;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showPivotLastQuotedAtCalendar(newYear, newMonth);
                            });
                        }
                        
                        // Handle "Go to Today" button
                        const todayBtn = calendarContainer.querySelector('.calendar-today-btn');
                        if (todayBtn) {
                            todayBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                const today = getCurrentDate();
                                currentCalendarYear = today.year;
                                currentCalendarMonth = today.month;
                                showPivotLastQuotedAtCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        pivotLastQuotedAtShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showPivotLastQuotedAtCalendar(currentDate.year, currentDate.month);
        });
    }
});
</script>