@php
    // Ensure all variables are set
    $monthName = isset($monthNames) && isset($monthNames[$month]) ? $monthNames[$month] : '';
    $dayNames = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج']; // Saturday to Friday
    $calendar = $calendar ?? [];
    $year = $year ?? 1404;
    $month = $month ?? 9;
    $firstDayWeekday = $firstDayWeekday ?? 0;
@endphp

<div class="persian-calendar-container" style="background: #0b1220; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 20px; min-width: 380px; max-width: 420px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);">
    <!-- Header with month name and navigation -->
    <div class="calendar-header" style="background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; color: #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
        <button class="calendar-nav-btn prev-month" data-year="{{ $year }}" data-month="{{ $month - 1 }}" style="background: transparent; border: none; color: #e2e8f0; cursor: pointer; font-size: 18px; padding: 4px 8px; transition: color 0.2s;" onmouseover="this.style.color='#60a5fa'" onmouseout="this.style.color='#e2e8f0'">‹</button>
        <span style="font-weight: bold; font-size: 16px; color: #e2e8f0;">{{ $monthName }} {{ $year }}</span>
        <button class="calendar-nav-btn next-month" data-year="{{ $year }}" data-month="{{ $month + 1 }}" style="background: transparent; border: none; color: #e2e8f0; cursor: pointer; font-size: 18px; padding: 4px 8px; transition: color 0.2s;" onmouseover="this.style.color='#60a5fa'" onmouseout="this.style.color='#e2e8f0'">›</button>
    </div>
    
    <!-- Days of week header -->
    <div class="calendar-weekdays" style="background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px 6px 0 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 10px 4px;">
        @foreach($dayNames as $dayName)
            <div style="text-align: center; color: #94a3b8; font-weight: bold; font-size: 13px;">{{ $dayName }}</div>
        @endforeach
    </div>
    
    <!-- Calendar grid -->
    <div class="calendar-days" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-top: none; border-radius: 0 0 6px 6px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 4px;">
        @php
            // Add empty cells for days before the first day of month
            $emptyCells = $firstDayWeekday;
        @endphp
        
        @for($i = 0; $i < $emptyCells; $i++)
            <div style="padding: 10px 6px; text-align: center; min-height: 48px;"></div>
        @endfor
        
        @foreach($calendar as $dayData)
            @php
                $isToday = isset($dayData['is_today']) ? $dayData['is_today'] : false;
                $isFriday = isset($dayData['weekday_num']) && $dayData['weekday_num'] == 6; // Friday is 6
                $day = $dayData['day'] ?? 1;
                $gregorian = $dayData['gregorian'] ?? '';
                $shamsi = $dayData['date_shamsi'] ?? '';
                $gregorianDay = $dayData['gregorian_day'] ?? '';
                $gregorianMonth = $dayData['gregorian_month'] ?? '';
            @endphp
            <div class="calendar-day" 
                 data-day="{{ $day }}" 
                 data-month="{{ $month }}" 
                 data-year="{{ $year }}"
                 data-gregorian="{{ $gregorian }}"
                 data-shamsi="{{ $shamsi }}"
                 style="padding: 10px 6px; text-align: center; min-height: 48px; cursor: pointer; border: 1px solid transparent; position: relative; transition: all 0.2s;"
                 onmouseover="if(!this.classList.contains('selected')) { this.style.background='rgba(255, 255, 255, 0.1)'; this.style.borderColor='rgba(96, 165, 250, 0.3)'; }"
                 onmouseout="if(!this.classList.contains('selected')) { this.style.background='{{ $isToday ? 'rgba(96, 165, 250, 0.2)' : 'transparent' }}'; this.style.borderColor='transparent'; }">
                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2;">
                    <span class="day-number" style="font-size: 16px; font-weight: 600; color: {{ $isFriday ? '#ef4444' : ($isToday ? '#60a5fa' : '#e2e8f0') }};">{{ $day }}</span>
                    <span class="day-gregorian" style="font-size: 10px; color: #64748b; margin-top: 2px;">{{ $gregorianDay }}/{{ $gregorianMonth }}</span>
                </div>
                @if($isToday)
                    <div style="position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: rgba(96, 165, 250, 0.2); border: 1px solid rgba(96, 165, 250, 0.4); z-index: -1; border-radius: 4px;"></div>
                @endif
            </div>
        @endforeach
    </div>
    
    <!-- Footer with "Go to Today" and "Confirm Date" buttons -->
    <div class="calendar-footer" style="margin-top: 12px; display: flex; gap: 8px;">
        <button class="calendar-today-btn" style="background: rgba(96, 165, 250, 0.2); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.4); border-radius: 6px; padding: 10px 16px; flex: 1; cursor: pointer; font-weight: bold; transition: all 0.2s; font-size: 13px;" onmouseover="this.style.background='rgba(96, 165, 250, 0.3)'; this.style.borderColor='rgba(96, 165, 250, 0.6)';" onmouseout="this.style.background='rgba(96, 165, 250, 0.2)'; this.style.borderColor='rgba(96, 165, 250, 0.4)';">برو به امروز</button>
        <button class="calendar-confirm-btn" style="background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 6px; padding: 10px 16px; flex: 1; cursor: pointer; font-weight: bold; transition: all 0.2s; font-size: 13px;" onmouseover="this.style.background='rgba(34, 197, 94, 0.3)'; this.style.borderColor='rgba(34, 197, 94, 0.6)';" onmouseout="this.style.background='rgba(34, 197, 94, 0.2)'; this.style.borderColor='rgba(34, 197, 94, 0.4)';">تایید تاریخ</button>
    </div>
</div>

<style>
    .calendar-day.selected {
        border: 2px solid rgba(239, 68, 68, 0.8) !important;
        background: #ef4444 !important;
    }
    
    .calendar-day.selected .day-number,
    .calendar-day.selected .day-gregorian {
        color: #ffffff !important;
    }
    
    .calendar-day.selected span {
        color: #ffffff !important;
    }
    
    .calendar-day.today {
        background: rgba(96, 165, 250, 0.2) !important;
        border: 1px solid rgba(96, 165, 250, 0.4) !important;
    }
    
    .calendar-day.today span {
        color: #60a5fa !important;
    }
    
    .calendar-day:hover:not(.selected) {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(96, 165, 250, 0.3) !important;
    }
    
    .calendar-day.selected:hover {
        background: #dc2626 !important;
        border-color: rgba(239, 68, 68, 1) !important;
    }
</style>