<div>
    <x-title>W&amp;T Statuses</x-title>

    <div class="row">
        <div class="col-12 col-md-8 offset-md-2">

            <div class="card">
                <div class="card-body">
                    <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
                        Wills &amp; Trusts Statuses
                        <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="{
                                dragSrc: null,
                                dragStart(el) { this.dragSrc = el; el.style.opacity = '0.4'; },
                                dragEnd(el) { el.style.opacity = ''; },
                                drop(el) {
                                    if (this.dragSrc === el) return;
                                    const list = el.parentElement;
                                    const allItems = [...list.querySelectorAll('[data-status-id]')];
                                    const fromIdx = allItems.indexOf(this.dragSrc);
                                    const toIdx = allItems.indexOf(el);
                                    if (fromIdx < toIdx) el.after(this.dragSrc);
                                    else el.before(this.dragSrc);
                                    $wire.updateOrder([...list.querySelectorAll('[data-status-id]')].map(e => e.dataset.statusId));
                                    this.dragSrc.style.opacity = '';
                                    this.dragSrc = null;
                                }
                            }"
                            class="space-y-2"
                        >
                            @forelse($statuses as $i => $status)
                                <div class="list-group-item bg-light mb-2 rounded position-relative"
                                     draggable="true"
                                     data-status-id="{{ $status->id }}"
                                     @dragstart="dragStart($el)"
                                     @dragend="dragEnd($el)"
                                     @dragover.prevent
                                     @drop.prevent="drop($el)"
                                     style="cursor: pointer">
                                    <p class="mb-1 fw-semibold" style="color: {{ $status->colour }}">{{ $i + 1 }}. {{ $status->display_name }}</p>
                                    <small class="text-muted">{{ $status->description }}</small>
                                    <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                                        <i class="mdi mdi-pencil-outline action-icon me-2"
                                           wire:click="loadEdit({{ $status->id }})"></i>
                                        <i class="mdi mdi-delete-outline action-icon text-danger"
                                           wire:click="deleteStatus({{ $status->id }})"></i>
                                    </div>
                                </div>
                            @empty
                                <p class="text-muted small">No statuses defined yet.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if($show)
            <div>
                <div class="offcanvas offcanvas-end show" tabindex="-1" style="--bs-offcanvas-width: 600px;" role="dialog">
                    <div class="offcanvas-header">
                        <h5>{{ $editing ? 'Edit' : 'Add' }} Status</h5>
                        <button type="button" class="btn-close text-dark" wire:click.prevent="hideAdd"></button>
                    </div>
                    <div class="offcanvas-body bg-light">
                        @if($editing)
                            <form method="post" wire:submit="editStatus">
                        @else
                            <form method="post" wire:submit="addStatus">
                        @endif
                            @csrf
                            <x-ui.input name="new_status_name" label="Display Name"/>
                            <x-ui.input name="new_status_description" label="Description"/>
                            <x-ui.input name="new_status_color" label="Colour" type="color"/>
                            <button type="submit" class="btn btn-primary w-md mt-4">
                                {{ $editing ? 'Save' : 'Add' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
