@extends('layouts.app')

@section('title', 'Create Setting')
@section('subtitle', 'Add a new system setting')

@section('content')
<div class="max-w-4xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('settings.index') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Settings
        </a>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
        </div>
    @endif

    <!-- Setting Form -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-plus text-blue-600 mr-2"></i>
                Create New Setting
            </h3>
        </div>
        
        <form method="POST" action="{{ route('settings.store') }}" class="p-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Basic Information -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Basic Information</h4>
                    
                    <div>
                        <label for="key" class="block text-sm font-medium text-gray-700 mb-2">Setting Key *</label>
                        <input type="text" id="key" name="key" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('key') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., company_name" value="{{ old('key') }}">
                        <p class="text-xs text-gray-500 mt-1">Unique identifier for this setting (lowercase, underscores)</p>
                        @error('key')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="group" class="block text-sm font-medium text-gray-700 mb-2">Group *</label>
                        <select id="group" name="group" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('group') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Group</option>
                            @foreach($groups as $groupKey => $groupName)
                                <option value="{{ $groupKey }}" {{ old('group') == $groupKey ? 'selected' : '' }}>
                                    {{ $groupName }}
                                </option>
                            @endforeach
                        </select>
                        @error('group')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="label" class="block text-sm font-medium text-gray-700 mb-2">Label *</label>
                        <input type="text" id="label" name="label" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('label') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., Company Name" value="{{ old('label') }}">
                        @error('label')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea id="description" name="description" rows="3"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('description') border-red-500 ring-red-500 @enderror"
                                  placeholder="Brief description of this setting...">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Configuration -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Configuration</h4>
                    
                    <div>
                        <label for="type" class="block text-sm font-medium text-gray-700 mb-2">Type *</label>
                        <select id="type" name="type" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('type') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Type</option>
                            @foreach($types as $typeKey => $typeName)
                                <option value="{{ $typeKey }}" {{ old('type') == $typeKey ? 'selected' : '' }}>
                                    {{ $typeName }}
                                </option>
                            @endforeach
                        </select>
                        @error('type')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div id="optionsContainer" style="display: none;">
                        <label for="options" class="block text-sm font-medium text-gray-700 mb-2">Options (one per line)</label>
                        <textarea id="options" name="options" rows="4"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('options') border-red-500 ring-red-500 @enderror"
                                  placeholder="Option 1&#10;Option 2&#10;Option 3">{{ old('options') ? implode("\n", old('options')) : '' }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Enter each option on a new line</p>
                        @error('options')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="value" class="block text-sm font-medium text-gray-700 mb-2">Default Value</label>
                        <input type="text" id="value" name="value"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('value') border-red-500 ring-red-500 @enderror"
                               placeholder="Default value for this setting" value="{{ old('value') }}">
                        @error('value')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-2">Sort Order</label>
                        <input type="number" id="sort_order" name="sort_order" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('sort_order') border-red-500 ring-red-500 @enderror"
                               value="{{ old('sort_order', 0) }}">
                        <p class="text-xs text-gray-500 mt-1">Lower numbers appear first</p>
                        @error('sort_order')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Options -->
            <div class="mt-8">
                <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-6">Options</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex items-center">
                        <input type="checkbox" id="is_required" name="is_required" value="1" {{ old('is_required') ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="is_required" class="ml-2 block text-sm text-gray-900">
                            Required Setting
                        </label>
                    </div>
                    <div class="flex items-center">
                        <input type="checkbox" id="is_public" name="is_public" value="1" {{ old('is_public') ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="is_public" class="ml-2 block text-sm text-gray-900">
                            Public Setting (accessible to non-admin users)
                        </label>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="mt-8 flex justify-end">
                <button type="submit" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
                    <i class="fas fa-save mr-2"></i>
                    Create Setting
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    document.getElementById('type').addEventListener('change', function() {
        const optionsContainer = document.getElementById('optionsContainer');
        if (this.value === 'select') {
            optionsContainer.style.display = 'block';
        } else {
            optionsContainer.style.display = 'none';
        }
    });

    // Show options container if type is already 'select' (for validation errors)
    if (document.getElementById('type').value === 'select') {
        document.getElementById('optionsContainer').style.display = 'block';
    }
</script>
@endsection