{{-- Expects: $buildings (with floors), $buildingLevels [buildingId => level], $floorLevels [floorId => level] --}}
<div id="access-section">
    <p class="form-label" style="margin-bottom:4px">Access</p>
    <p class="text-sm text-muted" style="margin-bottom:12px">
        <strong>View only</strong> lets the user see meters and readings.
        <strong>View &amp; add readings</strong> also lets them record new readings.
        A building setting covers all its floors; a floor setting can raise access for just that floor.
        <span id="admin-note" style="display:none">Administrators can access everything, so these settings don't apply.</span>
    </p>

    @forelse ($buildings as $building)
        <div style="border:1px solid var(--color-border);border-radius:8px;margin-bottom:10px;overflow:hidden">
            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#f8fafc">
                <strong><i class="ti ti-building-skyscraper"></i> {{ $building->name }}</strong>
                <select name="building[{{ $building->id }}]" class="form-control" style="width:auto">
                    @php $b = old('building.'.$building->id, $buildingLevels[$building->id] ?? ''); @endphp
                    <option value="">No access</option>
                    <option value="view" @selected($b === 'view')>View only</option>
                    <option value="add" @selected($b === 'add')>View &amp; add readings</option>
                </select>
            </div>
            @foreach ($building->floors as $floor)
                @php $f = old('floor.'.$floor->id, $floorLevels[$floor->id] ?? ''); @endphp
                <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 28px;border-top:1px solid #f1f5f9">
                    <span><i class="ti ti-building"></i> {{ $floor->name }}</span>
                    <select name="floor[{{ $floor->id }}]" class="form-control" style="width:auto">
                        <option value="">Same as building</option>
                        <option value="view" @selected($f === 'view')>View only</option>
                        <option value="add" @selected($f === 'add')>View &amp; add readings</option>
                    </select>
                </div>
            @endforeach
            @if ($building->floors->isEmpty())
                <p class="text-sm text-muted" style="padding:8px 12px 8px 28px;border-top:1px solid #f1f5f9">No floors yet.</p>
            @endif
        </div>
    @empty
        <p class="text-sm text-muted">No buildings yet. <a href="{{ route('buildings.create') }}" class="link">Add one</a> first.</p>
    @endforelse
</div>

<script>
    (function () {
        var role = document.getElementById('role');
        var section = document.getElementById('access-section');
        var note = document.getElementById('admin-note');
        function sync() {
            var admin = role.value === 'admin';
            section.style.opacity = admin ? '.5' : '1';
            note.style.display = admin ? 'inline' : 'none';
        }
        role.addEventListener('change', sync);
        sync();
    })();
</script>