@php
    $modalName = $modalName ?? null;
    $selectedDate = $selectedDate ?? now();
    $defaultConsumedAt = $selectedDate->isSameDay(now())
        ? now()->format('Y-m-d\TH:i')
        : $selectedDate->copy()->setTime(12, 0)->format('Y-m-d\TH:i');
    $showFormErrors = $errors->any() && (! $modalName || old('_modal') === $modalName);
@endphp

<form
    method="POST"
    action="{{ route('hydration.consumptions.store') }}"
    class="module-modal"
    data-validated-form
    novalidate
    @if ($modalName) data-reset-on-open="{{ $modalName }}" @endif
    data-has-server-errors="@js($errors->any() && (! $modalName || old('_modal') === $modalName))"
    x-data="{ volumeMl: @js(old('volume_ml', '')) }"
>
    @csrf
    @if ($modalName)
        <input type="hidden" name="_modal" value="{{ $modalName }}">
    @endif
    <div class="module-modal__header">
        <p class="dashboard-kicker">{{ __('Hydratation') }}</p>
        <h3 class="dashboard-title mt-1 text-xl leading-none">{{ __('Ajouter une consommation') }}</h3>
    </div>

    @if ($showFormErrors)
        <div class="module-form-alert mt-4">
            <p>{{ __('Certains champs obligatoires sont manquants ou invalides.') }}</p>
        </div>
    @endif

    <div class="module-form-grid mt-5">
        <label class="module-field">
            <span>{{ __('Préréglage') }}</span>
            <select
                name="hydration_preset_id"
                class="module-input"
                x-on:change="volumeMl = $event.target.selectedOptions[0]?.dataset.volume || ''"
            >
                <option value="">{{ __('Aucun préréglage') }}</option>
                @foreach ($hydrationPresets as $preset)
                    <option
                        value="{{ data_get($preset, 'id') }}"
                        data-volume="{{ data_get($preset, 'volume_ml') }}"
                        @selected(old('hydration_preset_id') == data_get($preset, 'id'))
                    >
                        {{ data_get($preset, 'name') }} · {{ data_get($preset, 'volume_ml') }} ml
                    </option>
                @endforeach
            </select>
            @error('hydration_preset_id')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field">
            <span>{{ __('Volume manuel (ml)') }}</span>
            <input name="volume_ml" type="number" min="1" step="1" class="module-input" placeholder="{{ __('Ex. 250') }}" x-model="volumeMl" required>
            @error('volume_ml')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field sm:col-span-2">
            <span>{{ __('Moment de consommation') }}</span>
            <input
                name="consumed_at"
                type="datetime-local"
                class="module-input"
                value="{{ old('consumed_at', $defaultConsumedAt) }}"
                required
            >
            @error('consumed_at')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
    </div>

    <div class="module-modal__actions">
        @if ($modalName)
            <button type="button" class="dashboard-action dashboard-action--secondary" x-on:click="$dispatch('close-modal', '{{ $modalName }}')">{{ __('Annuler') }}</button>
        @endif
        <button type="submit" class="dashboard-action dashboard-action--primary">{{ __('Enregistrer') }}</button>
    </div>
</form>