@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="calendar-container">
    <!-- Calendar Header -->
    <div class="calendar-header">
        <div class="calendar-nav">
            <a href="?start_date={{ $startDate->copy()->subDays(14)->format('Y-m-d') }}" class="nav-arrow">
                <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="M15 19l-7-7 7-7" />
                </svg>
            </a>
            <span class="calendar-month">
                @php
                    $firstDay = \Morilog\Jalali\Jalalian::fromCarbon($startDate);
                    $lastDay = \Morilog\Jalali\Jalalian::fromCarbon($endDate);
                @endphp
                {{ $firstDay->format('F') }} {{ $firstDay->format('Y') }}
            </span>
            <a href="?start_date={{ $startDate->copy()->addDays(14)->format('Y-m-d') }}" class="nav-arrow">
                <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="M9 5l7 7-7 7" />
                </svg>
            </a>
        </div>
        <div class="calendar-actions">
            <button id="toggleFullTitles" class="action-btn">
                نمایش کامل عناوین
            </button>
            <button id="toggleFilter" class="action-btn">
                فیلتر نمایش
            </button>
        </div>
    </div>

    <!-- Filter Panel (Hidden by default) -->
    <div id="filterPanel" class="filter-panel hidden">
        <div class="filter-content">
            <label class="filter-label">دسته‌بندی:</label>
            <select id="categoryFilter" class="filter-select">
                <option value="">همه</option>
                @foreach($categories as $category)
                    <option value="{{ $category }}">{{ $category }}</option>
                @endforeach
            </select>
            <button id="applyFilter" class="filter-btn">اعمال فیلتر</button>
            <button id="clearFilter" class="filter-btn filter-btn-secondary">پاک کردن</button>
        </div>
    </div>

    <!-- Calendar Grid -->
    <div class="calendar-grid">
        <!-- Week 1 -->
        @foreach($calendarDays->take(7) as $day)
            <div class="calendar-day-column">
                <div class="day-header">
                    <div class="day-name">{{ $day['day_name'] }}</div>
                    <div class="day-date">{{ $day['jalali_date'] }} {{ $day['jalali_month'] }}</div>
                </div>
                <div class="day-tasks" data-date="{{ $day['date']->format('Y-m-d') }}">
                    @foreach($day['reminders'] as $reminder)
                        @php
                            $colorClass = 'task-green';
                            if ($reminder->category === 'مقالات') {
                                $colorClass = 'task-teal';
                            } elseif ($reminder->category === 'محصولات') {
                                $colorClass = 'task-blue';
                            } elseif ($reminder->importance === 'high') {
                                $colorClass = 'task-red';
                            } elseif ($reminder->importance === 'medium') {
                                $colorClass = 'task-orange';
                            }
                            $time = $reminder->date->format('H:i');
                        @endphp
                        <div class="task-block {{ $colorClass }}" data-reminder-id="{{ $reminder->id }}" data-category="{{ $reminder->category ?? '' }}">
                            <div class="task-title">{{ $reminder->title }}</div>
                            @if($reminder->description)
                                <div class="task-description">{{ Str::limit($reminder->description, 100) }}</div>
                            @endif
                            @if($reminder->category)
                                <div class="task-category">{{ $reminder->category }}</div>
                            @endif
                            <div class="task-time">{{ $time }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>

    <!-- Week 2 -->
    <div class="calendar-grid">
        @foreach($calendarDays->slice(7) as $day)
            <div class="calendar-day-column">
                <div class="day-header">
                    <div class="day-name">{{ $day['day_name'] }}</div>
                    <div class="day-date">{{ $day['jalali_date'] }} {{ $day['jalali_month'] }}</div>
                </div>
                <div class="day-tasks" data-date="{{ $day['date']->format('Y-m-d') }}">
                    @foreach($day['reminders'] as $reminder)
                        @php
                            $colorClass = 'task-green';
                            if ($reminder->category === 'مقالات') {
                                $colorClass = 'task-teal';
                            } elseif ($reminder->category === 'محصولات') {
                                $colorClass = 'task-blue';
                            } elseif ($reminder->importance === 'high') {
                                $colorClass = 'task-red';
                            } elseif ($reminder->importance === 'medium') {
                                $colorClass = 'task-orange';
                            }
                            $time = $reminder->date->format('H:i');
                        @endphp
                        <div class="task-block {{ $colorClass }}" data-reminder-id="{{ $reminder->id }}" data-category="{{ $reminder->category ?? '' }}">
                            <div class="task-title">{{ $reminder->title }}</div>
                            @if($reminder->description)
                                <div class="task-description">{{ Str::limit($reminder->description, 100) }}</div>
                            @endif
                            @if($reminder->category)
                                <div class="task-category">{{ $reminder->category }}</div>
                            @endif
                            <div class="task-time">{{ $time }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>

<style>
.calendar-container {
    padding: 2rem;
    max-width: 100%;
    overflow-x: auto;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-arrow {
    color: #cbd5e1;
    transition: color 0.2s;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.nav-arrow:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.calendar-month {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    min-width: 150px;
    text-align: center;
}

.calendar-actions {
    display: flex;
    gap: 0.75rem;
}

.action-btn {
    padding: 0.5rem 1rem;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
}

.filter-panel {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-label {
    color: #cbd5e1;
    font-size: 0.875rem;
}

.filter-select {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    min-width: 150px;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: rgba(99, 102, 241, 0.3);
}

.filter-btn-secondary {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.filter-btn-secondary:hover {
    background: rgba(148, 163, 184, 0.3);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendar-day-column {
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.day-header {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.day-name {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.day-date {
    font-size: 0.75rem;
    color: #94a3b8;
}

.day-tasks {
    padding: 0.5rem;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-block {
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.task-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.task-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: #fff;
}

.task-description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.task-category {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
}

.task-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

/* Task Colors */
.task-green {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.3);
}

.task-teal {
    background: rgba(20, 184, 166, 0.2);
    border-color: rgba(20, 184, 166, 0.3);
}

.task-blue {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.task-red {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.task-orange {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.3);
}

.task-gray {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.3);
}

.hidden {
    display: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggleFilterBtn = document.getElementById('toggleFilter');
    const filterPanel = document.getElementById('filterPanel');
    const toggleFullTitlesBtn = document.getElementById('toggleFullTitles');
    const categoryFilter = document.getElementById('categoryFilter');
    const applyFilterBtn = document.getElementById('applyFilter');
    const clearFilterBtn = document.getElementById('clearFilter');
    
    let fullTitlesMode = false;
    let currentCategory = '';
    
    // Toggle filter panel
    if (toggleFilterBtn && filterPanel) {
        toggleFilterBtn.addEventListener('click', function() {
            filterPanel.classList.toggle('hidden');
        });
    }
    
    // Toggle full titles
    if (toggleFullTitlesBtn) {
        toggleFullTitlesBtn.addEventListener('click', function() {
            fullTitlesMode = !fullTitlesMode;
            const taskTitles = document.querySelectorAll('.task-title');
            taskTitles.forEach(title => {
                if (fullTitlesMode) {
                    title.style.whiteSpace = 'normal';
                    title.style.overflow = 'visible';
                    title.style.textOverflow = 'clip';
                } else {
                    title.style.whiteSpace = 'nowrap';
                    title.style.overflow = 'hidden';
                    title.style.textOverflow = 'ellipsis';
                }
            });
            this.textContent = fullTitlesMode ? 'مخفی کردن عناوین کامل' : 'نمایش کامل عناوین';
        });
    }
    
    // Apply filter
    if (applyFilterBtn && categoryFilter) {
        applyFilterBtn.addEventListener('click', function() {
            currentCategory = categoryFilter.value;
            filterTasks();
        });
    }
    
    // Clear filter
    if (clearFilterBtn) {
        clearFilterBtn.addEventListener('click', function() {
            currentCategory = '';
            categoryFilter.value = '';
            filterTasks();
        });
    }
    
    function filterTasks() {
        const taskBlocks = document.querySelectorAll('.task-block');
        taskBlocks.forEach(block => {
            const category = block.getAttribute('data-category') || '';
            if (!currentCategory || category === currentCategory) {
                block.style.display = 'block';
            } else {
                block.style.display = 'none';
            }
        });
    }
});
</script>
@endsection