@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-200">افزودن فاکتور جدید</h1>
            <p class="text-sm text-slate-400 mt-1">ایجاد فاکتور جدید برای تامین‌کننده</p>
        </div>
        <a href="{{ route('admin.accounting.suppliers') }}" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-slate-200">
            بازگشت به لیست
        </a>
    </div>

    <!-- Form Card -->
    <div class="glass rounded-xl p-6">
        <form id="invoiceForm" novalidate>
            <!-- Row 1: نام تامین‌کننده، مبلغ، شرح تراکنش -->
            <div class="form-row" style="display: flex; gap: 16px;">
                <div class="flex-col" style="flex: 1;">
                    <div class="form-group">
                        <label for="supplierName">نام تامین‌کننده</label>
                        <input type="text" id="supplierName" required autocomplete="off">
                        <div id="supplierSuggestions" class="suggestions-dropdown hidden" style="position: absolute; z-index: 10; width: 100%; background: #1e293b; border: 1px solid #334155; border-radius: 8px; margin-top: 4px; max-height: 250px; overflow-y: auto;"></div>
                    </div>
                </div>
                <div class="flex-col" style="flex: 1;">
                    <div class="form-group">
                        <label for="transactionAmount">مبلغ (تومان)</label>
                        <input type="text" id="transactionAmount" placeholder="مثال: 1,500,000" required>
                    </div>
                </div>
                <div class="flex-col" style="flex: 1;">
                    <div class="form-group">
                        <label for="transactionType">نوع تراکنش</label>
                        <select id="transactionType" required>
                            <option value="debit">بدهکار (خرید)</option>
                            <option value="credit">بستانکار (پرداخت)</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Row 2: تاریخ، شرح تراکنش -->
            <div class="form-row" style="display: flex; gap: 16px; margin-top: 20px;">
                <div class="flex-col" style="flex: 1;">
                    <div class="form-group">
                        <label for="transactionDate">تاریخ</label>
                        <input type="text" 
                               id="transactionDateShamsi" 
                               placeholder="برای انتخاب تاریخ کلیک کنید" 
                               readonly
                               class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
                               style="cursor: pointer;">
                        <input type="hidden" 
                               id="transactionDate" 
                               value="{{ date('Y-m-d') }}" 
                               required>
                    </div>
                </div>
                <div class="flex-col" style="flex: 2;">
                    <div class="form-group">
                        <label for="transactionDescription">شرح تراکنش</label>
                        <textarea id="transactionDescription" rows="2" placeholder="شرح تراکنش را وارد کنید" required></textarea>
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="flex justify-end gap-4 mt-6">
                <button type="button" class="btn btn-secondary">انصراف</button>
                <button type="submit" class="btn btn-primary">ثبت فاکتور</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const supplierNameInput = document.getElementById('supplierName');
    const supplierSuggestions = document.getElementById('supplierSuggestions');
    
    // Format amount input
    const transactionAmount = document.getElementById('transactionAmount');
    if (transactionAmount) {
        transactionAmount.addEventListener('input', (e) => {
            e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        });
    }
    
    // Supplier autocomplete with debouncing
    const debounce = (fn, ms = 250) => {
        let t;
        return (...args) => {
            clearTimeout(t);
            t = setTimeout(() => fn.apply(null, args), ms);
        };
    };
    
    async function searchSuppliers(query) {
        if (query.length < 2) return [];
        
        try {
            const response = await fetch(`/admin/suppliers/general-search?q=${encodeURIComponent(query)}`);
            const data = await response.json();
            return data || [];
        } catch (error) {
            console.error('Error searching suppliers:', error);
            return [];
        }
    }
    
    function showSuggestions(suggestions) {
        if (suggestions.length === 0) {
            supplierSuggestions.classList.add('hidden');
            return;
        }
        
        supplierSuggestions.innerHTML = suggestions.map(supplier => 
            `<div class="suggestion-item" data-supplier-id="${supplier.id}" data-supplier-name="${supplier.name}" style="padding: 10px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.1);">
                <div style="font-weight: 600; color: #94a3b8;">${supplier.name}</div>
                ${supplier.industry ? `<div style="font-size: 12px; color: rgba(255,255,255,0.5);">${supplier.industry}</div>` : ''}
            </div>`
        ).join('');
        
        supplierSuggestions.classList.remove('hidden');
    }
    
    function hideSuggestions() {
        supplierSuggestions.classList.add('hidden');
    }
    
    function selectSupplier(supplierName, supplierId) {
        supplierNameInput.value = supplierName;
        hideSuggestions();
    }
    
    // Handle supplier name input
    supplierNameInput.addEventListener('input', debounce(async (e) => {
        const query = e.target.value.trim();
        if (query.length >= 2) {
            const suggestions = await searchSuppliers(query);
            showSuggestions(suggestions);
        } else {
            hideSuggestions();
        }
    }));
    
    // Handle suggestion clicks
    supplierSuggestions.addEventListener('click', (e) => {
        const suggestionItem = e.target.closest('.suggestion-item');
        if (suggestionItem) {
            const supplierName = suggestionItem.dataset.supplierName;
            const supplierId = suggestionItem.dataset.supplierId;
            selectSupplier(supplierName, supplierId);
        }
    });
    
    // Hide suggestions when clicking outside
    document.addEventListener('click', (e) => {
        if (!supplierNameInput.contains(e.target) && !supplierSuggestions.contains(e.target)) {
            hideSuggestions();
        }
    });
    
    // Handle form submit
    const form = document.getElementById('invoiceForm');
    if (form) {
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const formData = {
                supplier_name: document.getElementById('supplierName').value,
                date: document.getElementById('transactionDate').value,
                description: document.getElementById('transactionDescription').value,
                amount: document.getElementById('transactionAmount').value.replace(/,/g, ''),
                type: document.getElementById('transactionType').value,
            };
            
            console.log('Sending invoice data:', formData);
            
            try {
                const response = await fetch('/admin/accounting/invoices', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(formData)
                });
                
                const result = await response.json();
                console.log('Invoice API response:', result);
                
                if (result.success) {
                    if (window.showSuccessModalWithAutoClose) {
                        window.showSuccessModalWithAutoClose('فاکتور با موفقیت ثبت شد');
                        setTimeout(() => {
                            window.location.href = '/admin/accounting/suppliers';
                        }, 1500);
                    } else {
                        alert('فاکتور با موفقیت ثبت شد');
                        window.location.href = '/admin/accounting/suppliers';
                    }
                } else {
                    alert('خطا در ثبت فاکتور: ' + (result.message || 'خطای ناشناخته'));
                }
            } catch (error) {
                console.error('Error:', error);
                alert('خطا در ارتباط با سرور');
            }
        });
    }
});

// Persian Calendar for transactionDate
document.addEventListener('DOMContentLoaded', function() {
    const transactionDateShamsiInput = document.getElementById('transactionDateShamsi');
    const transactionDateHiddenInput = document.getElementById('transactionDate');
    
    if (transactionDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = transactionDateShamsiInput.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.showInvoiceTransactionDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-invoice-transaction');
            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-invoice-transaction';
                    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 (transactionDateShamsiInput) {
                                    transactionDateShamsiInput.value = shamsi;
                                }
                                if (transactionDateHiddenInput) {
                                    transactionDateHiddenInput.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;
                                showInvoiceTransactionDateCalendar(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;
                                showInvoiceTransactionDateCalendar(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;
                                showInvoiceTransactionDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        transactionDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showInvoiceTransactionDateCalendar(currentDate.year, currentDate.month);
        });
    }
});
</script>
@endpush

@endsection