{{--
    CallInstitute — "Call Institute" channel card (embedded inside ContactHub).

    Dials a DSAR institution contact while the Client stays the communicable, so
    the call lands in the client's activity feed and ties to their claim. Device
    state is synced on mount from the global Twilio bootstrap (mirrors CallManager);
    the in-call UI is handled by the global CallOverlay.
--}}
<div x-data="{
    init() {
        const s = window.__twilioDeviceState ?? 'unregistered';
        if (s === 'registered')  this.$wire.call('handleDeviceRegistered');
        else if (s === 'registering') this.$wire.call('handleDeviceRegistering');
    }
}">
    <div class="border rounded-3 p-3 h-100 d-flex flex-column">

        {{-- ── Header: icon + label + device badge ──────────────────────── --}}
        <div class="d-flex align-items-center gap-2 mb-2">
            <div class="d-flex align-items-center justify-content-center rounded-circle bg-success bg-opacity-10 text-success flex-shrink-0"
                 style="width:36px;height:36px">
                <i class="mdi mdi-bank fs-5"></i>
            </div>
            <span class="fw-semibold">Call Institute</span>
            <div class="ms-auto">
                @if($deviceRegistering)
                    <span class="badge text-bg-warning d-flex align-items-center gap-1">
                        <span class="spinner-border" style="width:.4rem;height:.4rem;border-width:1.5px"></span>
                        Connecting
                    </span>
                @elseif($deviceReady)
                    <span class="badge text-bg-success">
                        <i class="mdi mdi-circle" style="font-size:.4rem;vertical-align:middle"></i>
                        Ready
                    </span>
                @else
                    <span class="badge text-bg-secondary">
                        <i class="mdi mdi-circle-off-outline" style="font-size:.4rem;vertical-align:middle"></i>
                        Offline
                    </span>
                @endif
            </div>
        </div>

        {{-- ── Sub-label ──────────────────────────────────────────────────── --}}
        <div class="text-muted small mb-3">
            {{ $this->isLocked() ? ($this->institutions->first()?->display_name ?? 'DSAR Institution') : 'DSAR Institution' }}
        </div>

        {{-- ── Selector: (institution →) contact / number ─────────────────── --}}
        @if($this->institutions->isEmpty())
            <div class="text-muted small mb-3">
                {{ $this->isLocked()
                    ? 'No institution is linked to this DSAR.'
                    : 'No DSAR institutions linked to this client.' }}
            </div>
        @else
            {{-- In DSAR mode the institution is fixed, so only the number is chosen. --}}
            @unless($this->isLocked())
                <div class="mb-2">
                    <select class="form-select form-select-sm" wire:model.live="selectedInstitutionId">
                        <option value="">Select DSAR Institution</option>
                        @foreach($this->institutions as $inst)
                            <option value="{{ $inst->id }}">{{ $inst->display_name }}</option>
                        @endforeach
                    </select>
                </div>
            @endunless

            {{-- Always rendered (disabled until an institution is chosen) so the
                 wire:model binding initialises on first render rather than after a
                 morph; keyed by institution to force a clean re-init when the
                 contact options change. --}}
            <div class="mb-2">
                <select class="form-select form-select-sm"
                        wire:model.live="selectedContactKey"
                        wire:key="contact-select-{{ $selectedInstitutionId }}"
                        @disabled(!$selectedInstitutionId || count($this->institutionContacts) === 0)>
                    @if(!$selectedInstitutionId)
                        <option value="">Select an institution first</option>
                    @elseif(count($this->institutionContacts) === 0)
                        <option value="">No callable number on file</option>
                    @else
                        <option value="">Select contact / number</option>
                        @foreach($this->institutionContacts as $opt)
                            <option value="{{ $opt['key'] }}">{{ $opt['label'] }}</option>
                        @endforeach
                    @endif
                </select>
            </div>
        @endif

        {{-- ── Error ──────────────────────────────────────────────────────── --}}
        @if($errorMessage)
            <div class="alert alert-danger py-1 px-2 mb-2 small d-flex align-items-center gap-1">
                <i class="mdi mdi-alert-circle-outline flex-shrink-0"></i>
                <span>{{ $errorMessage }}</span>
            </div>
        @endif

        {{-- ── Call button (pushed to bottom of card) ─────────────────────── --}}
        <div class="mt-auto">
            @can('communications.call.institution')
                <button wire:click="callInstitution"
                        wire:loading.attr="disabled"
                        wire:target="callInstitution"
                        @class([
                            'btn btn-sm w-100',
                            'btn-success'            => $deviceReady,
                            'btn-secondary disabled' => !$deviceReady,
                        ])>
                    <span wire:loading.remove wire:target="callInstitution">
                        <i class="mdi mdi-phone me-1"></i>Call Institute
                    </span>
                    <span wire:loading wire:target="callInstitution">
                        <span class="spinner-border spinner-border-sm me-1"></span>Calling…
                    </span>
                </button>
            @else
                <button class="btn btn-secondary btn-sm w-100 disabled">
                    <i class="mdi mdi-phone me-1"></i>Call Institute
                </button>
            @endcan
        </div>

    </div>
</div>