@extends('layouts.panel')

@section('title', 'ایجاد سفارش خرید جدید - منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی ابزار برای مدیریت خرید و فروش مواد شیمیایی')
@section('meta_description', 'ثبت دستی سفارش خرید جدید و تعیین آیتم‌ها در منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی ابزار برای مدیریت خرید و فروش مواد شیمیایی')

@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-slate-400 mt-1">ایجاد دستی سفارش خرید</p>
        </div>
        
        <div class="flex items-center gap-3">
            <a href="{{ route('purchase_orders.index') }}" class="btn-secondary">
                <span class="text-lg">🔙</span>
                بازگشت
            </a>
        </div>
    </div>

    <!-- Create Form -->
    <div class="glass p-6 rounded-xl">
        <form method="POST" action="{{ route('purchase_orders.store') }}" class="space-y-6">
            @csrf
            
            <!-- Basic Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="supplier_id" class="block text-sm font-medium text-slate-300 mb-2">تامین کننده *</label>
                    <select name="supplier_id" id="supplier_id" required class="form-select">
                        <option value="">انتخاب تامین کننده</option>
                        @foreach($suppliers as $supplier)
                        <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>
                            {{ $supplier->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('supplier_id')
                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="currency" class="block text-sm font-medium text-slate-300 mb-2">ارز *</label>
                    <select name="currency" id="currency" required class="form-select">
                        @foreach(['تومان', 'USD', 'EUR', 'GBP'] as $currency)
                        <option value="{{ $currency }}" {{ old('currency', 'تومان') === $currency ? 'selected' : '' }}>
                            {{ $currency }}
                        </option>
                        @endforeach
                    </select>
                    @error('currency')
                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="issue_date" class="block text-sm font-medium text-slate-300 mb-2">تاریخ صدور</label>
                    <input type="text" 
                           id="issue_date_shamsi" 
                           placeholder="برای انتخاب تاریخ کلیک کنید" 
                           readonly
                           class="form-input cursor-pointer"
                           style="cursor: pointer;">
                    <input type="hidden" 
                           name="issue_date" 
                           id="issue_date" 
                           value="{{ old('issue_date') }}"
                           class="form-input">
                    @error('issue_date')
                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="due_date" class="block text-sm font-medium text-slate-300 mb-2">تاریخ سررسید</label>
                    <input type="text" 
                           id="due_date_shamsi" 
                           placeholder="برای انتخاب تاریخ کلیک کنید" 
                           readonly
                           class="form-input cursor-pointer"
                           style="cursor: pointer;">
                    <input type="hidden" 
                           name="due_date" 
                           id="due_date" 
                           value="{{ old('due_date') }}"
                           class="form-input">
                    @error('due_date')
                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            
            <div>
                <label for="notes" class="block text-sm font-medium text-slate-300 mb-2">یادداشت‌ها</label>
                <textarea name="notes" id="notes" rows="3" 
                          placeholder="یادداشت‌های مربوط به این سفارش خرید..."
                          class="form-textarea">{{ old('notes') }}</textarea>
                @error('notes')
                <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <div>
                <label for="extra_costs" class="block text-sm font-medium text-slate-300 mb-2">هزینه‌های اضافی</label>
                <input type="number" name="extra_costs" id="extra_costs" 
                       value="{{ old('extra_costs', 0) }}" step="0.01" min="0"
                       placeholder="0.00" class="form-input">
                @error('extra_costs')
                <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- Items Section -->
            <div class="border-t border-slate-700 pt-6">
                <h2 class="text-xl font-semibold text-slate-200 mb-4">آیتم‌های سفارش</h2>
                
                <div id="items-container" class="space-y-4">
                    <!-- Item template will be added here -->
                </div>
                
                <button type="button" id="add-item-btn" class="btn-secondary mt-4">
                    <span class="text-lg">➕</span>
                    افزودن آیتم
                </button>
            </div>
            
            <div class="flex items-center gap-3 pt-6 border-t border-slate-700">
                <button type="submit" class="btn-primary">
                    <span class="text-lg">💾</span>
                    ایجاد سفارش خرید
                </button>
                
                <a href="{{ route('purchase_orders.index') }}" class="btn-secondary">
                    <span class="text-lg">❌</span>
                    انصراف
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Item Template (hidden) -->
<template id="item-template">
    <div class="item-row bg-slate-700/50 rounded-lg p-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">محصول *</label>
                <select name="items[{index}][product_id]" required class="form-select">
                    <option value="">انتخاب محصول</option>
                    @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->name }}</option>
                    @endforeach
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">تعداد *</label>
                <input type="number" name="items[{index}][quantity]" required step="0.001" min="0.001"
                       placeholder="0.000" class="form-input">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">واحد</label>
                <input type="text" name="items[{index}][unit]" placeholder="کیلوگرم" class="form-input">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">قیمت واحد</label>
                <input type="number" name="items[{index}][unit_price]" step="0.01" min="0"
                       placeholder="0.00" class="form-input">
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">درجه</label>
                <input type="text" name="items[{index}][grade]" placeholder="A" class="form-input">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">خلوص</label>
                <input type="text" name="items[{index}][purity]" placeholder="99%" class="form-input">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">بسته‌بندی</label>
                <input type="text" name="items[{index}][packaging]" placeholder="کیسه 25 کیلویی" class="form-input">
            </div>
        </div>
        
        <div class="flex justify-end mt-4">
            <button type="button" class="remove-item-btn btn-danger">
                <span class="text-lg">🗑️</span>
                حذف آیتم
            </button>
        </div>
    </div>
</template>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let itemIndex = 0;
    const itemsContainer = document.getElementById('items-container');
    const addItemBtn = document.getElementById('add-item-btn');
    const itemTemplate = document.getElementById('item-template');
    
    // Add first item by default
    addItem();
    
    addItemBtn.addEventListener('click', addItem);
    
    function addItem() {
        const itemHtml = itemTemplate.innerHTML.replace(/{index}/g, itemIndex);
        const itemDiv = document.createElement('div');
        itemDiv.innerHTML = itemHtml;
        itemsContainer.appendChild(itemDiv);
        
        // Add remove event listener
        const removeBtn = itemDiv.querySelector('.remove-item-btn');
        removeBtn.addEventListener('click', function() {
            if (itemsContainer.children.length > 1) {
                itemDiv.remove();
            }
        });
        
        itemIndex++;
    }
});

// Persian Calendar for issue_date and due_date
document.addEventListener('DOMContentLoaded', function() {
    // Function to setup calendar for an input
    function setupCalendar(shamsiInputId, hiddenInputId, calendarModalId, calendarFunctionName) {
        const shamsiInput = document.getElementById(shamsiInputId);
        const hiddenInput = document.getElementById(hiddenInputId);
        
        if (!shamsiInput) return;
        
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = shamsiInput.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[calendarFunctionName] = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById(calendarModalId);
            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 = calendarModalId;
                    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 (shamsiInput) {
                                    shamsiInput.value = shamsi;
                                }
                                if (hiddenInput) {
                                    hiddenInput.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;
                                window[calendarFunctionName](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;
                                window[calendarFunctionName](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;
                                window[calendarFunctionName](today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        shamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            window[calendarFunctionName](currentDate.year, currentDate.month);
        });
    }
    
    // Setup calendars
    setupCalendar('issue_date_shamsi', 'issue_date', 'persian-calendar-modal-issue-date-create', 'showIssueDateCalendarCreate');
    setupCalendar('due_date_shamsi', 'due_date', 'persian-calendar-modal-due-date-create', 'showDueDateCalendarCreate');
});
</script>

<style>
.btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors;
}

.btn-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white font-medium rounded-lg transition-colors;
}

.btn-danger {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors;
}

.form-select, .form-input, .form-textarea {
    @apply w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-textarea {
    @apply resize-vertical;
}
</style>
@endsection