@props(['formAction', 'submitLabel', 'product' => null])

@php
    $thresholdOn = filter_var(old('threshold_enabled', $product?->threshold_enabled ?? false), FILTER_VALIDATE_BOOLEAN);
@endphp

<form method="POST" action="{{ $formAction }}" class="space-y-6" id="product-form">
    @csrf
    @if ($product)
        @method('PUT')
    @endif

    <x-oah.field label="Product name" for="name" required>
        <input type="text" id="name" name="name" value="{{ old('name', $product?->name) }}" required
            class="oah-input" placeholder="e.g. Training days, Consultancy hours">
    </x-oah.field>

    <div id="product-threshold-section" class="{{ trim((string) old('name', $product?->name ?? '')) !== '' ? '' : 'hidden' }} rounded-lg border border-neutral-200/80 bg-neutral-50/80 p-4">
        <label class="flex cursor-pointer items-center gap-3">
            <input type="checkbox"
                id="threshold_enabled"
                name="threshold_enabled"
                value="1"
                class="h-4 w-4 shrink-0 rounded border-neutral-300 text-oah-black focus:ring-oah-yellow"
                @checked($thresholdOn)>
            <span class="text-sm font-semibold leading-none text-oah-black">Enable threshold</span>
        </label>
        <div id="product-threshold-hours" class="mt-4 {{ $thresholdOn ? '' : 'hidden' }}">
            <x-oah.field for="threshold_hours" label="Send reminder when product remaining is at or below">
                <input type="number"
                    id="threshold_hours"
                    name="threshold_hours"
                    value="{{ old('threshold_hours', $product?->threshold_hours) }}"
                    min="0"
                    step="1"
                    inputmode="numeric"
                    class="oah-input"
                    placeholder="e.g. 5">
            </x-oah.field>
        </div>
    </div>

    <div class="flex justify-end gap-3 border-t border-neutral-200 pt-6">
        <a href="{{ route('admin.products.index') }}" class="rounded-lg border border-neutral-300 px-5 py-2.5 text-sm font-medium hover:bg-neutral-50">Cancel</a>
        <button type="submit" class="btn-oah rounded-lg px-6 py-2.5 text-sm font-bold">{{ $submitLabel }}</button>
    </div>
</form>

@push('scripts')
<script>
(function () {
    const form = document.getElementById('product-form');
    const nameInput = document.getElementById('name');
    const thresholdSection = document.getElementById('product-threshold-section');
    const thresholdCheckbox = document.getElementById('threshold_enabled');
    const thresholdHoursWrap = document.getElementById('product-threshold-hours');
    const thresholdHoursInput = document.getElementById('threshold_hours');

    if (!form || !nameInput || !thresholdSection || !thresholdCheckbox || !thresholdHoursWrap) {
        return;
    }

    function syncThresholdVisibility() {
        const hasName = (nameInput.value || '').trim() !== '';
        thresholdSection.classList.toggle('hidden', !hasName);

        if (!hasName) {
            thresholdCheckbox.checked = false;
            thresholdHoursWrap.classList.add('hidden');
            if (thresholdHoursInput) {
                thresholdHoursInput.required = false;
                thresholdHoursInput.value = '';
            }
        }
    }

    function syncThresholdHours() {
        const on = thresholdCheckbox.checked && (nameInput.value || '').trim() !== '';
        thresholdHoursWrap.classList.toggle('hidden', !on);
        if (thresholdHoursInput) {
            thresholdHoursInput.required = on;
            if (!on) {
                thresholdHoursInput.setCustomValidity('');
            }
        }
    }

    nameInput.addEventListener('input', function () {
        syncThresholdVisibility();
        syncThresholdHours();
    });

    thresholdCheckbox.addEventListener('change', syncThresholdHours);

    if (thresholdHoursInput) {
        thresholdHoursInput.addEventListener('input', function () {
            if (thresholdCheckbox.checked && (thresholdHoursInput.value === '' || thresholdHoursInput.value === null)) {
                thresholdHoursInput.setCustomValidity('Enter how many hours should remain before a reminder is sent.');
            } else {
                thresholdHoursInput.setCustomValidity('');
            }
        });
    }

    form.addEventListener('submit', function (event) {
        syncThresholdVisibility();
        syncThresholdHours();

        if (!thresholdCheckbox.checked || (nameInput.value || '').trim() === '') {
            return;
        }

        if (!thresholdHoursInput || thresholdHoursInput.value === '' || thresholdHoursInput.value === null) {
            event.preventDefault();
            const message = 'Enter hours remaining when threshold is enabled.';
            if (window.OahToast) {
                OahToast.show(message, 'error');
            } else {
                alert(message);
            }
        }
    });

    syncThresholdVisibility();
    syncThresholdHours();
})();
</script>
@endpush