@extends('layouts.main')

@section('title')
    {{ __('roles.create') }}
@endsection

@section('page_title')
    {{ __('roles.create') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('admin.roles.index'), 'label' => __('roles.title')],
        ['url' => '', 'label' => __('roles.create')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-plus text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('roles.create') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('roles.create_description') }}</p>
                    </div>
                </div>
                <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary border border-white/50 backdrop-blur-sm rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur w-full sm:w-auto justify-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    <span class="hidden sm:inline whitespace-nowrap">{{ __('roles.back_to_roles') }}</span>
                    <span class="sm:hidden">{{ __('roles.back') }}</span>
                </a>
            </div>
        </div>

        <!-- Create Role Form Card -->
        <div class="">
            <div class="">
                <form action="{{ route('admin.roles.store') }}" method="POST" class="space-y-8">
                    @csrf

                    <!-- Role Information Section -->
                    <div class="space-y-6 border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-shield-alt text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">{{ __('roles.role_information') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('roles.role_information_description') }}</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="name" class="form-label required">{{ __('roles.role_name') }}</label>
                            <div class="relative">
                                <input type="text" 
                                       id="name" 
                                       name="name" 
                                       class="form-control !mb-1 @error('name') is-invalid @enderror" 
                                       value="{{ old('name') }}" 
                                       placeholder="{{ __('roles.role_name_placeholder') }}"
                                       required 
                                       autofocus>
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                    <i class="fas fa-tag text-gray-400"></i>
                                </div>
                            </div>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-gray-500 mt-1">{{ __('roles.role_name_help') }}</small>
                        </div>
                    </div>

                    <!-- Permissions Section -->
                    <div class="space-y-6 border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-blue-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-key text-blue-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">{{ __('roles.assign_permissions') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('roles.assign_permissions_description') }}</p>
                            </div>
                        </div>
                        
                        @if($permissions->isEmpty())
                            <div class="bg-yellow-50/80 border border-white/50 backdrop-blur-sm rounded-24 p-6 shadow-front-box-shadow-glow">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h3 class="text-lg font-semibold text-yellow-800 mb-2">{{ __('roles.no_permissions_available') }}</h3>
                                        <p class="text-sm text-yellow-700 mb-3">{{ __('roles.no_permissions_available_message') }}</p>
                                        <a href="{{ route('admin.roles.permissions') }}" class="btn btn-outline-warning border border-white/50 backdrop-blur-sm rounded-24">
                                            <i class="fas fa-plus mr-2"></i>
                                            {{ __('roles.create_permissions') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                @foreach($permissions as $module => $modulePermissions)
                                    <div class="border border-white/40 bg-fl-gray-extra-light/50 backdrop-blur-sm rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-200">
                                        <div class="border-b border-white/20">
                                            <!-- Module Header -->
                                            <div class="flex items-center space-x-3 px-4 pt-4 pb-4">
                                                <div class="w-10 h-10 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                                    <i class="fas fa-folder text-primary"></i>
                                                </div>
                                                <div>
                                                    <h5 class="text-lg font-semibold text-gray-700">{{ ucfirst($module) }} {{ __('roles.module') }}</h5>
                                                    <p class="text-sm text-gray-500">{{ __('roles.permissions_count_label', ['count' => count($modulePermissions)]) }}</p>
                                                </div>
                                            </div>

                                            <!-- Permissions List -->
                                            <div class="space-y-3 px-4 pb-4 pt-3">
                                                @foreach($modulePermissions as $permission)
                                                    <label class="flex items-center space-x-3 cursor-pointer hover:bg-fl-gray-extra-light/60 bg-fl-gray-extra-light/40 backdrop-blur-sm border border-white/20 p-2 rounded-16 transition">
                                                        <input type="checkbox" 
                                                               name="permissions[]" 
                                                               value="{{ $permission->name }}"
                                                               {{ in_array($permission->name, old('permissions', [])) ? 'checked' : '' }}
                                                               class="h-4 w-4 text-primary border-gray-300 rounded-[2px] focus:ring-primary">
                                                        <span class="text-sm text-gray-700">{{ $permission->name }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex items-center justify-end space-x-3 pt-6 border-t border-white/30">
                        <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary border border-white/50 backdrop-blur-sm rounded-24">
                            <i class="fas fa-times mr-2"></i>
                            {{ __('roles.cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary rounded-24">
                            <i class="fas fa-save mr-2"></i>
                            {{ __('roles.create_role_button') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Help Section -->
        <div class="bg-blue-50/80 border border-white/50 backdrop-blur-sm rounded-24 p-6 shadow-front-box-shadow-glow">
            <div class="flex items-start space-x-4">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-blue-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                        <i class="fas fa-info-circle text-blue-600"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <h4 class="text-lg font-semibold text-blue-900 mb-3">{{ __('roles.how_to_use') }}</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                                <span class="text-sm text-blue-800">{{ __('roles.tip_1') }}</span>
                            </div>
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                                <span class="text-sm text-blue-800">{{ __('roles.tip_2') }}</span>
                            </div>
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                                <span class="text-sm text-blue-800">{{ __('roles.tip_3') }}</span>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                                <span class="text-sm text-blue-800">{{ __('roles.tip_4') }}</span>
                            </div>
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                                <span class="text-sm text-blue-800">{{ __('roles.tip_5') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('JavaScript loaded - DOM ready');
    
    // Function to update select-all checkbox state
    function updateSelectAllState(module) {
        console.log('Updating select-all state for module:', module);
        
        // Find all permission checkboxes for this module
        const moduleCheckboxes = document.querySelectorAll(`input[class*="module-${module}"]`);
        const total = moduleCheckboxes.length;
        let checked = 0;
        
        moduleCheckboxes.forEach(function(checkbox) {
            if (checkbox.checked) checked++;
        });
        
        // Find the select-all checkbox for this module
        const selectAllCheckbox = document.querySelector(`input[data-module="${module}"]`);
        
        console.log(`Module: ${module}, Total: ${total}, Checked: ${checked}`);
        
        if (checked === total && total > 0) {
            if (selectAllCheckbox) {
                selectAllCheckbox.checked = true;
                console.log(`Setting select-all to checked for module: ${module}`);
            }
        } else {
            if (selectAllCheckbox) {
                selectAllCheckbox.checked = false;
                console.log(`Setting select-all to unchecked for module: ${module}`);
            }
        }
    }

    // Initialize select-all state on page load
    const selectAllCheckboxes = document.querySelectorAll('input[data-module]');
    selectAllCheckboxes.forEach(function(checkbox) {
        const module = checkbox.getAttribute('data-module');
        console.log('Initializing module:', module);
        updateSelectAllState(module);
    });

    // Select All functionality for each module
    selectAllCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const module = this.getAttribute('data-module');
            const isChecked = this.checked;
            console.log(`Select All clicked for module: ${module}, checked: ${isChecked}`);
            
            // Find all permission checkboxes for this module and update them
            const moduleCheckboxes = document.querySelectorAll(`input[class*="module-${module}"]`);
            moduleCheckboxes.forEach(function(permissionCheckbox) {
                permissionCheckbox.checked = isChecked;
                console.log(`Setting checkbox ${permissionCheckbox.value} to ${isChecked}`);
            });
        });
    });

    // Update select-all checkbox when individual checkboxes change
    const permissionCheckboxes = document.querySelectorAll('input[name="permissions[]"]');
    permissionCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const classes = this.className;
            const moduleMatch = classes.match(/module-(\w+)/);
            if (moduleMatch) {
                const module = moduleMatch[1];
                console.log(`Permission changed for module: ${module}`);
                updateSelectAllState(module);
            }
        });
    });
});
</script>