{{-- Date Picker Component --}}
@props([
    'name'     => '',
    'label'    => '',
    'value'    => null,
    'min'      => null,
    'max'      => null,
    'required' => false,
    'disabled' => false,
    'hint'     => '',
])

@php
    $c = 'block w-full rounded-lg border border-input bg-card px-3 py-2.5 pe-10 text-sm text-card-foreground shadow-sm transition-colors duration-200 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:border-primary-400';
    $c .= $errors->has($name) ? ' border-red-400 focus:border-red-500 focus:ring-red-500/20' : '';
@endphp

<div class="space-y-1.5">
    @if($label)
        <label for="{{ $name }}" class="mb-1.5 block text-sm font-medium text-foreground">
            {{ $label }}
            @if($required)<span class="ms-0.5 text-red-500">*</span>@endif
        </label>
    @endif

    <div class="relative">
        <input
            type="date"
            id="{{ $name }}"
            name="{{ $name }}"
            value="{{ old($name, $value) }}"
            {{ $min ? "min=$min" : '' }}
            {{ $max ? "max=$max" : '' }}
            {{ $required ? 'required' : '' }}
            {{ $disabled ? 'disabled' : '' }}
            {{ $attributes->merge(['class' => $c]) }}
        />
        <span class="pointer-events-none absolute inset-y-0 end-3 flex items-center text-muted-foreground">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
        </span>
    </div>

    @if($hint && !$errors->has($name))
        <p class="mt-1.5 text-xs text-muted-foreground">{{ $hint }}</p>
    @endif

    <x-forms.error :name="$name" />
</div>