@extends('super_admin.layouts.master')

@section('title', 'Edit ' . $module->name)
@section('page_title', 'Edit Module: ' . $module->name)

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Back Button -->
    <div class="flex items-center gap-4 mb-6">
        <a href="{{ route('super_admin.modules.index') }}" class="text-gray-600 hover:text-gray-800 transition-colors">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <div>
            <p class="text-gray-500 text-sm">Manage module details and AI features</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Module Details -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                <i class="fas fa-cog text-blue-600"></i> Module Settings
            </h2>
            
            <form action="{{ route('super_admin.modules.update', $module) }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Module Name</label>
                        <input type="text" name="name" value="{{ old('name', $module->name) }}" required
                               class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none">
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Module Code</label>
                        <input type="text" name="code" value="{{ old('code', $module->code) }}" required
                               class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none">
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-gray-700 font-medium mb-2">Category</label>
                            <select name="category" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none">
                                @foreach($categories as $value => $label)
                                    <option value="{{ $value }}" {{ $module->category == $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 font-medium mb-2">Icon</label>
                            <select name="icon" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none">
                                @foreach($icons as $value => $label)
                                    <option value="{{ $value }}" {{ $module->icon == $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Description</label>
                        <textarea name="description" rows="3" 
                                  class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:outline-none">{{ old('description', $module->description) }}</textarea>
                    </div>

                    <div class="flex items-center gap-3">
                        <input type="checkbox" name="is_active" id="is_active" value="1" {{ $module->is_active ? 'checked' : '' }}
                               class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="is_active" class="text-gray-700">Module is active</label>
                    </div>
                </div>

                <div class="mt-6">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                        <i class="fas fa-save mr-2"></i> Update Module
                    </button>
                </div>
            </form>
        </div>

        <!-- Features Management -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                <i class="fas fa-brain text-purple-600"></i> AI Features ({{ $module->features->count() }})
            </h2>

            <!-- Add Feature Form -->
            <form action="{{ route('super_admin.modules.features.add', $module) }}" method="POST" class="mb-6 bg-gray-50 rounded-lg p-4 border border-gray-200">
                @csrf
                <h3 class="text-sm font-medium text-gray-700 mb-3">Add New Feature</h3>
                <div class="grid grid-cols-1 gap-3">
                    <input type="text" name="name" placeholder="Feature name" required
                           class="border border-gray-300 rounded px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
                    <input type="text" name="code" placeholder="Feature code (e.g., ai_feature)" required
                           class="border border-gray-300 rounded px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
                    <select name="tier" class="border border-gray-300 rounded px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
                        @foreach($tiers as $tier)
                            <option value="{{ $tier }}">{{ ucfirst($tier) }}</option>
                        @endforeach
                    </select>
                    <div class="flex items-center gap-2">
                        <input type="checkbox" name="is_ai_feature" id="is_ai_feature" value="1" checked
                               class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                        <label for="is_ai_feature" class="text-gray-700 text-sm">This is an AI feature</label>
                    </div>
                    <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-2 rounded text-sm transition-colors">
                        <i class="fas fa-plus mr-1"></i> Add Feature
                    </button>
                </div>
            </form>

            <!-- Features List -->
            <div class="space-y-2 max-h-96 overflow-y-auto">
                @forelse($module->features as $feature)
                <div class="flex items-center justify-between bg-gray-50 rounded-lg p-3 border border-gray-200">
                    <div class="flex items-center gap-3">
                        @if($feature->is_ai_feature)
                            <span class="w-8 h-8 bg-purple-100 rounded flex items-center justify-center">
                                <i class="fas fa-robot text-purple-600 text-sm"></i>
                            </span>
                        @else
                            <span class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center">
                                <i class="fas fa-cog text-gray-600 text-sm"></i>
                            </span>
                        @endif
                        <div>
                            <p class="text-gray-800 font-medium text-sm">{{ $feature->name }}</p>
                            <p class="text-gray-500 text-xs">{{ $feature->code }} • {{ ucfirst($feature->tier) }}</p>
                        </div>
                    </div>
                    <form action="{{ route('super_admin.modules.features.remove', [$module, $feature]) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-500 hover:text-red-700 p-2" onclick="return confirm('Remove this feature?')">
                            <i class="fas fa-trash text-sm"></i>
                        </button>
                    </form>
                </div>
                @empty
                <p class="text-gray-500 text-center py-4">No features added yet. Waheguru Ji, add your first AI feature!</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection