@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-select, .form-check-input {
        border-radius: 8px;
        border: 1px solid #ccc;
        transition: all 0.3s ease-in-out;
    }

    .form-select:focus, .form-check-input:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    }

    /* 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);
    }

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

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

    .form-check-input {
    transform: scale(1.5); /* Make checkboxes larger */
    margin-right: 10px; /* Add spacing for better alignment */
    cursor: pointer; /* Change cursor to pointer for better UX */
}

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

    /* Mobile Responsive Styles */
    @media (max-width: 768px) {
        .row {
            flex-direction: column;
        }

        .form-group {
            width: 100%;
        }

        .btn-primary {
            width: 100%;
        }
    }
</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;">Add 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('role.permission.store') }}" method="post" class="row g-3" enctype="multipart/form-data">
                @csrf

                <!-- Roles Dropdown -->
                <div class="form-group col-md-6">
                    <label for="append-toggle-single-field" class="form-label">Roles Name</label>
                    <select name="role_id" id="append-toggle-single-field" class="form-select mb-3" aria-label="Select Role">
                        <option selected="" disabled>Choose a Role</option>
                        @foreach ($roles as $role) 
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach    
                    </select>
                </div>

                <!-- Permission 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)
    <hr> <!-- Line separating groups -->
<<<<<<< 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
    <div class="row">
        <div class="col-md-6">
            <div class="form-check">
                <input class="form-check-input group-checkbox" type="checkbox" data-group="{{ $group->group_name }}" id="groupCheck{{ $group->group_name }}">
                <label class="form-check-label" for="groupCheck{{ $group->group_name }}">
                    {{ ucfirst($group->group_name) }}
                </label>
            </div>
        </div>

        <div class="col-md-6">
            @php
                $permissions = App\Models\User::getpermissionByGroupName($group->group_name);
            @endphp

            @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 }}">
                    <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