{{-- Custom Date Picker with Calendar First --}}
<div class="date-picker-wrapper relative w-full">
    <div class="relative">
        <input 
            type="text" 
            {{ $attributes->merge([
                'class' => 'date-picker w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white hover:border-gray-400 transition cursor-pointer',
                'placeholder' => 'Select date',
                'readonly' => true
            ]) }}
            name="{{ $name ?? '' }}"
            value="{{ $value ?? '' }}"
        >
        <i class="fas fa-calendar calendar-icon absolute right-3 top-1/2 transform -translate-y-1/2 text-orange-600 cursor-pointer text-base z-10" style="color: #ea580c !important; pointer-events: auto; display: block; visibility: visible;"></i>
    </div>
    
    <!-- Calendar Popup -->
    <div class="date-picker-popup hidden absolute top-full left-0 mt-2 bg-white rounded-2xl shadow-2xl p-6 z-50 border border-gray-200" style="width: 360px;">
        
        <!-- STEP 1: Calendar (Shows First) -->
        <div class="date-selection-view">
            <div class="flex items-center justify-between mb-4">
                <button type="button" class="date-prev-month-btn p-2 hover:bg-gray-100 rounded-lg transition">
                    <i class="fas fa-chevron-left text-gray-600"></i>
                </button>
                <button type="button" class="current-month-year-btn text-lg font-semibold text-gray-800 hover:text-blue-600 cursor-pointer flex items-center gap-1 px-3 py-1 hover:bg-gray-50 rounded-lg transition">
                    <span class="current-month-year">JUN 2026</span>
                    <i class="fas fa-chevron-down text-xs"></i>
                </button>
                <button type="button" class="date-next-month-btn p-2 hover:bg-gray-100 rounded-lg transition">
                    <i class="fas fa-chevron-right text-gray-600"></i>
                </button>
            </div>
            
            <!-- Weekday Headers -->
            <div class="weekdays grid grid-cols-7 gap-1 text-center mb-2">
                <span class="text-xs font-semibold text-gray-500 py-1">S</span>
                <span class="text-xs font-semibold text-gray-500 py-1">M</span>
                <span class="text-xs font-semibold text-gray-500 py-1">T</span>
                <span class="text-xs font-semibold text-gray-500 py-1">W</span>
                <span class="text-xs font-semibold text-gray-500 py-1">T</span>
                <span class="text-xs font-semibold text-gray-500 py-1">F</span>
                <span class="text-xs font-semibold text-gray-500 py-1">S</span>
            </div>
            
            <!-- Date Grid -->
            <div class="dates-grid grid grid-cols-7 gap-1">
                <!-- Dates populated by JavaScript -->
            </div>
        </div>
        
        <!-- STEP 2: Year Selection (Hidden, shown when clicking header) -->
        <div class="year-selection-view hidden">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">Select Year</h3>
                <div class="flex gap-2">
                    <button type="button" class="year-prev-btn p-2 hover:bg-gray-100 rounded-lg transition">
                        <i class="fas fa-chevron-left text-gray-600"></i>
                    </button>
                    <span class="year-range text-sm font-semibold text-gray-700">2016 - 2039</span>
                    <button type="button" class="year-next-btn p-2 hover:bg-gray-100 rounded-lg transition">
                        <i class="fas fa-chevron-right text-gray-600"></i>
                    </button>
                </div>
            </div>
            <div class="year-grid grid grid-cols-4 gap-2">
                <!-- Years populated by JavaScript -->
            </div>
        </div>
        
        <!-- STEP 3: Month Selection (Hidden, shown after selecting year) -->
        <div class="month-selection-view hidden">
            <div class="flex items-center justify-between mb-4">
                <button type="button" class="year-back-btn text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1">
                    <i class="fas fa-chevron-left"></i> Back
                </button>
                <h3 class="text-lg font-semibold text-gray-800">Select Month</h3>
            </div>
            <p class="text-sm text-gray-600 mb-4"><span class="selected-year-display font-semibold">2026</span></p>
            <div class="month-grid grid grid-cols-3 gap-2">
                <!-- Months populated by JavaScript -->
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dateInputs = document.querySelectorAll('.date-picker');
    
    dateInputs.forEach(input => {
        const wrapper = input.closest('.date-picker-wrapper');
        if (!wrapper) return;
        
        const popup = wrapper.querySelector('.date-picker-popup');
        const dateView = popup.querySelector('.date-selection-view');
        const yearView = popup.querySelector('.year-selection-view');
        const monthView = popup.querySelector('.month-selection-view');
        
        let currentYear = new Date().getFullYear();
        let currentMonth = new Date().getMonth();
        let selectedYear = currentYear;
        let selectedMonth = currentMonth;
        let yearRangeStart = 2016;
        
        const monthNames = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
        
        // Open popup - Show Calendar First
        input.addEventListener('click', () => {
            popup.classList.remove('hidden');
            showDateSelection();
        });
        
        // Also open popup when clicking the calendar icon
        const calendarIcon = wrapper.querySelector('.calendar-icon');
        if (calendarIcon) {
            calendarIcon.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                popup.classList.remove('hidden');
                showDateSelection();
            });
        }
        
        // Close popup when clicking outside
        document.addEventListener('click', (e) => {
            if (!wrapper.contains(e.target)) {
                popup.classList.add('hidden');
            }
        });
        
        // ===== DATE SELECTION (CALENDAR) - SHOWS FIRST =====
        function showDateSelection() {
            renderDateGrid();
            dateView.classList.remove('hidden');
            yearView.classList.add('hidden');
            monthView.classList.add('hidden');
        }
        
        function renderDateGrid() {
            const datesGrid = popup.querySelector('.dates-grid');
            datesGrid.innerHTML = '';
            
            const firstDay = new Date(selectedYear, selectedMonth, 1).getDay();
            const daysInMonth = new Date(selectedYear, selectedMonth + 1, 0).getDate();
            const today = new Date();
            const isCurrentMonth = today.getFullYear() === selectedYear && today.getMonth() === selectedMonth;
            const todayDate = today.getDate();
            
            // Update header
            popup.querySelector('.current-month-year').textContent = `${monthNames[selectedMonth]} ${selectedYear}`;
            
            // Empty cells before month starts
            for (let i = 0; i < firstDay; i++) {
                datesGrid.appendChild(document.createElement('div'));
            }
            
            // Date buttons
            for (let day = 1; day <= daysInMonth; day++) {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.textContent = day;
                
                const isToday = isCurrentMonth && day === todayDate;
                
                btn.className = `date-btn p-2 text-sm rounded-lg transition ${
                    isToday
                        ? 'bg-red-600 text-white font-semibold hover:bg-red-700'
                        : 'text-gray-800 hover:bg-blue-100'
                }`;
                
                btn.addEventListener('click', () => {
                    const date = new Date(selectedYear, selectedMonth, day);
                    const formatted = formatDate(date);
                    input.value = formatted;
                    // Trigger change event even though input is readonly
                    input.dispatchEvent(new Event('change', { bubbles: true }));
                    input.dispatchEvent(new Event('input', { bubbles: true }));
                    popup.classList.add('hidden');
                });
                
                datesGrid.appendChild(btn);
            }
        }
        
        // Click header to show year selection
        popup.querySelector('.current-month-year-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            showYearSelection();
        });
        
        // Calendar month navigation
        popup.querySelector('.date-prev-month-btn').addEventListener('click', () => {
            selectedMonth--;
            if (selectedMonth < 0) {
                selectedMonth = 11;
                selectedYear--;
            }
            renderDateGrid();
        });
        
        popup.querySelector('.date-next-month-btn').addEventListener('click', () => {
            selectedMonth++;
            if (selectedMonth > 11) {
                selectedMonth = 0;
                selectedYear++;
            }
            renderDateGrid();
        });
        
        // ===== YEAR SELECTION =====
        function showYearSelection() {
            renderYearGrid();
            dateView.classList.add('hidden');
            yearView.classList.remove('hidden');
            monthView.classList.add('hidden');
        }
        
        function renderYearGrid() {
            const yearGrid = popup.querySelector('.year-grid');
            yearGrid.innerHTML = '';
            
            for (let i = yearRangeStart; i < yearRangeStart + 24; i++) {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.textContent = i;
                btn.className = `year-btn p-3 text-sm rounded-lg font-medium transition ${
                    i === selectedYear
                        ? 'bg-blue-500 text-white'
                        : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
                }`;
                
                btn.addEventListener('click', () => {
                    selectedYear = i;
                    showMonthSelection();
                });
                
                yearGrid.appendChild(btn);
            }
            
            popup.querySelector('.year-range').textContent = `${yearRangeStart} - ${yearRangeStart + 23}`;
        }
        
        // Year navigation
        popup.querySelector('.year-prev-btn').addEventListener('click', () => {
            yearRangeStart -= 24;
            renderYearGrid();
        });
        
        popup.querySelector('.year-next-btn').addEventListener('click', () => {
            yearRangeStart += 24;
            renderYearGrid();
        });
        
        // ===== MONTH SELECTION =====
        function showMonthSelection() {
            renderMonthGrid();
            popup.querySelector('.selected-year-display').textContent = selectedYear;
            dateView.classList.add('hidden');
            yearView.classList.add('hidden');
            monthView.classList.remove('hidden');
        }
        
        function renderMonthGrid() {
            const monthGrid = popup.querySelector('.month-grid');
            monthGrid.innerHTML = '';
            
            monthNames.forEach((month, idx) => {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.textContent = month;
                btn.className = `month-btn p-3 text-sm rounded-lg font-medium transition ${
                    idx === selectedMonth
                        ? 'bg-blue-500 text-white'
                        : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
                }`;
                
                btn.addEventListener('click', () => {
                    selectedMonth = idx;
                    showDateSelection();
                });
                
                monthGrid.appendChild(btn);
            });
        }
        
        // Month back button (goes back to year selection)
        popup.querySelector('.year-back-btn').addEventListener('click', showYearSelection);
        
        // Format date as "17 JUN 1966"
        function formatDate(date) {
            const day = String(date.getDate()).padStart(2, '0');
            const month = monthNames[date.getMonth()];
            const year = date.getFullYear();
            return `${day} ${month} ${year}`;
        }
        
        // Initial render
        renderDateGrid();
    });
});
</script>

<style>
.date-picker-popup {
    max-height: 500px;
    overflow-y: auto;
}

.date-picker-popup button {
    user-select: none;
}

.date-picker-popup button:active {
    transform: scale(0.95);
}
</style>