@extends('layouts.panel')

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

@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">شماره استعلام: #{{ $session->id }}</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('price.inquiry.list') }}" 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 -->
    @if($errors->any())
    <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>
                <ul class="text-slate-300 text-sm mt-1 list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    <form action="{{ route('price.inquiry.update', $session->id) }}" method="POST" id="edit-form">
        @csrf
        @method('PUT')

        <!-- Basic Information -->
        <div class="glass rounded-xl p-6">
            <h2 class="text-xl font-bold mb-4 text-slate-200">اطلاعات پایه</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">نام محصول</label>
                    <input type="text" name="product_name" value="{{ old('product_name', $session->product_name) }}" class="form-input w-full" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">مقدار</label>
                    <input type="number" name="quantity" value="{{ old('quantity', $session->quantity == (int)$session->quantity ? (int)$session->quantity : $session->quantity) }}" min="0.0001" step="0.0001" class="form-input w-full" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">واحد</label>
                    <input type="text" name="unit" value="{{ old('unit', $session->unit) }}" class="form-input w-full" required>
                </div>
            </div>
            <div class="mt-4">
                <label class="block text-sm font-medium text-slate-300 mb-2">تاریخ ثبت</label>
                <input type="text" 
                       id="created_at_shamsi" 
                       placeholder="برای انتخاب تاریخ کلیک کنید" 
                       readonly
                       value="{{ old('created_at_shamsi', jdate($session->created_at)->format('Y/m/d')) }}"
                       class="form-input w-full md:w-auto cursor-pointer"
                       style="cursor: pointer;">
                <input type="hidden" 
                       name="created_at" 
                       id="created_at" 
                       value="{{ old('created_at', $session->created_at->format('Y-m-d')) }}">
            </div>
        </div>

        <!-- Offers -->
        <div class="glass rounded-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold text-slate-200">پیشنهادهای تامین‌کنندگان</h2>
                <button type="button" onclick="addOfferRow()" class="btn-secondary text-sm">
                    <i class="fas fa-plus ml-2"></i>
                    افزودن پیشنهاد
                </button>
            </div>
            
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm" id="offers-table">
                    <thead class="bg-slate-700/40">
                        <tr>
                            <th class="px-3 py-2 text-right text-slate-300">تامین‌کننده</th>
                            <th class="px-3 py-2 text-right text-slate-300">قیمت رسمی</th>
                            <th class="px-3 py-2 text-right text-slate-300">قیمت غیررسمی</th>
                            <th class="px-3 py-2 text-right text-slate-300">گرید</th>
                            <th class="px-3 py-2 text-right text-slate-300">برند</th>
                            <th class="px-3 py-2 text-right text-slate-300">کشور</th>
                            <th class="px-3 py-2 text-right text-slate-300">بسته‌بندی</th>
                            <th class="px-3 py-2 text-right text-slate-300">یادداشت</th>
                            <th class="px-3 py-2 text-right text-slate-300">عملیات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/10" id="offers-tbody">
                        @foreach(($session->offers ?? []) as $index => $offer)
                        <tr class="offer-row">
                            <td class="px-3 py-2">
                                <select name="offers[{{ $index }}][supplier_id]" class="form-input w-full" required>
                                    <option value="">انتخاب کنید</option>
                                    @foreach($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" {{ old("offers.{$index}.supplier_id", $offer['supplier_id'] ?? '') == $supplier->id ? 'selected' : '' }}>
                                            {{ $supplier->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-2">
                                <input type="number" name="offers[{{ $index }}][official_price]" value="{{ old("offers.{$index}.official_price", $offer['official_price'] ?? '') }}" min="0" step="0.01" class="form-input w-full price-cell">
                            </td>
                            <td class="px-3 py-2">
                                <input type="number" name="offers[{{ $index }}][unofficial_price]" value="{{ old("offers.{$index}.unofficial_price", $offer['unofficial_price'] ?? '') }}" min="0" step="0.01" class="form-input w-full price-cell">
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" name="offers[{{ $index }}][grade]" value="{{ old("offers.{$index}.grade", $offer['grade'] ?? '') }}" class="form-input w-full">
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" name="offers[{{ $index }}][brand]" value="{{ old("offers.{$index}.brand", $offer['brand'] ?? '') }}" class="form-input w-full">
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" name="offers[{{ $index }}][country]" value="{{ old("offers.{$index}.country", $offer['country'] ?? '') }}" class="form-input w-full">
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" name="offers[{{ $index }}][packaging]" value="{{ old("offers.{$index}.packaging", $offer['packaging'] ?? '') }}" class="form-input w-full">
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" name="offers[{{ $index }}][notes]" value="{{ old("offers.{$index}.notes", $offer['notes'] ?? '') }}" class="form-input w-full">
                            </td>
                            <td class="px-3 py-2">
                                <button type="button" onclick="removeOfferRow(this)" class="text-red-400 hover:text-red-300">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                        @if(empty($session->offers) || count($session->offers) === 0)
                        <tr id="no-offers">
                            <td colspan="9" class="px-3 py-6 text-center text-slate-400">هیچ پیشنهادی ثبت نشده است. برای افزودن پیشنهاد روی دکمه "افزودن پیشنهاد" کلیک کنید.</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('price.inquiry.list') }}" class="btn-secondary">انصراف</a>
            <button type="submit" class="btn-primary">
                <i class="fas fa-save ml-2"></i>
                ذخیره تغییرات
            </button>
        </div>
    </form>
</div>

<script>
// Persian Calendar for created_at
document.addEventListener('DOMContentLoaded', function() {
    const createdAtShamsiInput = document.getElementById('created_at_shamsi');
    const createdAtHiddenInput = document.getElementById('created_at');
    const createdAtTimeInput = document.getElementById('created_at_time');
    
    if (createdAtShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = createdAtShamsiInput.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.showCreatedAtCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-created-at');
            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-created-at';
                    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 (createdAtShamsiInput) {
                                    createdAtShamsiInput.value = shamsi;
                                }
                                if (createdAtHiddenInput) {
                                    createdAtHiddenInput.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;
                                showCreatedAtCalendar(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;
                                showCreatedAtCalendar(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;
                                showCreatedAtCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        createdAtShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showCreatedAtCalendar(currentDate.year, currentDate.month);
        });
    }
});

let offerIndex = {{ count($session->offers ?? []) }};

function addOfferRow() {
    const tbody = document.getElementById('offers-tbody');
    const noOffersRow = document.getElementById('no-offers');
    
    if (noOffersRow) {
        noOffersRow.remove();
    }
    
    const row = document.createElement('tr');
    row.className = 'offer-row';
    row.innerHTML = `
        <td class="px-3 py-2">
            <select name="offers[${offerIndex}][supplier_id]" class="form-input w-full" required>
                <option value="">انتخاب کنید</option>
                @foreach($suppliers as $supplier)
                    <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                @endforeach
            </select>
        </td>
        <td class="px-3 py-2">
            <input type="number" name="offers[${offerIndex}][official_price]" value="" min="0" step="0.01" class="form-input w-full price-cell">
        </td>
        <td class="px-3 py-2">
            <input type="number" name="offers[${offerIndex}][unofficial_price]" value="" min="0" step="0.01" class="form-input w-full price-cell">
        </td>
        <td class="px-3 py-2">
            <input type="text" name="offers[${offerIndex}][grade]" value="" class="form-input w-full">
        </td>
        <td class="px-3 py-2">
            <input type="text" name="offers[${offerIndex}][brand]" value="" class="form-input w-full">
        </td>
        <td class="px-3 py-2">
            <input type="text" name="offers[${offerIndex}][country]" value="" class="form-input w-full">
        </td>
        <td class="px-3 py-2">
            <input type="text" name="offers[${offerIndex}][packaging]" value="" class="form-input w-full">
        </td>
        <td class="px-3 py-2">
            <input type="text" name="offers[${offerIndex}][notes]" value="" class="form-input w-full">
        </td>
        <td class="px-3 py-2">
            <button type="button" onclick="removeOfferRow(this)" class="text-red-400 hover:text-red-300">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;
    
    tbody.appendChild(row);
    offerIndex++;
}

function removeOfferRow(button) {
    const row = button.closest('tr');
    row.remove();
    
    const tbody = document.getElementById('offers-tbody');
    if (tbody.children.length === 0) {
        const noOffersRow = document.createElement('tr');
        noOffersRow.id = 'no-offers';
        noOffersRow.innerHTML = '<td colspan="9" class="px-3 py-6 text-center text-slate-400">هیچ پیشنهادی ثبت نشده است. برای افزودن پیشنهاد روی دکمه "افزودن پیشنهاد" کلیک کنید.</td>';
        tbody.appendChild(noOffersRow);
    }
}

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

function hideSuccessModal() {
    const modal = document.getElementById('success-modal');
    const successContent = document.getElementById('success-modal-content');
    
    // Close the modal completely
    if (modal) {
        modal.classList.add('hidden');
    }
    
    // Clear countdown interval
    if (countdownInterval) {
        clearInterval(countdownInterval);
        countdownInterval = null;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const successTrigger = document.getElementById('success-trigger');
    const modal = document.getElementById('success-modal');
    const countdownDisplay = document.getElementById('countdown-display');
    const successMessageText = document.getElementById('success-modal-text');
    
    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');
        
        // 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;
                // Automatically close modal after countdown
                hideSuccessModal();
            }
        }, 1000);
    }
});
</script>

<!-- Success Modal -->
<div id="success-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 Content -->
        <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 onclick="hideSuccessModal()" 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>
    </div>
</div>
@endsection