<div class="card shadow-sm mx-auto">
    <div class="card-body">
        <h4 class="bold">Merge Institutions</h4>
        <p class="text-muted small">
            Select institutions to merge into <strong class="text-dark">{{ $institution->display_name }}</strong>. Their care settings, DSARs, contacts, and claims will be reassigned here, and they will be deleted.
        </p>

        <div class="mb-4">
            <label for="sources" class="form-label font-weight-bold">Merge these into this institution:</label>
            <select
                    wire:model.live="sourceInstitutionIds"
                    id="sources"
                    multiple
                    class="form-select @error('sourceInstitutionIds') is-invalid @enderror"
                    size="5"
            >
                @foreach($institutions as $id => $inst)
                    <option value="{{ $id }}">{{ $inst }}</option>
                @endforeach
            </select>
            @error('sourceInstitutionIds')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
            <div class="form-text">Hold Ctrl / Cmd to select multiple.</div>
        </div>

        @can('institutions.merge')
        <button
                wire:click="merge"
                wire:confirm="Are you sure? The selected institutions will be permanently merged into this one. This cannot be undone."
                class="btn btn-primary"
                @disabled(empty($sourceInstitutionIds))
        >
            <span wire:loading wire:target="merge" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>

            <span wire:loading.remove wire:target="merge">Confirm Merge</span>
            <span wire:loading wire:target="merge">Processing...</span>
        </button>
        @endcan

        @if (session()->has('message'))
            <div class="alert alert-success mt-3 mb-0">
                {{ session('message') }}
            </div>
        @endif
    </div>
</div>
