@props([
    "item",
    "selected"
])


@php
    $is_default = $item->stocks->count() === 1 && $item->stocks[0]->name === "Default";
    $default_stock = $is_default ? $item->stocks[0] : null;
    $default_ref = $is_default ? $item->stocks[0]->ref : null;
    $old_stock_id = old("items.{$item->id}.stock_id");
@endphp

<div x-data="gift(@js($item), {{ $old_stock_id ? "'{$old_stock_id}'" : "null" }})" class="relative pt-2" x-cloak>
    <label class="flex flex-row items-start space-x-5">
        <input type="hidden" name="items[{{ $item->id }}][stock_id]" x-bind:value="selectedStock ? selectedStock.id : ''" />
        <input 
            type="checkbox" 
            name="items[{{ $item->id }}][selected]" 
            value="on" 
            @click="onSelected"
            {{ old("items.{$item->id}.selected") === "on" ? "checked='checked'" : ""}}
            class="block mt-1 w-[20px] h-[20px] rounded-md text-bridgestone-red focus:ring-bridgestone-red"
        />
        <div class="w-[50%] select-none">
            <div class="text-xs uppercase">{{ $item->name }}</div>
            <div class="min-h-[48px] text-xs italic text-[#8E8E8E]">
                {{ $item->description }}
                <template x-if="!isDefault">
                    <div 
                        class="absolute text-xs max-w-[50%] mt-2 md:mt-0 md:top-0 md:right-0 rounded-md border text-[#8E8E8E] bg-white border-[#E8E7E7]"
                        x-bind:class="{'z-20': dropdownOpen, 'z-10': !dropdownOpen}"
                        @click.outside="dropdownOpen = false"
                    >
                        <button type="button" class="px-1 py-1 w-auto flex flex-row items-center space-x-2" @click.prevent="dropdownOpen = !dropdownOpen">
                            <span x-text="selectedStock ? selectedStock.name : 'Taille'">Taille</span>
                            <x-svg.chevron-down class="w-3 h-auto transition-transform" x-bind:class="{'rotate-180': dropdownOpen}" />
                        </button>
                        <div 
                            class="divider-y divider-y-[#E8E7E7]"
                            x-show="dropdownOpen"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 -translate-y-6"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="transition ease-in z-20 duration-300"
                            x-transition:leave-start="opacity-100 translate-y-0"
                            x-transition:leave-end="opacity-0 -translate-y-6"
                        >
                            <template x-for="available in availables">
                                <div 
                                    class="px-1 py-1 cursor-pointer hover:bg-[#E8E7E7]" 
                                    x-text="available.name"
                                    @click="selectedStock = available; dropdownOpen = false"
                                ></div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>

            
        </div>
    </label>
</div>

@once
    <script>
        document.addEventListener("alpine:init", () => {
            window.Alpine.data('gift', (item = null, selectedStockId = null) => ({
                item,
                isDefault: true,
                isSelected: false,
                selectedStock: null,
                availables: [],
                dropdownOpen: false,
                init() {
                    this.isDefault = this.item.stocks.length === 1 && this.item.stocks[0].name === "Default";

                    if (this.isDefault) {
                        this.selectedStock = this.item.stocks[0];
                    } else {
                        this.availables = this.item.stocks.filter(i => i.quantity > 0);
                        if (this.availables.length === 1) {
                            this.selectedStock = this.availables[0];
                        } else if (selectedStockId) {
                            const oldStock = this.availables.find(a => a.id === Number(selectedStockId));
                            
                            if (oldStock) {
                                this.selectedStock = oldStock;
                            }
                        }
                    }
                },
                onSelected(ev) {
                    const checked = ev.target.checked;
                    if (checked && window.nbSelected === 16) {
                        alert("Vous ne pouvez séléctionner que 16 articles au maximum.");
                        ev.preventDefault();
                        return;
                    }

                    if (checked && !this.selectedStock) {
                        alert("Vous devez d'abord choisir une taille.");
                        ev.preventDefault();
                        return;
                        
                    }
                    
                    window.nbSelected += checked ? 1 : -1; 
                }
            }));
        });
    </script>
@endonce