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

        <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
            Care Settings
            <button class="btn btn-primary btn-sm" wire:click="addSetting">
                <i class="mdi mdi-plus"></i>
            </button>
        </h4>

        @if(count($settings))
            <div class="row">
                @foreach($settings as $index => $set)
                    <div class="col-4">
                        <div class="card mb-4">
                            <div class="card-body position-relative">

                                <h5 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
                                    Setting {{ $index + 1 }}
                                </h5>

                                <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                                    <i class="mdi mdi-delete-outline action-icon text-danger"
                                       wire:click="removeSetting({{ $index }})"></i>
                                </div>

                                {{-- Institution Search --}}
                                <div class="mb-3 dropdown position-relative">
                                    <label class="form-label">Institution</label>

                                    <input
                                            type="text"
                                            class="form-control dropdown-toggle"
                                            wire:model.live="settings.{{ $index }}.institution_name"
                                            wire:keyup="search({{ $index }})"
                                            placeholder="Search for an institution..."
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"
                                            autocomplete="off"
                                    >

                                    <ul class="dropdown-menu w-100 shadow show">
                                        @foreach($set['search_results'] as $result)
                                            <li>
                                                <button
                                                        type="button"
                                                        class="dropdown-item"
                                                        wire:click="setItem({{ $index }}, {{ $result->id }})"
                                                >
                                                    {{ $result->display_name }}
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>



                                {{-- Institution DsarType --}}
                                @if(!$set['institution_id'])
                                <div class="mb-3">
                                    <label class="form-label">Institution Type</label>
                                    <select
                                            class="form-select"
                                            wire:model="settings.{{ $index }}.institution_type_id"
                                    >
                                        <option value="">Select type…</option>
                                        @foreach($institutionTypes as $type)
                                            <option value="{{ $type->id }}">{{ $type->display_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @endif

                                {{-- Date --}}
                                <div class="mb-3">
                                    <label class="form-label">Date / Date Range</label>
                                    <input
                                            type="text"
                                            class="form-control"
                                            wire:model="settings.{{ $index }}.date_text"
                                    >
                                </div>

                                {{-- Who was involved --}}
                                <div class="mb-3">
                                    <label class="form-label">Who Was Involved</label>
                                    <input
                                            type="text"
                                            class="form-control"
                                            wire:model="settings.{{ $index }}.people_involved"
                                    >
                                </div>

                                {{-- Personal Statement --}}
                                <div class="mb-3">
                                    <label class="form-label">Personal Statement</label>
                                    <textarea
                                            class="form-control"
                                            rows="4"
                                            wire:model="settings.{{ $index }}.personal_statement"
                                    >{{ $settings[$index]['personal_statement'] }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-note" style="font-size: 48px;"></i>
                <p class="mt-3 fw-bold">No care settings have been added.</p>
            </div>
        @endif

        @if(count($settings))
            <button
                    class="btn btn-success"
                    wire:click="save"
            >
                Save All
            </button>
        @endif

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