@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'User & Permission > Roles';
                        $page_number = 0;
                    @endphp
                    @include('layouts.table_top')
                </div>

                <div class="col-md-12">
                    <div class="left-card">
                        <div class="table-fixed-head table-responsive" id="items-table">
                            <div class="d-flex align-items-start">

                                {{-- Roles list (left) --}}
                                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                                    aria-orientation="vertical">
                                    @foreach ($items as $key => $role)
                                        <button class="nav-link mb-1 {{ $key === 0 ? 'active' : '' }}"
                                            id="v-pills-{{ $role->id }}-tab" data-bs-toggle="pill"
                                            data-bs-target="#v-pills-{{ $role->id }}" type="button" role="tab"
                                            aria-controls="v-pills-{{ $role->id }}"
                                            aria-selected="{{ $key === 0 ? 'true' : 'false' }}">{{ $role->name }}</button>
                                    @endforeach
                                </div>

                                {{-- Content (right) --}}
                                <div class="tab-content flex-fill" id="v-pills-tabContent">

                                    @foreach ($items as $key => $role)
                                        @php $rolePermNames = $role->permissions->pluck('name')->toArray(); @endphp

                                        <div class="tab-pane fade {{ $key === 0 ? 'show active' : '' }}"
                                            id="v-pills-{{ $role->id }}" role="tabpanel"
                                            aria-labelledby="v-pills-{{ $role->id }}-tab">

                                            {{-- Top bar: Select-all + search (server) + quick filter (client) --}}
                                            <div
                                                class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                                                <div class="form-check">
                                                    <input class="form-check-input select-all-checkbox" type="checkbox"
                                                        id="select-all-{{ $role->id }}">
                                                    <label class="form-check-label ms-1"
                                                        for="select-all-{{ $role->id }}">Select All</label>
                                                </div>

                                                <form method="GET" action="{{ route('role.role_permission') }}"
                                                    class="d-flex">
                                                    <input type="hidden" name="active_role_id"
                                                        value="{{ $role->id }}" />
                                                    <input class="form-control" type="search" name="q"
                                                        placeholder="Search permissions or modules…"
                                                        value="{{ $search ?? '' }}" style="min-width:260px;">
                                                    <button class="btn btn-outline-primary ms-2"
                                                        type="submit">Search</button>
                                                    @if (!empty($search))
                                                        <a class="btn btn-outline-secondary ms-2"
                                                            href="{{ route('role.role_permission') }}">Clear</a>
                                                    @endif
                                                </form>

                                                <input class="form-control" type="text" id="quick-{{ $role->id }}"
                                                    placeholder="Quick filter on page…" style="min-width:220px;">
                                            </div>

                                            <form action="{{ route('role.role_permission_update', $role->id) }}"
                                                method="POST" class="ajax_form_data">
                                                @csrf

                                                {{-- Determine available actions from DB per your fixed $actions order --}}
                                                @php
                                                    /** @var \Illuminate\Support\Collection $grouped  [module => Collection<Permission>] */
                                                    /** @var array $actions */
                                                    // Only show action headers that exist in at least one module
                                                    $existingActions = collect($actions)
                                                        ->filter(function ($act) use ($grouped) {
                                                            foreach ($grouped as $module => $perms) {
                                                                if ($perms->firstWhere('name', $module . '-' . $act)) {
                                                                    return true;
                                                                }
                                                            }
                                                            return false;
                                                        })
                                                        ->values();
                                                @endphp

                                                <div class="table-responsive" style="max-height:70vh; overflow:auto;">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-light">
                                                            <tr>
                                                                <th style="width:220px;">Module</th>
                                                                @foreach ($existingActions as $action)
                                                                    <th class="text-capitalize text-center">
                                                                        {{ $action }}</th>
                                                                @endforeach
                                                            </tr>
                                                        </thead>
                                                        <tbody id="tbody-{{ $role->id }}">
                                                            @forelse ($grouped as $module => $permsInModule)
                                                                @php
                                                                    // Build map: action => full "module-action"
                                                                    $map = $permsInModule->mapWithKeys(function (
                                                                        $p,
                                                                    ) use ($module) {
                                                                        $action = \Illuminate\Support\Str::after(
                                                                            $p->name,
                                                                            $module . '-',
                                                                        );
                                                                        return [$action => $p->name];
                                                                    });
                                                                @endphp
                                                                <tr class="module-row"
                                                                    data-filter="{{ strtolower($module) }}">
                                                                    <td class="fw-semibold text-capitalize">
                                                                        {{ $module }}</td>

                                                                    @foreach ($existingActions as $action)
                                                                        <td class="text-center">
                                                                            @if ($map->has($action))
                                                                                @php $permName = $map[$action]; @endphp
                                                                                <input type="checkbox"
                                                                                    class="form-check-input permission-checkbox permission-checkbox-{{ $role->id }}"
                                                                                    name="permission[]"
                                                                                    value="{{ $permName }}"
                                                                                    id="p-{{ $role->id }}-{{ md5($permName) }}"
                                                                                    {{ in_array($permName, $rolePermNames) ? 'checked' : '' }}>
                                                                            @endif
                                                                        </td>
                                                                    @endforeach
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="{{ 1 + $existingActions->count() }}">
                                                                        <div class="alert alert-info mb-0">No permissions
                                                                            found{{ !empty($search) ? ' for "' . $search . '"' : '' }}.
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>

                                                <div class="d-flex justify-content-end mt-3">
                                                    <button type="submit" class="btn btn-primary">Update Role</button>
                                                </div>
                                            </form>
                                        </div>
                                    @endforeach

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

            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Per-role Select All (scoped to the pane)
            document.querySelectorAll('.select-all-checkbox').forEach(function(toggle) {
                toggle.addEventListener('change', function() {
                    const roleId = this.id.replace('select-all-', '');
                    const pane = document.getElementById('v-pills-' + roleId);
                    if (!pane) return;
                    const checked = this.checked;
                    pane.querySelectorAll('.permission-checkbox-' + roleId).forEach(cb => cb
                        .checked = checked);
                });
            });

            // Client-side quick filter by module name
            document.querySelectorAll('[id^="quick-"]').forEach(function(input) {
                input.addEventListener('input', function() {
                    const roleId = this.id.replace('quick-', '');
                    const term = this.value.toLowerCase().trim();
                    const tbody = document.getElementById('tbody-' + roleId);
                    if (!tbody) return;
                    tbody.querySelectorAll('.module-row').forEach(function(row) {
                        const key = row.getAttribute('data-filter') || '';
                        row.style.display = (!term || key.includes(term)) ? '' : 'none';
                    });
                });
            });

            // Keep tab active after server-side search
            const urlParams = new URLSearchParams(window.location.search);
            const activeRoleId = urlParams.get('active_role_id');
            if (activeRoleId) {
                document.querySelectorAll('#v-pills-tab .nav-link').forEach(el => el.classList.remove('active'));
                document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('show', 'active'));
                const tabBtn = document.getElementById('v-pills-' + activeRoleId + '-tab');
                const pane = document.getElementById('v-pills-' + activeRoleId);
                if (tabBtn && pane) {
                    tabBtn.classList.add('active');
                    pane.classList.add('show', 'active');
                }
            }
        });
    </script>
@endpush