@extends('layouts.sneat')
@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">Permission /</span> Manage Permission
    </h4>

    <hr class="my-5">

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

    <form action="{{ route('permissions.permission.store') }}" method="post" id="permissionsForm">
        @csrf

        <!-- Check All Button -->
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" id="checkAll">
            <label class="form-check-label" for="checkAll">Check All</label>
        </div>


        <!-- Bootstrap Tabs -->
        <!-- Bootstrap Tabs -->
        @php
            $maxTabs = 6;
            $visibleGroups = array_slice($groupNames, 0, $maxTabs);
            $moreGroups = array_slice($groupNames, $maxTabs);
        @endphp

        <ul class="nav nav-tabs mb-4" id="permissionTabs" role="tablist">
            {{-- Show first 6 groups --}}
            @foreach ($visibleGroups as $group)
                <li class="nav-item" role="presentation">
                    <button class="nav-link @if($loop->first) active @endif" id="tab-{{ Str::slug($group) }}"
                        data-bs-toggle="tab" data-bs-target="#content-{{ Str::slug($group) }}" type="button" role="tab"
                        aria-controls="content-{{ Str::slug($group) }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                        {{ $group }}
                    </button>
                </li>
            @endforeach

            {{-- Show "More" dropdown if needed --}}
            @if (!empty($moreGroups))
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                        More
                    </a>
                    <ul class="dropdown-menu">
                        @foreach ($moreGroups as $group)
                            <li>
                                <button class="dropdown-item" id="tab-{{ Str::slug($group) }}" data-bs-toggle="tab"
                                    data-bs-target="#content-{{ Str::slug($group) }}" type="button" role="tab"
                                    aria-controls="content-{{ Str::slug($group) }}">
                                    {{ $group }}
                                </button>
                            </li>
                        @endforeach
                    </ul>
                </li>
            @endif
        </ul>


        <div class="tab-content" id="permissionTabContent">
            @foreach ($groupNames as $group)
                <div class="tab-pane fade @if($loop->first) show active @endif" id="content-{{ Str::slug($group) }}"
                    role="tabpanel" aria-labelledby="tab-{{ Str::slug($group) }}">
                    <div class="row">
                        @foreach ($tableNames as $table)
                            @php
                                $permission = $existingPermissions->has($table) ? $existingPermissions[$table] : null;
                                $tableGroup = $urlToGroupName[$table] ?? 'Other';
                            @endphp

                            @if($tableGroup == $group)
                                <div class="col-md-6 mb-3">
                                    <h5 class="permission">{{ ucfirst(str_replace('_', ' ', $table)) }}</h5>
                                    <input type="hidden" name="permissions[{{ $table }}][groups]" value="{{ $permissions->id }}">
                                    <input type="hidden" name="urls[]" value="{{ $table }}">

                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="1" id="{{ $table }}_adds"
                                            name="permissions[{{ $table }}][add]" @if($permission && $permission->adds) checked @endif>
                                        <label class="form-check-label" for="{{ $table }}_adds">Add</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="1" id="{{ $table }}_edits"
                                            name="permissions[{{ $table }}][edit]" @if($permission && $permission->edits) checked
                                            @endif>
                                        <label class="form-check-label" for="{{ $table }}_edits">Edit</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="1" id="{{ $table }}_views"
                                            name="permissions[{{ $table }}][view]" @if($permission && $permission->views) checked
                                            @endif>
                                        <label class="form-check-label" for="{{ $table }}_views">View</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="1" id="{{ $table }}_deletes"
                                            name="permissions[{{ $table }}][delete]" @if($permission && $permission->deletes) checked
                                            @endif>
                                        <label class="form-check-label" for="{{ $table }}_deletes">Delete</label>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                    </div>
                </div>
            @endforeach
        </div>


        <hr class="my-5">
        <button type="submit" class="btn btn-primary waves-effect waves-light">Update Permissions</button>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('checkAll').addEventListener('change', function () {
                const checkboxes = document.querySelectorAll('input[type="checkbox"]');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });
        });
    </script>

@endsection