@extends('master.authMaster')

@section('content')
    <div class="intro-y col-span-12 lg:col-span-12 user-prtmition-table">
        <div class="intro-y box mt-5">
            <div class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5">
                <h2 class="font-medium text-base mr-auto">
                    User Permissions
                </h2>
            </div>
            <div class="p-5">
                <form method="POST" action="{{ route('users.permissions.store', $user->id) }}">
                    @csrf
                    <div class="space-y-4">

                        @foreach ($menus as $menu)
                            <div x-data="{ open: true }" class="border rounded-lg p-4 bg-gray-50 shadow-sm">

                                <!-- Parent -->
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        @if ($menu->children->count())
                                            <!-- Expand/Collapse button -->
                                            <button type="button" @click="open = !open"
                                                class="text-sm text-gray-600 hover:text-blue-600">
                                                <span x-show="!open">▶</span>
                                                <span x-show="open">▼</span>
                                            </button>
                                        @endif
                                        <span class="font-bold text-gray-800">{{ ucfirst($menu->name) }}</span>
                                    </div>

                                    <!-- If no children → show checkboxes -->
                                    @if (!$menu->children->count())
                                    <div class="flex items-center gap-4">
                                        <div class="flex gap-3">
                                            @foreach ($permissionCodes as $permissionCode)
                                                <label class="inline-flex items-center gap-1 text-sm">

                                                    @if ($permissionCode->id == 1)
                                                        <input type="radio"
                                                            class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
                                                            value="{{ $permissionCode->id }}"
                                                            name="permission_codes[{{ $menu->id }}][]"
                                                            @checked($user->menuPermissions->where('menu_id', $menu->id)->pluck('permissions')->contains($permissionCode->id))>View
                                                    @elseif($permissionCode->id == 2)
                                                        <input type="radio"
                                                            class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
                                                            value="{{ $permissionCode->id }}"
                                                            name="permission_codes[{{ $menu->id }}][]"
                                                            @checked($user->menuPermissions->where('menu_id', $menu->id)->pluck('permissions')->contains($permissionCode->id))> Add
                                                    @endif
                                                </label>
                                            @endforeach
                                        </div>
                                        <div>
                                            <button type="button"
                                                class="type-btn clear-radio bg-gray-200 text-gray-700 px-3 py-1 rounded"
                                                data-menu-id="{{ $menu->id }}">
                                                Clear
                                            </button>
                                        </div>
                                    </div>
                                    @endif
                                </div>

                                <!-- Children -->
                                @if ($menu->children->count())
                                    <div class="ml-6 mt-3 space-y-2" x-show="open" x-transition>
                                        @foreach ($menu->children as $child)
                                            <div class="flex items-center justify-between pl-3 border-l-2 border-gray-300">
                                                <span class="font-medium text-gray-700">{{ ucfirst($child->name) }}</span>
                                                <div class="flex items-center gap-4">
                                                    <div class="flex gap-3">
                                                        @foreach ($permissionCodes as $permissionCode)
                                                            <label class="inline-flex items-center gap-1 text-sm">

                                                                @if ($permissionCode->id == 1)
                                                                    <input type="radio"
                                                                        class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
                                                                        value="{{ $permissionCode->id }}"
                                                                        name="permission_codes[{{ $child->id }}][]"
                                                                        @checked($user->menuPermissions->where('menu_id', $child->id)->pluck('permissions')->contains($permissionCode->id))> View
                                                                @elseif(
                                                                    $permissionCode->id == 2 &&
                                                                        strtolower($child->name) !== 'incomes ledger' &&
                                                                        strtolower($child->name) !== 'expenses ledger')
                                                                    <input type="radio"
                                                                        class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
                                                                        value="{{ $permissionCode->id }}"
                                                                        name="permission_codes[{{ $child->id }}][]"
                                                                        @checked($user->menuPermissions->where('menu_id', $child->id)->pluck('permissions')->contains($permissionCode->id))> Add
                                                                @endif
                                                            </label>
                                                        @endforeach
                                                    </div>
                                                    <button type="button"
                                                        class="clear-radio bg-gray-200 text-gray-700 px-3 py-1 rounded type-btn"
                                                        data-menu-id="{{ $child->id }}">
                                                        Clear
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-6">
                        <button type="submit" class="button w-32 bg-theme-1 text-white hover:bg-blue-700">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Alpine.js -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.clear-radio').forEach(function(button) {
                button.addEventListener('click', function() {
                    const menuId = this.dataset.menuId;
                    document.querySelectorAll(`input[name="permission_codes[${menuId}][]"]`)
                        .forEach(function(radio) {
                            radio.checked = false;
                        });
                });
            });
        });
    </script>
@endsection