{{--
    Live age check for a Date of Birth field. The caller renders its own <label>;
    this partial renders the date input and, as soon as the typed date implies an
    age under 18, an amber notice. Server-side, `before:today` still guards the
    date itself and Guest::isMinor() is the source of truth everywhere else.

    Include with:
        $dobValue  stored/prefill date ('Y-m-d' or null)
--}}
<div x-data="minorCheck(@js($dobValue ?? ''))">
    <input type="date" name="date_of_birth" x-model="dob" :max="today"
           class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700
                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">

    <template x-if="age !== null && age < 18">
        <div class="mt-2 flex items-start gap-2.5 bg-amber-50 border-[0.5px] border-amber-200 rounded-lg px-3 py-2.5">
            <svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 9v2m0 4h.01M5.07 19h13.86a2 2 0 001.74-3L13.74 4a2 2 0 00-3.48 0L3.33 16a2 2 0 001.74 3z"/>
            </svg>
            <div class="min-w-0">
                <p class="text-xs font-semibold text-amber-800">
                    This guest is a minor — <span x-text="age"></span> years old.
                </p>
                <p class="text-[11px] text-amber-700 mt-0.5 leading-relaxed">
                    Check your property's policy before accepting the booking: a guest under 18 normally needs an
                    accompanying adult or written guardian consent on file.
                </p>
            </div>
        </div>
    </template>

    <template x-if="age !== null && age >= 18">
        <p class="mt-1 text-[11px] text-gray-400" x-text="age + ' years old'"></p>
    </template>

    @error('date_of_birth')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
</div>

@once
<script>
// Completed years between the typed date and today — the same rule as
// Guest::isMinor() on the server (18 is the age of majority in the Philippines).
function minorCheck(initial) {
    return {
        dob: initial || '',
        get today() {
            return new Date().toISOString().slice(0, 10);
        },
        get age() {
            if (! this.dob) return null;
            const born = new Date(this.dob + 'T00:00:00');
            if (isNaN(born)) return null;

            const now = new Date();
            if (born > now) return null;              // future dates are a validation error, not an age

            let years = now.getFullYear() - born.getFullYear();
            const beforeBirthday = now.getMonth() < born.getMonth()
                || (now.getMonth() === born.getMonth() && now.getDate() < born.getDate());
            if (beforeBirthday) years--;

            return years;
        },
    };
}
</script>
@endonce