<div class="key-date-list">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
                        Key Dates
                        <button class="btn btn-primary btn-sm" wire:click="showAdd">
                            <i class="mdi mdi-plus"></i>
                        </button>
                    </h4>

                    <div class="list-group">
                        <div
                                x-data="{
                                dragIndex: null,
                                items: @entangle('keyDates'),

                                startDrag(index) {
                                    this.dragIndex = index;
                                },

                                dropItem(index) {
                                    if (this.dragIndex === null) return;
                                    const moved = this.items.splice(this.dragIndex, 1)[0];
                                    this.items.splice(index, 0, moved);
                                    this.dragIndex = null;
                                    $wire.updateOrder(this.items.map(i => i.id));
                                }
                            }"
                                class="space-y-2"
                        >
                            <template x-for="(item, index) in items" :key="item.id">
                                <div
                                        class="list-group-item bg-light mb-2 rounded position-relative p-3 border-dashed"
                                        draggable="true"
                                        @dragstart="startDrag(index)"
                                        @dragover.prevent
                                        @drop="dropItem(index)"
                                        style="cursor: grab"
                                >
                                    <div class="d-flex align-items-center">
                                        <i class="mdi mdi-drag-vertical text-muted me-2"></i>
                                        <div>
                                            <p class="mb-1 fw-semibold text-dark" x-text="item.display_name"></p>
                                        </div>
                                    </div>

                                    <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                                        <i class="mdi mdi-pencil-outline action-icon text-muted"
                                           style="cursor: pointer"
                                           @click="$wire.loadEdit(item.id)"></i>

                                        <i class="mdi mdi-delete-outline action-icon text-danger"
                                           style="cursor: pointer"
                                           wire:click="deleteKeyDate(item.id)"
                                           wire:confirm="Are you sure?"></i>
                                    </div>
                                </div>
                            </template>

                            <div x-show="items.length === 0" class="text-center p-4 text-muted">
                                No key dates found.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if($show)
            <div>
                <div class="offcanvas offcanvas-end show" tabindex="-1" style="--bs-offcanvas-width: 600px; display: block;" role="dialog">
                    <div class="offcanvas-header border-bottom">
                        <h5 id="offcanvasRightLabel">{{ $editing ? 'Edit' : 'Add' }} Key Date</h5>
                        <button type="button" class="btn-close text-dark" wire:click="hideAdd"></button>
                    </div>

                    <div class="offcanvas-body bg-light">
                        <form wire:submit.prevent="save">
                            <div class="mb-3">
                                <x-ui.input name="name" label="Date Name" wire:model="name" />
                            </div>

                            <div class="mb-3">
                                <x-ui.input name="description" label="Description" wire:model="description" />
                            </div>

                            <div class="mt-4 d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-light" wire:click="hideAdd">Cancel</button>
                                <button type="submit" class="btn btn-primary w-md">
                                    {{ $editing ? 'Update' : 'Create' }} Date
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="offcanvas-backdrop fade show" wire:click="hideAdd"></div>
            </div>
        @endif
    </div>
</div>