@extends('layouts.app')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0">Visibility Manager</h4>
            <p class="text-muted small mb-0">Control which modules each department sees, then override access for individual users.</p>
        </div>
        <a href="{{ route('visibility-modules.index') }}" class="btn btn-sm btn-outline-primary">Manage permission modules</a>
    </div>

    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header fw-bold">Departments</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('visibility.departments.store') }}" class="row g-2 mb-3">
                        @csrf
                        <div class="col-12">
                            <label class="form-label">New department</label>
                            <input name="name" class="form-control form-control-sm" placeholder="e.g. CAD" required maxlength="120">
                        </div>
                        <div class="col-12">
                            <input name="description" class="form-control form-control-sm" placeholder="Optional description" maxlength="255">
                        </div>
                        <div class="col-12">
                            <button class="btn btn-sm btn-success w-100">Add department</button>
                        </div>
                    </form>
                    <div class="list-group list-group-flush">
                        @forelse($departments as $dept)
                            <a href="{{ route('visibility.index', ['department_id' => $dept->id]) }}"
                               class="list-group-item list-group-item-action {{ optional($selectedDepartment)->id === $dept->id ? 'active' : '' }}">
                                {{ $dept->name }}
                                <span class="badge bg-secondary float-end">{{ $dept->users_count }}</span>
                            </a>
                        @empty
                            <div class="text-muted small py-2">No departments yet.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="card shadow-sm mt-3">
                <div class="card-header fw-bold">Users (department staff)</div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @forelse($users as $u)
                            <a href="{{ route('visibility.index', ['user_id' => $u->id]) }}"
                               class="list-group-item list-group-item-action small {{ optional($selectedUser)->id === $u->id ? 'active' : '' }}">
                                {{ $u->name }}
                                <br>
                                <span class="text-muted">{{ optional($u->department)->name ?: 'No department' }}</span>
                            </a>
                        @empty
                            <div class="text-muted small p-3">No department users.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            @if($selectedDepartment)
                <div class="card shadow-sm mb-4">
                    <div class="card-header fw-bold">
                        Department: {{ $selectedDepartment->name }}
                        <span class="text-muted fw-normal small">— default access for everyone in this department</span>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('visibility.departments.permissions', $selectedDepartment) }}">
                            @csrf
                            @method('PUT')
                            @foreach($modulesGrouped as $groupName => $modules)
                                <h6 class="text-uppercase text-muted small mt-3 mb-2">{{ $groupName }}</h6>
                                <div class="row g-2">
                                    @foreach($modules as $mod)
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                       name="modules[]" value="{{ $mod['key'] }}"
                                                       id="dept_{{ $mod['key'] }}"
                                                       {{ !empty($departmentPermissions[$mod['key']]) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="dept_{{ $mod['key'] }}">
                                                    <strong>{{ $mod['label'] }}</strong>
                                                    @if(!empty($mod['description']))
                                                        <br><span class="text-muted small">{{ $mod['description'] }}</span>
                                                    @endif
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                            <div class="mt-3">
                                <button class="btn btn-primary">Save department access</button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif

            @if($selectedUser)
                <div class="card shadow-sm">
                    <div class="card-header fw-bold">
                        User: {{ $selectedUser->name }}
                        <span class="text-muted fw-normal small">— overrides department defaults (inherit / allow / deny)</span>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted">
                            Department: <strong>{{ optional($selectedUser->department)->name ?: 'None assigned' }}</strong>.
                            Choose <em>Inherit</em> to use department setting, or force Allow/Deny for this user only.
                        </p>
                        <form method="POST" action="{{ route('visibility.users.overrides', $selectedUser) }}">
                            @csrf
                            @method('PUT')
                            @foreach($modulesGrouped as $groupName => $modules)
                                <h6 class="text-uppercase text-muted small mt-3 mb-2">{{ $groupName }}</h6>
                                <table class="table table-sm table-bordered align-middle mb-0">
                                    <thead class="table-light">
                                    <tr>
                                        <th>Module</th>
                                        <th style="width: 100px;">Override</th>
                                        <th style="width: 90px;">Effective</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($modules as $mod)
                                        @php
                                            $state = $userOverrideStates[$mod['key']] ?? 'inherit';
                                            $effective = !empty($userEffectivePermissions[$mod['key']]);
                                        @endphp
                                        <tr>
                                            <td>
                                                <strong>{{ $mod['label'] }}</strong>
                                                <br><span class="text-muted small">{{ $mod['key'] }}</span>
                                            </td>
                                            <td>
                                                <select name="override[{{ $mod['key'] }}]" class="form-select form-select-sm">
                                                    <option value="inherit" {{ $state === 'inherit' ? 'selected' : '' }}>Inherit</option>
                                                    <option value="allow" {{ $state === 'allow' ? 'selected' : '' }}>Allow</option>
                                                    <option value="deny" {{ $state === 'deny' ? 'selected' : '' }}>Deny</option>
                                                </select>
                                            </td>
                                            <td>
                                                @if($effective)
                                                    <span class="badge bg-success">On</span>
                                                @else
                                                    <span class="badge bg-secondary">Off</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            @endforeach
                            <div class="mt-3">
                                <button class="btn btn-primary">Save user overrides</button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif

            @if(!$selectedDepartment && !$selectedUser)
                <div class="card shadow-sm">
                    <div class="card-body text-muted">
                        Select a department to configure default module access, or select a user to set individual overrides.
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection
