@extends('layouts.admin')

@section('content')
<div class="py-6">
    <x-admin.card>
        <x-slot name="header">
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                    Manage Event Modules: {{ $event->name }}
                </h2>
                <a href="{{ route('admin.events.show', $event->id) }}" class="inline-flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-transparent rounded-md font-semibold text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    Back to Event
                </a>
            </div>
        </x-slot>
        
        <form method="POST" action="{{ route('admin.events.modules.update', $event->id) }}">
            @csrf
            
            <div class="mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Available Modules</h3>
                    
                    <!-- Bulk Selection Controls -->
                    <div class="flex space-x-2">
                        <button type="button" id="selectAll" class="inline-flex items-center px-3 py-1 bg-blue-100 dark:bg-blue-900 border border-blue-300 dark:border-blue-700 rounded-md font-medium text-sm text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition ease-in-out duration-150">
                            Select All
                        </button>
                        <button type="button" id="deselectAll" class="inline-flex items-center px-3 py-1 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md font-medium text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                            Deselect All
                        </button>
                    </div>
                </div>
                
                @if(isset($availableModules) && $availableModules->count() > 0)
                    <div class="space-y-6">
                        @php
                            $modulesByTier = $availableModules->groupBy(function($module) {
                                return $module->tier->name ?? 'Uncategorized';
                            });
                        @endphp
                        
                        @foreach($modulesByTier as $tierName => $tierModules)
                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">{{ $tierName }}</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    @foreach($tierModules as $module)
                                        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-4 shadow-sm">
                                            <div class="flex items-start">
                                                <input 
                                                    type="checkbox" 
                                                    id="module_{{ $module->id }}" 
                                                    name="module_ids[]" 
                                                    value="{{ $module->id }}" 
                                                    class="module-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 mt-1"
                                                    {{ in_array($module->id, $eventModules) ? 'checked' : '' }}
                                                >
                                                <div class="ml-3 flex-1">
                                                    <label for="module_{{ $module->id }}" class="text-sm font-medium text-gray-900 dark:text-gray-300 cursor-pointer">
                                                        {{ $module->name }}
                                                    </label>
                                                    
                                                    @if($module->description)
                                                        <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                            {!! $module->description !!}
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            
                                            <!-- Hidden input to track enabled status -->
                                            <input 
                                                type="hidden" 
                                                name="module_enabled[{{ $module->id }}]" 
                                                value="{{ in_array($module->id, $eventModules) && $event->modules->find($module->id)?->pivot?->is_enabled ? '1' : '0' }}"
                                                id="enabled_hidden_{{ $module->id }}"
                                            >
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-gray-500 dark:text-gray-400">No learning modules available.</p>
                @endif
            </div>
            
            <div class="flex justify-end space-x-3">
                <a href="{{ route('admin.events.show', $event->id) }}" class="inline-flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-transparent rounded-md font-semibold text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    Cancel
                </a>
                <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 dark:bg-indigo-500 border border-transparent rounded-md font-semibold text-sm text-white hover:bg-indigo-700 dark:hover:bg-indigo-400 focus:bg-indigo-700 dark:focus:bg-indigo-400 active:bg-indigo-900 dark:active:bg-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                    Save Changes
                </button>
            </div>
        </form>
    </x-admin.card>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllBtn = document.getElementById('selectAll');
    const deselectAllBtn = document.getElementById('deselectAll');
    const moduleCheckboxes = document.querySelectorAll('.module-checkbox');
    
    // Select All functionality
    selectAllBtn.addEventListener('click', function() {
        moduleCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
            // Update hidden enabled field
            const moduleId = checkbox.value;
            const hiddenField = document.getElementById('enabled_hidden_' + moduleId);
            if (hiddenField) {
                hiddenField.value = '1';
            }
        });
    });
    
    // Deselect All functionality
    deselectAllBtn.addEventListener('click', function() {
        moduleCheckboxes.forEach(checkbox => {
            checkbox.checked = false;
            // Update hidden enabled field
            const moduleId = checkbox.value;
            const hiddenField = document.getElementById('enabled_hidden_' + moduleId);
            if (hiddenField) {
                hiddenField.value = '0';
            }
        });
    });
    
    // Individual checkbox change handler
    moduleCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const moduleId = this.value;
            const hiddenField = document.getElementById('enabled_hidden_' + moduleId);
            if (hiddenField) {
                hiddenField.value = this.checked ? '1' : '0';
            }
        });
    });
});
</script>
@endsection