@extends('layouts.panel')

@section('title', 'ویرایش درخواست خرید')

@push('styles')
<style>
    .glass {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .form-input {
        background-color: rgba(255, 255, 255, 0.07) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #f8fafc !important;
    }
    
    .form-input:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        border: none;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #2563eb, #1e40af);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
    
    .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #f8fafc;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
    }
    
    .price-cell {
        text-align: left;
        direction: ltr;
    }
</style>
@endpush

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-100">ویرایش درخواست خرید</h1>
            <p class="text-slate-400 mt-1">شماره درخواست: #{{ $purchaseRequest->id }}</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route($routePrefix . '.show', $purchaseRequest) }}" class="btn-secondary">
                <i class="fas fa-eye ml-2"></i>
                مشاهده
            </a>
            <a href="{{ route($routePrefix . '.index') }}" class="btn-secondary">
                <i class="fas fa-arrow-right ml-2"></i>
                بازگشت
            </a>
        </div>
    </div>

    <!-- Success Message - Hidden, will trigger modal instead -->
    @if(session('success'))
    <div id="success-trigger" class="hidden" data-success="{{ session('success') }}"></div>
    @endif

    <!-- Error Message -->
    @if(session('error'))
    <div class="glass rounded-xl p-4 border-l-4 border-red-500 mb-4">
        <div class="flex items-center">
            <i class="fas fa-exclamation-circle text-red-400 ml-3"></i>
            <div>
                <h3 class="text-red-300 font-medium">خطا</h3>
                <p class="text-slate-300 text-sm mt-1">{{ session('error') }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Validation Errors Modal -->
    @if($errors->any())
    <div id="validation-errors-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
        <div class="glass rounded-2xl p-6 max-w-md w-full mx-4 border border-slate-700/50 shadow-2xl">
            <div class="flex items-center gap-3 mb-4">
                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-white">خطاهای اعتبارسنجی</h3>
            </div>
            <div class="mb-6">
                <ul class="text-slate-300 text-sm space-y-2 list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <div class="flex justify-end">
                <button type="button" id="validation-errors-modal-close" class="px-6 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors">
                    باشه، قبول
                </button>
            </div>
        </div>
    </div>
    @endif

    <!-- Status Alert -->
    @if($purchaseRequest->status !== 'draft' && $purchaseRequest->status !== 'rejected')
    <div class="glass rounded-xl p-4 border-l-4 border-yellow-500">
        <div class="flex items-center">
            <i class="fas fa-exclamation-triangle text-yellow-400 ml-3"></i>
            <div>
                <h3 class="text-yellow-300 font-medium">توجه</h3>
                <p class="text-slate-300 text-sm mt-1">
                    این درخواست در وضعیت "{{ $purchaseRequest->status_label }}" قرار دارد. 
                    تغییرات ممکن است نیاز به تأیید مجدد داشته باشد.
                </p>
            </div>
        </div>
    </div>
    @endif

    <!-- Warehouse Selection Modal -->
    <div id="warehouse-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
        <div class="glass rounded-2xl p-6 max-w-md w-full mx-4 border border-slate-700/50 shadow-2xl">
            <div class="flex items-center gap-3 mb-4">
                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-500/20 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-white">انتخاب انبار الزامی است</h3>
            </div>
            <p class="text-slate-300 mb-6 leading-relaxed">
                من می‌خواهم آپدیت را انجام دهم اما مشخص نیست این محصول که برای انبار انتخاب شده الان در کدام انبار است.
                <br><br>
                <strong class="text-yellow-400">باید انبار را انتخاب کنی.</strong>
            </p>
            <div class="flex justify-end gap-3">
                <button type="button" id="warehouse-modal-close" class="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white transition-colors">
                    متوجه شدم
                </button>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route($routePrefix . '.update', $purchaseRequest) }}" class="space-y-6" id="purchase-request-form">
        @csrf
        @method('PUT')

        <!-- Basic Information -->
        <div class="glass rounded-2xl p-6">
            <h2 class="text-xl font-bold mb-4 text-slate-200">اطلاعات پایه</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">نوع خرید (دسترسی)</label>
                    <select name="purchase_type" id="purchase_type" class="form-input w-full" required>
                        <option value="official" {{ $purchaseRequest->purchase_type === 'official' ? 'selected' : '' }}>رسمی</option>
                        <option value="unofficial" {{ $purchaseRequest->purchase_type === 'unofficial' ? 'selected' : '' }}>غیررسمی</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">مقصد</label>
                    <select name="destination" id="destination" class="form-input w-full" required>
                        <option value="warehouse" {{ $purchaseRequest->destination === 'warehouse' ? 'selected' : '' }}>برای انبار</option>
                        <option value="sales" {{ $purchaseRequest->destination === 'sales' ? 'selected' : '' }}>برای فروش</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">تاریخ استعلام</label>
                    @php
                        $inquiryDateShamsi = '';
                        if ($purchaseRequest->inquiry_date) {
                            $jalali = \Morilog\Jalali\Jalalian::fromCarbon($purchaseRequest->inquiry_date);
                            $inquiryDateShamsi = $jalali->format('Y/m/d');
                        } else {
                            $now = \Morilog\Jalali\Jalalian::now();
                            $inquiryDateShamsi = $now->format('Y/m/d');
                        }
                    @endphp
                    <input type="hidden" name="inquiry_date" id="inquiry_date" value="{{ $purchaseRequest->inquiry_date ? $purchaseRequest->inquiry_date->format('Y-m-d') : '' }}">
                    <input type="text" id="inquiry_date_shamsi" class="form-input 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 font-mono tracking-widest cursor-pointer" value="{{ $inquiryDateShamsi }}" readonly dir="ltr" style="cursor: pointer; text-align: right; direction: ltr;">
                    <small class="text-xs text-slate-500 mt-1 block">برای انتخاب تاریخ روی فیلد کلیک کنید</small>
                </div>
            </div>
            
            <!-- Warehouse Selection (shown when destination is warehouse) -->
            <!-- Hidden input to ensure warehouse_id is always sent when destination is warehouse -->
            @if($purchaseRequest->destination === 'warehouse' && $purchaseRequest->warehouse_id)
                <input type="hidden" name="warehouse_id_fallback" id="warehouse_id_fallback" value="{{ $purchaseRequest->warehouse_id }}">
            @endif
            <div id="warehouse-container" class="mt-6 {{ $purchaseRequest->destination === 'warehouse' ? '' : 'hidden' }}">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">انبار</label>
                        <select name="warehouse_id" id="warehouse_id" class="form-input w-full">
                            <option value="">انتخاب انبار</option>
                            @foreach($warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}" {{ (old('warehouse_id', $purchaseRequest->warehouse_id ? (int)$purchaseRequest->warehouse_id : null) == (int)$warehouse->id) ? 'selected' : '' }}>
                                {{ $warehouse->name }} @if($warehouse->location) - {{ $warehouse->location }} @endif
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Sales Team Selection (shown when destination is sales) -->
            <div id="sales-container" class="mt-6 {{ $purchaseRequest->destination === 'sales' ? '' : 'hidden' }}">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">تیم فروش</label>
                        <select name="sales_user_id" id="sales_user_id" class="form-input w-full">
                            <option value="">انتخاب تیم فروش</option>
                            @foreach($salesUsers as $user)
                            <option value="{{ $user->id }}" {{ $purchaseRequest->sales_user_id == $user->id ? 'selected' : '' }}>
                                {{ $user->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">پرداخت‌کننده</label>
                        <select name="payer" class="form-input w-full">
                            <option value="">انتخاب کنید</option>
                            <option value="تیم فروش" {{ $purchaseRequest->payer === 'تیم فروش' ? 'selected' : '' }}>تیم فروش</option>
                            <option value="استعلامی" {{ $purchaseRequest->payer === 'استعلامی' ? 'selected' : '' }}>استعلامی</option>
                            <option value="تهاتر کالا" {{ $purchaseRequest->payer === 'تهاتر کالا' ? 'selected' : '' }}>تهاتر کالا</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Payer field (shown when destination is warehouse) -->
            <div id="payer-container" class="mt-6 {{ $purchaseRequest->destination === 'warehouse' ? '' : 'hidden' }}">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">پرداخت‌کننده</label>
                        <select name="payer" class="form-input w-full">
                            <option value="">انتخاب کنید</option>
                            <option value="تیم فروش" {{ $purchaseRequest->payer === 'تیم فروش' ? 'selected' : '' }}>تیم فروش</option>
                            <option value="استعلامی" {{ $purchaseRequest->payer === 'استعلامی' ? 'selected' : '' }}>استعلامی</option>
                            <option value="تهاتر کالا" {{ $purchaseRequest->payer === 'تهاتر کالا' ? 'selected' : '' }}>تهاتر کالا</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="mt-6">
                <label class="block text-sm font-medium text-slate-300 mb-2">یادداشت‌ها</label>
                <textarea name="notes" rows="3" class="form-input w-full" placeholder="یادداشت‌های اضافی...">{{ $purchaseRequest->notes }}</textarea>
            </div>
        </div>

        <!-- Products and Offers -->
        <div class="glass rounded-2xl p-6">
            <h2 class="text-xl font-bold mb-4 text-slate-200">محصولات و استعلام‌ها</h2>
            
            @forelse($purchaseRequest->items as $item)
            <div class="border border-white/10 rounded-xl p-4 mb-4">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="font-bold text-slate-100">{{ optional($item->product)->name ?? ($item->product_name ?? '—') }}</h3>
                    </div>
                </div>
                
                <!-- Item Details -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 p-4 bg-white/5 rounded-lg">
                    <div>
                        <label class="block text-xs text-slate-400 mb-1">مقدار مورد نیاز</label>
                        <input type="number" name="items[{{ $item->id }}][quantity]" 
                               value="{{ $item->quantity == (int)$item->quantity ? (int)$item->quantity : $item->quantity }}" min="0.001" step="0.001" 
                               class="form-input w-full text-sm">
                        <span class="text-xs text-slate-500 mt-1 block">{{ $item->unit }}</span>
                    </div>
                    
                    <div class="md:col-span-2 lg:col-span-1">
                        <label class="block text-xs text-slate-400 mb-1">توضیحات</label>
                        <textarea name="items[{{ $item->id }}][description]" rows="2" 
                                  class="form-input w-full text-sm" 
                                  placeholder="توضیحات محصول...">{{ $item->description }}</textarea>
                    </div>
                </div>
                
                <!-- Quantity Edit Modal -->
                <div id="quantity-modal-{{ $item->id }}" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
                    <div class="glass rounded-xl p-6 w-full max-w-md">
                        <h3 class="text-lg font-bold text-slate-100 mb-4">ویرایش مقدار</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">مقدار جدید</label>
                                <input type="number" id="new-quantity-{{ $item->id }}" value="{{ $item->quantity }}" 
                                       min="0.001" step="0.001" class="form-input w-full">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">واحد</label>
                                <select id="new-unit-{{ $item->id }}" class="form-input w-full">
                                    <option value="کیلوگرم" {{ $item->unit === 'کیلوگرم' ? 'selected' : '' }}>کیلوگرم</option>
                                    <option value="گرم" {{ $item->unit === 'گرم' ? 'selected' : '' }}>گرم</option>
                                    <option value="لیتر" {{ $item->unit === 'لیتر' ? 'selected' : '' }}>لیتر</option>
                                    <option value="متر مکعب" {{ $item->unit === 'متر مکعب' ? 'selected' : '' }}>متر مکعب</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex justify-end gap-3 mt-6">
                            <button type="button" onclick="closeQuantityModal({{ $item->id }})" class="btn-secondary">
                                لغو
                            </button>
                            <button type="button" onclick="saveItemQuantity({{ $item->id }})" class="btn-primary">
                                ذخیره
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="text-slate-400">
                            <tr>
                                <th class="text-right px-2 py-2">تامین‌کننده</th>
                                <th class="text-right px-2 py-2">قیمت فروش (به تومان)</th>
                                <th class="text-right px-2 py-2">برند محصول</th>
                                <th class="text-right px-2 py-2">کشور تولیدکننده</th>
                                <th class="text-right px-2 py-2">گرید</th>
                                <th class="text-right px-2 py-2">بسته بندی</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/10">
                            @forelse($item->offers as $offer)
                            <tr>
                                <td class="px-2 py-2">{{ optional($offer->supplier)->name ?? '—' }}</td>
                                <td class="px-2 py-2 price-cell">
                                    <div class="flex items-center gap-1">
                                        @php
                                            $rawPrice = $offer->price;
                                            $displayPrice = $rawPrice !== null ? number_format($rawPrice, 0, '.', ',') : '';
                                        @endphp
                                        <!-- Hidden real numeric value that will be submitted -->
                                        <input type="hidden"
                                               id="offer-price-{{ $offer->id }}"
                                               name="offers[{{ $offer->id }}][price]"
                                               value="{{ $rawPrice }}">
                                        <!-- Visible formatted input for user (e.g. 76,000) -->
                                        <input type="text"
                                               value="{{ $displayPrice }}"
                                               class="form-input w-28 text-sm price-input-visible"
                                               data-price-target="offer-price-{{ $offer->id }}"
                                               inputmode="decimal"
                                               placeholder="قیمت فروش">
                                        <span class="text-xs text-slate-500">تومان</span>
                                    </div>
                                </td>
                                <td class="px-2 py-2">
                                    <input type="text" name="offers[{{ $offer->id }}][brand]" 
                                           value="{{ $offer->brand }}" class="form-input w-full text-sm" 
                                           placeholder="برند محصول">
                                </td>
                                <td class="px-2 py-2">
                                    <input type="text" name="offers[{{ $offer->id }}][country]" 
                                           value="{{ $offer->country }}" class="form-input w-full text-sm" 
                                           placeholder="کشور تولیدکننده">
                                </td>
                                <td class="px-2 py-2">
                                    <input type="text" name="offers[{{ $offer->id }}][grade]" 
                                           value="{{ $offer->grade }}" class="form-input w-full text-sm" 
                                           placeholder="گرید">
                                </td>
                                <td class="px-2 py-2">
                                    <input type="text" name="offers[{{ $offer->id }}][packaging]" 
                                           value="{{ $offer->packaging }}" class="form-input w-full text-sm" 
                                           placeholder="بسته بندی">
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="px-2 py-3 text-slate-500 text-center">استعلامی ثبت نشده است.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <!-- Add New Offer -->
                <div class="mt-4 p-4 border border-dashed border-white/20 rounded-lg">
                    <h4 class="text-sm font-medium text-slate-300 mb-3">افزودن استعلام جدید</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">تامین‌کننده</label>
                            <select name="new_offers[{{ $item->id }}][supplier_id]" class="form-input w-full text-sm">
                                <option value="">انتخاب کنید</option>
                                @foreach(\App\Models\Supplier::orderBy('name')->get() as $supplier)
                                <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">قیمت واحد</label>
                            <input type="number" name="new_offers[{{ $item->id }}][price]" 
                                   min="0" step="0.01" class="form-input w-full text-sm">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">برند</label>
                            <input type="text" name="new_offers[{{ $item->id }}][brand]" 
                                   class="form-input w-full text-sm">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">کشور</label>
                            <input type="text" name="new_offers[{{ $item->id }}][country]" 
                                   class="form-input w-full text-sm">
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center py-8 text-slate-400">
                <i class="fas fa-box-open text-4xl mb-4"></i>
                <p>محصولی ثبت نشده است.</p>
            </div>
            @endforelse
        </div>

        <!-- Additional Costs -->
        @if($purchaseRequest->costs->count() > 0)
        <div class="glass rounded-2xl p-6">
            <h2 class="text-xl font-bold mb-4 text-slate-200">هزینه‌های اضافی</h2>
            <div class="space-y-4">
                @foreach($purchaseRequest->costs as $cost)
                <div class="flex items-center gap-4 p-3 border border-white/10 rounded-lg">
                    <div class="flex-1">
                        <input type="text" name="costs[{{ $cost->id }}][title]" 
                               value="{{ $cost->title }}" class="form-input w-full">
                    </div>
                    <div class="w-32">
                        <input type="number" name="costs[{{ $cost->id }}][amount]" 
                               value="{{ $cost->amount }}" min="0" step="0.01" 
                               class="form-input w-full">
                    </div>
                    <button type="button" onclick="removeCost({{ $cost->id }})" 
                            class="text-red-400 hover:text-red-300">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Submit Buttons -->
        <div class="flex justify-end gap-4">
            <a href="{{ route($routePrefix . '.show', $purchaseRequest) }}" class="btn-secondary">
                لغو
            </a>
            <button type="submit" class="btn-primary">
                <i class="fas fa-save ml-2"></i>
                ذخیره تغییرات
            </button>
        </div>
    </form>
</div>

<!-- Modal: Add Product and Supplier -->
<div id="add-product-supplier-modal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="glass rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto p-6">
        <!-- Success Modal (shown first with countdown) -->
        <div id="success-modal-content" class="relative z-10 p-8 text-center">
            <!-- Success Icon with Animation -->
            <div class="mx-auto w-20 h-20 mb-6 relative">
                <div class="absolute inset-0 rounded-full bg-green-500/20 animate-ping"></div>
                <div class="relative w-20 h-20 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg">
                    <svg class="w-10 h-10 text-white animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                </div>
            </div>
            
            <!-- Title -->
            <h3 id="success-modal-text" class="text-xl font-bold text-white mb-4 leading-relaxed">درخواست خرید با موفقیت به‌روزرسانی شد.</h3>
            
            <!-- Countdown Display -->
            <div class="mb-4">
                <p class="text-white/80 text-sm mb-2">در حال بستن مودال...</p>
                <div class="flex items-center justify-center gap-2">
                    <span class="text-blue-400 font-bold text-lg" id="countdown-display">5</span>
                    <span class="text-white/60">ثانیه</span>
                </div>
            </div>
            
            <!-- Subtitle -->
            <p class="text-white/80 text-sm mb-8">
                اطلاعات با موفقیت در سیستم ثبت گردید
            </p>
            
            <!-- Action Button -->
            <button id="hide-success-modal-btn" type="button" class="px-8 py-3 rounded-full bg-white/20 hover:bg-white/30 text-white font-medium border border-white/30 hover:border-white/50 transition-all duration-200 transform hover:scale-105 hover:shadow-lg backdrop-blur-sm">
                عالی!
            </button>
        </div>
        
        <!-- Form Modal (shown after countdown) -->
        <div id="form-modal-content" class="hidden">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-slate-100">افزودن محصول و تامین‌کننده</h3>
                <button id="close-add-product-supplier-modal" class="text-gray-400 hover:text-gray-300 text-2xl font-bold">&times;</button>
            </div>
            
            <form id="add-product-supplier-form" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">نام محصول:</label>
                        <input type="text" id="modal-product-name-input" name="product_name" 
                               class="form-input w-full" placeholder="نام محصول را وارد کنید" required>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">تامین‌کننده:</label>
                        <select name="supplier_id" id="modal-supplier-select" class="form-input w-full" required>
                            <option value="">انتخاب کنید</option>
                            @foreach(\App\Models\Supplier::orderBy('name')->get() as $supplier)
                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="form-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">مقدار:</label>
                        <input type="number" name="quantity" class="form-input w-full" 
                               min="0.001" step="0.001" placeholder="مقدار" required>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">واحد:</label>
                        <input type="text" name="unit" class="form-input w-full" 
                               placeholder="کیلوگرم" value="کیلوگرم">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">قیمت واحد (تومان):</label>
                        <input type="number" name="price" class="form-input w-full" 
                               min="0" step="0.01" placeholder="قیمت" required>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">برند:</label>
                        <input type="text" name="brand" class="form-input w-full" placeholder="برند محصول">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">کشور تولیدکننده:</label>
                        <input type="text" name="country" class="form-input w-full" placeholder="کشور تولیدکننده">
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="block text-sm font-medium text-slate-400 mb-2">توضیحات:</label>
                    <textarea name="description" rows="2" class="form-input w-full" 
                              placeholder="توضیحات اضافی..."></textarea>
                </div>
                
                <div class="flex justify-end gap-4 pt-4">
                    <button type="button" id="cancel-add-product-supplier" class="btn-secondary">
                        انصراف
                    </button>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-plus ml-2"></i>
                        افزودن
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
console.log('📜 Purchase Request Edit Script Loading...');
// Handle destination change to show/hide warehouse or sales containers
document.addEventListener('DOMContentLoaded', function() {
    console.log('📜 DOMContentLoaded event fired');
    
    // Validation Errors Modal Handler
    const validationErrorsModal = document.getElementById('validation-errors-modal');
    const validationErrorsModalClose = document.getElementById('validation-errors-modal-close');
    
    if (validationErrorsModal && validationErrorsModalClose) {
        // Show modal on page load if errors exist
        validationErrorsModal.classList.remove('hidden');
        
        // Close modal on button click
        validationErrorsModalClose.addEventListener('click', function() {
            validationErrorsModal.classList.add('hidden');
        });
        
        // Close modal when clicking outside
        validationErrorsModal.addEventListener('click', function(e) {
            if (e.target === validationErrorsModal) {
                validationErrorsModal.classList.add('hidden');
            }
        });
    }
    
    const destinationSelect = document.getElementById('destination');
    const warehouseContainer = document.getElementById('warehouse-container');
    const salesContainer = document.getElementById('sales-container');
    const payerContainer = document.getElementById('payer-container');
    const warehouseSelect = document.getElementById('warehouse_id');
    const mainForm = document.querySelector('form[method="POST"]');
    
    console.log('📜 Initial element check:');
    console.log('  - destinationSelect:', !!destinationSelect);
    console.log('  - warehouseSelect:', !!warehouseSelect);
    console.log('  - mainForm:', !!mainForm);
    
    // Show/hide containers based on destination
    if (destinationSelect) {
        destinationSelect.addEventListener('change', function() {
            if (this.value === 'warehouse') {
                warehouseContainer.classList.remove('hidden');
                salesContainer.classList.add('hidden');
                if (payerContainer) payerContainer.classList.remove('hidden');
            } else if (this.value === 'sales') {
                warehouseContainer.classList.add('hidden');
                salesContainer.classList.remove('hidden');
                if (payerContainer) payerContainer.classList.add('hidden');
            }
        });
        
        // Trigger on page load
        destinationSelect.dispatchEvent(new Event('change'));
    }
    
    // Warehouse Modal Handler
    const warehouseModal = document.getElementById('warehouse-modal');
    const warehouseModalClose = document.getElementById('warehouse-modal-close');
    
    if (warehouseModalClose) {
        warehouseModalClose.addEventListener('click', function() {
            warehouseModal.classList.add('hidden');
            // Focus on warehouse select after closing modal
            if (warehouseSelect) {
                warehouseSelect.focus();
            }
        });
    }
    
    // Close modal when clicking outside
    if (warehouseModal) {
        warehouseModal.addEventListener('click', function(e) {
            if (e.target === warehouseModal) {
                warehouseModal.classList.add('hidden');
                if (warehouseSelect) {
                    warehouseSelect.focus();
                }
            }
        });
    }
    
    // Ensure warehouse_id is always sent when destination is warehouse
    if (mainForm) {
        console.log('✅ Main form found, attaching submit event listener...');
        mainForm.addEventListener('submit', function(e) {
            console.log('🚀🚀🚀 SUBMIT EVENT TRIGGERED! 🚀🚀🚀');
            console.log('=== ============================================');
            console.log('=== FORM SUBMIT DEBUG - START ===');
            console.log('=== ============================================');
            console.log('Event type:', e.type);
            console.log('Form action:', mainForm.action);
            console.log('Form method:', mainForm.method);
            
            const destination = destinationSelect ? destinationSelect.value : '';
            // Always read warehouse_id from select, even if container is hidden
            const warehouseId = warehouseSelect ? warehouseSelect.value : '';
            
            // Check if warehouse is required but not selected
            if (destination === 'warehouse' && (!warehouseId || warehouseId === '' || warehouseId === '0')) {
                e.preventDefault();
                e.stopPropagation();
                console.log('❌ Warehouse validation failed - showing modal');
                
                // Show modal
                if (warehouseModal) {
                    warehouseModal.classList.remove('hidden');
                    // Scroll to warehouse select
                    if (warehouseContainer) {
                        warehouseContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                }
                return false;
            }
            const warehouseIdFallback = document.getElementById('warehouse_id_fallback');
            const warehouseContainer = document.getElementById('warehouse-container');
            const isWarehouseContainerHidden = warehouseContainer ? warehouseContainer.classList.contains('hidden') : false;
            
            console.log('⏰ Timestamp:', new Date().toISOString());
            
            console.log('--- ELEMENT CHECKS ---');
            console.log('mainForm exists:', !!mainForm);
            console.log('destinationSelect exists:', !!destinationSelect);
            console.log('warehouseSelect exists:', !!warehouseSelect);
            console.log('warehouseContainer exists:', !!warehouseContainer);
            console.log('warehouseIdFallback exists:', !!warehouseIdFallback);
            
            console.log('--- SELECT BOX PROPERTIES ---');
            if (warehouseSelect) {
                console.log('warehouseSelect.value:', warehouseSelect.value);
                console.log('warehouseSelect.disabled:', warehouseSelect.disabled);
                console.log('warehouseSelect.hidden:', warehouseSelect.hidden);
                console.log('warehouseSelect.style.display:', warehouseSelect.style.display);
                console.log('warehouseSelect.offsetParent:', warehouseSelect.offsetParent);
                console.log('warehouseSelect.options.length:', warehouseSelect.options.length);
                console.log('warehouseSelect.selectedIndex:', warehouseSelect.selectedIndex);
                if (warehouseSelect.selectedIndex >= 0) {
                    console.log('warehouseSelect.selectedOption:', warehouseSelect.options[warehouseSelect.selectedIndex].text);
                }
            } else {
                console.log('warehouseSelect is NULL!');
            }
            
            console.log('--- VALUES ---');
            console.log('Destination:', destination);
            console.log('Warehouse ID (from select):', warehouseId);
            console.log('Warehouse ID type:', typeof warehouseId);
            console.log('Warehouse ID empty check:', !warehouseId || warehouseId === '' || warehouseId === '0');
            console.log('Warehouse Container Hidden:', isWarehouseContainerHidden);
            console.log('Warehouse ID Fallback:', warehouseIdFallback ? warehouseIdFallback.value : 'not found');
            @php
                $existingWarehouseId = $purchaseRequest->warehouse_id ?? null;
            @endphp
            @if($existingWarehouseId)
                console.log('Existing warehouse_id from DB:', {{ $existingWarehouseId }});
            @else
                console.log('No existing warehouse_id in DB');
            @endif
            
            // Check all form inputs
            console.log('--- ALL FORM INPUTS (before fix) ---');
            const allInputs = mainForm.querySelectorAll('input, select, textarea');
            allInputs.forEach(function(input) {
                if (input.name && (input.name.includes('warehouse') || input.name.includes('destination'))) {
                    console.log('Input:', input.name, '| Type:', input.type, '| Value:', input.value, '| Disabled:', input.disabled, '| Hidden:', input.hidden);
                }
            });
            
            console.log('--- FIXING WAREHOUSE_ID ---');
            // If destination is warehouse but warehouse_id is empty, try to fix it
            if (destination === 'warehouse' && (!warehouseId || warehouseId === '' || warehouseId === '0')) {
                console.log('⚠️ Warehouse ID is empty, trying to set value...');
                
                let finalWarehouseId = null;
                
                // First, try to read from select box (even if hidden)
                if (warehouseSelect && warehouseSelect.value && warehouseSelect.value !== '' && warehouseSelect.value !== '0') {
                    finalWarehouseId = warehouseSelect.value;
                    console.log('✅ Found warehouse_id in select box:', finalWarehouseId);
                }
                
                // If still empty, try to use existing warehouse_id from DB
                if (!finalWarehouseId) {
                    @if($purchaseRequest->warehouse_id)
                        finalWarehouseId = '{{ $purchaseRequest->warehouse_id }}';
                        console.log('✅ Using existing warehouse_id from DB:', finalWarehouseId);
                    @endif
                }
                
                // If no existing value, try fallback
                if (!finalWarehouseId && warehouseIdFallback) {
                    finalWarehouseId = warehouseIdFallback.value;
                    console.log('✅ Using warehouse_id from fallback:', finalWarehouseId);
                }
                
                // If we have a value, set it
                if (finalWarehouseId) {
                    // First try to set the select value
                    if (warehouseSelect) {
                        const oldValue = warehouseSelect.value;
                        warehouseSelect.value = finalWarehouseId;
                        console.log('✅ Set warehouse_id select from', oldValue, 'to:', finalWarehouseId);
                        console.log('   Select value after set:', warehouseSelect.value);
                    } else {
                        console.log('❌ warehouseSelect not found, cannot set select value');
                    }
                    
                    // Also create/update a hidden input to ensure it's sent
                    let hiddenInput = document.querySelector('input[name="warehouse_id"][type="hidden"]');
                    if (!hiddenInput) {
                        hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.name = 'warehouse_id';
                        mainForm.appendChild(hiddenInput);
                        console.log('✅ Created new hidden input for warehouse_id');
                    } else {
                        console.log('✅ Found existing hidden input for warehouse_id');
                    }
                    hiddenInput.value = finalWarehouseId;
                    console.log('✅ Set hidden warehouse_id to:', finalWarehouseId);
                    console.log('   Hidden input value after set:', hiddenInput.value);
                } else {
                    console.warn('❌ No warehouse_id found! User must select a warehouse.');
                    console.warn('   This will cause validation error!');
                    // If still no value, we'll let validation handle it
                }
            } else if (destination === 'warehouse' && warehouseId) {
                console.log('✅ Warehouse ID has value, ensuring it\'s sent...');
                // Even if warehouse_id has a value, ensure it's sent as hidden input too
                // (in case select is disabled or hidden)
                let hiddenInput = document.querySelector('input[name="warehouse_id"][type="hidden"]');
                if (!hiddenInput) {
                    hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'warehouse_id';
                    mainForm.appendChild(hiddenInput);
                    console.log('✅ Created hidden input for warehouse_id');
                }
                hiddenInput.value = warehouseId;
                console.log('✅ Ensured warehouse_id is sent:', warehouseId);
            } else if (destination === 'warehouse') {
                // Destination is warehouse but warehouse_id is still empty
                // Check if select box has any selected option (even if value is empty string)
                if (warehouseSelect) {
                    // Check all options to see if any is selected
                    for (let i = 0; i < warehouseSelect.options.length; i++) {
                        if (warehouseSelect.options[i].selected && warehouseSelect.options[i].value && warehouseSelect.options[i].value !== '') {
                            const selectedValue = warehouseSelect.options[i].value;
                            console.log('✅ Found selected option in select box:', selectedValue);
                            
                            // Create hidden input
                            let hiddenInput = document.querySelector('input[name="warehouse_id"][type="hidden"]');
                            if (!hiddenInput) {
                                hiddenInput = document.createElement('input');
                                hiddenInput.type = 'hidden';
                                hiddenInput.name = 'warehouse_id';
                                mainForm.appendChild(hiddenInput);
                            }
                            hiddenInput.value = selectedValue;
                            console.log('✅ Set warehouse_id from selected option:', selectedValue);
                            break;
                        }
                    }
                }
            } else if (destination !== 'warehouse') {
                console.log('ℹ️ Destination is not warehouse, no need to set warehouse_id');
            }
            
            // Check all form inputs AFTER fix
            console.log('--- ALL FORM INPUTS (after fix) ---');
            const allInputsAfter = mainForm.querySelectorAll('input, select, textarea');
            allInputsAfter.forEach(function(input) {
                if (input.name && (input.name.includes('warehouse') || input.name.includes('destination'))) {
                    console.log('Input:', input.name, '| Type:', input.type, '| Value:', input.value, '| Disabled:', input.disabled, '| Hidden:', input.hidden);
                }
            });
            
            // Log all form data before submit
            console.log('--- FORM DATA (FormData object) ---');
            const formData = new FormData(mainForm);
            let warehouseIdInFormData = null;
            let destinationInFormData = null;
            for (let [key, value] of formData.entries()) {
                if (key === 'warehouse_id') {
                    warehouseIdInFormData = value;
                    console.log('🔍 FOUND warehouse_id in FormData:', value, '| Type:', typeof value);
                } else if (key === 'destination') {
                    destinationInFormData = value;
                    console.log('🔍 FOUND destination in FormData:', value);
                } else if (key.includes('warehouse') || key.includes('destination')) {
                    console.log('🔍', key + ':', value);
                }
            }
            
            console.log('--- FINAL CHECK ---');
            console.log('Destination in FormData:', destinationInFormData);
            console.log('Warehouse ID in FormData:', warehouseIdInFormData);
            
            // Check if hidden input exists in DOM
            const hiddenInputCheck = document.querySelector('input[name="warehouse_id"][type="hidden"]');
            console.log('Hidden input in DOM:', hiddenInputCheck ? 'EXISTS' : 'NOT FOUND');
            if (hiddenInputCheck) {
                console.log('Hidden input value:', hiddenInputCheck.value);
                console.log('Hidden input name:', hiddenInputCheck.name);
            }
            
            // Check if select box exists and its value
            if (warehouseSelect) {
                console.log('Select box value:', warehouseSelect.value);
                console.log('Select box name:', warehouseSelect.name);
                console.log('Select box disabled:', warehouseSelect.disabled);
            }
            
            // Final validation check
            if (destinationInFormData === 'warehouse' && (!warehouseIdInFormData || warehouseIdInFormData === '' || warehouseIdInFormData === '0')) {
                console.error('❌❌❌ PROBLEM: destination is warehouse but warehouse_id is missing or empty in FormData!');
                console.error('   This will cause validation error!');
                console.error('   Hidden input exists:', !!hiddenInputCheck);
                console.error('   Hidden input value:', hiddenInputCheck ? hiddenInputCheck.value : 'N/A');
                console.error('   Select box value:', warehouseSelect ? warehouseSelect.value : 'N/A');
                
                // Try to prevent submit and show alert
                console.error('⚠️ ATTEMPTING TO PREVENT SUBMIT...');
                // Don't prevent default, just log the issue
            } else if (destinationInFormData === 'warehouse' && warehouseIdInFormData) {
                console.log('✅✅✅ SUCCESS: warehouse_id is present in FormData:', warehouseIdInFormData);
                console.log('   Hidden input exists:', !!hiddenInputCheck);
                console.log('   Select box value:', warehouseSelect ? warehouseSelect.value : 'N/A');
            }
            
            // Log all warehouse_id related inputs one more time
            console.log('--- ALL WAREHOUSE_ID INPUTS IN DOM ---');
            const allWarehouseInputs = mainForm.querySelectorAll('input[name="warehouse_id"], select[name="warehouse_id"]');
            allWarehouseInputs.forEach(function(input, index) {
                console.log(`Input ${index + 1}:`, {
                    type: input.type,
                    name: input.name,
                    value: input.value,
                    disabled: input.disabled,
                    hidden: input.hidden,
                    offsetParent: input.offsetParent ? 'visible' : 'hidden',
                    style: {
                        display: input.style.display,
                        visibility: input.style.visibility
                    }
                });
            });
            
            console.log('=== ============================================');
            console.log('=== FORM SUBMIT DEBUG - END ===');
            console.log('=== ============================================');
            console.log('⏰ End timestamp:', new Date().toISOString());
        });
        console.log('✅ Submit event listener attached successfully');
    } else {
        console.error('❌ Main form not found! Cannot attach submit event listener.');
    }
    
    console.log('📜 Purchase Request Edit Script Loaded Successfully');
    console.log('📜 Ready to handle form submissions');
});

// Format offer prices as integer with thousand separators (e.g. 76,000)
document.addEventListener('DOMContentLoaded', function() {
    const priceInputs = document.querySelectorAll('.price-input-visible');

    priceInputs.forEach(function(input) {
        input.addEventListener('input', function() {
            // Remove all non-digit characters (including existing commas)
            const raw = this.value.replace(/,/g, '').replace(/[^\d]/g, '');

            if (raw === '') {
                this.value = '';
                const targetIdEmpty = this.getAttribute('data-price-target');
                if (targetIdEmpty) {
                    const hiddenInputEmpty = document.getElementById(targetIdEmpty);
                    if (hiddenInputEmpty) {
                        hiddenInputEmpty.value = '';
                    }
                }
                return;
            }

            const numericValue = parseInt(raw, 10);

            // Format with thousand separators for display
            this.value = numericValue.toLocaleString('en-US');

            // Sync numeric (unformatted) value into hidden input for form submit
            const targetId = this.getAttribute('data-price-target');
            if (targetId) {
                const hiddenInput = document.getElementById(targetId);
                if (hiddenInput) {
                    hiddenInput.value = numericValue;
                }
            }
        });
    });
});

function editItemQuantity(itemId) {
    document.getElementById('quantity-modal-' + itemId).classList.remove('hidden');
}

function closeQuantityModal(itemId) {
    document.getElementById('quantity-modal-' + itemId).classList.add('hidden');
}

function saveItemQuantity(itemId) {
    const newQuantity = document.getElementById('new-quantity-' + itemId).value;
    const newUnit = document.getElementById('new-unit-' + itemId).value;
    
    // Send AJAX request to update quantity
    fetch(`/admin/purchase-requests/items/${itemId}/quantity`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            quantity: newQuantity,
            unit: newUnit
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            showMessage('success', data.message);
            // Update the display without full reload
            updateQuantityDisplay(itemId, newQuantity, newUnit);
            closeQuantityModal(itemId);
        } else {
            showMessage('error', 'خطا در ذخیره تغییرات: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('خطا در ذخیره تغییرات');
    });
}

function removeOffer(offerId) {
    if (confirm('آیا مطمئن هستید که می‌خواهید این استعلام را حذف کنید؟')) {
        fetch(`/admin/purchase-requests/items/offers/${offerId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('خطا در حذف استعلام: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('خطا در حذف استعلام');
        });
    }
}

function removeCost(costId) {
    if (confirm('آیا مطمئن هستید که می‌خواهید این هزینه را حذف کنید؟')) {
        fetch(`/admin/purchase-requests/costs/${costId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('خطا در حذف هزینه: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('خطا در حذف هزینه');
        });
    }
}

// Helper functions
function showMessage(type, message) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `glass rounded-xl p-4 border-l-4 border-${type === 'success' ? 'green' : 'red'}-500 mb-4`;
    messageDiv.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} text-${type === 'success' ? 'green' : 'red'}-400 ml-3"></i>
            <div>
                <h3 class="text-${type === 'success' ? 'green' : 'red'}-300 font-medium">${type === 'success' ? 'موفقیت' : 'خطا'}</h3>
                <p class="text-slate-300 text-sm mt-1">${message}</p>
            </div>
        </div>
    `;
    
    // Insert at the top of the form
    const form = document.querySelector('form');
    form.parentNode.insertBefore(messageDiv, form);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        messageDiv.remove();
    }, 5000);
}

function updateQuantityDisplay(itemId, newQuantity, newUnit) {
    // Find the quantity display element and update it
    const quantityElements = document.querySelectorAll(`[data-item-id="${itemId}"]`);
    quantityElements.forEach(element => {
        if (element.textContent.includes('مقدار:')) {
            element.textContent = `مقدار: ${new Intl.NumberFormat('fa-IR').format(newQuantity)} ${newUnit}`;
        }
    });
}

// Auto-save functionality
let saveTimeout;
document.querySelectorAll('input, select, textarea').forEach(element => {
    element.addEventListener('input', function() {
        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(() => {
            // Auto-save logic can be implemented here
        }, 2000);
    });
});

// Handle success message and show modal with countdown
let countdownInterval = null;

function showFormModal() {
    const successContent = document.getElementById('success-modal-content');
    const formContent = document.getElementById('form-modal-content');
    const modal = document.getElementById('add-product-supplier-modal');
    const modalContainer = modal?.querySelector('.glass');
    
    if (successContent && formContent) {
        successContent.classList.add('hidden');
        formContent.classList.remove('hidden');
        
        // Change modal size for form
        if (modalContainer) {
            modalContainer.classList.remove('max-w-md');
            modalContainer.classList.add('max-w-4xl');
        }
    }
    
    if (countdownInterval) {
        clearInterval(countdownInterval);
        countdownInterval = null;
    }
}

function hideSuccessModal() {
    const modal = document.getElementById('add-product-supplier-modal');
    const successContent = document.getElementById('success-modal-content');
    const formContent = document.getElementById('form-modal-content');
    const modalContainer = modal?.querySelector('.glass');
    
    // Clear countdown interval first
    if (countdownInterval) {
        clearInterval(countdownInterval);
        countdownInterval = null;
    }
    
    // Close the modal completely
    if (modal) {
        modal.classList.add('hidden');
        modal.style.display = 'none';
    }
    
    // Reset content visibility
    if (successContent) {
        successContent.classList.remove('hidden');
    }
    if (formContent) {
        formContent.classList.add('hidden');
    }
    
    // Reset modal size
    if (modalContainer) {
        modalContainer.classList.remove('max-w-4xl');
        modalContainer.classList.add('max-w-md');
    }
}

// Make function globally available
window.hideSuccessModal = hideSuccessModal;

document.addEventListener('DOMContentLoaded', function() {
    const successTrigger = document.getElementById('success-trigger');
    const modal = document.getElementById('add-product-supplier-modal');
    const countdownDisplay = document.getElementById('countdown-display');
    const successMessageText = document.getElementById('success-modal-text');
    const closeBtn = document.getElementById('close-add-product-supplier-modal');
    const cancelBtn = document.getElementById('cancel-add-product-supplier');
    const form = document.getElementById('add-product-supplier-form');
    const successContent = document.getElementById('success-modal-content');
    const formContent = document.getElementById('form-modal-content');
    
    if (successTrigger && modal) {
        const successMessage = successTrigger.getAttribute('data-success');
        if (successMessage && successMessageText) {
            successMessageText.textContent = successMessage;
        }
        
        // Show modal immediately with success content
        modal.classList.remove('hidden');
        modal.style.display = 'flex';
        if (successContent) {
            successContent.classList.remove('hidden');
        }
        if (formContent) {
            formContent.classList.add('hidden');
        }
        
        // Start countdown from 5 seconds
        let countdown = 5;
        if (countdownDisplay) {
            countdownDisplay.textContent = countdown;
        }
        
        countdownInterval = setInterval(() => {
            countdown--;
            if (countdownDisplay) {
                countdownDisplay.textContent = countdown;
            }
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                countdownInterval = null;
                // Close modal after countdown
                hideSuccessModal();
            }
        }, 1000);
        
        // Add event listener to "عالی!" button
        const successButton = document.getElementById('hide-success-modal-btn');
        if (successButton) {
            successButton.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                hideSuccessModal();
            });
        }
        
        // Close modal handlers
        const closeModal = () => {
            modal.classList.add('hidden');
            modal.style.display = 'none';
            if (countdownInterval) {
                clearInterval(countdownInterval);
                countdownInterval = null;
            }
            // Reset to show success content next time
            if (successContent) {
                successContent.classList.remove('hidden');
            }
            if (formContent) {
                formContent.classList.add('hidden');
            }
            // Reset modal size
            const modalContainer = modal.querySelector('.glass');
            if (modalContainer) {
                modalContainer.classList.remove('max-w-4xl');
                modalContainer.classList.add('max-w-md');
            }
        };
        
        if (closeBtn) {
            closeBtn.addEventListener('click', closeModal);
        }
        
        if (cancelBtn) {
            cancelBtn.addEventListener('click', closeModal);
        }
        
        // Close on backdrop click
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModal();
            }
        });
        
        // Close on Escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
                closeModal();
            }
        });
        
        // Handle form submission - redirect to create page with pre-filled data
        if (form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Get form values
                const productName = document.getElementById('modal-product-name-input').value;
                const supplierId = document.getElementById('modal-supplier-select').value;
                const quantity = form.querySelector('input[name="quantity"]').value;
                const unit = form.querySelector('input[name="unit"]').value;
                const price = form.querySelector('input[name="price"]').value;
                const brand = form.querySelector('input[name="brand"]').value;
                const country = form.querySelector('input[name="country"]').value;
                const description = form.querySelector('textarea[name="description"]').value;
                
                // Build URL with query parameters
                const params = new URLSearchParams({
                    purchase_request_id: '{{ $purchaseRequest->id }}',
                    product_name: productName,
                    supplier_id: supplierId,
                    quantity: quantity,
                    unit: unit,
                    price: price,
                    brand: brand || '',
                    country: country || '',
                    description: description || ''
                });
                
                // Redirect to create page with pre-filled data
                window.location.href = '{{ route("admin.purchase-requests.create") }}?' + params.toString();
            });
        }
    }
    
    // Persian Calendar for inquiry_date
    const inquiryDateShamsiInput = document.getElementById('inquiry_date_shamsi');
    const inquiryDateHiddenInput = document.getElementById('inquiry_date');
    
    if (inquiryDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = inquiryDateShamsiInput.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.showInquiryDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-inquiry');
            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) {
                            // Check if it's an error HTML page
                            if (text.includes('persian-calendar-container')) {
                                // It's actually the calendar, just with error status
                                return text;
                            }
                            // Log error details
                            console.error('Calendar fetch error:', {
                                status: response.status,
                                statusText: response.statusText,
                                url: calendarUrl + '?year=' + year + '&month=' + month,
                                responseText: text.substring(0, 500)
                            });
                            throw new Error('Failed to load calendar: ' + response.status);
                        }
                        return text;
                    });
                })
                .then(html => {
                    if (!html || html.trim().length === 0 || !html.includes('persian-calendar-container')) {
                        console.error('Invalid calendar HTML:', {
                            htmlLength: html.length,
                            containsContainer: html.includes('persian-calendar-container'),
                            htmlPreview: html.substring(0, 200)
                        });
                        throw new Error('Invalid calendar HTML');
                    }
                    
                    // Create modal container
                    const modal = document.createElement('div');
                    modal.id = 'persian-calendar-modal-inquiry';
                    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 (inquiryDateShamsiInput) {
                                    inquiryDateShamsiInput.value = shamsi;
                                }
                                if (inquiryDateHiddenInput) {
                                    inquiryDateHiddenInput.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;
                                showInquiryDateCalendar(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;
                                showInquiryDateCalendar(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;
                                showInquiryDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                    // Don't show alert, just log the error
                    // The calendar is optional and shouldn't break the page
                    console.warn('Calendar loading failed, but continuing without it:', error.message);
                });
        };
        
        // Show calendar on click
        inquiryDateShamsiInput.addEventListener('click', function() {
            const date = getCurrentDate();
            currentCalendarYear = date.year;
            currentCalendarMonth = date.month;
            showInquiryDateCalendar(date.year, date.month);
        });
        
        inquiryDateShamsiInput.addEventListener('focus', function() {
            const date = getCurrentDate();
            currentCalendarYear = date.year;
            currentCalendarMonth = date.month;
            showInquiryDateCalendar(date.year, date.month);
        });
    }
});
</script>
@endpush
@endsection