@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">Client Configuration</h1>
            <h2 class="text-xl text-gray-600 dark:text-gray-300 mt-1">{{ $client->name }}</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                Configure which tiers and modules are available for this client organization. Users will only see enabled content.
            </p>
        </div>
        <a href="{{ route('admin.clients.show', $client) }}" 
           class="inline-flex items-center justify-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md font-medium text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800 transition-colors duration-200 ease-in-out w-full sm:w-auto text-center"
           aria-label="Back to client {{ $client->name }}">
            Back to Client
        </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.clients.configuration.update', $client) }}" 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 Layout: Side by Side -->
        <div class="hidden lg:grid lg:grid-cols-2 lg:gap-8">
            <!-- Tiers Section -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Available Tiers</h3>
                    <div class="flex space-x-2">
                        <button type="button" 
                                class="text-xs px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
                                onclick="selectAllTiers()">
                            Select All
                        </button>
                        <button type="button" 
                                class="text-xs px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                                onclick="clearAllTiers()">
                            Clear All
                        </button>
                    </div>
                </div>
                
                <div class="space-y-3">
                    @foreach($tiers as $tier)
                    <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <label class="flex items-start space-x-3 cursor-pointer">
                            <input type="checkbox" 
                                   name="tier_ids[]" 
                                   value="{{ $tier->id }}"
                                   {{ in_array($tier->id, $clientTiers) ? 'checked' : '' }}
                                   class="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <div class="flex-1 min-w-0">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ $tier->name }}
                                </div>
                                @if($tier->description)
                                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                                    {!! $tier->description !!}
                                </div>
                                @endif
                                <div class="flex items-center space-x-4 mt-2 text-xs text-gray-500 dark:text-gray-400">
                                    <span class="flex items-center">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        {{ $tier->completed_users }} completed
                                    </span>
                                    <span class="flex items-center">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
                                        </svg>
                                        {{ $tier->active_users }} active
                                    </span>
                                </div>
                            </div>
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Modules Section -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Available Modules</h3>
                    <div class="flex space-x-2">
                        <button type="button" 
                                class="text-xs px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
                                onclick="selectAllModules()">
                            Select All
                        </button>
                        <button type="button" 
                                class="text-xs px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                                onclick="clearAllModules()">
                            Clear All
                        </button>
                    </div>
                </div>
                
                <div class="space-y-4">
                    @foreach($tierModules as $tierName => $modules)
                    <div class="border-l-4 border-blue-500 pl-4">
                        <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">{{ $tierName }}</h4>
                        <div class="space-y-2">
                            @foreach($modules as $module)
                            <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <label class="flex items-start space-x-3 cursor-pointer">
                                    <input type="checkbox" 
                                           name="module_ids[]" 
                                           value="{{ $module->id }}"
                                           {{ in_array($module->id, $clientModules) ? 'checked' : '' }}
                                           class="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    <div class="flex-1 min-w-0">
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ $module->name }}
                                        </div>
                                        @if($module->description)
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                                            {!! $module->description !!}
                                        </div>
                                        @endif
                                        <div class="flex items-center space-x-4 mt-2 text-xs text-gray-500 dark:text-gray-400">
                                            <span class="flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                                </svg>
                                                {{ $module->completed_users }} completed
                                            </span>
                                            <span class="flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
                                                </svg>
                                                {{ $module->active_users }} active
                                            </span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Mobile Layout: Tabbed -->
        <div class="lg:hidden">
            <!-- Tiers Tab Panel -->
            <div id="tiers-panel" class="tab-panel bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Available Tiers</h3>
                    <div class="flex space-x-2">
                        <button type="button" 
                                class="text-xs px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
                                onclick="selectAllTiers()">
                            Select All
                        </button>
                        <button type="button" 
                                class="text-xs px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                                onclick="clearAllTiers()">
                            Clear All
                        </button>
                    </div>
                </div>
                
                <div class="space-y-3">
                    @foreach($tiers as $tier)
                    <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <label class="flex items-start space-x-3 cursor-pointer">
                            <input type="checkbox" 
                                   name="tier_ids[]" 
                                   value="{{ $tier->id }}"
                                   {{ in_array($tier->id, $clientTiers) ? 'checked' : '' }}
                                   class="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <div class="flex-1 min-w-0">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ $tier->name }}
                                </div>
                                @if($tier->description)
                                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                                    {!! $tier->description !!}
                                </div>
                                @endif
                                <div class="flex items-center space-x-4 mt-2 text-xs text-gray-500 dark:text-gray-400">
                                    <span class="flex items-center">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        {{ $tier->completed_users }} completed
                                    </span>
                                    <span class="flex items-center">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
                                        </svg>
                                        {{ $tier->active_users }} active
                                    </span>
                                </div>
                            </div>
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Modules Tab Panel -->
            <div id="modules-panel" class="tab-panel hidden bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Available Modules</h3>
                    <div class="flex space-x-2">
                        <button type="button" 
                                class="text-xs px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
                                onclick="selectAllModules()">
                            Select All
                        </button>
                        <button type="button" 
                                class="text-xs px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                                onclick="clearAllModules()">
                            Clear All
                        </button>
                    </div>
                </div>
                
                <div class="space-y-4">
                    @foreach($tierModules as $tierName => $modules)
                    <div class="border-l-4 border-blue-500 pl-4">
                        <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">{{ $tierName }}</h4>
                        <div class="space-y-2">
                            @foreach($modules as $module)
                            <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <label class="flex items-start space-x-3 cursor-pointer">
                                    <input type="checkbox" 
                                           name="module_ids[]" 
                                           value="{{ $module->id }}"
                                           {{ in_array($module->id, $clientModules) ? 'checked' : '' }}
                                           class="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    <div class="flex-1 min-w-0">
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ $module->name }}
                                        </div>
                                        @if($module->description)
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                                            {!! $module->description !!}
                                        </div>
                                        @endif
                                        <div class="flex items-center space-x-4 mt-2 text-xs text-gray-500 dark:text-gray-400">
                                            <span class="flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                                </svg>
                                                {{ $module->completed_users }} completed
                                            </span>
                                            <span class="flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
                                                </svg>
                                                {{ $module->active_users }} active
                                            </span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-center pt-6">
            <x-ui.button variant="save" size="md" type="submit">
                Save Configuration
            </x-ui.button>
        </div>
    </form>
</div>

<script>
// Tab functionality for mobile
document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabPanels = document.querySelectorAll('.tab-panel');
    
    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');
            
            // Update panel visibility
            tabPanels.forEach(panel => {
                panel.classList.add('hidden');
            });
            
            document.getElementById(targetTab + '-panel').classList.remove('hidden');
        });
    });
});

// Bulk selection functions
function selectAllTiers() {
    const checkboxes = document.querySelectorAll('input[name="tier_ids[]"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = true;
    });
}

function clearAllTiers() {
    const checkboxes = document.querySelectorAll('input[name="tier_ids[]"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
}

function selectAllModules() {
    const checkboxes = document.querySelectorAll('input[name="module_ids[]"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = true;
    });
}

function clearAllModules() {
    const checkboxes = document.querySelectorAll('input[name="module_ids[]"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
}
</script>
@endsection