@props([
    'id',
    'name',
    'value' => '',
    'placeholder' => 'dd/mm/aaaa',
])

@php
    $displayValue = '';

    if (is_string($value) && preg_match('/^\d{4}-\d{2}-\d{2}$/', $value) === 1) {
        $displayValue = \Carbon\CarbonImmutable::createFromFormat('Y-m-d', $value)->format('d/m/Y');
    }
@endphp

<div class="relative" data-date-picker data-date-value="{{ $value }}">
    <input type="hidden" name="{{ $name }}" value="{{ $value }}" data-date-input>

    <button
        id="{{ $id }}"
        type="button"
        class="focus-ring flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
        aria-haspopup="dialog"
        aria-expanded="false"
        data-date-trigger
    >
        <span class="{{ $displayValue === '' ? 'text-muted-foreground' : '' }} truncate" data-date-label data-placeholder="{{ $placeholder }}">
            {{ $displayValue === '' ? $placeholder : $displayValue }}
        </span>
        <svg class="ml-2 h-4 w-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path d="M8 2v4" />
            <path d="M16 2v4" />
            <rect width="18" height="18" x="3" y="4" rx="2" />
            <path d="M3 10h18" />
        </svg>
    </button>

    <div
        class="absolute z-50 mt-2 hidden w-72 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md"
        role="dialog"
        data-date-content
    >
        <div class="mb-3 flex items-center justify-between">
            <button type="button" class="focus-ring inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground" data-date-prev aria-label="Mes anterior">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path d="m15 18-6-6 6-6" />
                </svg>
            </button>
            <p class="text-sm font-medium capitalize" data-date-title></p>
            <button type="button" class="focus-ring inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground" data-date-next aria-label="Proximo mes">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path d="m9 18 6-6-6-6" />
                </svg>
            </button>
        </div>

        <div class="grid grid-cols-7 gap-1 text-center text-xs text-muted-foreground">
            <span>Dom</span>
            <span>Seg</span>
            <span>Ter</span>
            <span>Qua</span>
            <span>Qui</span>
            <span>Sex</span>
            <span>Sab</span>
        </div>

        <div class="mt-2 grid grid-cols-7 gap-1" data-date-grid></div>

        <div class="mt-3 flex items-center justify-between border-t border-border pt-3">
            <button type="button" class="focus-ring rounded-md px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground" data-date-clear>
                Limpar
            </button>
            <button type="button" class="focus-ring rounded-md px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground" data-date-today>
                Hoje
            </button>
        </div>
    </div>
</div>