@extends('layouts.app')

@section('title', 'Create Your Website')

@section('content')
<!-- Header Section -->
<section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-5xl font-heading font-bold mb-4">
            Let's Create Your Website
        </h1>
        <p class="text-xl text-blue-100 mb-8">
            We'll set up your professional website in just a few minutes. 
            Please provide your business information below.
        </p>
        
        <!-- Selected Template Info -->
        <div class="bg-white bg-opacity-10 rounded-lg p-4 max-w-md mx-auto">
            <p class="text-sm text-blue-100 mb-1">Selected Template:</p>
            <p class="font-semibold text-lg">{{ ucfirst(str_replace('-', ' ', $templateData['tpl_name'])) }}</p>
            <p class="text-sm text-blue-200">{{ ucfirst($templateData['category']) }} • {{ ucfirst($templateData['subcategory']) }}</p>
        </div>
    </div>
</section>

<!-- Form Section -->
<section class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
            
            <!-- Progress Indicator -->
            <div class="mb-8">
                <div class="flex items-center justify-center space-x-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">1</div>
                        <span class="ml-2 text-sm font-medium text-blue-600">Template Selected</span>
                    </div>
                    <div class="w-16 h-1 bg-blue-200"></div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">2</div>
                        <span class="ml-2 text-sm font-medium text-blue-600">Business Info</span>
                    </div>
                    <div class="w-16 h-1 bg-gray-200"></div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-gray-300 text-white rounded-full flex items-center justify-center text-sm font-semibold">3</div>
                        <span class="ml-2 text-sm text-gray-500">Website Creation</span>
                    </div>
                </div>
            </div>
            
            <form id="websiteForm" method="POST" action="{{ route('builder.store') }}" class="space-y-8">
                @csrf
                
                <!-- Hidden Template Data -->
                <input type="hidden" name="tpl-name" value="{{ $templateData['tpl_name'] }}">
                <input type="hidden" name="category" value="{{ $templateData['category'] }}">
                <input type="hidden" name="subcategory" value="{{ $templateData['subcategory'] }}">
                <input type="hidden" name="homepage" value="{{ $templateData['homepage'] }}">
                <input type="hidden" id="selected-ip" name="selected-ip" value="">
                
                <!-- Company Information -->
                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-gray-900 border-b border-gray-200 pb-2">
                        Company Information
                    </h2>
                    
                    <div>
                        <label for="company-name" class="block text-sm font-medium text-gray-700 mb-2">
                            Company Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               id="company-name" 
                               name="company-name" 
                               required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                               placeholder="Enter your company name"
                               value="{{ old('company-name') }}">
                        @error('company-name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <div class="error text-red-600 text-sm mt-1 hidden" id="company-name-error">Please enter your company name</div>
                    </div>
                    
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                            Phone Number <span class="text-red-500">*</span>
                        </label>
                        <input type="tel" 
                               id="phone" 
                               name="phone" 
                               required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                               placeholder="(555) 123-4567"
                               value="{{ old('phone') }}">
                        @error('phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <div class="error text-red-600 text-sm mt-1 hidden" id="phone-error">Please enter a valid US phone number</div>
                    </div>
                    
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            Business Email <span class="text-red-500">*</span>
                        </label>
                        <input type="email" 
                               id="email" 
                               name="email" 
                               required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                               placeholder="info@yourcompany.com"
                               value="{{ old('email') }}">
                        @error('email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <div class="error text-red-600 text-sm mt-1 hidden" id="email-error">Please enter a valid email address</div>
                        <p class="mt-1 text-sm text-gray-500">This will be displayed on your website for customer contact</p>
                    </div>
                    
                    <div>
                        <label for="address" class="block text-sm font-medium text-gray-700 mb-2">
                            Business Address <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               id="address" 
                               name="address" 
                               required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                               placeholder="123 Main St, City, State, ZIP"
                               value="{{ old('address') }}">
                        @error('address')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <div class="error text-red-600 text-sm mt-1 hidden" id="address-error">Please enter your business address</div>
                    </div>
                </div>
                
                <!-- Website Configuration -->
                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-gray-900 border-b border-gray-200 pb-2">
                        Website Configuration
                    </h2>
                    
                    <div>
                        <label for="subdomain" class="block text-sm font-medium text-gray-700 mb-2">
                            Choose Your Website Address <span class="text-red-500">*</span>
                        </label>
                        <div class="flex items-center space-x-2">
                            <input type="text" 
                                   id="subdomain" 
                                   name="subdomain" 
                                   required 
                                   class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                                   placeholder="yourcompany"
                                   value="{{ old('subdomain') }}">
                            <span class="text-gray-500 text-lg font-medium">.</span>
                            <select id="domain" 
                                    name="domain" 
                                    required 
                                    class="px-4 py-3 border border-gray-300 rounded-r-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
                                @foreach($domains as $domain => $ip)
                                    <option value="{{ $domain }}" data-ip="{{ $ip }}">{{ $domain }}</option>
                                @endforeach
                            </select>
                        </div>
                        @error('subdomain')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <div class="error text-red-600 text-sm mt-1 hidden" id="subdomain-error">Please enter a valid subdomain</div>
                        <p class="mt-1 text-sm text-gray-500">Your website will be accessible at: <span id="full-url" class="font-medium text-blue-600">yourcompany.find-local-services.com</span></p>
                    </div>
                </div>
                
                <!-- Terms and Conditions -->
                <div class="bg-gray-50 rounded-lg p-6">
                    <div class="flex items-start">
                        <input type="checkbox" 
                               id="terms" 
                               name="terms" 
                               required 
                               class="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <div class="ml-3">
                            <label for="terms" class="text-sm text-gray-700">
                                I agree to the <a href="#" class="text-blue-600 hover:text-blue-800 underline">Terms of Service</a> 
                                and <a href="#" class="text-blue-600 hover:text-blue-800 underline">Privacy Policy</a>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Submit Button -->
                <div class="pt-6">
                    <button type="submit" 
                            class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-4 px-8 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 text-lg">
                        <i class="fas fa-rocket mr-3"></i>Create My Website
                    </button>
                    <p class="mt-3 text-center text-sm text-gray-500">
                        This process typically takes 2-5 minutes. Please do not close this window.
                    </p>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-16 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">What You'll Get</h2>
            <p class="text-xl text-gray-600">Your website will include all these professional features</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-mobile-alt text-2xl text-blue-600"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Mobile Responsive</h3>
                <p class="text-gray-600">Your website will look perfect on all devices</p>
            </div>
            
            <div class="text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-search text-2xl text-green-600"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">SEO Optimized</h3>
                <p class="text-gray-600">Built to rank well in search engines</p>
            </div>
            
            <div class="text-center">
                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-lock text-2xl text-purple-600"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">SSL Security</h3>
                <p class="text-gray-600">Secure HTTPS encryption included</p>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('websiteForm');
    const subdomainInput = document.getElementById('subdomain');
    const domainSelect = document.getElementById('domain');
    const fullUrlSpan = document.getElementById('full-url');
    const selectedIpInput = document.getElementById('selected-ip');
    
    // Update full URL display
    function updateFullUrl() {
        const subdomain = subdomainInput.value || 'yourcompany';
        const domain = domainSelect.value;
        fullUrlSpan.textContent = `${subdomain}.${domain}`;
    }
    
    // Update selected IP
    function updateSelectedIp() {
        const selectedOption = domainSelect.options[domainSelect.selectedIndex];
        selectedIpInput.value = selectedOption.getAttribute('data-ip');
    }
    
    // Event listeners
    subdomainInput.addEventListener('input', updateFullUrl);
    domainSelect.addEventListener('change', function() {
        updateFullUrl();
        updateSelectedIp();
    });
    
    // Initialize
    updateFullUrl();
    updateSelectedIp();
    
    // Form validation
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        let isValid = true;
        
        // Reset all error messages
        document.querySelectorAll('.error').forEach(error => {
            error.classList.add('hidden');
        });
        
        // Validate company name
        const companyName = document.getElementById('company-name').value.trim();
        if (!companyName) {
            document.getElementById('company-name-error').classList.remove('hidden');
            isValid = false;
        }
        
        // Validate phone
        const phone = document.getElementById('phone').value.trim();
        const phoneRegex = /^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$|^(1-800-[0-9]{3}-[0-9]{4})$/;
        if (!phoneRegex.test(phone)) {
            document.getElementById('phone-error').classList.remove('hidden');
            isValid = false;
        }
        
        // Validate email
        const email = document.getElementById('email').value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            document.getElementById('email-error').classList.remove('hidden');
            isValid = false;
        }
        
        // Validate address
        const address = document.getElementById('address').value.trim();
        if (!address) {
            document.getElementById('address-error').classList.remove('hidden');
            isValid = false;
        }
        
        // Validate subdomain
        const subdomain = document.getElementById('subdomain').value.trim();
        const subdomainRegex = /^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$/;
        if (!subdomainRegex.test(subdomain)) {
            document.getElementById('subdomain-error').classList.remove('hidden');
            isValid = false;
        }
        
        if (isValid) {
            // Show loading state
            const submitButton = form.querySelector('button[type="submit"]');
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-3"></i>Creating Your Website...';
            submitButton.disabled = true;
            
            // Show alert about not closing window
            alert('We are setting up your website. It can take up to 2-5 minutes. DO NOT CLOSE THIS WINDOW');
            
            // Submit the form
            this.submit();
        }
    });
});
</script>
@endpush