@extends('layouts.panel')

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

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-white mb-2">ویرایش درخواست نمونه</h1>
                    <p class="text-slate-400">ویرایش درخواست نمونه #{{ $sample->id }}</p>
                </div>
                <div class="flex items-center gap-3">
                    <a 
                        href="{{ route('sales.samples.index') }}" 
                        class="px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white rounded-xl transition-all duration-200 hover:shadow-lg"
                        style="font-size: 12px;"
                    >
                        <i class="fas fa-arrow-right ml-2"></i>
                        بازگشت به لیست
                    </a>
                </div>
            </div>
        </div>

        <!-- Edit Form -->
        <div class="glass rounded-2xl p-6">
            <form action="{{ route('sales.samples.update', $sample) }}" method="POST" class="space-y-6">
                @csrf
                @method('PUT')
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Basic Information -->
                    <div class="space-y-4">
                        <h3 class="text-lg font-semibold text-slate-200 border-b border-slate-700 pb-2">اطلاعات پایه</h3>
                        
                        <div>
                            <label for="product_name" class="block text-sm font-medium text-slate-400 mb-2">نام محصول:</label>
                            <input 
                                type="text" 
                                id="product_name" 
                                name="product_name" 
                                value="{{ old('product_name', $sample->product_name) }}"
                                class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors"
                                required
                            >
                            @error('product_name')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="company_name" class="block text-sm font-medium text-slate-400 mb-2">شرکت مبدا/مقصد:</label>
                            <input 
                                type="text" 
                                id="company_name" 
                                name="company_name" 
                                value="{{ old('company_name', $sample->company_name) }}"
                                class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors"
                                required
                            >
                            @error('company_name')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="sales_person_name" class="block text-sm font-medium text-slate-400 mb-2">نماینده فروش:</label>
                            <input 
                                type="text" 
                                id="sales_person_name" 
                                name="sales_person_name" 
                                value="{{ old('sales_person_name', $sample->sales_person_name) }}"
                                class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors"
                                required
                            >
                            @error('sales_person_name')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="customer_name" class="block text-sm font-medium text-slate-400 mb-2">مشتری نهایی:</label>
                            <input 
                                type="text" 
                                id="customer_name" 
                                name="customer_name" 
                                value="{{ old('customer_name', $sample->customer_name) }}"
                                class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors"
                                required
                            >
                            @error('customer_name')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Technical Details -->
                    <div class="space-y-4">
                        <h3 class="text-lg font-semibold text-slate-200 border-b border-slate-700 pb-2">جزئیات فنی</h3>
                        
                        <div>
                            <label for="quantity" class="block text-sm font-medium text-slate-400 mb-2">مقدار:</label>
                            <input 
                                type="number" 
                                id="quantity" 
                                name="quantity" 
                                value="{{ old('quantity', $sample->quantity) }}"
                                step="0.01" 
                                min="0.01"
                                class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors"
                                required
                            >
                            @error('quantity')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="unit" class="block text-sm font-medium text-slate-400 mb-2">واحد:</label>
                            <input 
                                type="text" 
                                id="unit" 
                                name="unit" 
                                value="{{ old('unit', $sample->unit) }}"
                                class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors"
                                required
                            >
                            @error('unit')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="grade" class="block text-sm font-medium text-slate-400 mb-2">گرید/توضیحات:</label>
                            <input 
                                type="text" 
                                id="grade" 
                                name="grade" 
                                value="{{ old('grade', $sample->grade) }}"
                                class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors"
                            >
                            @error('grade')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="follow_up_date" class="block text-sm font-medium text-slate-400 mb-2">تاریخ پیگیری:</label>
                            <input 
                                type="text" 
                                id="follow_up_date_shamsi" 
                                placeholder="برای انتخاب تاریخ کلیک کنید" 
                                readonly
                                class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors cursor-pointer"
                                style="cursor: pointer;">
                            <input 
                                type="hidden" 
                                id="follow_up_date" 
                                name="follow_up_date" 
                                value="{{ old('follow_up_date', $sample->follow_up_date ? $sample->follow_up_date->format('Y-m-d') : '') }}"
                                required>
                            @error('follow_up_date')
                                <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Notes -->
                <div>
                    <label for="notes" class="block text-sm font-medium text-slate-400 mb-2">توضیحات اضافی:</label>
                    <textarea 
                        id="notes" 
                        name="notes" 
                        rows="4"
                        class="w-full px-4 py-3 bg-white/5 border border-slate-700 rounded-lg text-slate-200 focus:border-blue-500 focus:ring-blue-500 transition-colors"
                        placeholder="توضیحات اضافی درباره درخواست نمونه..."
                    >{{ old('notes', $sample->notes) }}</textarea>
                    @error('notes')
                        <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Submit Button -->
                <div class="flex justify-end pt-6 border-t border-slate-700">
                    <button 
                        type="submit" 
                        class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl transition-all duration-200 hover:shadow-lg"
                    >
                        <i class="fas fa-save ml-2"></i>
                        بروزرسانی درخواست نمونه
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@if(session('success'))
    <div class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50">
        {{ session('error') }}
    </div>
@endif
@endsection

@push('styles')
<style>
/* Fix sidebar hiding issue */
.fixed.right-0.top-0.z-30.h-full.w-72.glass.border-l.border-slate-800\/60 {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 30 !important;
    height: 100vh !important;
    width: 18rem !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure sidebar content is visible */
.fixed.right-0.top-0.z-30.h-full.w-72.glass.border-l.border-slate-800\/60 * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent any CSS that might hide the sidebar */
.fixed.right-0.top-0.z-30.h-full.w-72.glass.border-l.border-slate-800\/60 {
    animation: none !important;
    transition: none !important;
}
</style>
@endpush

@push('scripts')
<script>
    // Fix sidebar visibility issues
    function ensureSidebarVisibility() {
        const sidebar = document.querySelector('.fixed.right-0.top-0.z-30.h-full.w-72.glass.border-l.border-slate-800\\/60');
        if (sidebar) {
            sidebar.style.position = 'fixed';
            sidebar.style.right = '0';
            sidebar.style.top = '0';
            sidebar.style.zIndex = '30';
            sidebar.style.height = '100vh';
            sidebar.style.width = '18rem';
            sidebar.style.display = 'block';
            sidebar.style.visibility = 'visible';
            sidebar.style.opacity = '1';
        }
    }

    // Run on page load and periodically
    document.addEventListener('DOMContentLoaded', function() {
        ensureSidebarVisibility();
        
        // Check every second to ensure sidebar stays visible
        setInterval(ensureSidebarVisibility, 1000);
        
        // Also check after any DOM changes
        const observer = new MutationObserver(ensureSidebarVisibility);
        observer.observe(document.body, { 
            childList: true, 
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'class']
        });
    });

    // Auto-hide success/error messages
    document.addEventListener('DOMContentLoaded', function() {
        const messages = document.querySelectorAll('.fixed');
        messages.forEach(message => {
            setTimeout(() => {
                message.remove();
            }, 3000);
        });
    });

// Persian Calendar for follow_up_date
document.addEventListener('DOMContentLoaded', function() {
    const followUpDateShamsiInput = document.getElementById('follow_up_date_shamsi');
    const followUpDateHiddenInput = document.getElementById('follow_up_date');
    
    if (followUpDateShamsiInput && followUpDateHiddenInput) {
        // Set initial value if exists
        @if($sample->follow_up_date)
            @php
                $jalali = \Morilog\Jalali\Jalalian::fromCarbon($sample->follow_up_date);
            @endphp
            followUpDateShamsiInput.value = '{{ $jalali->format('Y/m/d') }}';
        @endif
        
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = followUpDateShamsiInput.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.showFollowUpDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-follow-up-edit');
            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-follow-up-edit';
                    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 (followUpDateShamsiInput) {
                                    followUpDateShamsiInput.value = shamsi;
                                }
                                if (followUpDateHiddenInput) {
                                    followUpDateHiddenInput.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;
                                showFollowUpDateCalendar(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;
                                showFollowUpDateCalendar(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;
                                showFollowUpDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        followUpDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showFollowUpDateCalendar(currentDate.year, currentDate.month);
        });
    }
});
</script>
@endpush