@props([
    'name',
    'label' => '',
    'col' => null,
    'value' => '',
    'required' => false,
])

@php
    $dotName = str_replace(['[', ']'], ['.', ''], $name);
    $dotName = rtrim($dotName, '.');

    $dateValue = old($dotName, $value);

    if ($dateValue) {
        try {
            if ($dateValue instanceof \Carbon\Carbon) {
                $dateValue = $dateValue->format('Y-m-d');
            } elseif (is_string($dateValue)) {
                $dateValue = \Carbon\Carbon::parse($dateValue)->format('Y-m-d');
            }
        } catch (\Exception $e) {
            $dateValue = '';
        }
    }

    $fieldId = str_replace(['[', ']', '.'], ['-', '', '-'], $name);
@endphp

@if($col)
<div class="col-md-{{ $col }}">
@endif

@if($label)
    <label class="form-label" for="{{ $fieldId }}">
        {{ $label }}
        @if($required)
            <span class="text-danger">*</span>
        @endif
    </label>
@endif

<input
    type="text"
    name="{{ $name }}"
    id="{{ $fieldId }}"
    class="form-control flatpickr-date @error($dotName) is-invalid @enderror"
    value="{{ $dateValue }}"
    autocomplete="off"
    placeholder="{{ __('dashboard.select_date') }}..."
>

@error($dotName)
    <span class="text-danger">
        <small class="errorTxt">{{ $message }}</small>
    </span>
@enderror

@if($col)
</div>
@endif

@pushOnce('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endPushOnce

@pushOnce('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.flatpickr-date').forEach(function(el) {
        if (!el._flatpickr) {
            flatpickr(el, {
                dateFormat: 'Y-m-d',
                allowInput: true,
                disableMobile: true
            });
        }
    });
});

window.initFlatpickrDate = function(el) {
    if (el && !el._flatpickr) {
        flatpickr(el, {
            dateFormat: 'Y-m-d',
            allowInput: true,
            disableMobile: true
        });
    }
};
</script>
@endPushOnce