<div class="card shadow-sm border-0 mb-4">
    <div class="card-body">

        {{-- HEADER --}}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="fw-bold mb-0">
                Claim Status
            </h4>

            <button
                    class="btn btn-sm btn-primary"
                    wire:click="$set('showHistory', true)"
            >
                <i class="mdi mdi-history"></i>
            </button>
        </div>

        {{-- CURRENT STATUS --}}
        <div class="d-flex align-items-center gap-2 mb-3">
            <i class="mdi mdi-circle text-success"></i>

            <strong>
                {{ $claim->status->display_name ?? '—' }}
            </strong>
        </div>

        {{-- STATUS EDIT --}}
        <div class="mb-4">
            <select
                    class="form-select form-select-sm"
                    wire:model.live="status_id"
            >
                @foreach($statuses as $status)
                    <option value="{{ $status->id }}">
                        {{ $status->display_name }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- UPDATE BUTTON --}}
        <button
                class="btn btn-md btn-primary"
                wire:click="updateStatus"
        >
            Save
        </button>

    </div>

    {{-- OFFCANVAS : STATUS HISTORY --}}
    <div
            class="offcanvas offcanvas-end {{ $showHistory ? 'show' : '' }}"
             tabindex="-1" style="--bs-offcanvas-width: 600px;"
            style="visibility: {{ $showHistory ? 'visible' : 'hidden' }};"
    >
        <div class="offcanvas-header">
            <h6 class="offcanvas-title">
                <i class="mdi mdi-history me-1"></i>
                Status History
            </h6>

            <button
                    type="button"
                    class="btn-close"
                    wire:click="$set('showHistory', false)"
            ></button>
        </div>

        <div class="offcanvas-body  bg-light small">

            @if($claim->statusHistory->count())
                <ul class="list-group list-group-flush">
                    @foreach($claim->statusHistory as $history)
                        <li class="list-group-item px-0">
                            <div class="fw-semibold">
                                {{ $history->status?->display_name }}
                            </div>

                            <div class="text-primary small">
                                {{ $history->created_at->format('d M Y H:i') }}
                                @if($history->changed_by)
                                    · {{ $history->user?->name_first }} {{ $history->user?->name_last }}
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            @else
                <div class="text-muted">
                    No status history recorded.
                </div>
            @endif

        </div>
    </div>

    {{-- BACKDROP --}}
    @if($showHistory)
        <div
                class="offcanvas-backdrop fade show"
                wire:click="$set('showHistory', false)"
        ></div>
    @endif
</div>
