{{-- resources/views/roles/assign-permissions.blade.php --}}
@extends('layouts.app')
@section('title', 'Assign Permissions')

@push('styles')
<style>
    .perm-wrap { --accent:#3aa0ff; }
    .perm-toolbar { position: sticky; top: 0; z-index: 20; background:#fff; padding:.85rem 1rem;
        border:1px solid #e6e9ef; border-radius:14px; box-shadow:0 2px 10px rgba(15,23,42,.05); }
    .perm-group { border:1px solid #e6e9ef; border-radius:14px; overflow:hidden; margin-bottom:1.25rem; box-shadow:0 2px 10px rgba(15,23,42,.05); }
    .perm-group > .pg-head { display:flex; align-items:center; gap:.65rem; padding:.8rem 1rem; cursor:pointer;
        color:#fff; font-weight:700; letter-spacing:.3px; }
    .pg-prison { background:linear-gradient(135deg,#1e3a8a,#2563eb); }
    .pg-probation { background:linear-gradient(135deg,#065f46,#059669); }
    .pg-independent { background:linear-gradient(135deg,#7c2d12,#ea580c); }
    .pg-head .pg-count { margin-left:auto; background:rgba(255,255,255,.22); padding:.1rem .6rem; border-radius:20px; font-size:.8rem; font-weight:600; }
    .pg-head .chev { transition:transform .25s; }
    .perm-group.collapsed .pg-body { display:none; }
    .perm-group.collapsed .chev { transform:rotate(-90deg); }
    .perm-table { width:100%; border-collapse:separate; border-spacing:0; }
    .perm-table thead th { position:sticky; top:0; background:#f7f9fc; font-size:.72rem; text-transform:uppercase;
        letter-spacing:.5px; color:#64748b; font-weight:700; padding:.6rem .4rem; text-align:center; border-bottom:1px solid #e6e9ef; }
    .perm-table thead th.mod { text-align:left; padding-left:1rem; min-width:240px; }
    .perm-table tbody td { padding:.55rem .4rem; text-align:center; border-bottom:1px solid #f0f2f6; }
    .perm-table tbody tr:hover { background:#f9fbff; }
    .perm-table td.mod { text-align:left; padding-left:1rem; }
    .perm-table td.mod .ml { font-weight:600; color:#1f2937; }
    .perm-table td.mod .sl { display:block; font-size:.72rem; color:#94a3b8; }
    .perm-table .na { color:#cbd5e1; }
    .form-check-input.big { width:1.15rem; height:1.15rem; cursor:pointer; }
    .col-toggle { font-size:.65rem; color:#94a3b8; cursor:pointer; display:block; margin-top:2px; }
    .col-toggle:hover { color:var(--accent); }
    .save-bar { position:sticky; bottom:0; z-index:30; background:#fff; border-top:1px solid #e6e9ef;
        padding:.8rem 1rem; display:flex; align-items:center; gap:1rem; box-shadow:0 -4px 14px rgba(15,23,42,.06);
        border-radius:14px 14px 0 0; margin-top:1rem; }
    .pill { background:#eef2f8; border-radius:20px; padding:.25rem .8rem; font-weight:600; font-size:.85rem; color:#334155; }
</style>
@endpush

@section('content')
<div class="container-fluid perm-wrap">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="fw-bold mb-0"><i class="fas fa-key me-2 text-primary"></i>Assign Permissions</h2>
            <small class="text-muted">Role: <strong>{{ $role->display_name }}</strong> — tick what this role may do. Children are independent; you don't need to grant a whole group.</small>
        </div>
        <a href="{{ route('roles.show', $role->id) }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left"></i> Back</a>
    </div>

    @if(session('error'))<div class="alert alert-danger">{{ session('error') }}</div>@endif

    @php
        // Build a name => id and id-set for current selection, then render from the catalogue (ordered).
        $idByName = $permissions->pluck('id', 'name');           // 'prison.borstal.view' => 12
        $selected = collect($rolePermissions ?? [])->flip();      // id => true
        $actions  = config('permissions.actions');
        $groups   = config('permissions.groups');
        $groupClass = ['prison'=>'pg-prison','probation'=>'pg-probation','independent'=>'pg-independent'];
    @endphp

    <form method="POST" action="{{ route('roles.update-permissions', $role->id) }}" id="permForm">
        @csrf

        <div class="perm-toolbar mb-3 d-flex flex-wrap align-items-center gap-2">
            <div class="input-group" style="max-width:320px;">
                <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                <input type="text" id="permSearch" class="form-control" placeholder="Filter modules…">
            </div>
            <span class="pill"><i class="fas fa-check-circle text-success me-1"></i><span id="selCount">0</span> selected</span>
            <div class="ms-auto d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="expandAll"><i class="fas fa-angles-down"></i> Expand</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="collapseAll"><i class="fas fa-angles-up"></i> Collapse</button>
                <button type="button" class="btn btn-sm btn-outline-danger" id="clearAll"><i class="fas fa-eraser"></i> Clear all</button>
            </div>
        </div>

        @foreach(['prison','probation','independent'] as $gk)
            @php $group = $groups[$gk]; @endphp
            <div class="perm-group" data-group="{{ $gk }}">
                <div class="pg-head {{ $groupClass[$gk] }}" data-toggle-group>
                    <i class="fas {{ $group['icon'] }}"></i>
                    <span>{{ $group['label'] }}</span>
                    <span class="form-check form-switch ms-2 mb-0" onclick="event.stopPropagation()">
                        <input class="form-check-input big" type="checkbox" data-group-all title="Select all in {{ $group['label'] }}">
                    </span>
                    <span class="pg-count"><span class="g-sel">0</span> / {{ collect($group['modules'])->sum(fn($m)=>count($m['actions'])) }}</span>
                    <i class="fas fa-chevron-down chev"></i>
                </div>
                <div class="pg-body table-responsive">
                    <table class="perm-table">
                        <thead>
                            <tr>
                                <th class="mod">Module</th>
                                @foreach($actions as $aKey => $aLabel)
                                    <th>{{ $aLabel }}<span class="col-toggle" data-col-toggle="{{ $aKey }}">all</span></th>
                                @endforeach
                                <th>All</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($group['modules'] as $m)
                                <tr data-module-row data-label="{{ \Illuminate\Support\Str::lower($m['label']) }}">
                                    <td class="mod">
                                        <span class="ml">{{ $m['label'] }}</span>
                                        <span class="sl">{{ $m['sub'] ?? $group['label'] }}</span>
                                    </td>
                                    @foreach($actions as $aKey => $aLabel)
                                        @php $pname = $m['key'].'.'.$aKey; $pid = $idByName[$pname] ?? null; @endphp
                                        <td>
                                            @if(in_array($aKey, $m['actions']) && $pid)
                                                <input class="form-check-input big perm-cb" type="checkbox"
                                                       name="permissions[]" value="{{ $pid }}"
                                                       data-col="{{ $aKey }}"
                                                       {{ isset($selected[$pid]) ? 'checked' : '' }}>
                                            @else
                                                <span class="na">—</span>
                                            @endif
                                        </td>
                                    @endforeach
                                    <td><input class="form-check-input big" type="checkbox" data-row-all title="Select all for {{ $m['label'] }}"></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endforeach

        <div class="save-bar">
            <i class="fas fa-shield-halved text-primary"></i>
            <span>Saving updates <strong>{{ $role->display_name }}</strong>’s access.</span>
            <span class="pill ms-2"><span id="selCount2">0</span> permissions</span>
            <div class="ms-auto d-flex gap-2">
                <a href="{{ route('roles.show', $role->id) }}" class="btn btn-outline-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i> Save Permissions</button>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
(function () {
    const form = document.getElementById('permForm');
    const boxes = () => Array.from(form.querySelectorAll('.perm-cb'));

    function refreshCounts() {
        const total = boxes().filter(b => b.checked).length;
        document.getElementById('selCount').textContent = total;
        document.getElementById('selCount2').textContent = total;
        form.querySelectorAll('.perm-group').forEach(g => {
            const sel = g.querySelectorAll('.perm-cb:checked').length;
            const all = g.querySelectorAll('.perm-cb').length;
            const lbl = g.querySelector('.g-sel'); if (lbl) lbl.textContent = sel;
            const ga = g.querySelector('[data-group-all]');
            if (ga) { ga.checked = sel === all && all > 0; ga.indeterminate = sel > 0 && sel < all; }
        });
        form.querySelectorAll('[data-module-row]').forEach(r => {
            const cbs = r.querySelectorAll('.perm-cb');
            const sel = r.querySelectorAll('.perm-cb:checked').length;
            const ra = r.querySelector('[data-row-all]');
            if (ra) { ra.checked = cbs.length>0 && sel===cbs.length; ra.indeterminate = sel>0 && sel<cbs.length; }
        });
    }

    // group select-all
    form.querySelectorAll('[data-group-all]').forEach(cb => cb.addEventListener('change', e => {
        e.target.closest('.perm-group').querySelectorAll('.perm-cb').forEach(b => b.checked = e.target.checked);
        refreshCounts();
    }));
    // row select-all
    form.querySelectorAll('[data-row-all]').forEach(cb => cb.addEventListener('change', e => {
        e.target.closest('tr').querySelectorAll('.perm-cb').forEach(b => b.checked = e.target.checked);
        refreshCounts();
    }));
    // column select-all (within a group)
    form.querySelectorAll('[data-col-toggle]').forEach(t => t.addEventListener('click', e => {
        const col = t.getAttribute('data-col-toggle');
        const grp = t.closest('.perm-group');
        const cbs = Array.from(grp.querySelectorAll('.perm-cb[data-col="'+col+'"]'));
        const allOn = cbs.every(b => b.checked);
        cbs.forEach(b => b.checked = !allOn);
        refreshCounts();
    }));
    // any checkbox change
    form.addEventListener('change', e => { if (e.target.classList.contains('perm-cb')) refreshCounts(); });

    // collapse / expand
    document.querySelectorAll('[data-toggle-group]').forEach(h => h.addEventListener('click', () =>
        h.closest('.perm-group').classList.toggle('collapsed')));
    document.getElementById('expandAll').onclick = () =>
        document.querySelectorAll('.perm-group').forEach(g => g.classList.remove('collapsed'));
    document.getElementById('collapseAll').onclick = () =>
        document.querySelectorAll('.perm-group').forEach(g => g.classList.add('collapsed'));
    document.getElementById('clearAll').onclick = () => { boxes().forEach(b => b.checked = false); refreshCounts(); };

    // search filter
    document.getElementById('permSearch').addEventListener('input', e => {
        const q = e.target.value.trim().toLowerCase();
        document.querySelectorAll('[data-module-row]').forEach(r =>
            r.style.display = !q || r.getAttribute('data-label').includes(q) ? '' : 'none');
    });

    refreshCounts();
})();
</script>
@endpush
@endsection