@props(['name', 'selected' => []])

@php
    // 1. Si es un string con comas ("april-2026, february-2027"), lo convertimos en array
    if (is_string($selected) && !empty($selected)) {
        // Intentamos decodificar por si es JSON
        $decoded = json_decode($selected, true);
        if (json_last_error() === JSON_ERROR_NONE) {
            $selectedArray = $decoded;
        } else {
            // Si no es JSON, limpiamos espacios y dividimos por comas
            $selectedArray = array_map('trim', explode(',', $selected));
        }
    } else {
        $selectedArray = is_array($selected) ? $selected : [];
    }

    // 2. Aplicamos old() si existe, para no perder la selección al fallar validaciones
    $finalSelected = old($name, $selectedArray);
@endphp

<div class="flex flex-col mb-4" x-data="{ 
        upcomingMonths: [],
        selectedMonths: @js($finalSelected),
        init() {
            const monthValues = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
            const monthLabels = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];
            
            let d = new Date();
            for (let i = 0; i < 20; i++) {
                let current = new Date(d.getFullYear(), d.getMonth() + i, 1);
                let monthIndex = current.getMonth();
                
                this.upcomingMonths.push({
                    label: monthLabels[monthIndex],
                    year: current.getFullYear(),
                    value: monthValues[monthIndex] + '-' + current.getFullYear()
                });
            }
        }
    }">

    <p class="mb-4 text-accent text-size-small-heading">Meses sugeridos</p>

    <div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
        <template x-for="(item, index) in upcomingMonths" :key="index">
            <label class="cursor-pointer group">
                <input type="checkbox" name="{{ $name }}[]" :value="item.value" x-model="selectedMonths"
                    class="sr-only peer">

                <div class="text-center py-2 px-1 border rounded-lg transition-all border-gray-200 text-black hover:border-accent
                            peer-checked:bg-primary peer-checked:text-white peer-checked:border-accent">
                    <span class="text-xs font-bold block capitalize" x-text="item.label"></span>
                    <span class="text-[10px] opacity-80 block" x-text="item.year"></span>
                </div>
            </label>
        </template>
    </div>
    @error($name)
        <span class="error-text">{{ $message }}</span>
    @enderror
</div>