@extends('layouts.nebulox')

@section('page-title')
    Admin · Access
@endsection

@section('content')

@if(session('status'))
    <div class="nx-alert nx-alert-ok" style="margin-bottom:12px;">
        {{ session('status') }}
    </div>
@endif

<div class="nx-card" style="padding:16px; max-width:1100px;">

    <div class="nx-muted" style="margin-bottom:12px;">
        Select a user, then choose which locations they can view.
    </div>

    @if(empty($users) || count($users) === 0)
        <div class="nx-alert nx-alert-bad">
            No child users found. A user appears here only after they accept the invitation.
        </div>
    @else
        <form method="POST" action="{{ route('admin.access.update') }}">
            @csrf

            <label class="nx-label">User</label>
            <select class="nx-input" name="user_id" id="user_id" required>
                <option value="" disabled selected>Select user...</option>
                @foreach($users as $usr)
                    <option value="{{ $usr->id }}">{{ $usr->email }} {{ !empty($usr->name) ? '— '.$usr->name : '' }}</option>
                @endforeach
            </select>

            <div class="nx-mt-12"></div>

            <div class="nx-card" style="padding:12px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                    <div style="font-weight:800;">Locations</div>
                    <div class="nx-muted">Tick the allowed locations</div>
                </div>

                <div style="display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px;">
                    @foreach($locations as $loc)
                        <label style="display:flex; gap:10px; align-items:center; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;">
                            <input type="checkbox" name="location_ids[]" value="{{ $loc->id }}"
                                   class="nx-loc-check"
                                   data-loc-id="{{ $loc->id }}">
                            <span>{{ $loc->locationName }}</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <button class="nx-btn nx-btn-primary nx-mt-12" type="submit">
                Save permissions
            </button>
        </form>
    @endif
</div>

<script>
    // Pre-check boxes when user is selected, based on server-provided accessMap
    const accessMap = @json($accessMap ?? []);
    const userSelect = document.getElementById('user_id');
    const checks = Array.from(document.querySelectorAll('.nx-loc-check'));

    function refreshChecks() {
        const uid = userSelect.value;
        checks.forEach(ch => {
            const locId = ch.getAttribute('data-loc-id');
            ch.checked = !!(accessMap[uid] && accessMap[uid][locId]);
        });
    }

    if (userSelect) {
        userSelect.addEventListener('change', refreshChecks);
    }
</script>

@endsection