@extends('admin.admin_dashboard')
@section('admin')

<!-- jQuery for SweetAlert2 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<style>
    /* General Styling */
    .form-check-label {
        text-transform: capitalize;
    }

    /* Card Styling */
    .card {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-radius: 15px;
        border: none;
    }

    .card-body {
        background: #ffffff;
        padding: 20px;
    }

    .form-label {
        font-weight: 600;
        color: #333;
    }

    .form-check-input {
        transform: scale(1.5); /* Increase checkbox size */
        margin-right: 10px;
        cursor: pointer;
    }

    .form-check-label {
        font-size: 1rem;
        color: #333;
    }

    .form-check-input:checked {
        background-color: #007bff;
        border-color: #007bff;
    }

    /* Breadcrumb Styling */
    .page-breadcrumb {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border-radius: 10px;
        padding: 10px 20px;
    }

    /* Horizontal Line Between Groups */
    .group-divider {
        border-top: 2px solid #ddd;
        margin: 15px 0;
    }

    /* Button Styling */
    .btn-primary {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        transition: all 0.3s ease-in-out;
        width: 100%;
    }

    .btn-primary:hover {
        background: #0056b3;
        transform: scale(1.05);
        box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.3);
    }
</style>

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex align-items-center mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item">
                    <a href="javascript:;">
                        <i class="bx bx-home-alt" style="color: white;"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page" style="color: white;">Edit Role In Permission</li>
            </ol>
        </nav>
    </div>

    <!-- Card Container -->
    <div class="card shadow-lg border-0 rounded">
        <div class="card-body p-4">
            <form id="myForm" action="{{ route('admin.roles.update', $role->id) }}" method="post" class="row g-3">
                @csrf

                <!-- Role Name -->
                <div class="form-group col-md-6">
                    <label for="input1" class="form-label">Role Name</label>
                    <h4>{{ $role->name }}</h4>
                </div>

                <!-- Select All Checkbox -->
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="selectAllPermissions">
                    <label class="form-check-label" for="selectAllPermissions">Select All Permissions</label>
                </div>

                <hr>

                @foreach ($permission_groups as $group)
                <div class="group-divider"></div> <!-- Horizontal line -->

<<<<<<< HEAD
=======
                @if($group->group_name === 'Planning')
                    <div class="alert alert-info py-2 px-3 small mb-3">
                        <strong>Planning permissions</strong> — control workplans, budget lines, and funds requisitions.
                        To let staff submit requisitions, enable <em>Planning module access</em>, <em>View own requisitions</em>, and <em>Create requisitions</em>.
                    </div>
                @elseif(str_starts_with($group->group_name, 'Sidebar —'))
                    <div class="alert alert-light border py-2 px-3 small mb-3">
                        <strong>Sidebar menu access</strong> — controls which sections appear in the left navigation.
                        Grant the module sidebar permission first, then the individual feature permissions in the matching group below.
                    </div>
                @endif

>>>>>>> origin/main
                <!-- Group Permissions -->
                <div class="row">
                    <div class="col-md-3">
                        @php
                            $permissions = App\Models\User::getpermissionByGroupName($group->group_name);
                        @endphp

                        <div class="form-check">
                            <input class="form-check-input group-checkbox" type="checkbox" data-group="{{ $group->group_name }}" id="groupCheck{{ $group->group_name }}" {{ App\Models\User::roleHasPermissions($role, $permissions) ? 'checked' : '' }}>
                            <label class="form-check-label" for="groupCheck{{ $group->group_name }}">
                                {{ ucfirst($group->group_name) }}
                            </label>
                        </div>
                    </div>

                    <div class="col-md-9">
                        @foreach ($permissions as $permission)
                        <div class="form-check">
                            <input class="form-check-input permission-checkbox" type="checkbox" name="permission[]" value="{{ $permission->id }}" data-group="{{ $group->group_name }}" id="check{{ $permission->id }}" {{ $role->hasPermissionTo($permission->name) ? 'checked' : '' }}>
                            <label class="form-check-label" for="check{{ $permission->id }}">
<<<<<<< HEAD
                                {{ ucfirst($permission->name) }}
=======
                                @php
                                    $permMeta = \App\Support\PermissionCatalog::permissionMeta()[$permission->name] ?? null;
                                @endphp
                                {{ $permMeta['label'] ?? ucfirst($permission->name) }}
                                @if($permMeta['description'] ?? null)
                                    <div class="text-muted fw-normal" style="font-size:0.8rem">{{ $permMeta['description'] }}</div>
                                @endif
>>>>>>> origin/main
                            </label>
                        </div> 
                        @endforeach
                        <br>
                    </div>
                </div>
                @endforeach

                <!-- Save Button -->
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary px-4 py-2 rounded-pill shadow">
                        <i class="bx bx-save"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- JavaScript for Select All & Group-Wise Checkbox Handling -->
<script>
    $(document).ready(function(){
        // Select All Permissions
        $('#selectAllPermissions').click(function(){
            $('.form-check-input').prop('checked', $(this).prop('checked'));
        });

        // Select Group-wise Permissions
        $('.group-checkbox').click(function(){
            let group = $(this).data('group');
            $('.permission-checkbox[data-group="'+group+'"]').prop('checked', $(this).prop('checked'));
        });

        // Uncheck Group if any permission is unchecked
        $('.permission-checkbox').click(function(){
            let group = $(this).data('group');
            if (!$(this).prop('checked')) {
                $('#groupCheck' + group).prop('checked', false);
                $('#selectAllPermissions').prop('checked', false);
            }
        });

        // Auto-check Group if all permissions are checked
        $('.permission-checkbox').each(function(){
            let group = $(this).data('group');
            if ($('.permission-checkbox[data-group="'+group+'"]:checked').length === $('.permission-checkbox[data-group="'+group+'"]').length) {
                $('#groupCheck' + group).prop('checked', true);
            }
        });
    });
</script>

@endsection