@extends('install')
@section('content')
    <div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-cyan-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-2xl w-full space-y-8">
            <!-- Header -->
            <div class="text-center">
                <div class="flex justify-center mb-6">
                    <div class="relative">
                        <div class="w-20 h-20 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </div>
                        <div class="absolute -top-2 -right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                            <span class="text-white text-xs font-bold">4</span>
                        </div>
                    </div>
                </div>
                <h1 class="text-3xl font-bold text-gray-900 mb-4">Environment Configuration</h1>
                <p class="text-lg text-gray-600 max-w-xl mx-auto">
                    Configure your application settings and environment variables.
                </p>
            </div>

            <!-- Progress Bar -->
            <div class="bg-white rounded-2xl p-8 shadow-lg border border-gray-100">
                <div class="mb-8">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm font-medium text-gray-700">Installation Progress</span>
                        <span class="text-sm font-medium text-gray-500">Step 4 of 4</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 h-2 rounded-full transition-all duration-500" style="width: 100%"></div>
                    </div>
                </div>

                <!-- Success Message -->
                @if (session('success'))
                    <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-green-800 font-medium">{{ session('success') }}</span>
                        </div>
                    </div>
                @endif

                <!-- Environment Form -->
                <form method="POST" action="{{ route('installer.save-environment') }}" class="space-y-6">
                    @csrf
                    
                    <!-- Application Name -->
                    <div>
                        <label for="app_name" class="block text-sm font-medium text-gray-700 mb-2">
                            Application Name
                        </label>
                        <input 
                            type="text" 
                            id="app_name" 
                            name="app_name" 
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('app_name') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror" 
                            placeholder="ProSchedule"
                            value="{{ old('app_name', 'ProSchedule') }}"
                            required 
                        />
                        @error('app_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Application URL -->
                    <div>
                        <label for="app_url" class="block text-sm font-medium text-gray-700 mb-2">
                            Application URL
                        </label>
                        <input 
                            type="url" 
                            id="app_url" 
                            name="app_url" 
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('app_url') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror" 
                            placeholder="https://yourdomain.com"
                            value="{{ old('app_url', request()->getSchemeAndHttpHost()) }}"
                            required 
                        />
                        @error('app_url')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Environment -->
                    <div>
                        <label for="app_env" class="block text-sm font-medium text-gray-700 mb-2">
                            Environment
                        </label>
                        <select 
                            id="app_env" 
                            name="app_env" 
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('app_env') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror"
                            required
                        >
                            <option value="production" {{ old('app_env', 'production') == 'production' ? 'selected' : '' }}>Production</option>
                            <option value="local" {{ old('app_env') == 'local' ? 'selected' : '' }}>Local Development</option>
                            <option value="staging" {{ old('app_env') == 'staging' ? 'selected' : '' }}>Staging</option>
                        </select>
                        @error('app_env')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Debug Mode -->
                    <div>
                        <label class="flex items-center">
                            <input 
                                type="checkbox" 
                                id="app_debug" 
                                name="app_debug" 
                                value="1"
                                class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 @error('app_debug') border-red-300 focus:ring-red-500 @enderror"
                                {{ old('app_debug', false) ? 'checked' : '' }}
                            />
                            <span class="ml-2 text-sm font-medium text-gray-700">Enable Debug Mode</span>
                        </label>
                        <p class="mt-1 text-sm text-gray-500">Enable this only for development. Never enable in production.</p>
                        @error('app_debug')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Advanced Settings -->
                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Advanced Settings</h3>
                        
                        <!-- Mail Configuration -->
                        <div class="space-y-4">
                            <h4 class="text-md font-medium text-gray-800">Mail Configuration</h4>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="mail_host" class="block text-sm font-medium text-gray-700 mb-2">
                                        Mail Host
                                    </label>
                                    <input 
                                        type="text" 
                                        id="mail_host" 
                                        name="mail_host" 
                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" 
                                        placeholder="smtp.gmail.com"
                                        value="{{ old('mail_host', 'smtp.gmail.com') }}"
                                    />
                                </div>
                                
                                <div>
                                    <label for="mail_port" class="block text-sm font-medium text-gray-700 mb-2">
                                        Mail Port
                                    </label>
                                    <input 
                                        type="number" 
                                        id="mail_port" 
                                        name="mail_port" 
                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" 
                                        placeholder="587"
                                        value="{{ old('mail_port', '587') }}"
                                    />
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="mail_username" class="block text-sm font-medium text-gray-700 mb-2">
                                        Mail Username
                                    </label>
                                    <input 
                                        type="email" 
                                        id="mail_username" 
                                        name="mail_username" 
                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" 
                                        placeholder="your-email@gmail.com"
                                        value="{{ old('mail_username') }}"
                                    />
                                </div>
                                
                                <div>
                                    <label for="mail_password" class="block text-sm font-medium text-gray-700 mb-2">
                                        Mail Password
                                    </label>
                                    <input 
                                        type="password" 
                                        id="mail_password" 
                                        name="mail_password" 
                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" 
                                        placeholder="Your email password"
                                        value="{{ old('mail_password') }}"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Help Section -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-blue-500 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                            </svg>
                            <div>
                                <h3 class="text-sm font-medium text-blue-800">Configuration Tips</h3>
                                <ul class="mt-1 text-sm text-blue-700 space-y-1">
                                    <li>• Use HTTPS URLs for production environments</li>
                                    <li>• Configure mail settings for email notifications</li>
                                    <li>• Keep debug mode disabled in production</li>
                                    <li>• You can change these settings later in the admin panel</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex justify-between items-center pt-6">
                        <a href="{{ route('installer.test-database') }}" class="inline-flex items-center px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-xl hover:bg-gray-50 transition-colors">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                            </svg>
                            Back
                        </a>
                        
                        <button type="submit" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-xl hover:from-indigo-700 hover:to-purple-700 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Save & Continue
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-update debug mode based on environment
        const appEnv = document.getElementById('app_env');
        const appDebug = document.getElementById('app_debug');
        
        appEnv.addEventListener('change', function() {
            if (this.value === 'production') {
                appDebug.checked = false;
            } else if (this.value === 'local') {
                appDebug.checked = true;
            }
        });

        // Add loading state to form submission
        const form = document.querySelector('form');
        const submitButton = form.querySelector('button[type="submit"]');
        
        form.addEventListener('submit', function() {
            submitButton.disabled = true;
            submitButton.innerHTML = `
                <svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Saving Configuration...
            `;
        });

        // Animate progress bar
        const progressBar = document.querySelector('.bg-gradient-to-r');
        setTimeout(() => {
            progressBar.style.width = '100%';
        }, 500);
    });
</script>
@endsection