@extends('admin.layouts.app')
@section('title', 'User Access Control')
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.users.index') }}" style="color:inherit;text-decoration:none;">Users</a>
    <span>/</span> Access Control
@endsection

@push('styles')
<style>
.perm-module { background:#f8fafc; padding:8px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#475569; border-top:1px solid #e2e8f0; }
.perm-row td { padding:8px 14px; font-size:13px; vertical-align:middle; }
.perm-row:hover { background:#fafafa; }
.perm-check { width:18px; height:18px; cursor:pointer; }
.from-role { accent-color:#3b82f6; }
.from-user { accent-color:#22c55e; }
.role-card { border:2px solid #e2e8f0; border-radius:10px; padding:14px; cursor:pointer; transition:all .15s; }
.role-card:hover { border-color:#3b82f6; background:#eff6ff; }
.role-card.active { border-color:#3b82f6; background:#eff6ff; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1>User Access Control</h1>
        <p class="page-subtitle">Manage per-user permission overrides on top of role defaults</p>
    </div>
</div>

<div class="row g-4">
    <!-- User Selector -->
    <div class="col-lg-3">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0 fw-700"><i class="fas fa-user-cog text-primary me-2"></i>Select User</h6>
            </div>
            <div class="card-body">
                <form method="GET" id="userSelectForm">
                    <div class="mb-3">
                        <label class="form-label">Search User</label>
                        <select name="user_id" class="form-select" id="userSelect" onchange="this.form.submit()">
                            <option value="">-- Select a user --</option>
                            @foreach($users as $u)
                                <option value="{{ $u->id }}" {{ (isset($selectedUser) && $selectedUser->id == $u->id) ? 'selected' : '' }}>
                                    {{ $u->name }} ({{ $u->role->name ?? '' }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                </form>

                @if($selectedUser)
                <hr>
                <div class="text-center">
                    <img src="{{ $selectedUser->profile_image_url }}" width="60" height="60"
                        style="border-radius:50%;object-fit:cover;border:2px solid #3b82f6;" class="mb-2">
                    <div style="font-weight:700;">{{ $selectedUser->name }}</div>
                    <div style="font-size:12px;color:#64748b;">{{ $selectedUser->email }}</div>
                    <span class="badge bg-primary mt-1">{{ $selectedUser->role->name ?? $selectedUser->user_type }}</span>
                    <div style="font-size:11px;color:#94a3b8;margin-top:4px;">{{ $selectedUser->department->name ?? 'No Department' }}</div>
                </div>

                <hr>
                <div style="font-size:12px;">
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <input type="checkbox" class="from-role" checked disabled style="width:14px;height:14px;">
                        <span class="text-primary">= From Role</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <input type="checkbox" class="from-user" checked disabled style="width:14px;height:14px;">
                        <span class="text-success">= User Override</span>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Role Quick Set -->
        @if($selectedUser)
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0 fw-700"><i class="fas fa-shield-alt text-warning me-2"></i>Role Presets</h6>
            </div>
            <div class="card-body" style="padding:12px;">
                @foreach($roles as $role)
                <div class="role-card mb-2 {{ $selectedUser->role_id == $role->id ? 'active' : '' }}"
                    onclick="applyRolePreset({{ $role->id }})">
                    <div style="font-size:13px;font-weight:600;">{{ $role->name }}</div>
                    <div style="font-size:11px;color:#64748b;">{{ $role->permissions->count() }} permissions</div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    <!-- Permission Matrix -->
    <div class="col-lg-9">
        @if(!$selectedUser)
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="fas fa-user-cog d-block mb-3" style="font-size:48px;color:#cbd5e1;"></i>
                <h5 class="text-muted">Select a User</h5>
                <p class="text-muted" style="font-size:13px;">Choose a user from the left panel to manage their permissions.</p>
            </div>
        </div>
        @else
        <form id="permissionsForm">
            @csrf
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h6 class="mb-0 fw-700">
                        <i class="fas fa-key text-warning me-2"></i>
                        Permissions for {{ $selectedUser->name }}
                    </h6>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-success" onclick="selectAll(true)">
                            <i class="fas fa-check-square me-1"></i>Grant All
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="selectAll(false)">
                            <i class="fas fa-times-square me-1"></i>Revoke All
                        </button>
                        <button type="button" class="btn btn-sm btn-primary" onclick="savePermissions()">
                            <i class="fas fa-save me-1"></i>Save Changes
                        </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead style="background:#f8fafc;">
                            <tr>
                                <th class="ps-3" width="200">Module</th>
                                <th width="200">Permission</th>
                                <th>Description</th>
                                <th class="text-center" width="100">Granted</th>
                                <th class="text-center" width="100">Source</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($permissions as $module => $perms)
                            <tr>
                                <td colspan="5" class="perm-module">
                                    <i class="fas fa-layer-group me-2"></i>{{ ucwords(str_replace('_', ' ', $module)) }}
                                    <span class="badge bg-secondary ms-2">{{ $perms->count() }}</span>
                                    <button type="button" class="btn btn-link btn-sm text-primary p-0 ms-2"
                                        style="font-size:11px;" onclick="toggleModule('{{ $module }}', true)">Grant All</button>
                                    <button type="button" class="btn btn-link btn-sm text-danger p-0 ms-1"
                                        style="font-size:11px;" onclick="toggleModule('{{ $module }}', false)">Revoke All</button>
                                </td>
                            </tr>
                            @foreach($perms as $perm)
                            @php
                                $isGranted = $userPermissions[$perm->slug] ?? false;
                                $fromRole  = in_array($perm->slug, $rolePermissions);
                            @endphp
                            <tr class="perm-row" data-module="{{ $module }}">
                                <td class="ps-3 text-muted" style="font-size:12px;">{{ ucwords(str_replace('_', ' ', $module)) }}</td>
                                <td>
                                    <code style="font-size:11px;background:#f1f5f9;padding:2px 6px;border-radius:4px;">
                                        {{ $perm->action }}
                                    </code>
                                </td>
                                <td style="font-size:12px;color:#64748b;">{{ $perm->description }}</td>
                                <td class="text-center">
                                    <input type="checkbox"
                                        class="perm-check {{ $fromRole ? 'from-role' : 'from-user' }}"
                                        name="permissions[]"
                                        value="{{ $perm->slug }}"
                                        data-slug="{{ $perm->slug }}"
                                        data-module="{{ $module }}"
                                        {{ $isGranted ? 'checked' : '' }}>
                                </td>
                                <td class="text-center">
                                    <span style="font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;
                                        background:{{ $fromRole ? '#eff6ff' : '#f0fdf4' }};
                                        color:{{ $fromRole ? '#3b82f6' : '#16a34a' }};">
                                        {{ $fromRole ? 'ROLE' : 'USER' }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="card-footer bg-white d-flex justify-content-between align-items-center py-3">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        User overrides take precedence over role permissions. Super Admin always has full access.
                    </small>
                    <button type="button" class="btn btn-primary" onclick="savePermissions()" id="saveBtn">
                        <i class="fas fa-save me-2"></i>Save Permissions
                    </button>
                </div>
            </div>
        </form>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script>
const rolePermissions = @json($rolePermissions ?? []);
const allRoles = @json($roles->map(fn($r) => ['id' => $r->id, 'permissions' => $r->permissions->pluck('slug')]));

function selectAll(state) {
    document.querySelectorAll('.perm-check').forEach(cb => {
        cb.checked = state;
        updateSource(cb);
    });
}

function toggleModule(module, state) {
    document.querySelectorAll(`input[data-module="${module}"]`).forEach(cb => {
        cb.checked = state;
        updateSource(cb);
    });
}

function updateSource(cb) {
    const fromRole = rolePermissions.includes(cb.dataset.slug);
    cb.className = `perm-check ${fromRole ? 'from-role' : 'from-user'}`;
}

function applyRolePreset(roleId) {
    const role = allRoles.find(r => r.id == roleId);
    if (!role) return;
    document.querySelectorAll('.perm-check').forEach(cb => {
        cb.checked = role.permissions.includes(cb.dataset.slug);
        updateSource(cb);
    });
    toastr.info('Role preset applied. Click "Save Changes" to confirm.');
}

function savePermissions() {
    const btn     = document.getElementById('saveBtn');
    const checked = [...document.querySelectorAll('.perm-check:checked')].map(cb => cb.value);

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';

    fetch('{{ route("admin.users.update-permissions", $selectedUser ?? 0) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ permissions: checked })
    })
    .then(r => r.json())
    .then(d => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-save me-2"></i>Save Permissions';
        if (d.success) {
            toastr.success(d.message);
        } else {
            toastr.error(d.message || 'Failed to save permissions.');
        }
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-save me-2"></i>Save Permissions';
        toastr.error('Network error. Please try again.');
    });
}
</script>
@endpush