@use('Carbon\Carbon')

@props([
    'name',
    'label' => $name ?? '',
    'required' => false,
    'value' => null,
    'useLabel' => true,
    'canClear' => false,
    'container' => 'body',
    'minDate' => null,
    'maxDate' => null,
])

@php
    $id = 'datetimepicker-' . Str::slug($name);
    $formattedValue = $value ? Carbon::parse($value)->format('Y-m-d H:i') : null;
@endphp

<div id="div-{{ $id }}" class="form-floating mb-2">
    <input
        {{ $attributes->class(['form-control bg-unset', 'is-invalid' => $errors->has($name)]) }}
        id="{{ $id }}"
        type="text"
        name="{{ $name }}"
        value="{{ old($name, $formattedValue) }}"
        placeholder="{{ $useLabel ? '' : $label }}"
        @required($required)
        readonly
    />

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

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

@once
    @push('styles')
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        /* --- Struktur utama --- */
.flatpickr-calendar {
    z-index: 1050 !important; /* sedikit lebih rendah dari dropdown bulan */
    overflow: visible !important;
}

/* --- Dropdown bulan Flatpickr --- */
.flatpickr-monthDropdown-months {
    position: relative !important;
    z-index: 1065 !important; /* lebih tinggi dari kalender */
}

/* --- Select2 dropdown (kalender versi select) --- */
.select2-container--open {
    z-index: 1070 !important; /* pastikan di atas flatpickr-calendar */
}

/* Jika dalam modal bootstrap */
.modal .select2-container--open {
    z-index: 200000 !important;
}

/* --- Header bulan/tahun --- */
.flatpickr-months {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    overflow: visible !important;
}

.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    width: auto !important;
    max-width: 80px !important;
    margin-right: 4px !important;
    z-index: 1065 !important;
}

.flatpickr-current-month .numInputWrapper {
    width: auto !important;
    min-width: 70px !important;
}

.flatpickr-current-month .numInputWrapper input {
    width: 100% !important;
    text-align: center !important;
    padding: 0 40px 0 4px !important;
    box-sizing: border-box !important;
}

/* --- Jika label form-floating menimpa --- */
.form-floating > .flatpickr-input + label {
    z-index: 1 !important;
}

    </style>

    @endpush

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    @endpush
@endonce

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
    const el = document.getElementById(@json($id));
    if (!el) return;

    if (el._flatpickr) el._flatpickr.destroy();

    flatpickr(el, {
        dateFormat: "Y-m-d H:i",
        altInput: true,
        altFormat: "d M Y H:i",
        enableTime: true,
        time_24hr: true,
        allowInput: false,
        minDate: {!! $minDate ? json_encode($minDate) : 'null' !!},
        maxDate: {!! $maxDate ? json_encode($maxDate) : 'null' !!},
        appendTo: document.querySelector(@json($container)) || document.body
    });
});
</script>
@endpush