@extends('backend.layout.app')

@section('content')
    @push('css')
        <style>
            :root {
                --primary-light: #E8F0FF;
                --primary: #3F73EB;
            }

            label {
                font-size: 16px !important
            }

            /* Custom Checkbox Styling */
            input[type="checkbox"] {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                width: 18px !important;
                height: 18px !important;
                border: 1px solid #ccc;
                outline: none;
                cursor: pointer;
                position: relative;
                border-radius: 4px;
            }

            input[type="checkbox"]:checked {
                background-color: var(--primary);
                border-color: var(--primary);
            }

            .search-icon {
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 18px;
                color: #64748b;
            }

            /* Role Button Styling (Left Side) */
            .roleBtn {
                background-color: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                font-size: 16px;
                font-weight: 500;
                transition: all 0.2s ease;
                text-align: left;
                margin-bottom: 8px;
            }

            .roleBtn:hover {
                background-color: #f1f5f9;
                border-color: #cbd5e1;
            }

            .roleBtn.active {
                background-color: var(--primary-light);
                border-color: var(--primary);
            }

            .linkBtn {
                color: #334155;
                text-decoration: none;
                display: block;
                padding: 12px 15px;
            }

            .roleBtn.active .linkBtn {
                color: var(--primary);
                font-weight: 600;
            }

            /* Right Side */
            .permission-container {
                background: #F8FAFC;
                border: 1px solid #F1F5F9;
                border-radius: 8px;
            }

            .colRight {
                border-left: 1px solid #E2E8F0;
            }

            /* ── Sticky right header ── */
            .perm-sticky-header {
                position: sticky;
                top: 60px;
                z-index: 10;
                background: #fff;
                border-bottom: 1px solid #E2E8F0;
                padding: 10px 12px;
                border-radius: 8px 8px 0 0;
            }

            /* ── Sticky bottom update bar ── */
            .perm-sticky-footer {
                position: sticky;
                bottom: 0;
                z-index: 20;
                background: #fff;
                border-top: 2px solid #E2E8F0;
                padding: 12px;
                border-radius: 0 0 8px 8px;
                width:100%;
                margin:0 auto;
            }

            @media (max-width: 768px) {
                .colRight {
                    border-left: none;
                }
            }
        </style>
    @endpush

    <div class="page-content">
        <div class="container-fluid">
            <h4 class="mb-3">{{ __('Roles & Permissions') }}</h4>

            <div class="card rounded-12 border-0 shadow-md p-2">
                <div class="card-body">
                    <div class="row">

                        {{-- ════════════════════════════════════
                             LEFT: Roles List
                        ════════════════════════════════════ --}}
                        <div class="col-lg-6 h-100" style="position: sticky; top: 78px;">
                            <h4>{{ __('Roles') }}</h4>

                            <div class="d-flex align-items-center flex-wrap gap-3 justify-content-between mt-3">
                                <div class="position-relative flex-grow-1">
                                    <input type="text" class="form-control py-2.5"
                                           placeholder="Search by role name"
                                           id="search" onkeyup="filterRoles()">
                                    <span class="search-icon">
                                        <i class="ti ti-search"></i>
                                    </span>
                                </div>
                            </div>

                            <div class="mt-3 d-flex flex-column gap-2">
                                @foreach ($roles as $roleItem)
                                    <div class="roleBtn {{ isset($activeRole) && $roleItem->name == $activeRole ? 'active' : '' }}"
                                         data-name="{{ $roleItem->name }}">
                                        <a href="{{ route('admin.role.permission.assign', $roleItem->id) }}" class="linkBtn">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span>{{ ucwords(str_replace('_', ' ', $roleItem->name)) }}</span>
                                                <span class="badge {{ $roleItem->name == 'super_admin' ? 'bg-primary' : 'bg-secondary' }} rounded-pill small">
                                                    {{ $roleItem->name == 'super_admin' ? 'All' : $roleItem->permissions->count() }}
                                                </span>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        {{-- end col-left --}}


                        {{-- ════════════════════════════════════
                             RIGHT: Permissions
                        ════════════════════════════════════ --}}
                        <div class="col-lg-6 colRight d-flex flex-column">
                            <h4 class="mb-0">{{ __('Permissions') }}</h4>

                            <div class="mt-3 permission-container flex-grow-1">
                                @if ($selectedRole)

                                    <form action="{{ route('admin.role.permission.update', $selectedRole->id) }}"
                                          method="POST" id="permissionForm">
                                        @csrf

                                        {{-- ── Sticky Header: role name + search ── --}}
                                        <div class="perm-sticky-header">
                                            <div class="bg-light px-3 py-2 h4 text-capitalize m-0 d-flex justify-content-between align-items-center" style="border-radius: 8px 8px 0 0;">
                                                <div class="d-flex align-items-center gap-3">
                                                    {{-- Select All checkbox + count + clear --}}
                                                    <input type="checkbox" id="checkAll"
                                                           class="form-check-input m-0"
                                                           style="width: 20px; height: 20px"
                                                           {{ $activeRole == 'super_admin' ? 'checked disabled' : '' }}>
                                                    <span class="fw-bold" style="font-size:16px">
                                                        {{ ucwords(str_replace('_', ' ', $selectedRole->name)) }}
                                                    </span>
                                                    <span class="text-muted" style="font-size:13px; font-weight:400">
                                                        (<span id="showTotalPermission">{{ $selectedRole->name == 'super_admin' ? 'All' : $selectedRole->permissions->count() }}</span> selected)
                                                    </span>
                                                    @if($activeRole != 'super_admin')
                                                    <span id="uncheckAll"
                                                          class="text-danger"
                                                          style="font-size:13px; font-weight:400; cursor:pointer; text-decoration:underline">
                                                        Clear
                                                    </span>
                                                    @endif
                                                </div>

                                                {{-- Search input --}}
                                                <div class="position-relative" style="width: 250px;">
                                                    <input type="text"
                                                           class="form-control form-control-sm py-2"
                                                           id="searchPerm"
                                                           placeholder="Search permissions..."
                                                           onkeyup="filterPermissions()">
                                                    <i class="ti ti-search position-absolute"
                                                       style="top: 50%; right: 10px; transform: translateY(-50%); color: #999; pointer-events:none;"></i>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- end sticky header --}}


                                        {{-- ── Permission Groups ── --}}
                                        <div class="p-3 d-flex flex-column gap-3" id="permissionBody">

                                            @foreach ($allPermissionArray as $groupLabel => $groupPermissions)
                                                <div class="border rounded-3 overflow-hidden perm-group"
                                                     data-group="{{ strtolower($groupLabel) }}">

                                                    {{-- Group Header --}}
                                                    <div class="bg-light px-3 py-2 d-flex align-items-center justify-content-between">
                                                        <span class="h6 text-capitalize m-0 fw-bold">
                                                            {{ $groupLabel }}
                                                        </span>
                                                        <span class="badge bg-secondary rounded-pill small">
                                                            {{ count($groupPermissions) }}
                                                        </span>
                                                    </div>

                                                    {{-- Permission Items --}}
                                                    <div class="p-3 bg-white d-flex align-items-center flex-wrap gap-3">
                                                        @foreach ($groupPermissions as $permKey => $permLabel)
                                                            <div class="d-flex align-items-center gap-2 perm-item"
                                                                 data-label="{{ strtolower($permLabel) }} {{ strtolower($permKey) }}">
                                                                <input type="checkbox"
                                                                       id="perm_{{ str_replace(['.', '_'], '-', $permKey) }}"
                                                                       name="permissions[]"
                                                                       value="{{ $permKey }}"
                                                                       class="form-check-input permission-checkbox m-0"
                                                                       style="width: 18px; height: 18px"
                                                                       {{ in_array($permKey, $permissions) ? 'checked' : '' }}
                                                                       {{ $activeRole == 'super_admin' ? 'disabled' : '' }}
                                                                       onclick="countSelectedPermissions()">
                                                                <label for="perm_{{ str_replace(['.', '_'], '-', $permKey) }}" class="m-0">
                                                                    {{ $permLabel }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>

                                                </div>
                                            @endforeach

                                            {{-- No result msg --}}
                                            <div id="noPermResult" class="text-center text-muted py-3" style="display:none">
                                                <i class="ti ti-search-off" style="font-size:32px"></i>
                                                <p class="mb-0">No permissions found</p>
                                            </div>

                                        </div>
                                        {{-- end permission groups --}}


                                        {{-- ── Sticky Bottom: Save Button ── --}}
                                        <div class="perm-sticky-footer">
                                            @if($activeRole != 'super_admin')
                                                <div class="d-flex align-items-center gap-3">
                                                    <button type="submit" class="btn btn-primary px-4">
                                                        <i class="ti ti-device-floppy me-1"></i>
                                                        {{ __('Save Permissions') }}
                                                    </button>
                                                    <small class="text-muted">
                                                        <span id="showTotalPermission2">{{ $selectedRole->permissions->count() }}</span> permissions selected
                                                    </small>
                                                </div>
                                            @else
                                                <div class="alert alert-info mb-0 py-2">
                                                    <i class="ti ti-shield-check me-1"></i>
                                                    Super Admin has all permissions and cannot be modified.
                                                </div>
                                            @endif
                                        </div>
                                        {{-- end sticky footer --}}

                                    </form>

                                @else
                                    <div class="d-flex align-items-center justify-content-center flex-column h-100 py-5">
                                        <div class="fs-1 text-secondary">
                                            <i class="ti ti-user-off" style="font-size: 60px"></i>
                                        </div>
                                        <span class="text-capitalize fz-22 fst-italic">
                                     Select a Role to View Permissions 
                                        </span>
                                    </div>
                                @endif
                            </div>
                            {{-- end permission-container --}}

                        </div>
                        {{-- end col-right --}}

                    </div>
                </div>
            </div>

        </div>
    </div>

    @push('js')
    <script>
        // ── Filter Roles (left side) ──────────────────────────
        function filterRoles() {
            const q = document.getElementById('search').value.toLowerCase();
            document.querySelectorAll('.roleBtn').forEach(btn => {
                const name = btn.getAttribute('data-name').toLowerCase();
                btn.style.display = name.includes(q) ? '' : 'none';
            });
        }

        // ── Filter & Highlight Permissions ───────────────────
        function filterPermissions() {
            const q = (document.getElementById('searchPerm')?.value || '').trim().toLowerCase();
            let anyVisible = false;

            document.querySelectorAll('.perm-group').forEach(group => {
                const groupLabel = group.getAttribute('data-group') || '';
                let groupHasMatch = false;

                group.querySelectorAll('.perm-item').forEach(item => {
                    const rawLabel  = item.getAttribute('data-label') || '';
                    const labelEl   = item.querySelector('label');
                    const origText  = labelEl?.getAttribute('data-orig') || labelEl?.innerText || '';

                    // Store original text once
                    if (labelEl && !labelEl.getAttribute('data-orig')) {
                        labelEl.setAttribute('data-orig', labelEl.innerText);
                    }

                    const match = q === '' || rawLabel.includes(q) || groupLabel.includes(q);
                    item.style.display = match ? '' : 'none';
                    if (match) groupHasMatch = true;

                    // Highlight matching text inside label
                    if (labelEl) {
                        const original = labelEl.getAttribute('data-orig') || origText;
                        if (q && match) {
                            const regex = new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
                            labelEl.innerHTML = original.replace(regex,
                                '<mark style="background:#FEF08A;padding:0 2px;border-radius:3px;font-weight:600;">$1</mark>'
                            );
                        } else {
                            labelEl.innerHTML = original; // restore plain text
                        }
                    }
                });

                group.style.display = groupHasMatch ? '' : 'none';
                if (groupHasMatch) anyVisible = true;
            });

            const noResult = document.getElementById('noPermResult');
            if (noResult) noResult.style.display = (anyVisible || q === '') ? 'none' : '';
        }

        // ── Count selected ────────────────────────────────────
        function countSelectedPermissions() {
            const count = document.querySelectorAll('.permission-checkbox:checked:not([disabled])').length;
            ['showTotalPermission', 'showTotalPermission2'].forEach(id => {
                const el = document.getElementById(id);
                if (el) el.innerText = count;
            });
        }

        // ── Check All ─────────────────────────────────────────
        document.getElementById('checkAll')?.addEventListener('change', function () {
            document.querySelectorAll('.permission-checkbox:not([disabled])').forEach(cb => {
                cb.checked = this.checked;
            });
            countSelectedPermissions();
        });

        // ── Clear All ─────────────────────────────────────────
        document.getElementById('uncheckAll')?.addEventListener('click', function () {
            document.querySelectorAll('.permission-checkbox:not([disabled])').forEach(cb => cb.checked = false);
            const checkAll = document.getElementById('checkAll');
            if (checkAll) checkAll.checked = false;
            countSelectedPermissions();
        });

        // ── Init count on page load ───────────────────────────
        countSelectedPermissions();
    </script>
    @endpush
@endsection