<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">Status</h4>
            <button class="btn btn-sm btn-primary" wire:click="$set('showHistory', true)">
                <i class="mdi mdi-history"></i>
            </button>
        </div>

        {{-- CLAIM TYPE --}}
        @can('edit', $pensionCase)
            <div class="mb-3">
                <label class="form-label small text-muted mb-1">Claim Type</label>
                <select class="form-select form-select-sm" wire:model.live="claim_type">
                    <option value="bank">Bank</option>
                    <option value="fscs">FSCS</option>
                    <option value="fos">FOS</option>
                </select>
            </div>
        @endcan

        {{-- CURRENT STATUS --}}
        <div class="d-flex align-items-center gap-2 mb-3">
            <i class="mdi mdi-circle text-success"></i>
            <strong>{{ $pensionCase->status->display_name ?? '—' }}</strong>
        </div>

        @if($claim_type !== $pensionCase->claim_type)
            <div class="alert alert-warning py-2 small mb-3">
                <i class="mdi mdi-alert me-1"></i>
                Changing to <strong>{{ strtoupper($claim_type) }}</strong>. Select a status from this
                claim type's workflow below, then save.
            </div>
        @endif

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

        <button class="btn btn-md btn-primary" wire:click="save">
            {{ $claim_type !== $pensionCase->claim_type ? 'Change Type & Save Status' : 'Save' }}
        </button>

    </div>

    {{-- OFFCANVAS : STATUS HISTORY --}}
    <div
        class="offcanvas offcanvas-end {{ $showHistory ? 'show' : '' }}"
        tabindex="-1"
        style="--bs-offcanvas-width: 600px; 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($pensionCase->statusHistory->count())
                <ul class="list-group list-group-flush">
                    @foreach($pensionCase->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>

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