@extends('admin.layouts.main')
@section('title','Manajemen Hak Akses & Role')

@push('styles')
<style>
.perm-group { background:var(--white);border:1px solid var(--c-200);border-radius:14px;overflow:hidden;margin-bottom:14px; }
.pg-head { padding:14px 18px;background:var(--c-50);border-bottom:1px solid var(--c-200);display:flex;align-items:center;justify-content:space-between; }
.pg-title { font-size:13px;font-weight:700;color:var(--c-900);display:flex;align-items:center;gap:7px; }
.pg-count { font-size:11px;font-weight:700;background:var(--c-blue-xs,#eff6ff);color:var(--c-blue,#2563eb);border:1px solid var(--c-blue-sm,#dbeafe);padding:2px 8px;border-radius:100px; }
.pg-body { padding:12px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px; }
.perm-toggle { display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--c-50);border:1px solid var(--c-200);border-radius:9px;cursor:pointer;transition:all .18s; }
.perm-toggle:hover { border-color:var(--c-blue,#2563eb);background:#fff; }
.perm-toggle.checked { background:#eff6ff;border-color:#bfdbfe; }
.perm-toggle input { accent-color:#2563eb;width:16px;height:16px;cursor:pointer;flex-shrink:0; }
.perm-label { font-size:13px;color:var(--c-700);font-weight:500;line-height:1.2;cursor:pointer; }
.perm-toggle.checked .perm-label { color:var(--c-900);font-weight:600; }
.perm-toggle.disabled { opacity:.45;cursor:not-allowed; }
.role-tab-pill { display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;border:1.5px solid var(--c-200);background:var(--white);color:var(--c-700);transition:all .18s;text-decoration:none; }
.role-tab-pill.active { background:var(--c-blue,#2563eb);border-color:var(--c-blue);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.3); }
.select-all-btn { font-size:12px;font-weight:600;color:var(--c-blue);background:none;border:none;cursor:pointer;padding:2px 6px; }
.select-all-btn:hover { text-decoration:underline; }
</style>
@endpush

@section('content')
<div class="page-header d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div>
        <h1 class="page-title">Hak Akses & Role</h1>
        <p class="page-sub">Atur permission untuk setiap role di sistem</p>
    </div>
    <a href="{{ route('admin.users.index') }}" class="btn-adm btn-outline-adm">
        <i class="fas fa-arrow-left"></i> Kembali
    </a>
</div>

{{-- Role Selector --}}
<div class="d-flex gap-2 mb-4 flex-wrap">
    @foreach($roles as $key => $label)
    <a href="{{ route('admin.users.permissions', ['role' => $key]) }}"
       class="role-tab-pill {{ $role === $key ? 'active' : '' }}">
        <i class="fas fa-{{ $key === 'admin' ? 'user-shield' : 'user-tie' }}"></i>
        {{ $label }}
        @if($key === $role)
        <span style="background:rgba(255,255,255,.2);font-size:10px;padding:1px 6px;border-radius:100px;">
            {{ $key === 'admin' ? 'Semua' : count($rolePerms) }} izin
        </span>
        @endif
    </a>
    @endforeach
</div>

{{-- Info banner --}}
@if($role === 'admin')
<div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:16px 18px;margin-bottom:24px;display:flex;align-items:center;gap:12px;">
    <i class="fas fa-info-circle" style="color:#2563eb;font-size:1.1rem;flex-shrink:0;"></i>
    <div>
        <div style="font-size:13.5px;font-weight:700;color:#1e3a8a;">Super Admin memiliki semua hak akses</div>
        <div style="font-size:12.5px;color:#3b82f6;margin-top:2px;">Hak akses Admin tidak dapat diubah. Admin selalu memiliki akses ke semua fitur sistem.</div>
    </div>
</div>
@else
<div style="background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:16px 18px;margin-bottom:24px;display:flex;align-items:center;gap:12px;">
    <i class="fas fa-exclamation-triangle" style="color:#d97706;font-size:1.1rem;flex-shrink:0;"></i>
    <div>
        <div style="font-size:13.5px;font-weight:700;color:#92400e;">Perubahan berlaku untuk SEMUA pengguna dengan role "{{ $roles[$role] }}"</div>
        <div style="font-size:12.5px;color:#d97706;margin-top:2px;">Simpan perubahan hanya jika Anda yakin. Hak akses "Lihat Dashboard" selalu aktif dan tidak dapat dinonaktifkan.</div>
    </div>
</div>
@endif

<form action="{{ route('admin.users.save-permissions') }}" method="POST" id="permForm">
    @csrf
    <input type="hidden" name="role" value="{{ $role }}">

    <div class="row g-4">
        <div class="col-lg-8">
            {{-- Permission Groups --}}
            @foreach($allGroups as $groupName => $groupPerms)
            @php
                $groupHasAny = false;
                foreach($groupPerms as $pn) { if(isset($allPermissions[$pn])) { $groupHasAny = true; break; } }
                if(!$groupHasAny) continue;
                $checkedInGroup = 0;
                foreach($groupPerms as $pn) { if(in_array($pn,$rolePerms)) $checkedInGroup++; }
            @endphp
            <div class="perm-group">
                <div class="pg-head">
                    <div class="pg-title">
                        <i class="fas fa-{{ [
                            'Dashboard'=>'chart-pie','Lowongan Kerja'=>'briefcase','Program Pelatihan'=>'book-open',
                            'Blog & Artikel'=>'newspaper','Testimoni'=>'star','Sliders'=>'images',
                            'Tentang Kami'=>'building','Info Kontak'=>'address-book','SEO & Branding'=>'search','Manajemen User'=>'users'
                        ][$groupName] ?? 'folder' }}" style="color:var(--c-blue);font-size:12px;"></i>
                        {{ $groupName }}
                        <span class="pg-count">{{ $checkedInGroup }}/{{ count($groupPerms) }}</span>
                    </div>
                    @if($role !== 'admin')
                    <div>
                        <button type="button" class="select-all-btn" onclick="toggleGroup('{{ $groupName }}', true)">Pilih Semua</button>
                        <button type="button" class="select-all-btn" onclick="toggleGroup('{{ $groupName }}', false)" style="color:var(--c-500);">Hapus</button>
                    </div>
                    @endif
                </div>
                <div class="pg-body">
                    @foreach($groupPerms as $permName)
                    @if(isset($allPermissions[$permName]))
                    @php $pdata = $allPermissions[$permName]; $isChecked = $role === 'admin' || in_array($permName, $rolePerms); $isLocked = $permName === 'view_dashboard'; @endphp
                    <label class="perm-toggle {{ $isChecked ? 'checked' : '' }} {{ ($role === 'admin' || $isLocked) ? 'disabled' : '' }}"
                           data-group="{{ $groupName }}"
                           onclick="{{ ($role !== 'admin' && !$isLocked) ? 'this.classList.toggle(\'checked\')' : '' }}">
                        <input type="checkbox" name="permissions[]" value="{{ $permName }}"
                               {{ $isChecked ? 'checked' : '' }}
                               {{ ($role === 'admin' || $isLocked) ? 'disabled' : '' }}
                               onchange="updateGroupCount('{{ $groupName }}')">
                        @if($isLocked)
                            <input type="hidden" name="permissions[]" value="{{ $permName }}">
                        @endif
                        <span class="perm-label">{{ $pdata['label'] }}</span>
                        @if($isLocked)
                        <i class="fas fa-lock" style="font-size:9px;color:var(--c-400);margin-left:auto;flex-shrink:0;"></i>
                        @endif
                    </label>
                    @endif
                    @endforeach
                </div>
            </div>
            @endforeach

            @if($role !== 'admin')
            <div class="d-flex gap-3 mt-2">
                <button type="submit" class="btn-adm btn-primary-adm">
                    <i class="fas fa-save"></i> Simpan Hak Akses
                </button>
                <button type="button" onclick="selectAll(true)" class="btn-adm btn-outline-adm">
                    <i class="fas fa-check-double"></i> Pilih Semua
                </button>
                <button type="button" onclick="selectAll(false)" class="btn-adm btn-outline-adm">
                    <i class="fas fa-times"></i> Hapus Semua
                </button>
            </div>
            @endif
        </div>

        {{-- Info Panel --}}
        <div class="col-lg-4">
            <div class="adm-card">
                <div class="adm-card-header">
                    <div class="adm-card-title"><i class="fas fa-info-circle"></i> Ringkasan Akses</div>
                </div>
                <div class="adm-card-body" style="padding:0;">
                    @foreach($allGroups as $gName => $gPerms)
                    @php
                        $total = 0; $active = 0;
                        foreach($gPerms as $pn) { if(isset($allPermissions[$pn])) { $total++; if($role==='admin'||in_array($pn,$rolePerms)) $active++; } }
                        if(!$total) continue;
                    @endphp
                    <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--c-100);">
                        <span style="font-size:13px;color:var(--c-700);">{{ $gName }}</span>
                        <div style="display:flex;align-items:center;gap:8px;">
                            <div style="width:60px;height:5px;background:var(--c-200);border-radius:100px;overflow:hidden;">
                                <div style="height:100%;background:var(--c-blue);width:{{ $total > 0 ? ($active/$total)*100 : 0 }}%;border-radius:100px;"></div>
                            </div>
                            <span style="font-size:11px;font-weight:700;color:var(--c-500);">{{ $active }}/{{ $total }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Role comparison --}}
            <div class="adm-card mt-3">
                <div class="adm-card-header">
                    <div class="adm-card-title"><i class="fas fa-balance-scale"></i> Perbandingan Role</div>
                </div>
                <div class="adm-card-body" style="padding:16px;">
                    @foreach($roles as $rKey => $rLabel)
                    @php $rPerms = $rKey === 'admin' ? array_keys($allPermissions) : \App\Models\RolePermission::getPermissionsForRole($rKey); @endphp
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <i class="fas fa-{{ $rKey === 'admin' ? 'user-shield' : 'user-tie' }}" style="color:{{ $rKey==='admin' ? '#2563eb' : '#0d9488' }};font-size:13px;"></i>
                            <span style="font-size:13px;font-weight:600;color:var(--c-900);">{{ $rLabel }}</span>
                        </div>
                        <span class="abadge {{ $rKey === 'admin' ? 'abadge-blue' : 'abadge-green' }}" style="font-size:10px;">
                            {{ count($rPerms) }} izin
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
function toggleGroup(groupName, check) {
    document.querySelectorAll('[data-group="' + groupName + '"] input[type="checkbox"]:not([disabled])').forEach(cb => {
        cb.checked = check;
        const label = cb.closest('.perm-toggle');
        if (label) label.classList.toggle('checked', check);
    });
    updateGroupCount(groupName);
}

function selectAll(check) {
    document.querySelectorAll('input[name="permissions[]"]:not([disabled])').forEach(cb => {
        cb.checked = check;
        const label = cb.closest('.perm-toggle');
        if (label) label.classList.toggle('checked', check);
    });
}

function updateGroupCount(groupName) {
    const group = document.querySelector('.perm-group [data-group="' + groupName + '"]')?.closest('.perm-group');
    if (!group) return;
    const total   = group.querySelectorAll('.perm-toggle').length;
    const checked = group.querySelectorAll('input[type="checkbox"]:checked').length;
    const counter = group.querySelector('.pg-count');
    if (counter) counter.textContent = checked + '/' + total;
}
</script>
@endpush