<div class="client-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">
                        Statuses
                        @can('statuses.create')
                            <button class="btn btn-primary btn-sm" wire:click="showAdd">
                                <i class="mdi mdi-plus"></i>
                            </button>
                        @endcan
                    </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"
                        >
                            @foreach($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><br>
                                    <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                                        @can('statuses.edit')
                                            <i class="mdi mdi-pencil-outline action-icon me-2"
                                               wire:click="loadEdit({{ $status->id }})"></i>
                                        @endcan
                                        @can('statuses.delete')
                                            @if($status->claims_count === 0)
                                                <i class="mdi mdi-delete-outline action-icon text-danger"
                                                   wire:click="deleteStatus({{ $status->id }})"></i>
                                            @endif
                                        @endcan
                                    </div>
                                </div>
                            @endforeach
                        </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 id="offcanvasRightLabel">{{ $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({{ $status->id }})">
                                @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">Add</button>
                                    </form>

                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
