@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>

<main id="reminders-page"
            data-fetch-url="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.fetch') : route('reminders.fetch') }}"
            data-users-url="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.users') : route('reminders.users') }}"
            data-store-url="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.store') : route('reminders.store') }}"
            data-update-url-template="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.update', ['reminder' => ':id']) : route('reminders.update', ['reminder' => ':id']) }}"
            data-destroy-url-template="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.destroy', ['reminder' => ':id']) : route('reminders.destroy', ['reminder' => ':id']) }}"
            data-status-url-template="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.updateStatus', ['reminder' => ':id']) : route('reminders.updateStatus', ['reminder' => ':id']) }}"
            data-suggest-desc-url="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.ai.suggestDescription') : route('reminders.ai.suggestDescription') }}"
            data-suggest-subtasks-url="{{ request()->routeIs('purchase.reminders.*') ? route('purchase.reminders.ai.suggestSubtasks') : route('reminders.ai.suggestSubtasks') }}"
            class="mx-auto w-full">
            <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>
                <button id="addReminderBtn" class="mt-4 sm:mt-0 px-5 py-2.5 bg-indigo-600 text-white font-medium rounded-lg shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all duration-300 flex items-center gap-2">
                     <svg 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"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                    <span>افزودن وظیفه</span>
                </button>
            </header>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="card-bg rounded-xl p-5 border-t-4 border-indigo-500"><div class="flex items-center gap-4"><div class="rounded-full bg-indigo-500/10 p-3 text-indigo-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg></div><div><p class="text-sm font-medium text-slate-400">کل وظایف فعال</p><h3 id="totalReminders" class="text-3xl font-bold text-white mt-1">0</h3></div></div></div>
                <div class="card-bg rounded-xl p-5 border-t-4 border-blue-500"><div class="flex items-center gap-4"><div class="rounded-full bg-blue-500/10 p-3 text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M12 6v6l4 2"/></svg></div><div><p class="text-sm font-medium text-slate-400">وظایف آینده</p><h3 id="upcomingReminders" class="text-3xl font-bold text-white mt-1">0</h3></div></div></div>
                <div class="card-bg rounded-xl p-5 border-t-4 border-green-500"><div class="flex items-center gap-4"><div class="rounded-full bg-green-500/10 p-3 text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><p class="text-sm font-medium text-slate-400">انجام شده (آرشیو)</p><h3 id="doneReminders" class="text-3xl font-bold text-white mt-1">0</h3></div></div></div>
                <div class="card-bg rounded-xl p-5 border-t-4 border-red-500"><div class="flex items-center gap-4"><div class="rounded-full bg-red-500/10 p-3 text-red-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div><div><p class="text-sm font-medium text-slate-400">عقب افتاده</p><h3 id="overdueReminders" class="text-3xl font-bold text-white mt-1">0</h3></div></div></div>
            </div>
            <div class="card-bg rounded-xl p-4 mb-6 flex flex-col gap-4">
                 <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                     <div class="flex items-center gap-2 flex-wrap">
                         <span class="text-sm text-slate-400 ml-2">دسته‌بندی:</span>
                         <div class="flex space-x-1 space-x-reverse rounded-full bg-slate-900/70 p-1 text-sm font-medium text-slate-400 flex-wrap justify-center">
                            <button data-filter-cat="personal" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors bg-gradient-to-r from-pink-600 to-orange-500 text-white shadow-lg ring-2 ring-orange-300/40 hover:from-pink-500 hover:to-orange-400 animate-pulse">تسک شخصی</button>
                            <button data-filter-cat="all" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">همه</button>
                            <button data-filter-cat="supplier" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">تامین‌کننده</button>
                            <button data-filter-cat="purchasing" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">تیم خرید</button>
                            <button data-filter-cat="financial" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">مالی</button>
                            <button data-filter-cat="accounting" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">حسابداری</button>
                            <button data-filter-cat="warehouse" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">انبار</button>
                            <button data-filter-cat="sales" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">تیم فروش</button>
                            <button data-filter-cat="management" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">مدیریت</button>
                            <button data-filter-cat="development" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">برنامه نویسی</button>
                            <button data-filter-cat="general" class="filter-btn-cat px-3 py-1.5 rounded-full transition-colors">عمومی</button>
                         </div>
                     </div>
                      <div class="flex items-center gap-2">
                         <span class="text-sm text-slate-400">مرتب‌سازی:</span>
                         <select id="sortControl" class="rounded-lg bg-slate-700/50 p-2 text-sm font-medium text-slate-300 border border-slate-600 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                             <option value="date-desc">جدیدترین</option>
                             <option value="date-asc">قدیمی‌ترین</option>
                             <option value="importance">اهمیت</option>
                         </select>
                     </div>
                 </div>
                 <div class="border-t border-slate-700/60 pt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
                      <div class="flex items-center gap-2 flex-wrap">
                         <span class="text-sm text-slate-400 ml-2">ارجاع شده به:</span>
                         <div class="flex space-x-1 space-x-reverse rounded-full bg-slate-900/70 p-1 text-sm font-medium text-slate-400">
                             <button data-filter-user="all" class="filter-btn-user px-4 py-1.5 rounded-full transition-colors">همه</button>
                             <button data-filter-user="my-tasks" class="filter-btn-user px-4 py-1.5 rounded-full transition-colors">وظایف من</button>
                         </div>
                     </div>
                 </div>
            </div>
            <div id="remindersGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
            <div id="noRemindersMessage" class="text-center text-slate-400 py-16 hidden">
                <svg class="mx-auto h-12 w-12 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                <h3 class="mt-2 text-sm font-medium text-slate-200">وظیفه‌ای یافت نشد.</h3>
                <p class="mt-1 text-sm text-slate-400">یک وظیفه جدید اضافه کنید تا کار خود را شروع کنید.</p>
            </div>

            <div class="mt-12">
                <h2 class="text-xl font-bold text-slate-100 border-b pb-4 mb-6 border-slate-700">آرشیو وظایف انجام شده</h2>
                <div class="card-bg rounded-xl p-2">
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm text-right text-slate-300">
                            <thead class="text-xs text-slate-400 uppercase">
                                <tr>
                                    <th scope="col" class="px-6 py-4">ردیف</th>
                                    <th scope="col" class="px-6 py-4">عنوان وظیفه</th>
                                    <th scope="col" class="px-6 py-4">دسته</th>
                                    <th scope="col" class="px-6 py-4">ایجاد شده توسط</th>
                                    <th scope="col" class="px-6 py-4">تاریخ انجام</th>
                                    <th scope="col" class="px-6 py-4">توضیحات</th>
                                    <th scope="col" class="px-6 py-4">عملیات</th>
                                </tr>
                            </thead>
                            <tbody id="completedTasksTableBody"></tbody>
                        </table>
                    </div>
                    <p id="noCompletedTasksMessage" class="text-center text-slate-400 py-8 hidden">هنوز وظیفه‌ای را تکمیل نکرده‌اید.</p>
                </div>
            </div>
        </main>

        <main id="reports-page" class="mx-auto w-full max-w-7xl hidden">
            <header class="flex flex-col sm:flex-row justify-between items-center border-b pb-4 mb-6 border-slate-700">
                <h1 class="text-2xl font-bold text-slate-100">گزارش‌های عملکرد تیم</h1>
                <button id="generateReportBtn" class="mt-4 sm:mt-0 px-4 py-2 bg-purple-600 text-white font-medium rounded-lg shadow-lg hover:bg-purple-700 transition-all duration-300 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                    ✨ تهیه خلاصه‌ی گزارش
                    <div id="reportLoader" class="hidden animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                </button>
            </header>
            <div id="reportSummaryContainer" class="card-bg rounded-xl p-6 mb-8 hidden animate-fadeIn">
                <h2 class="text-lg font-semibold text-purple-400 mb-4 flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
                    خلاصه هوشمند عملکرد
                </h2>
                <div id="reportSummaryContent" class="text-slate-300 prose prose-invert max-w-none prose-p:leading-relaxed"></div>
                 <p id="reportError" class="text-sm text-red-400 mt-2 h-4"></p>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div class="card-bg rounded-xl p-6 flex flex-col">
                    <h2 class="text-lg font-semibold text-green-400 mb-4">تعداد وظایف ارجاع داده شده (توسط هر کاربر)</h2>
                    <div class="relative h-80 md:h-96">
                        <canvas id="assignedByChart"></canvas>
                    </div>
                </div>
                <div class="card-bg rounded-xl p-6 flex flex-col">
                    <h2 class="text-lg font-semibold text-purple-400 mb-4">تعداد وظایف دریافت شده (به هر کاربر)</h2>
                    <div class="relative h-80 md:h-96">
                         <canvas id="assignedToChart"></canvas>
                    </div>
                </div>
            </div>
</main>
@endsection

<div id="reminderModal" class="fixed inset-0 bg-black/80 flex items-center justify-center overflow-y-auto h-full w-full hidden z-50 p-4">
    <div class="relative mx-auto w-11/12 md:max-w-2xl shadow-2xl rounded-2xl card-bg animate-fadeIn">
         <div class="flex justify-between items-center p-5 border-b mb-4 border-slate-700">
            <h3 id="modalTitle" class="text-xl font-bold text-slate-100"></h3>
            <button id="closeModalBtn" class="text-gray-400 hover:text-gray-200 text-3xl font-bold">&times;</button>
        </div>
        <form id="reminderForm" class="space-y-4 p-5 pt-0">
            <input type="hidden" id="reminderId" name="id">
            <input type="hidden" id="reminderCreatedBy" name="createdBy">
            <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>
                    <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>
            <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>
            <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="assignedTo" 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"></select>
                </div>
            </div>
            <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"></textarea>
            </div>
            <div class="flex justify-end pt-4">
                <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">
                    ذخیره
                </button>
            </div>
        </form>
    </div>
</div>

@push('styles')
    @vite('resources/css/reminders.css')
@endpush
@push('scripts')
    @vite('resources/js/reminders.js')
    <script>
    // 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-index');
                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-index';
                        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
<div id="confirmModal" class="fixed inset-0 bg-black/80 flex items-center justify-center overflow-y-auto h-full w-full hidden z-50 p-4">
    <div class="relative mx-auto w-11/12 md:max-w-md shadow-2xl rounded-2xl card-bg animate-fadeIn">
         <div class="p-6 text-center">
            <svg class="mx-auto mb-4 text-red-400 w-12 h-12" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
            <h3 class="mb-5 text-lg font-semibold text-slate-100">آیا از حذف این وظیفه مطمئن هستید؟</h3>
            <p class="mb-6 text-sm text-slate-400">این عمل قابل بازگشت نخواهد بود.</p>
            <button id="confirmDeleteBtn" type="button" class="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center ml-2">
                بله، حذف کن
            </button>
            <button id="cancelDeleteBtn" type="button" class="text-slate-200 bg-slate-700 hover:bg-slate-600 focus:ring-4 focus:outline-none focus:ring-slate-500 rounded-lg border border-slate-600 text-sm font-medium px-5 py-2.5 hover:text-white focus:z-10">
                لغو
            </button>
        </div>
    </div>
</div>

<div id="toast-notification" class="fixed bottom-5 right-5 z-50 transition-all duration-300 transform translate-y-16 opacity-0">
    <div class="flex items-center w-full max-w-xs p-4 space-x-3 space-x-reverse text-slate-200 bg-green-600 rounded-lg shadow-lg">
        <svg class="w-5 h-5 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
        </svg>
        <div id="toast-message" class="text-sm font-medium"></div>
    </div>
</div>


<div id="descriptionModal" class="fixed inset-0 bg-black/80 flex items-center justify-center hidden z-50 p-4">
    <div class="relative mx-auto w-11/12 md:max-w-2xl shadow-2xl rounded-2xl card-bg">
        <div class="flex justify-between items-center p-5 border-b border-slate-700">
            <h3 id="descriptionModalTitle" class="text-xl font-bold text-slate-100">توضیحات وظیفه</h3>
            <button id="closeDescriptionModalBtn" class="text-gray-400 hover:text-gray-200 text-3xl font-bold">&times;</button>
        </div>
        <div id="descriptionModalBody" class="p-6 text-slate-300 leading-relaxed">
        </div>
    </div>
    </div>