@extends('layouts.app', ['title' => __('Role')])

@section('admin_title')
{{__('Role')}}
@endsection

@section('content')

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

<div class="header bg-gradient-primary pb-6 pt-5 pt-md-6">

</div>

<div class="container mt--6">
    <div class="row ">
        <div class="col-lg-12 col-md-8">

            <div class="card shadow border-0 rounded-3">

                <div class="card-header bg-white border-bottom">
                    <h4 class="mb-0 fw-bold text-start">
                        {{ isset($groups) && $groups->id ? 'Update Role' : 'Create Role' }}
                    </h4>
                </div>

                <form action="{{ isset($role) ? route('admin.role.update', $role->id) : route('admin.role.store') }}"
                          method="POST">
                        @csrf

                        <div class="card">
                           

                            <div class="card-body">

                                <!-- Role Name -->
                                <div class="mb-3">
                                    <label class="form-label">Role Name</label>
                                    <input type="text"
                                           name="role_name"
                                           class="form-control"
                                           value="{{ isset($role) ? $role->name : '' }}"
                                           placeholder="Enter Role Name"
                                           required>
                                </div>

                                <!-- Status -->
                                <div class="mb-3">
                                    <label class="form-label">Status</label>
                                    <select name="status" class="form-control" required>
                                        <option value="1" {{ isset($role) && $role->is_active == 1 ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ isset($role) && $role->is_active == 0 ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>

                                <!-- Role Grouped by Module -->
                                <!-- <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <label class="form-label fw-bold">Assign Rights by Module</label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="checkAllModules">
                                            <label class="form-check-label fw-bold" for="checkAllModules">
                                                Check / Uncheck All
                                            </label>
                                        </div>
                                    </div>

                                    @php
                                        // Group rights by module name
                                        $groupedRights = $rights->groupBy(function($item) {
                                            return $item->appmodule->module_name ?? 'Unknown Module';
                                        });
                                    @endphp

                                    @foreach($groupedRights as $moduleName => $moduleRights)
                                        @php
                                            $moduleId = $moduleRights->first()->module_id;
                                        @endphp

                                        <div class="card mb-2">
                                            <div class="card-header bg-light">
                                                <div class="form-check">
                                                    <input type="checkbox"
                                                           class="form-check-input module-checkbox"
                                                           id="module_{{ $moduleId }}">
                                                    <label class="form-check-label fw-bold" for="module_{{ $moduleId }}">
                                                        {{ $moduleName }}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach($moduleRights as $right)
                                                        <div class="col-md-3">
                                                            <div class="form-check">
                                                                @php
                                                                    $checked = isset($rolePermissions) &&
                                                                        in_array($right->id, $rolePermissions);
                                                                @endphp
                                                                <input class="form-check-input module-right-checkbox"
                                                                       type="checkbox"
                                                                       name="rights[]"
                                                                       value="{{ $right->id }}"
                                                                       id="module_{{ $moduleId }}_right_{{ $right->id }}"
                                                                       {{ $checked ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="module_{{ $moduleId }}_right_{{ $right->id }}">
                                                                    {{ $right->right_name }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>

                                    @endforeach

                                </div> -->

                            </div>

                            <div class="card-footer text-end">
                                <button type="submit" class="btn btn-primary">Save Changes</button>
                            </div>

                        </div>

                    </form>

            </div>

        </div>
    </div>
        @include('layouts.footers.auth')
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {

    // Master Check All
    const checkAllModules = document.getElementById('checkAllModules');
    const allModuleCheckboxes = document.querySelectorAll('.module-checkbox');
    const allRightsCheckboxes = document.querySelectorAll('.module-right-checkbox');

    checkAllModules.addEventListener('change', function () {
        allModuleCheckboxes.forEach(cb => cb.checked = checkAllModules.checked);
        allRightsCheckboxes.forEach(cb => cb.checked = checkAllModules.checked);
    });

    // Module header checkbox toggles module rights
    document.querySelectorAll('.module-checkbox').forEach(function(moduleCheckbox) {
        moduleCheckbox.addEventListener('change', function () {
            const moduleId = this.id.split('_')[1];
            document.querySelectorAll('.module-right-checkbox').forEach(function(rightCheckbox) {
                if(rightCheckbox.id.startsWith('module_' + moduleId + '_')) {
                    rightCheckbox.checked = moduleCheckbox.checked;
                }
            });
        });
    });

});
</script>
@endsection