@extends('layouts.app', ['title' => 'Rollen & Berechtigungen'])

@section('content')
@php
$roleColors = [
    'sysadmin'      => '#1e293b',
    'hrm'           => '#ec4899',
    'fms'           => '#f97316',
    'mgt'           => '#f59e0b',
    'acc'           => '#22c55e',
    'dms'           => '#06b6d4',
    'crm'           => '#8b5cf6',
    'srm'           => '#14b8a6',
    'access_budget' => '#ef4444',
    'server_admin'  => '#94a3b8',
];
@endphp

<style>
.role-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;color:#fff;letter-spacing:.3px}
.role-toggle{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:600;cursor:pointer;border:2px solid transparent;transition:all .18s ease;line-height:1.3}
.role-toggle.on{color:#fff}
.role-toggle.off{background:#f8fafc!important;border-color:#e2e8f0!important;color:#94a3b8!important}
.role-toggle.off .dot{background:#e2e8f0!important}
.role-toggle.saving{opacity:.5;pointer-events:none}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.user-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#fff}
.card-section{border:0;box-shadow:0 1px 4px rgba(0,0,0,.08);border-radius:12px;overflow:hidden}
.section-header{background:#fff;border-bottom:1px solid #f1f5f9;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.section-title{font-size:.82rem;font-weight:700;color:#374151;letter-spacing:.3px;text-transform:uppercase}
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast-msg{background:#1e293b;color:#fff;padding:8px 18px;border-radius:8px;font-size:.8rem;opacity:0;transform:translateY(10px);transition:all .25s ease;pointer-events:none}
.toast-msg.show{opacity:1;transform:translateY(0)}
.toast-msg.error{background:#ef4444}
</style>

<div class="container-fluid px-4 py-3" style="max-width:1200px;">

    <div class="d-flex align-items-center mb-4">
        <div>
            <h5 class="mb-0 fw-bold"><i class="bi bi-shield-lock me-2 text-secondary"></i>Rollen &amp; Berechtigungen</h5>
            <div class="text-muted" style="font-size:.78rem;">Systemrollen verwalten und Benutzern zuweisen</div>
        </div>
    </div>

    @if(session('msg'))
    <div class="alert alert-success alert-dismissible py-2 fade show mb-3" style="border-radius:10px;border:0;background:#f0fdf4;">
        <i class="bi bi-check-circle-fill me-1 text-success"></i> {{ session('msg') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif
    @if($errors->any())
    <div class="alert alert-danger alert-dismissible py-2 fade show mb-3" style="border-radius:10px;border:0;">
        <i class="bi bi-exclamation-triangle me-1"></i> {{ $errors->first() }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    {{-- ══════════════════════════════════════════════════════════════════════
         ROLLEN-TABELLE
    ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card card-section mb-4">
        <div class="section-header">
            <span class="section-title"><i class="bi bi-tags me-1"></i>Rollen</span>
            <button class="btn btn-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#modalNewRole"
                    style="font-size:.78rem;">
                <i class="bi bi-plus-lg me-1"></i>Neue Rolle
            </button>
        </div>
        <div class="card-body p-0">
            <table class="table table-sm align-middle mb-0" style="font-size:.82rem;">
                <thead style="background:#f8fafc;">
                    <tr>
                        <th class="ps-4" style="width:150px;color:#64748b;font-weight:600;">Rolle</th>
                        <th style="color:#64748b;font-weight:600;">Beschreibung</th>
                        <th class="text-center" style="width:90px;color:#64748b;font-weight:600;">Benutzer</th>
                        <th style="width:90px;"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($roles as $role)
                    @php $color = $roleColors[$role->name] ?? '#64748b'; @endphp
                    <tr style="border-bottom:1px solid #f1f5f9;">
                        <td class="ps-4">
                            <span class="role-badge" style="background:{{ $color }}">{{ $role->name }}</span>
                        </td>
                        <td class="text-muted">{{ $role->description ?? '–' }}</td>
                        <td class="text-center">
                            <span class="badge rounded-pill" style="background:#f1f5f9;color:#64748b;font-weight:600;">
                                {{ $role->users_count }}
                            </span>
                        </td>
                        <td class="pe-3">
                            <div class="d-flex gap-1 justify-content-end">
                                <button class="btn btn-sm btn-outline-secondary rounded-circle p-1 border-0"
                                        style="width:28px;height:28px;"
                                        title="Bearbeiten"
                                        onclick="openEditRole('{{ $role->name }}', '{{ addslashes($role->description ?? '') }}')">
                                    <i class="bi bi-pencil" style="font-size:.7rem;"></i>
                                </button>
                                <form method="POST" action="{{ route('system.permissions.role.delete', $role->name) }}"
                                      onsubmit="return confirm('Rolle \'{{ $role->name }}\' löschen?\nAlle Zuweisungen gehen verloren.')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle p-1 border-0"
                                            style="width:28px;height:28px;" title="Löschen">
                                        <i class="bi bi-trash3" style="font-size:.7rem;"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════
         BENUTZER-ZUWEISUNG (Toggle-Buttons)
    ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card card-section">
        <div class="section-header">
            <span class="section-title"><i class="bi bi-person-check me-1"></i>Benutzer-Zuweisung</span>
            <span class="text-muted" style="font-size:.74rem;">Änderungen werden automatisch gespeichert</span>
        </div>
        <div class="card-body p-0">
            @foreach($users as $user)
            @php
                $emp    = $user->get_employee;
                $initials = strtoupper(mb_substr($emp->first_name, 0, 1) . mb_substr($emp->last_name, 0, 1));
                $avatarColor = $roleColors['sysadmin'];
                $avatarColors = ['#6366f1','#ec4899','#f97316','#22c55e','#06b6d4','#8b5cf6','#14b8a6','#f59e0b'];
                $avatarColor  = $avatarColors[$user->user_id % count($avatarColors)];
            @endphp
            <div class="d-flex align-items-center gap-3 px-4 py-3" style="border-bottom:1px solid #f8fafc;">
                {{-- Avatar --}}
                <div class="user-avatar" style="background:{{ $avatarColor }}">{{ $initials }}</div>
                {{-- Name --}}
                <div style="min-width:160px;">
                    <div class="fw-semibold" style="font-size:.84rem;">{{ $emp->last_name }}, {{ $emp->first_name }}</div>
                    <div class="text-muted" style="font-size:.72rem;">{{ $user->username }}</div>
                </div>
                {{-- Toggle-Buttons --}}
                <div class="d-flex flex-wrap gap-2">
                    @foreach($roles as $role)
                    @php
                        $active = $user->hasRole($role->name);
                        $c = $roleColors[$role->name] ?? '#64748b';
                    @endphp
                    <button type="button"
                            class="role-toggle {{ $active ? 'on' : 'off' }}"
                            style="{{ $active ? "background:{$c};border-color:{$c};" : '' }}"
                            data-user="{{ $user->user_id }}"
                            data-role="{{ $role->name }}"
                            data-color="{{ $c }}"
                            data-active="{{ $active ? '1' : '0' }}"
                            onclick="toggleRole(this)">
                        <span class="dot" style="{{ $active ? "background:rgba(255,255,255,.55);" : '' }}"></span>
                        {{ $role->name }}
                    </button>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
    </div>

</div>

{{-- Toast Container --}}
<div id="toast-container"></div>

{{-- Modal: Neue Rolle --}}
<div class="modal fade" id="modalNewRole" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:400px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius:14px;">
            <form method="POST" action="{{ route('system.permissions.role.create') }}">
                @csrf
                <div class="modal-header border-0 pb-0 pt-4 px-4">
                    <h6 class="modal-title fw-bold">Neue Rolle anlegen</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Rollenname <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control form-control-sm"
                               placeholder="z.B. reporting" pattern="[a-z0-9_\-]+"
                               title="Kleinbuchstaben, Zahlen, _ und -" required>
                        <div class="form-text">Kleinbuchstaben, Zahlen, _ und - erlaubt</div>
                    </div>
                    <div class="mb-1">
                        <label class="form-label small fw-semibold text-muted">Beschreibung</label>
                        <input type="text" name="description" class="form-control form-control-sm"
                               placeholder="Kurze Beschreibung der Rolle" maxlength="255">
                    </div>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0">
                    <button type="button" class="btn btn-light btn-sm rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4">Anlegen</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Rolle bearbeiten --}}
<div class="modal fade" id="modalEditRole" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:400px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius:14px;">
            <form method="POST" id="editRoleForm">
                @csrf @method('PUT')
                <div class="modal-header border-0 pb-0 pt-4 px-4">
                    <h6 class="modal-title fw-bold">Rolle bearbeiten</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Rollenname <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="editRoleName" class="form-control form-control-sm"
                               pattern="[a-z0-9_\-]+" title="Kleinbuchstaben, Zahlen, _ und -" required>
                    </div>
                    <div class="mb-1">
                        <label class="form-label small fw-semibold text-muted">Beschreibung</label>
                        <input type="text" name="description" id="editRoleDesc" class="form-control form-control-sm"
                               maxlength="255">
                    </div>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0">
                    <button type="button" class="btn btn-light btn-sm rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4">Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
(function () {
    const csrf = document.querySelector('meta[name="csrf-token"]').content;

    // ── Toast ──────────────────────────────────────────────────────────────
    function showToast(msg, type = 'ok') {
        const el = document.createElement('div');
        el.className = 'toast-msg' + (type === 'error' ? ' error' : '');
        el.textContent = type === 'ok' ? '✓ ' + msg : '✗ ' + msg;
        document.getElementById('toast-container').appendChild(el);
        requestAnimationFrame(() => { requestAnimationFrame(() => el.classList.add('show')); });
        setTimeout(() => {
            el.classList.remove('show');
            setTimeout(() => el.remove(), 300);
        }, 2200);
    }

    // ── Toggle Role ────────────────────────────────────────────────────────
    window.toggleRole = async function (btn) {
        const userId  = btn.dataset.user;
        const isOn    = btn.dataset.active === '1';
        const willOn  = !isOn;
        const color   = btn.dataset.color;

        // Gather new role list for this user
        const roles = [];
        document.querySelectorAll(`.role-toggle[data-user="${userId}"]`).forEach(b => {
            const active = b === btn ? willOn : b.dataset.active === '1';
            if (active) roles.push(b.dataset.role);
        });

        // Optimistic UI
        applyToggle(btn, willOn, color);
        btn.classList.add('saving');

        try {
            const fd = new FormData();
            fd.append('_token', csrf);
            roles.forEach(r => fd.append('roles[]', r));
            const res = await fetch(`{{ url('system/berechtigungen') }}/${userId}`, {
                method: 'POST', body: fd, headers: { Accept: 'application/json' }
            });
            if (!res.ok) throw new Error();
            btn.dataset.active = willOn ? '1' : '0';
            showToast('Gespeichert');
        } catch {
            applyToggle(btn, isOn, color); // revert
            showToast('Fehler beim Speichern', 'error');
        } finally {
            btn.classList.remove('saving');
        }
    };

    function applyToggle(btn, on, color) {
        btn.classList.toggle('on', on);
        btn.classList.toggle('off', !on);
        btn.style.background    = on ? color : '';
        btn.style.borderColor   = on ? color : '';
        btn.querySelector('.dot').style.background = on ? 'rgba(255,255,255,.55)' : '';
    }

    // ── Edit Role Modal ────────────────────────────────────────────────────
    window.openEditRole = function (name, desc) {
        document.getElementById('editRoleName').value = name;
        document.getElementById('editRoleDesc').value = desc;
        document.getElementById('editRoleForm').action =
            '{{ url("system/berechtigungen/rollen") }}/' + name;
        new bootstrap.Modal(document.getElementById('modalEditRole')).show();
    };
})();
</script>
@endsection