@props([
    'name' => 'guests',
    'adults' => 2,
    'children' => 0,
    'rooms' => 1,

    // RULES
    'maxGuestsPerRoom' => 4,
])

<div 
    class="fluent-guest" 
    data-fluent-guest 
    data-max-per-room="{{ $maxGuestsPerRoom }}"
>

    <div class="fluent-guest__control">
        <input 
            type="text" 
            readonly 
            class="fluent-guest__input" 
            data-input
        >
        <span class="fluent-guest__icon">
            <x-fluent-icon name="person" size="sm" />
        </span>
    </div>

    <div class="fluent-guest__dropdown">

        {{-- ADULT --}}
        <div class="fluent-guest__row">
            <div>
                <div class="fluent-guest__label">Dewasa</div>
                <div class="fluent-guest__desc">Usia 12+</div>
            </div>

            <div class="fluent-guest__stepper">
                <button data-action="decrease" data-type="adults">−</button>
                <span data-value="adults">{{ $adults }}</span>
                <button data-action="increase" data-type="adults">+</button>
            </div>
        </div>

        {{-- CHILD --}}
        <div class="fluent-guest__row">
            <div>
                <div class="fluent-guest__label">Anak</div>
                <div class="fluent-guest__desc">Usia 0–11</div>
            </div>

            <div class="fluent-guest__stepper">
                <button data-action="decrease" data-type="children">−</button>
                <span data-value="children">{{ $children }}</span>
                <button data-action="increase" data-type="children">+</button>
            </div>
        </div>

        {{-- ROOM --}}
        <div class="fluent-guest__row">
            <div>
                <div class="fluent-guest__label">Kamar</div>
            </div>

            <div class="fluent-guest__stepper">
                <button data-action="decrease" data-type="rooms">−</button>
                <span data-value="rooms">{{ $rooms }}</span>
                <button data-action="increase" data-type="rooms">+</button>
            </div>
        </div>

    </div>

    {{-- HIDDEN --}}
    <input type="hidden" name="{{ $name }}[adults]" data-hidden="adults">
    <input type="hidden" name="{{ $name }}[children]" data-hidden="children">
    <input type="hidden" name="{{ $name }}[rooms]" data-hidden="rooms">

</div>