@extends('admin.layouts.app')

@section('content')

<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ isset($role) && $role->id ? __('admin/roles.edit_role') : __('admin/roles.add_role') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/roles.roles') }}</a></li>
                    <li class="breadcrumb-item active">{{ isset($role) && $role->id ? __('admin/roles.edit') : __('admin/roles.add') }}</li>
                </ol>
            </div>

        </div>

        <!-- menu bar -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.roles.index') }}" class="btn btn-light me-2">{{ __('admin/roles.close') }}</a>
                            <button type="submit" class="btn btn-info add-btn" form="role-form" id="saverole" data-bs-loading-text="{{ __('admin/roles.saving') }}">
                                <i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/roles.save') }}
                            </button>
                        </div>
                        <div class="flex-shrink-0">

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0 flex-grow-1">{{ isset($role) && $role->id ? __('admin/roles.edit_role') : __('admin/roles.add_role') }}</h4>
            </div>
            <div class="card-body">
                <form method="POST" id="role-form" action="{{ isset($role) && $role->id ? route('admin.roles.update', $role->id) : route('admin.roles.store') }}">
                    @csrf
                    @if(isset($role) && $role->id)
                    @method('PUT')
                    @endif
                    <input type="hidden" id="role-id" name="role_id" value="">

                    <div class="modal-body">
                        <div class="mb-4">
                            <label for="role-name" class="form-label">{{ __('admin/roles.role_name') }} <span class="text-danger">*</span></label>
                            <input type="text" id="role-name" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', isset($role) ? $role->name : '') }}" />
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="text-danger small" id="name-error"></div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">{{ __('admin/roles.permissions') }} <span class="text-danger">*</span>
                                <small class="d-block mt-2">
                                    <i class="ri-information-line text-info"></i>
                                    <span class="text-muted">
                                        {{ __('admin/roles.permissions_description') }}
                                    </span>
                                </small>
                            </label>
                            
                            <!-- Checkbox "Tout sélectionner" -->
                            <div class="border rounded p-3 mb-3 bg-light">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="select-all-permissions">
                                    <label class="form-check-label fw-bold text-primary" for="select-all-permissions">
                                        <i class="ri-check-double-line me-1"></i>
                                        {{ __('admin/roles.select_all_deselect_all') }}
                                    </label>
                                </div>
                            </div>
                            
                            <div id="permissions-container" class="row mt-2 space-y-4">
                                @foreach($modules as $module)
                                <div class="col-md-4 mb-3">
                                    <div class="border rounded-lg p-3">
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="form-check me-2">
                                                <input class="form-check-input module-checkbox @error('permissions') is-invalid @enderror"
                                                    type="checkbox"
                                                    id="module-{{ $module->id }}"
                                                    data-module="{{ $module->id }}">
                                                <label class="form-check-label fw-bold text-uppercase" for="module-{{ $module->id }}">
                                                    {{ $module->name }}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="row">
                                            @foreach($module->permissions as $permission)
                                            <div class="col-md-6">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input permission-checkbox module-{{ $module->id }}-permission"
                                                        type="checkbox"
                                                        name="permissions[]"
                                                        value="{{ $permission->name }}"
                                                        id="perm-{{ $permission->id }}"
                                                        {{ (isset($role) && $role->hasPermissionTo($permission->name)) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="perm-{{ $permission->id }}">
                                                        {{ str_replace($module->slug . '.', '', $permission->name) }}
                                                    </label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <div class="text-danger small" id="permissions-error"></div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <!-- <a href="{{ route('admin.roles.index') }}" class="btn btn-light me-2">{{ __('admin/roles.close') }}</a> -->
                        <!-- <button type="submit" class="btn btn-primary" id="submit-role-btn">{{ __('admin/roles.save') }}</button> -->
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

@endsection

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Éléments du formulaire et bouton
        const form = document.getElementById('role-form');
        const submitBtn = document.getElementById('saverole');
        const originalContent = submitBtn.innerHTML;

        const validator = new MultilingualFormValidator({
            formId: 'role-form',
            submitBtnId: 'saverole',
            
            // Champs multilingues requis (title_fr, title_en, content_fr, content_en, etc.)
            fields: [],
            
            // Champs simples requis (si vous en avez)
            singleFields: ['name'],
            
            alertMessage: "{{ __('admin/roles.errors.fill_all_required_fields') }}",
            loadingText: "{{ __('admin/roles.saving') }}",
            debug: false,
            
            onBeforeSubmit: function() {
                let isValid = true;

                // Validation des permissions
                const checkedPermissions = document.querySelectorAll('input[name="permissions[]"]:checked');
                const permissionsError = document.getElementById('permissions-error');
                
                if (checkedPermissions.length === 0) {
                    permissionsError.textContent = '{{ __("admin/roles.select_at_least_one_permission") }}';
                    isValid = false;
                } else {
                    permissionsError.textContent = '';
                } 
                
                if (!isValid) {
                    // alert('Veuillez remplir tous les champs chèques-formation obligatoires');
                    Swal.fire({
                        title: "Info",
                        text: '{{ __("admin/roles.errors.fill_all_required_fields") }}',
                        icon: "info",
                        customClass: {
                            confirmButton: "btn btn-primary w-xs mt-2"
                        },
                        buttonsStyling: !1,
                        showCloseButton: !0
                    });
                    return false; // Empêcher la soumission
                }                
                
            }
        });        


        // Gestion de la checkbox "Tout sélectionner"
        function handleSelectAllPermissions(event) {
            const selectAllCheckbox = event.target;
            const isChecked = selectAllCheckbox.checked;

            // Cocher/décocher toutes les permissions
            const allPermissionCheckboxes = document.querySelectorAll('.permission-checkbox');
            allPermissionCheckboxes.forEach(function(checkbox) {
                checkbox.checked = isChecked;
            });

            // Cocher/décocher tous les modules
            const allModuleCheckboxes = document.querySelectorAll('.module-checkbox');
            allModuleCheckboxes.forEach(function(checkbox) {
                checkbox.checked = isChecked;
                checkbox.indeterminate = false;
            });
        }

        // Gestion des checkboxes de module
        function handleModuleCheckbox(event) {
            const moduleCheckbox = event.target;
            const moduleId = moduleCheckbox.getAttribute('data-module');
            const isChecked = moduleCheckbox.checked;

            // Sélectionner/désélectionner toutes les permissions du module
            const permissionCheckboxes = document.querySelectorAll(`.module-${moduleId}-permission`);
            permissionCheckboxes.forEach(function(checkbox) {
                checkbox.checked = isChecked;
            });

            // Mettre à jour la checkbox "Tout sélectionner"
            updateSelectAllCheckbox();
        }

        // Gestion des permissions individuelles
        // function handlePermissionCheckbox(event) {
        //     const permissionCheckbox = event.target;

        //     const classes = permissionCheckbox.className.split(' ');
        //     let moduleId = '';

        //     // Trouver l'ID du module
        //     classes.forEach(function(cls) {
        //         if (cls.includes('module-') && cls.includes('-permission')) {
        //             moduleId = cls.replace('module-', '').replace('-permission', '');
        //         }
        //     });

        //     if (moduleId) {
        //         const totalPermissions = document.querySelectorAll(`.module-${moduleId}-permission`).length;
        //         const checkedPermissions = document.querySelectorAll(`.module-${moduleId}-permission:checked`).length;
        //         const moduleCheckbox = document.querySelector(`#module-${moduleId}`);

        //         if (checkedPermissions === 0) {
        //             moduleCheckbox.checked = false;
        //             moduleCheckbox.indeterminate = false;
        //         } else if (checkedPermissions === totalPermissions) {
        //             moduleCheckbox.checked = true;
        //             moduleCheckbox.indeterminate = false;
        //         } else {
        //             moduleCheckbox.checked = false;
        //             moduleCheckbox.indeterminate = true;
        //         }
        //     }

        //     // Mettre à jour la checkbox "Tout sélectionner"
        //     updateSelectAllCheckbox();
        // }

    // Configuration des dépendances
    const PERMISSION_DEPENDENCIES = {
        // Actions qui nécessitent view
        permissionsRequiringView: ['create', 'edit', 'delete'],
        
        // Modules qui dépendent de trainings.view
        trainingDependentModules: ['trainingcategories', 'traininglocations', 'registrations']
    };

    // Gestion des permissions individuelles + dependances
    function handlePermissionCheckbox(event) {
        const checkbox = event.target;
        const [module, action] = checkbox.value.split('.');
        const isChecked = checkbox.checked;
        
        const isAction = PERMISSION_DEPENDENCIES.permissionsRequiringView.includes(action);
        const isTrainingModule = PERMISSION_DEPENDENCIES.trainingDependentModules.includes(module);
        
        if (isChecked) {
            // SÉLECTION
            if (isAction) togglePermission(`${module}.view`, true);
            if (isTrainingModule) togglePermission('trainings.view', true);
        } else {
            // DÉSELECTION
            if (action === 'view') {
                PERMISSION_DEPENDENCIES.permissionsRequiringView.forEach(act => 
                    togglePermission(`${module}.${act}`, false)
                );
            }
            if (isAction && !hasAnyModuleActions(module)) {
                togglePermission(`${module}.view`, false);
            }
            if (isTrainingModule && !hasAnyDependentModulePermissions() && !hasAnyModuleActions('trainings')) {
                // vérifie aussi trainings.create/edit/delete
                togglePermission('trainings.view', false);
            }
        }
        
        updateModuleState(checkbox);
        updateSelectAllCheckbox();
    }

    // Fonctions helpers
    function togglePermission(permissionName, shouldCheck) {
        const checkbox = document.querySelector(`input[value="${permissionName}"]`);
        if (checkbox) checkbox.checked = shouldCheck;
    }

    // Vérifie si un module a encore des permissions cochées comme create, edit, delete
    function hasAnyModuleActions(module) {
        return PERMISSION_DEPENDENCIES.permissionsRequiringView.some(action => {
            const checkbox = document.querySelector(`input[value="${module}.${action}"]`);
            return checkbox && checkbox.checked;
        });
    }

    // Vérifie si les modules dépendants ont encore des permissions cochées
    function hasAnyDependentModulePermissions() {
        return PERMISSION_DEPENDENCIES.trainingDependentModules.some(module => 
            document.querySelector(`input[value^="${module}."]:checked`)
        );
    }


function updateModuleState(permissionCheckbox) {
    const classes = permissionCheckbox.className.split(' ');
    let moduleId = '';

    classes.forEach(function(cls) {
        if (cls.includes('module-') && cls.includes('-permission')) {
            moduleId = cls.replace('module-', '').replace('-permission', '');
        }
    });

    if (moduleId) {
        const totalPermissions = document.querySelectorAll(`.module-${moduleId}-permission`).length;
        const checkedPermissions = document.querySelectorAll(`.module-${moduleId}-permission:checked`).length;
        const moduleCheckbox = document.querySelector(`#module-${moduleId}`);

        if (checkedPermissions === 0) {
            moduleCheckbox.checked = false;
            moduleCheckbox.indeterminate = false;
        } else if (checkedPermissions === totalPermissions) {
            moduleCheckbox.checked = true;
            moduleCheckbox.indeterminate = false;
        } else {
            moduleCheckbox.checked = false;
            moduleCheckbox.indeterminate = true;
        }
    }
}
 

        // function handleViewAutoSelection(changedCheckbox) {
        //     if (!changedCheckbox.checked) return;

        //     const permissionName = changedCheckbox.value;
            
        //     // Pattern plus flexible pour détecter les actions qui nécessitent view
        //     const actionsRequiringView = ['create', 'edit', 'update', 'delete', 'destroy', 'store'];
            
        //     // Vérifier si c'est une de ces actions
        //     const requiresView = actionsRequiringView.some(action => 
        //         permissionName.includes('.' + action)
        //     );
            
        //     if (requiresView) {
        //         // Extraire le module et construire le nom de la permission view
        //         const parts = permissionName.split('.');
        //         const modulePrefix = parts[0];
        //         const viewPermissionName = modulePrefix + '.view';
                
        //         // Auto-cocher view si elle existe et n'est pas déjà cochée
        //         const viewCheckbox = document.querySelector(`input[value="${viewPermissionName}"]`);
        //         if (viewCheckbox && !viewCheckbox.checked) {
        //             viewCheckbox.checked = true;
                    
        //             // Mettre à jour les états visuels
        //             viewCheckbox.dispatchEvent(new Event('change'));
                    
        //             // Optionnel : Afficher une notification
        //             console.log(`Permission "${viewPermissionName}" automatiquement sélectionnée`);
        //         }
        //     }
        // }        

        // Mettre à jour l'état de la checkbox "Tout sélectionner"
        function updateSelectAllCheckbox() {
            const selectAllCheckbox = document.getElementById('select-all-permissions');
            const allPermissionCheckboxes = document.querySelectorAll('.permission-checkbox');
            const checkedPermissionCheckboxes = document.querySelectorAll('.permission-checkbox:checked');

            if (checkedPermissionCheckboxes.length === 0) {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = false;
            } else if (checkedPermissionCheckboxes.length === allPermissionCheckboxes.length) {
                selectAllCheckbox.checked = true;
                selectAllCheckbox.indeterminate = false;
            } else {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = true;
            }
        }

        // Attacher l'événement à la checkbox "Tout sélectionner"
        const selectAllCheckbox = document.getElementById('select-all-permissions');
        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', handleSelectAllPermissions);
        }

        // Attacher les événements aux checkboxes de module
        const moduleCheckboxes = document.querySelectorAll('.module-checkbox');
        moduleCheckboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', handleModuleCheckbox);
        });

        // Attacher les événements aux checkboxes de permission
        const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');
        permissionCheckboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', handlePermissionCheckbox);
        });

        // Initialiser l'état des checkboxes de module au chargement
        moduleCheckboxes.forEach(function(moduleCheckbox) {
            const moduleId = moduleCheckbox.getAttribute('data-module');
            const totalPermissions = document.querySelectorAll(`.module-${moduleId}-permission`).length;
            const checkedPermissions = document.querySelectorAll(`.module-${moduleId}-permission:checked`).length;

            if (checkedPermissions === 0) {
                moduleCheckbox.checked = false;
                moduleCheckbox.indeterminate = false;
            } else if (checkedPermissions === totalPermissions) {
                moduleCheckbox.checked = true;
                moduleCheckbox.indeterminate = false;
            } else {
                moduleCheckbox.checked = false;
                moduleCheckbox.indeterminate = true;
            }
        });

        // Initialiser l'état de la checkbox "Tout sélectionner" au chargement
        updateSelectAllCheckbox();
    });
</script>
@endpush