@extends('portal.layouts.app', [
    'class' => '',
    'elementActive' => ''
])
@section('title', 'Users')
@section('css')
<style>

</style>
@endsection
@section('content')
         <!-- Page Content  -->
        <div id="content-page" class="content-page">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="iq-card">
                    <div class="iq-card-header d-flex justify-content-between">
                        <div class="iq-header-title">
                            <h4 class="card-title">Manage Permissions for {{ $role->name }}</h4>
                        </div>
                    </div>
                    <div class="iq-card-body">
    <form action="{{ route('admin.updaterolepermissions', ['role' => $role->id]) }}" method="POST">
        @csrf
        @method('PUT')
        @foreach ($allpermissions as $category => $permissions)
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <strong>{{ ucfirst($category) }}</strong> <!-- Category Name -->
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach ($permissions->groupBy('group_name') as $group => $groupPermissions)
                            <!-- Group Header with "Select All" Checkbox -->
                            <div class="col-12 mt-3">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="select-group" id="select_all_{{ Str::slug($group) }}">
                                    <label class="ml-2 font-weight-bold" for="select_all_{{ Str::slug($group) }}">
                                        {{ ucwords(str_replace('_', ' ', $group)) }} (Select All)
                                    </label>
                                </div>
                            </div>
                
                            <!-- Permissions Checkboxes for this Specific Group -->
                            <div class="col-12 permission-group">
                                <div class="row">
                                    @foreach ($groupPermissions as $permission)
                                        <div class="col-sm-4">
                                            <div class="custom-control custom-switch">
                                                <input class="custom-control-input perm-checkbox" type="checkbox" name="permissions[]"
                                                    value="{{ $permission->name }}" id="perm_{{ $permission->id }}" {{ in_array($permission->name, $rolepermissions) ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="perm_{{ $permission->id }}">
                                                    {{ ucwords(str_replace('_', ' ', $permission->name)) }}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                
            </div>
        @endforeach
        <div class="text-right">
            <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
    </form>
</div>

                </div>
            </div>
        </div>
    </div>
</div>
      <!-- Wrapper END -->
@endsection
@section('script')
<script>
    $(document).ready(function () {
        jQuery('.select-group').on('change', function () {
        let $groupContainer = jQuery(this).closest('.col-12').next('.permission-group'); // Get the specific group's container
        let isChecked = jQuery(this).is(':checked');

        // Find checkboxes inside this specific group and check/uncheck them
        $groupContainer.find('.perm-checkbox').prop('checked', isChecked);
    });

    // When an individual checkbox is clicked
    jQuery('.perm-checkbox').on('change', function () {
        let $groupContainer = jQuery(this).closest('.permission-group'); // Find the group this checkbox belongs to
        let $selectAll = $groupContainer.prev('.col-12').find('.select-group'); // Find the corresponding "Select All" checkbox
        let totalCheckboxes = $groupContainer.find('.perm-checkbox').length;
        let checkedCheckboxes = $groupContainer.find('.perm-checkbox:checked').length;

        // Update the "Select All" checkbox only for this specific group
        $selectAll.prop('checked', totalCheckboxes === checkedCheckboxes);
    });
        // Set up AJAX with CSRF token
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Trigger form submission on button click
        $('#submitBtn1').on('click', function () {
            $('#stationForm').trigger('submit');
        });

        // Handle form submission
        $('#stationForm').on('submit', function (event) {
            event.preventDefault();

            const loadingIcon = $('#loadingIcon1');
            const isFormValid = validateForm();
            showLoadingIcon(loadingIcon);
            if (!isFormValid) {
                updateLoadingIcon('error', 'Please fill all required fields!', loadingIcon);
                reEnableButtons();
                return;
            }

            // Disable buttons and show loading icon
            toggleButtons(false);
            // showLoadingIcon(loadingIcon);

            // AJAX request
            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: $(this).serialize(),
                success: function (response) {
                    updateLoadingIcon(response.status, response.message, loadingIcon);

                    if (response.status === 'success') {
                        setTimeout(() => location.reload(true), 1000);
                    } else {
                        reEnableButtons();
                    }
                },
                error: function () {
                    updateLoadingIcon('error', 'An error occurred. Try again!', loadingIcon);
                    reEnableButtons();
                }
            });
        });

        // Helper: Validate form fields
        function validateForm() {
            let isValid = true;

            $('#stationForm input[required], #stationForm select[required], #stationForm textarea[required]').each(function () {
                if ($(this).val().trim() === '') {
                    $(this).addClass('is-invalid');
                    isValid = false;
                } else {
                    $(this).removeClass('is-invalid');
                }
            });

            return isValid;
        }

        // Helper: Update the loading icon state
        function updateLoadingIcon(status, message, loadingIcon) {
            const iconClass = status === 'success' ? 'fa fa-check-circle' : 'ri-alert-line';
            const bgClass = status === 'success' ? 'bg-success' : 'bg-danger';

            loadingIcon.find('.iq-alert-icon i').attr('class', iconClass);
            loadingIcon.find('.iq-alert-text').text(message);
            loadingIcon.find('.alert').removeClass('bg-info bg-success bg-danger').addClass(bgClass);
        }

        // Helper: Show the loading icon with a "processing" state
        function showLoadingIcon(loadingIcon) {
            const iconClass = 'fa fa-spinner fa-spin';
            const bgClass = 'bg-info';

            loadingIcon.find('.iq-alert-icon i').attr('class', iconClass);
            loadingIcon.find('.iq-alert-text').text('Processing, please wait...');
            loadingIcon.find('.alert').removeClass('bg-info bg-success bg-danger').addClass(bgClass);
            loadingIcon.show();
        }

        // Helper: Re-enable buttons
        function reEnableButtons() {
            toggleButtons(true);
        }

        // Helper: Toggle button states
        function toggleButtons(enable) {
            $('#submitBtn1, #closeBtn1').prop('disabled', !enable);
        }
    });
</script>


@endsection