@extends('layouts.panel')

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

@section('content')
<div class="fixed inset-0 -z-10 h-full w-full bg-slate-900 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px]"></div>

<div class="mx-auto w-full max-w-4xl">
    <!-- Header -->
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
        <h1 class="text-2xl font-bold text-slate-100">ایجاد وظیفه</h1>
        <a href="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.index') : route('reminders.index') }}" class="mt-4 sm:mt-0 px-4 py-2 text-slate-300 hover:text-white transition-colors flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            بازگشت به لیست
        </a>
    </header>

    <!-- Form Card -->
    <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-6 shadow-xl">
        <form id="reminderForm" class="space-y-6">
            @csrf
            
            <!-- Title -->
            <div>
                <label for="reminderTitle" class="block text-sm font-medium text-slate-400 mb-2">عنوان وظیفه:</label>
                <div class="relative">
                    <input type="text" id="reminderTitle" name="title" 
                           class="w-full rounded-lg bg-slate-700/50 border-slate-600 text-slate-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 pl-10 py-2.5" 
                           required 
                           placeholder="عنوان وظیفه را وارد کنید">
                    <button type="button" id="geminiSuggestBtn" 
                            class="absolute top-1/2 left-2 -translate-y-1/2 text-slate-400 hover:text-yellow-400 transition-colors p-1 rounded-full disabled:opacity-50 disabled:cursor-not-allowed" 
                            title="✨ پیشنهاد هوشمند توضیحات">
                        <svg id="geminiIcon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles">
                            <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
                            <path d="M5 3v4"/>
                            <path d="M19 17v4"/>
                            <path d="M3 5h4"/>
                            <path d="M17 19h4"/>
                        </svg>
                        <div id="geminiLoader" class="hidden animate-spin rounded-full h-5 w-5 border-b-2 border-yellow-400"></div>
                    </button>
                </div>
                <p id="geminiError" class="text-xs text-red-400 mt-1 h-4"></p>
            </div>

            <!-- Date and Recurrence -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="reminderDate" class="block text-sm font-medium text-slate-400 mb-2">تاریخ پیگیری:</label>
                    <input type="text" 
                           id="reminderDateShamsi" 
                           placeholder="برای انتخاب تاریخ کلیک کنید" 
                           readonly
                           class="w-full rounded-lg bg-slate-700/50 border-slate-600 text-slate-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 cursor-pointer"
                           style="cursor: pointer;">
                    <input type="hidden" 
                           id="reminderDate" 
                           name="date" 
                           required>
                </div>
                <div>
                    <label for="reminderRecurrence" class="block text-sm font-medium text-slate-400 mb-2">تکرار:</label>
                    <select id="reminderRecurrence" name="recurrence" 
                            class="w-full rounded-lg bg-slate-700/50 border-slate-600 text-slate-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5">
                        <option value="none">بدون تکرار</option>
                        <option value="daily">روزانه</option>
                        <option value="weekly">هفتگی</option>
                        <option value="monthly">ماهانه</option>
                    </select>
                </div>
            </div>

            <!-- Category, Importance, Assigned To -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label for="reminderCategory" class="block text-sm font-medium text-slate-400 mb-2">دسته‌بندی:</label>
                    <select id="reminderCategory" name="category" 
                            class="w-full rounded-lg bg-slate-700/50 border-slate-600 text-slate-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5">
                        <option value="personal">تسک شخصی ⭐</option>
                        <option value="supplier">تامین‌کننده</option>
                        <option value="purchasing">تیم خرید</option>
                        <option value="financial">مالی</option>
                        <option value="accounting">حسابداری</option>
                        <option value="warehouse">انبار</option>
                        <option value="sales">تیم فروش</option>
                        <option value="management">مدیریت</option>
                        <option value="development">برنامه نویسی</option>
                        <option value="general">عمومی</option>
                    </select>
                </div>
                <div>
                    <label for="reminderImportance" class="block text-sm font-medium text-slate-400 mb-2">اهمیت:</label>
                    <select id="reminderImportance" name="importance" 
                            class="w-full rounded-lg bg-slate-700/50 border-slate-600 text-slate-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5">
                        <option value="low">کم</option>
                        <option value="medium" selected>متوسط</option>
                        <option value="high">زیاد</option>
                    </select>
                </div>
                <div>
                    <label for="reminderAssignedTo" class="block text-sm font-medium text-slate-400 mb-2">ارجاع به:</label>
                    <select id="reminderAssignedTo" name="assigned_to" 
                            class="w-full rounded-lg bg-slate-700/50 border-slate-600 text-slate-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5">
                        <option value="">انتخاب کنید...</option>
                        @foreach($users as $user)
                            <option value="{{ $user['id'] }}">{{ $user['name'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Description -->
            <div>
                <div class="flex justify-between items-center mb-2">
                    <label for="reminderDescription" class="block text-sm font-medium text-slate-400">توضیحات:</label>
                    <button type="button" id="geminiSubtaskBtn" 
                            class="text-xs flex items-center gap-1 text-indigo-400 hover:text-indigo-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        ✨ ایجاد زیروظایف
                        <div id="geminiSubtaskLoader" class="hidden animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-300"></div>
                    </button>
                </div>
                <textarea id="reminderDescription" name="description" rows="4" 
                          class="w-full rounded-lg bg-slate-700/50 border-slate-600 text-slate-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                          placeholder="توضیحات وظیفه را وارد کنید..."></textarea>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end gap-3 pt-4 border-t border-slate-700">
                <a href="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.index') : route('reminders.index') }}" 
                   class="px-6 py-2.5 bg-slate-700 text-slate-200 font-medium rounded-lg shadow-lg hover:bg-slate-600 transition duration-300 ease-in-out">
                    انصراف
                </a>
                <button type="submit" 
                        class="px-6 py-2.5 bg-indigo-600 text-white font-medium rounded-lg shadow-lg hover:bg-indigo-700 transition duration-300 ease-in-out flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                    ایجاد وظیفه
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Toast Notification -->
<div id="toast-notification" class="fixed top-4 left-4 z-50 hidden">
    <div id="toast-message" class="bg-slate-800 text-slate-100 px-6 py-4 rounded-lg shadow-lg border border-slate-700"></div>
</div>

@push('styles')
    @vite('resources/css/reminders.css')
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('reminderForm');
    const geminiSuggestBtn = document.getElementById('geminiSuggestBtn');
    const geminiIcon = document.getElementById('geminiIcon');
    const geminiLoader = document.getElementById('geminiLoader');
    const geminiError = document.getElementById('geminiError');
    const geminiSubtaskBtn = document.getElementById('geminiSubtaskBtn');
    const geminiSubtaskLoader = document.getElementById('geminiSubtaskLoader');
    const reminderTitleInput = document.getElementById('reminderTitle');
    const reminderDescriptionTextarea = document.getElementById('reminderDescription');
    const toast = document.getElementById('toast-notification');
    const toastMessage = document.getElementById('toast-message');
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    function showToast(message, type = 'success') {
        toastMessage.textContent = message;
        toastMessage.className = `bg-${type === 'success' ? 'green' : 'red'}-600 text-white px-6 py-4 rounded-lg shadow-lg`;
        toast.classList.remove('hidden');
        setTimeout(() => {
            toast.classList.add('hidden');
        }, 3000);
    }

    // Form submission
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>';

        const payload = new FormData();
        payload.set('title', document.getElementById('reminderTitle').value);
        payload.set('date', document.getElementById('reminderDate').value);
        payload.set('category', document.getElementById('reminderCategory').value);
        payload.set('importance', document.getElementById('reminderImportance').value);
        payload.set('description', document.getElementById('reminderDescription').value);
        payload.set('recurrence', document.getElementById('reminderRecurrence').value || 'none');
        payload.set('assigned_to', document.getElementById('reminderAssignedTo').value || '');
        payload.set('_token', csrfToken);

        try {
            const response = await fetch('{{ request()->routeIs("purchase.reminders.*") ? route("purchase.reminders.store") : route("reminders.store") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                },
                body: payload
            });

            const data = await response.json();

            if (response.ok) {
                showToast('وظیفه با موفقیت ایجاد شد', 'success');
                setTimeout(() => {
                    window.location.href = '{{ request()->routeIs("purchase.reminders.*") ? route("purchase.reminders.index") : route("reminders.index") }}';
                }, 1500);
            } else {
                showToast(data.message || 'خطا در ایجاد وظیفه', 'error');
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        } catch (error) {
            console.error('Error:', error);
            showToast('خطا در ارتباط با سرور', 'error');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    });

    // Gemini suggest description
    if (geminiSuggestBtn) {
        geminiSuggestBtn.addEventListener('click', async function() {
            const title = reminderTitleInput.value.trim();
            if (!title) {
                geminiError.textContent = 'لطفا ابتدا عنوان را وارد کنید';
                return;
            }

            geminiIcon.classList.add('hidden');
            geminiLoader.classList.remove('hidden');
            geminiSuggestBtn.disabled = true;
            geminiError.textContent = '';

            try {
                const response = await fetch('{{ request()->routeIs("purchase.reminders.*") ? route("purchase.reminders.ai.suggestDescription") : route("reminders.ai.suggestDescription") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ title: title })
                });

                const data = await response.json();

                if (response.ok && data.suggestion) {
                    reminderDescriptionTextarea.value = data.suggestion;
                    geminiError.textContent = '';
                } else {
                    geminiError.textContent = data.error || 'خطا در دریافت پیشنهاد';
                }
            } catch (error) {
                console.error('Error:', error);
                geminiError.textContent = 'خطا در ارتباط با سرور';
            } finally {
                geminiIcon.classList.remove('hidden');
                geminiLoader.classList.add('hidden');
                geminiSuggestBtn.disabled = false;
            }
        });
    }

    // Gemini suggest subtasks
    if (geminiSubtaskBtn) {
        geminiSubtaskBtn.addEventListener('click', async function() {
            const title = reminderTitleInput.value.trim();
            if (!title) {
                showToast('لطفا ابتدا عنوان را وارد کنید', 'error');
                return;
            }

            geminiSubtaskLoader.classList.remove('hidden');
            geminiSubtaskBtn.disabled = true;

            try {
                const response = await fetch('{{ request()->routeIs("purchase.reminders.*") ? route("purchase.reminders.ai.suggestSubtasks") : route("reminders.ai.suggestSubtasks") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ title: title })
                });

                const data = await response.json();

                if (response.ok && data.subtasks) {
                    const currentDesc = reminderDescriptionTextarea.value.trim();
                    reminderDescriptionTextarea.value = currentDesc 
                        ? currentDesc + '\n\n' + data.subtasks 
                        : data.subtasks;
                } else {
                    showToast(data.error || 'خطا در دریافت زیروظایف', 'error');
                }
            } catch (error) {
                console.error('Error:', error);
                showToast('خطا در ارتباط با سرور', 'error');
            } finally {
                geminiSubtaskLoader.classList.add('hidden');
                geminiSubtaskBtn.disabled = false;
            }
        });
    }
});

// Persian Calendar for reminderDate
document.addEventListener('DOMContentLoaded', function() {
    const reminderDateShamsiInput = document.getElementById('reminderDateShamsi');
    const reminderDateHiddenInput = document.getElementById('reminderDate');
    
    if (reminderDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = reminderDateShamsiInput.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.showReminderDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-reminder');
            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-reminder';
                    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 (reminderDateShamsiInput) {
                                    reminderDateShamsiInput.value = shamsi;
                                }
                                if (reminderDateHiddenInput) {
                                    reminderDateHiddenInput.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;
                                showReminderDateCalendar(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;
                                showReminderDateCalendar(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;
                                showReminderDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        reminderDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showReminderDateCalendar(currentDate.year, currentDate.month);
        });
    }
});
</script>
@endpush
@endsection