<div class="row">
    <x-title>
        Edit Institution: {{ $display_name }}
    </x-title>

    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4">
        <div class="card">
            <div class="card-body">
                <form method="POST" wire:submit.prevent="saveInstitution">
                    <x-ui.input name="display_name" label="Display Name"/>

                    {{-- Area (searchable) — selecting an area fixes the Local Authority --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Area</label>
                        <div class="input-group">
                            <input type="text"
                                   class="form-control @if($area_id) border-success @endif"
                                   wire:model="area_name"
                                   wire:keydown.enter.prevent="searchArea"
                                   placeholder="Type area/suburb and press Enter..."
                                   @if($area_id) readonly @endif>
                            @if($area_id)
                                <button class="btn btn-outline-danger" type="button" wire:click="clearArea">
                                    <i class="mdi mdi-close"></i>
                                </button>
                            @else
                                <button class="btn btn-primary" type="button" wire:click="searchArea">
                                    <i class="mdi mdi-magnify"></i>
                                </button>
                            @endif
                        </div>
                        @if(!empty($area_search_results) && !$area_id)
                            <div class="list-group shadow-sm mt-1" style="max-height: 200px; overflow-y: auto;">
                                @foreach($area_search_results as $result)
                                    <button type="button" class="list-group-item list-group-item-action py-2"
                                            wire:click="setArea({{ $result['id'] }})">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>{{ $result['name'] }}</span>
                                            <small class="text-muted">{{ $result['council'] }}</small>
                                        </div>
                                    </button>
                                @endforeach
                            </div>
                        @elseif($area_name && empty($area_search_results) && !$area_id)
                            <div class="text-danger small mt-1">No area found with that name.</div>
                        @endif
                    </div>

                    {{-- Local Authority — auto-set from the area; a filter for the area search otherwise --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Local Authority</label>
                        <select class="form-select @if($area_id) border-success @endif"
                                wire:model="council_id" @if($area_id) disabled @endif>
                            <option value="">Any (pick to narrow the area search)</option>
                            @foreach($councils as $council)
                                <option value="{{ $council['id'] }}">{{ $council['name'] }}</option>
                            @endforeach
                        </select>
                        @if($area_id)
                            <small class="text-muted">Set automatically from the selected area.</small>
                        @endif
                    </div>

                    <x-ui.select :options="$dsar_types" label="DSAR Type" name="dsar_type_id"/>

                    <x-ui.select :options="[null => 'None', 'email' => 'Email', 'post' => 'Post', 'both' => 'Both']" label="DSAR Send Type" name="send_type"/>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="stated_sar_backlog">
                            Stated SAR Backlog
                        </label>
                        <input type="number" min="0"
                               id="stated_sar_backlog"
                               class="form-control"
                               wire:model.defer="stated_sar_backlog"
                               placeholder="e.g. 850">
                        @error('stated_sar_backlog')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">
                            Number of outstanding SARs this institution has publicly reported. Used on the DSAR report to predict response times.
                        </small>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="is_prioritised"
                                   wire:model="is_prioritised">
                            <label class="form-check-label fw-semibold" for="is_prioritised">
                                Global
                            </label>
                        </div>
                        <small class="text-muted">Global institutions appear at the top of the DSAR creation list.</small>
                    </div>

                    <button class="btn btn-success">
                        Save
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
