@extends('layouts.panel')

@section('title', 'ویرایش سفارش خرید ' . $purchaseOrder->po_number . ' - منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی ابزار برای مدیریت خرید و فروش مواد شیمیایی')
@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">ویرایش سفارش خرید {{ $purchaseOrder->po_number }}</h1>
            <p class="text-slate-400 mt-1">
                وضعیت: <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $purchaseOrder->status_color }} text-white">
                    {{ $purchaseOrder->status_label }}
                </span>
            </p>
        </div>
        
        <div class="flex items-center gap-3">
            <a href="{{ route('purchase_orders.show', $purchaseOrder) }}" class="btn-secondary">
                <span class="text-lg">🔙</span>
                بازگشت
            </a>
        </div>
    </div>

    <!-- Edit Form -->
    <div class="glass p-6 rounded-xl">
        <form method="POST" action="{{ route('purchase_orders.update', $purchaseOrder) }}" class="space-y-6">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <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 }}" {{ $purchaseOrder->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="{{ $purchaseOrder->issue_date ? $purchaseOrder->issue_date->format('Y-m-d') : '' }}"
                           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="{{ $purchaseOrder->due_date ? $purchaseOrder->due_date->format('Y-m-d') : '' }}"
                           class="form-input">
                    @error('due_date')
                    <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="{{ $purchaseOrder->extra_costs }}" 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>
            </div>
            
            <div>
                <label for="notes" class="block text-sm font-medium text-slate-300 mb-2">یادداشت‌ها</label>
                <textarea name="notes" id="notes" rows="4" 
                          placeholder="یادداشت‌های مربوط به این سفارش خرید..."
                          class="form-textarea">{{ $purchaseOrder->notes }}</textarea>
                @error('notes')
                <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <div class="flex items-center gap-3 pt-4">
                <button type="submit" class="btn-primary">
                    <span class="text-lg">💾</span>
                    ذخیره تغییرات
                </button>
                
                <a href="{{ route('purchase_orders.show', $purchaseOrder) }}" class="btn-secondary">
                    <span class="text-lg">❌</span>
                    انصراف
                </a>
            </div>
        </form>
    </div>

    <!-- Read-only Information -->
    <div class="glass p-6 rounded-xl">
        <h2 class="text-xl font-semibold text-slate-200 mb-4">اطلاعات غیرقابل ویرایش</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <span class="text-slate-400 text-sm">شماره PO:</span>
                <p class="text-slate-200 font-medium mt-1 font-mono">{{ $purchaseOrder->po_number }}</p>
            </div>
            <div>
                <span class="text-slate-400 text-sm">تامین کننده:</span>
                <p class="text-slate-200 font-medium mt-1">{{ $purchaseOrder->supplier->name }}</p>
            </div>
            <div>
                <span class="text-slate-400 text-sm">وضعیت:</span>
                <p class="text-slate-200 font-medium mt-1">{{ $purchaseOrder->status_label }}</p>
            </div>
            @if($purchaseOrder->purchaseRequest)
            <div>
                <span class="text-slate-400 text-sm">درخواست خرید:</span>
                <p class="text-slate-200 font-medium mt-1">
                    <a href="{{ route('admin.purchase-requests.show', $purchaseOrder->purchaseRequest) }}" 
                       class="text-blue-400 hover:text-blue-300">PR #{{ $purchaseOrder->purchaseRequest->id }}</a>
                </p>
            </div>
            @endif
        </div>
    </div>
</div>

<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;
}

.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>
@push('scripts')
<script>
// Persian Calendar for issue_date and due_date
document.addEventListener('DOMContentLoaded', function() {
    // Set initial values for issue_date
    @if($purchaseOrder->issue_date)
        @php
            $issueDateJalali = \Morilog\Jalali\Jalalian::fromCarbon($purchaseOrder->issue_date);
        @endphp
        const issueDateShamsiInput = document.getElementById('issue_date_shamsi');
        if (issueDateShamsiInput) {
            issueDateShamsiInput.value = '{{ $issueDateJalali->format('Y/m/d') }}';
        }
    @endif
    
    // Set initial values for due_date
    @if($purchaseOrder->due_date)
        @php
            $dueDateJalali = \Morilog\Jalali\Jalalian::fromCarbon($purchaseOrder->due_date);
        @endphp
        const dueDateShamsiInput = document.getElementById('due_date_shamsi');
        if (dueDateShamsiInput) {
            dueDateShamsiInput.value = '{{ $dueDateJalali->format('Y/m/d') }}';
        }
    @endif
    
    // 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', 'showIssueDateCalendar');
    setupCalendar('due_date_shamsi', 'due_date', 'persian-calendar-modal-due-date', 'showDueDateCalendar');
});
</script>
@endpush
@endsection