@props([
    'name',
    'label' => null,
    'value' => null,

    /**
     * date | time | datetime
     *
     * Named rather than inferred from the HTML type, so a field says what it
     * means. "datetime" is one value in one column — a date and a time picked
     * separately are two fields and the form combines them.
     */
    'mode' => 'date',

    'required' => false,
    'min' => null,
    'max' => null,
    'help' => null,
    'placeholder' => null,
])

{{--
    The application's date and time field.

    One component so every date in the clinic looks and behaves the same — the
    rule being that Flatpickr is the only picker in this product and nothing
    reaches for a second one.

    There is no JavaScript here. The behaviour lives in resources/js/app.js,
    which finds this field by its type and enhances it: the Content-Security-
    Policy refuses inline scripts, and a per-field initialiser would be the
    duplication this component exists to avoid.

    Degrades honestly. Before the script runs, or if it never does, this is an
    ordinary date input — the browser's own picker, the same value, the same
    submission.
--}}
@php
    $id = $attributes->get('id', $name);
    $old = old($name, $value);

    $type = match ($mode) {
        'time' => 'time',
        'datetime' => 'datetime-local',
        default => 'date',
    };
@endphp

<div {{ $attributes->only('class')->merge(['class' => 'mb-3']) }}>
    @if ($label)
        <label for="{{ $id }}" class="px-field-label">
            {{ $label }}
            @if ($required)
                <span class="text-danger" aria-hidden="true">*</span>
                <span class="visually-hidden">{{ __('common.required') }}</span>
            @endif
        </label>
    @endif

    <input type="{{ $type }}"
           id="{{ $id }}"
           name="{{ $name }}"
           value="{{ $old }}"
           @if ($required) required @endif
           @if ($min) min="{{ $min }}" @endif
           @if ($max) max="{{ $max }}" @endif
           @if ($placeholder) placeholder="{{ $placeholder }}" @endif
           data-clinic-datepicker="{{ $mode }}"
           {{ $attributes->except(['class', 'id']) }}
           class="form-control px-input @error($name) is-invalid @enderror">

    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror

    @if ($help)
        <span class="px-hint">{{ $help }}</span>
    @endif
</div>