@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Event Configuration</h1>
            <h2 class="text-xl text-gray-600 dark:text-gray-300 mt-1">{{ $event->name }}</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                Configure which tiers and modules are available for this event. Users will only see enabled content.
            </p>
        </div>
        <a href="{{ route('admin.events.show', $event) }}" class="btn btn-light btn-md">
            Back to Event
        </a>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded-md" role="alert">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-md" role="alert">
            {{ session('error') }}
        </div>
    @endif

    <!-- Main Configuration Form -->
    <form method="POST" action="{{ route('admin.events.configuration.update', $event) }}" class="space-y-6">
        @csrf
        
        <!-- Mobile Tab Navigation -->
        <div class="lg:hidden">
            <div class="border-b border-gray-200 dark:border-gray-700">
                <nav class="-mb-px flex space-x-8" aria-label="Configuration tabs">
                    <button type="button" 
                            class="tab-button active border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
                            data-tab="tiers"
                            aria-controls="tiers-panel"
                            aria-selected="true">
                        Tiers
                    </button>
                    <button type="button" 
                            class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
                            data-tab="modules"
                            aria-controls="modules-panel"
                            aria-selected="false">
                        Modules
                    </button>
                </nav>
            </div>
        </div>

        <!-- Desktop/Tablet Layout -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            
            <!-- Tiers Section -->
            <div id="tiers-panel" class="tab-panel bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex justify-between items-center">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Learning Tiers</h3>
                        <div class="flex space-x-2">
                            <button type="button" 
                                    id="select-all-tiers"
                                    class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
                                    aria-label="Select all tiers">
                                Select All
                            </button>
                            <span class="text-gray-300 dark:text-gray-600">|</span>
                            <button type="button" 
                                    id="deselect-all-tiers"
                                    class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
                                    aria-label="Deselect all tiers">
                                Deselect All
                            </button>
                        </div>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Select which learning tiers are available for this event.
                    </p>
                </div>
                
                <div class="p-6 space-y-4 max-h-96 overflow-y-auto">
                    @forelse($tiers as $tier)
                        <div class="tier-item border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                            <div class="flex items-start space-x-3">
                                <!-- Tier Selection Checkbox -->
                                <div class="flex items-center h-5 mt-1">
                                    <input id="tier-{{ $tier->id }}" 
                                           name="tier_ids[]" 
                                           type="checkbox" 
                                           value="{{ $tier->id }}"
                                           {{ in_array($tier->id, $eventTierIds) ? 'checked' : '' }}
                                           class="tier-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"
                                           aria-describedby="tier-{{ $tier->id }}-description">
                                </div>
                                
                                <!-- Tier Information -->
                                <div class="flex-1 min-w-0">
                                    <label for="tier-{{ $tier->id }}" class="text-sm font-medium text-gray-900 dark:text-white cursor-pointer">
                                        {{ $tier->name }}
                                        <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                                            Level {{ $tier->level ?? 'N/A' }}
                                        </span>
                                    </label>
                                    @if($tier->description)
                                        <div id="tier-{{ $tier->id }}-description" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                            {!! $tier->description !!}
                                        </div>
                                    @endif
                                </div>
                                
                                <!-- Tier Enabled Toggle -->
                                <div class="flex items-center">
                                    <label for="tier-{{ $tier->id }}-enabled" class="text-xs font-medium text-gray-700 dark:text-gray-300 mr-2">
                                        Enabled
                                    </label>
                                    <input id="tier-{{ $tier->id }}-enabled" 
                                           name="tier_enabled[{{ $tier->id }}]" 
                                           type="checkbox" 
                                           value="1"
                                           {{ in_array($tier->id, $eventTierIds) && $eventTiers->firstWhere('id', $tier->id)?->pivot?->is_enabled ? 'checked' : '' }}
                                           class="tier-enabled-checkbox w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                           aria-label="Enable tier {{ $tier->name }} for this event">
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="text-gray-500 dark:text-gray-400 text-center py-8">No learning tiers available.</p>
                    @endforelse
                </div>
            </div>

            <!-- Modules Section -->
            <div id="modules-panel" class="tab-panel bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex justify-between items-center">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Learning Modules</h3>
                        <div class="flex space-x-2">
                            <button type="button" 
                                    id="select-all-modules"
                                    class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
                                    aria-label="Select all modules">
                                Select All
                            </button>
                            <span class="text-gray-300 dark:text-gray-600">|</span>
                            <button type="button" 
                                    id="deselect-all-modules"
                                    class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
                                    aria-label="Deselect all modules">
                                Deselect All
                            </button>
                        </div>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Select which learning modules are available for this event.
                    </p>
                </div>
                
                <div class="p-6 space-y-6 max-h-96 overflow-y-auto">
                    @foreach($tiers as $tier)
                        @if(isset($modulesByTier[$tier->id]) && count($modulesByTier[$tier->id]) > 0)
                            <div class="module-group" data-tier-id="{{ $tier->id }}">
                                <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
                                    <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                                    {{ $tier->name }}
                                </h4>
                                <div class="space-y-3 ml-4">
                                    @foreach($modulesByTier[$tier->id] as $module)
                                        <div class="module-item flex items-start space-x-3 p-3 border border-gray-100 dark:border-gray-700 rounded-md">
                                            <!-- Module Selection Checkbox -->
                                            <div class="flex items-center h-5 mt-1">
                                                <input id="module-{{ $module->id }}" 
                                                       name="module_ids[]" 
                                                       type="checkbox" 
                                                       value="{{ $module->id }}"
                                                       {{ in_array($module->id, $eventModuleIds) ? 'checked' : '' }}
                                                       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"
                                                       data-tier-id="{{ $tier->id }}"
                                                       aria-describedby="module-{{ $module->id }}-description">
                                            </div>
                                            
                                            <!-- Module Information -->
                                            <div class="flex-1 min-w-0">
                                                <label for="module-{{ $module->id }}" class="text-sm font-medium text-gray-900 dark:text-white cursor-pointer">
                                                    {{ $module->name }}
                                                </label>
                                                @if($module->description)
                                                    <div id="module-{{ $module->id }}-description" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                        {!! $module->description !!}
                                                    </div>
                                                @endif
                                            </div>
                                            
                                            <!-- Module Enabled Toggle -->
                                            <div class="flex items-center">
                                                <label for="module-{{ $module->id }}-enabled" class="text-xs font-medium text-gray-700 dark:text-gray-300 mr-2">
                                                    Enabled
                                                </label>
                                                <input id="module-{{ $module->id }}-enabled" 
                                                       name="module_enabled[{{ $module->id }}]" 
                                                       type="checkbox" 
                                                       value="1"
                                                       {{ in_array($module->id, $eventModuleIds) && $eventModules->firstWhere('id', $module->id)?->pivot?->is_enabled ? 'checked' : '' }}
                                                       class="module-enabled-checkbox w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                                       aria-label="Enable module {{ $module->name }} for this event">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    @endforeach
                    
                    @if(count($unassignedModules) > 0)
                        <div class="module-group">
                            <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
                                <span class="w-2 h-2 bg-gray-400 rounded-full mr-2"></span>
                                Unassigned Modules
                            </h4>
                            <div class="space-y-3 ml-4">
                                @foreach($unassignedModules as $module)
                                    <div class="module-item flex items-start space-x-3 p-3 border border-gray-100 dark:border-gray-700 rounded-md">
                                        <!-- Module Selection Checkbox -->
                                        <div class="flex items-center h-5 mt-1">
                                            <input id="module-{{ $module->id }}" 
                                                   name="module_ids[]" 
                                                   type="checkbox" 
                                                   value="{{ $module->id }}"
                                                   {{ in_array($module->id, $eventModuleIds) ? 'checked' : '' }}
                                                   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"
                                                   aria-describedby="module-{{ $module->id }}-description">
                                        </div>
                                        
                                        <!-- Module Information -->
                                        <div class="flex-1 min-w-0">
                                            <label for="module-{{ $module->id }}" class="text-sm font-medium text-gray-900 dark:text-white cursor-pointer">
                                                {{ $module->name }}
                                            </label>
                                            @if($module->description)
                                                <div id="module-{{ $module->id }}-description" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                    {!! $module->description !!}
                                                </div>
                                            @endif
                                        </div>
                                        
                                        <!-- Module Enabled Toggle -->
                                        <div class="flex items-center">
                                            <label for="module-{{ $module->id }}-enabled" class="text-xs font-medium text-gray-700 dark:text-gray-300 mr-2">
                                                Enabled
                                            </label>
                                            <input id="module-{{ $module->id }}-enabled" 
                                                   name="module_enabled[{{ $module->id }}]" 
                                                   type="checkbox" 
                                                   value="1"
                                                   {{ in_array($module->id, $eventModuleIds) && $eventModules->firstWhere('id', $module->id)?->pivot?->is_enabled ? 'checked' : '' }}
                                                   class="module-enabled-checkbox w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                                   aria-label="Enable module {{ $module->name }} for this event">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                    
                    @if(count($modulesByTier) === 0 && count($unassignedModules) === 0)
                        <p class="text-gray-500 dark:text-gray-400 text-center py-8">No learning modules available.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex flex-col sm:flex-row justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
            <a href="{{ route('admin.events.show', $event) }}" class="btn btn-secondary btn-md">
                Cancel
            </a>
            <button type="submit" class="btn btn-success btn-md">
                Save Configuration
            </button>
        </div>
    </form>
</div>

<!-- JavaScript for Enhanced Functionality -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mobile tab functionality
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabPanels = document.querySelectorAll('.tab-panel');
    
    // Initialize mobile tabs
    function initializeTabs() {
        if (window.innerWidth < 1024) { // lg breakpoint
            // Show only tiers panel initially on mobile
            tabPanels.forEach((panel, index) => {
                panel.style.display = index === 0 ? 'block' : 'none';
            });
        } else {
            // Show all panels on desktop
            tabPanels.forEach(panel => {
                panel.style.display = 'block';
            });
        }
    }
    
    // Tab switching for mobile
    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Update button states
            tabButtons.forEach(btn => {
                btn.classList.remove('active', 'border-blue-500', 'text-blue-600');
                btn.classList.add('border-transparent', 'text-gray-500');
                btn.setAttribute('aria-selected', 'false');
            });
            
            this.classList.add('active', 'border-blue-500', 'text-blue-600');
            this.classList.remove('border-transparent', 'text-gray-500');
            this.setAttribute('aria-selected', 'true');
            
            // Show/hide panels on mobile
            if (window.innerWidth < 1024) {
                tabPanels.forEach(panel => {
                    if (panel.id === targetTab + '-panel') {
                        panel.style.display = 'block';
                    } else {
                        panel.style.display = 'none';
                    }
                });
            }
        });
    });
    
    // Initialize on load and resize
    initializeTabs();
    window.addEventListener('resize', initializeTabs);
    
    // Tier management
    const selectAllTiersBtn = document.getElementById('select-all-tiers');
    const deselectAllTiersBtn = document.getElementById('deselect-all-tiers');
    const tierCheckboxes = document.querySelectorAll('.tier-checkbox');
    const tierEnabledCheckboxes = document.querySelectorAll('.tier-enabled-checkbox');
    
    // Module management
    const selectAllModulesBtn = document.getElementById('select-all-modules');
    const deselectAllModulesBtn = document.getElementById('deselect-all-modules');
    const moduleCheckboxes = document.querySelectorAll('.module-checkbox');
    const moduleEnabledCheckboxes = document.querySelectorAll('.module-enabled-checkbox');
    
    // Tier bulk operations
    selectAllTiersBtn?.addEventListener('click', function() {
        tierCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
            // Auto-enable when selected
            const tierId = checkbox.value;
            const enabledCheckbox = document.getElementById('tier-' + tierId + '-enabled');
            if (enabledCheckbox) enabledCheckbox.checked = true;
        });
    });
    
    deselectAllTiersBtn?.addEventListener('click', function() {
        tierCheckboxes.forEach(checkbox => {
            checkbox.checked = false;
            // Auto-disable when deselected
            const tierId = checkbox.value;
            const enabledCheckbox = document.getElementById('tier-' + tierId + '-enabled');
            if (enabledCheckbox) enabledCheckbox.checked = false;
            
            // Also deselect related modules
            const relatedModules = document.querySelectorAll('.module-checkbox[data-tier-id="' + tierId + '"]');
            relatedModules.forEach(moduleCheckbox => {
                moduleCheckbox.checked = false;
                const moduleId = moduleCheckbox.value;
                const moduleEnabledCheckbox = document.getElementById('module-' + moduleId + '-enabled');
                if (moduleEnabledCheckbox) moduleEnabledCheckbox.checked = false;
            });
        });
    });
    
    // Module bulk operations
    selectAllModulesBtn?.addEventListener('click', function() {
        moduleCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
            // Auto-enable when selected
            const moduleId = checkbox.value;
            const enabledCheckbox = document.getElementById('module-' + moduleId + '-enabled');
            if (enabledCheckbox) enabledCheckbox.checked = true;
            
            // Auto-select related tier
            const tierId = checkbox.getAttribute('data-tier-id');
            if (tierId) {
                const tierCheckbox = document.getElementById('tier-' + tierId);
                if (tierCheckbox) tierCheckbox.checked = true;
            }
        });
    });
    
    deselectAllModulesBtn?.addEventListener('click', function() {
        moduleCheckboxes.forEach(checkbox => {
            checkbox.checked = false;
            // Auto-disable when deselected
            const moduleId = checkbox.value;
            const enabledCheckbox = document.getElementById('module-' + moduleId + '-enabled');
            if (enabledCheckbox) enabledCheckbox.checked = false;
        });
    });
    
    // Smart tier-module relationship handling
    tierCheckboxes.forEach(tierCheckbox => {
        tierCheckbox.addEventListener('change', function() {
            const tierId = this.value;
            const isChecked = this.checked;
            const tierEnabledCheckbox = document.getElementById('tier-' + tierId + '-enabled');
            
            if (!isChecked) {
                // When tier is deselected, deselect and disable its modules
                const relatedModules = document.querySelectorAll('.module-checkbox[data-tier-id="' + tierId + '"]');
                relatedModules.forEach(moduleCheckbox => {
                    moduleCheckbox.checked = false;
                    const moduleId = moduleCheckbox.value;
                    const moduleEnabledCheckbox = document.getElementById('module-' + moduleId + '-enabled');
                    if (moduleEnabledCheckbox) moduleEnabledCheckbox.checked = false;
                });
                
                // Disable tier
                if (tierEnabledCheckbox) tierEnabledCheckbox.checked = false;
            } else {
                // When tier is selected, suggest enabling it
                if (tierEnabledCheckbox) tierEnabledCheckbox.checked = true;
            }
        });
    });
    
    // Smart module-tier relationship handling
    moduleCheckboxes.forEach(moduleCheckbox => {
        moduleCheckbox.addEventListener('change', function() {
            const moduleId = this.value;
            const isChecked = this.checked;
            const tierId = this.getAttribute('data-tier-id');
            const moduleEnabledCheckbox = document.getElementById('module-' + moduleId + '-enabled');
            
            if (isChecked) {
                // When module is selected, auto-select its tier and suggest enabling both
                if (tierId) {
                    const tierCheckbox = document.getElementById('tier-' + tierId);
                    if (tierCheckbox) tierCheckbox.checked = true;
                    
                    const tierEnabledCheckbox = document.getElementById('tier-' + tierId + '-enabled');
                    if (tierEnabledCheckbox) tierEnabledCheckbox.checked = true;
                }
                
                // Suggest enabling the module
                if (moduleEnabledCheckbox) moduleEnabledCheckbox.checked = true;
            } else {
                // When module is deselected, disable it
                if (moduleEnabledCheckbox) moduleEnabledCheckbox.checked = false;
            }
        });
    });
    
    // Form validation before submission
    const form = document.querySelector('form');
    form?.addEventListener('submit', function(e) {
        const selectedTiers = document.querySelectorAll('.tier-checkbox:checked');
        const selectedModules = document.querySelectorAll('.module-checkbox:checked');
        
        if (selectedTiers.length === 0 && selectedModules.length === 0) {
            e.preventDefault();
            alert('Please select at least one tier or module for this event.');
            return false;
        }
        
        // Show loading state
        const submitButton = this.querySelector('button[type="submit"]');
        if (submitButton) {
            submitButton.disabled = true;
            submitButton.textContent = 'Saving...';
        }
    });
});
</script>

<style>
/* Custom styles for enhanced mobile experience */
@media (max-width: 1023px) {
    .tab-panel:not(:first-child) {
        display: none;
    }
    
    .tab-button.active {
        border-color: #3b82f6 !important;
        color: #3b82f6 !important;
    }
}

/* Focus styles for accessibility */
.tier-checkbox:focus,
.module-checkbox:focus,
.tier-enabled-checkbox:focus,
.module-enabled-checkbox:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Smooth transitions */
.tab-panel {
    transition: opacity 0.2s ease-in-out;
}

/* Touch targets for mobile */
@media (max-width: 767px) {
    .tier-checkbox,
    .module-checkbox,
    .tier-enabled-checkbox,
    .module-enabled-checkbox {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .tier-item,
    .module-item {
        padding: 1rem;
    }
}
</style>
@endsection