@props(['role' => null, 'modules'])

@php
    $isEdit = !is_null($role);
    $action = $isEdit ? route('provider.roles.update', $role->uuid) : route('provider.roles.store');
    $title = $isEdit ? 'Modifier le rôle' : 'Créer un rôle';
    $submitText = $isEdit ? 'Enregistrer' : 'Créer';
@endphp

<x-card>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ $title }}</h3>
            <x-button href="{{ route('provider.roles.index') }}" variant="secondary" size="sm">
                <svg class="w-4 h-4 md:mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                <span class="hidden md:inline">Retour</span>
            </x-button>
        </div>
    </x-slot>

    <form id="role-form" action="{{ $action }}" method="POST" class="space-y-6">
        @csrf
        @if($isEdit) @method('PUT') @endif
        
        <div class="space-y-4">
            <div>
                <x-input 
                    type="text" 
                    name="name" 
                    label="Nom du rôle" 
                    value="{{ old('name', $isEdit ? $role->name : '') }}"
                    required
                    error="{{ $errors->first('name') }}"
                />
            </div>

            <div>
                <x-textarea 
                    name="description" 
                    label="Description" 
                    rows="2"
                    value="{{ old('description', $isEdit ? $role->description : '') }}"
                />
            </div>
        </div>

        <div>
            <div class="flex items-center justify-between mb-3">
                <h4 class="text-sm font-medium text-gray-900 dark:text-white">Permissions</h4>
                <div class="flex gap-2">
                    <button type="button" onclick="toggleAllPermissions(true)" class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400">
                        Tout cocher
                    </button>
                    <span class="text-gray-300 dark:text-gray-600">|</span>
                    <button type="button" onclick="toggleAllPermissions(false)" class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400">
                        Tout décocher
                    </button>
                </div>
            </div>
            <div class="space-y-3 max-h-96 overflow-y-auto">
                @foreach($modules as $moduleKey => $module)
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                    <div class="flex items-center mb-3">
                        <input type="checkbox" id="module-{{ $moduleKey }}" data-module-master="{{ $moduleKey }}" class="w-5 h-5 rounded border-gray-300 text-blue-600 mr-2">
                        <label for="module-{{ $moduleKey }}" class="font-semibold text-gray-900 dark:text-white cursor-pointer">{{ $module['label'] }}</label>
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 ml-6">
                        @foreach($module['actions'] as $actionKey => $actionLabel)
                        <label class="flex items-center text-sm">
                            <input type="checkbox" name="permissions[{{ $moduleKey }}][]" value="{{ $actionKey }}" 
                                data-module="{{ $moduleKey }}"
                                {{ isset($role->permissions[$moduleKey]) && in_array($actionKey, $role->permissions[$moduleKey]) ? 'checked' : '' }}
                                class="w-4 h-4 rounded border-gray-300 text-blue-600">
                            <span class="ml-2 text-gray-700 dark:text-gray-300">{{ $actionLabel }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </form>
</x-card>

<!-- Boutons d'action -->
<div id="normal-button" class="mt-6 -mx-4 -mb-4 p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg">
    <div class="flex gap-3">
        <x-button href="{{ route('provider.roles.index') }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="role-form" class="flex-1">
            {{ $submitText }}
        </x-button>
    </div>
</div>

<!-- Bouton fixe -->
<div id="fixed-button" class="hidden fixed bottom-16 left-0 right-0 p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg z-40">
    <div class="flex gap-3">
        <x-button href="{{ route('provider.roles.index') }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="role-form" class="flex-1">
            {{ $submitText }}
        </x-button>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const normalButton = document.getElementById('normal-button');
        const fixedButton = document.getElementById('fixed-button');
        
        function toggleButton() {
            const rect = normalButton.getBoundingClientRect();
            const isFullyVisible = rect.bottom <= (window.innerHeight - 64);
            
            if (isFullyVisible) {
                fixedButton.classList.add('hidden');
            } else {
                fixedButton.classList.remove('hidden');
            }
        }
        
        window.addEventListener('scroll', toggleButton);
        toggleButton();
        
        // Fonction pour tout cocher/décocher
        window.toggleAllPermissions = function(checked) {
            document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = checked);
            // Réinitialiser les dépendances pour tous les modules
            document.querySelectorAll('[data-module-master]').forEach(masterCheckbox => {
                const moduleKey = masterCheckbox.dataset.moduleMaster;
                handleViewDependency(moduleKey);
            });
        };
        
        // Gérer les checkboxes maîtres
        document.querySelectorAll('[data-module-master]').forEach(masterCheckbox => {
            const moduleKey = masterCheckbox.dataset.moduleMaster;
            const childCheckboxes = document.querySelectorAll(`input[data-module="${moduleKey}"]`);
            
            // Initialiser l'état de la checkbox maître
            updateMasterCheckbox(masterCheckbox, childCheckboxes);
            
            // Quand on clique sur la checkbox maître
            masterCheckbox.addEventListener('change', function() {
                childCheckboxes.forEach(cb => cb.checked = this.checked);
                handleViewDependency(moduleKey);
            });
            
            // Quand on clique sur une checkbox enfant
            childCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateMasterCheckbox(masterCheckbox, childCheckboxes);
                    handleViewDependency(moduleKey);
                });
            });
        });
        
        // Gérer la dépendance "Consulter"
        function handleViewDependency(moduleKey) {
            const viewCheckbox = document.querySelector(`input[data-module="${moduleKey}"][value="view"]`);
            if (!viewCheckbox) return;
            
            const otherCheckboxes = Array.from(document.querySelectorAll(`input[data-module="${moduleKey}"]`))
                .filter(cb => cb.value !== 'view');
            
            const hasOtherChecked = otherCheckboxes.some(cb => cb.checked);
            
            if (hasOtherChecked) {
                viewCheckbox.checked = true;
                viewCheckbox.style.opacity = '0.5';
                viewCheckbox.style.cursor = 'not-allowed';
                viewCheckbox.dataset.locked = 'true';
            } else {
                viewCheckbox.style.opacity = '';
                viewCheckbox.style.cursor = '';
                viewCheckbox.dataset.locked = 'false';
            }
        }
        
        // Empêcher de décocher "Consulter" si verrouillé
        document.addEventListener('click', function(e) {
            if (e.target.type === 'checkbox' && e.target.value === 'view' && e.target.dataset.locked === 'true') {
                e.preventDefault();
                e.target.checked = true;
            }
        });
        
        // Initialiser les dépendances au chargement
        document.querySelectorAll('[data-module]').forEach(cb => {
            const moduleKey = cb.dataset.module;
            handleViewDependency(moduleKey);
        });
        
        function updateMasterCheckbox(masterCheckbox, childCheckboxes) {
            const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
            const totalCount = childCheckboxes.length;
            
            if (checkedCount === 0) {
                masterCheckbox.checked = false;
                masterCheckbox.indeterminate = false;
            } else if (checkedCount === totalCount) {
                masterCheckbox.checked = true;
                masterCheckbox.indeterminate = false;
            } else {
                masterCheckbox.checked = false;
                masterCheckbox.indeterminate = true;
            }
        }
    });
</script>