@extends('layouts.app')

@section('title', 'Create Your Website - Website Builder')
@section('description', 'Build your professional website in just 5 minutes with our easy-to-use website builder.')

@push('styles')
<style>
    .step-indicator {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    .step-indicator.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: scale(1.1);
    }
    .step-indicator.completed {
        background: #22c55e;
        color: white;
    }
    .step-indicator.inactive {
        background: #e5e7eb;
        color: #6b7280;
    }
    .step-content {
        display: none;
        animation: fadeIn 0.5s ease-in-out;
    }
    .step-content.active {
        display: block;
    }
    .form-group {
        margin-bottom: 1.5rem;
    }
    .form-input:focus {
        ring-color: #667eea;
        border-color: #667eea;
    }
    .template-preview-mini {
        width: 100%;
        height: 120px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 8px;
        position: relative;
        overflow: hidden;
    }
    .honeypot {
        position: absolute;
        left: -9999px;
        opacity: 0;
        pointer-events: none;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Progress Steps -->
        <div class="mb-8">
            <div class="flex items-center justify-center">
                <div class="flex items-center space-x-4">
                    <div class="step-item active flex items-center">
                        <div class="step-circle w-10 h-10 bg-primary-600 text-white rounded-full flex items-center justify-center font-semibold">1</div>
                        <span class="ml-2 text-primary-600 font-medium">Business Info</span>
                    </div>
                    <div class="w-16 h-1 bg-gray-300"></div>
                    <div class="step-item flex items-center">
                        <div class="step-circle w-10 h-10 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center font-semibold">2</div>
                        <span class="ml-2 text-gray-600 font-medium">Template</span>
                    </div>
                    <div class="w-16 h-1 bg-gray-300"></div>
                    <div class="step-item flex items-center">
                        <div class="step-circle w-10 h-10 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center font-semibold">3</div>
                        <span class="ml-2 text-gray-600 font-medium">Review</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Template Selection (if template selected) -->
        @if($selectedTemplate)
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <img src="/images/templates/{{ $selectedTemplate->preview_image }}" 
                         alt="{{ $selectedTemplate->name }}" 
                         class="w-20 h-16 object-cover rounded-lg"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="w-20 h-16 bg-gradient-to-br from-blue-100 to-purple-100 rounded-lg flex items-center justify-center" style="display: none;">
                        <i class="fas fa-image text-gray-400"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900">{{ $selectedTemplate->name }}</h3>
                        <p class="text-sm text-gray-600">{{ ucfirst($selectedTemplate->category) }} • {{ ucfirst($selectedTemplate->subcategory) }}</p>
                        <div class="flex items-center mt-1">
                            <i class="fas fa-star text-yellow-400 text-sm"></i>
                            <span class="text-sm text-gray-600 ml-1">{{ $selectedTemplate->rating }} ({{ $selectedTemplate->rating_count }} reviews)</span>
                        </div>
                    </div>
                </div>
                <a href="{{ route('templates.index') }}" class="text-primary-600 hover:text-primary-700 font-medium">
                    <i class="fas fa-sync-alt mr-1"></i>Change Template
                </a>
            </div>
        </div>
        @endif

        <!-- Main Form -->
        <div class="bg-white rounded-lg shadow-md">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-2xl font-bold text-gray-900">Tell Us About Your Business</h2>
                <p class="text-gray-600 mt-1">We'll use this information to customize your website</p>
            </div>

            <form id="website-builder-form" method="POST" action="{{ route('builder.store') }}" class="p-6 space-y-6">
                @csrf
                
                <!-- Hidden fields for template data (matching original process.php) -->
                @if($selectedTemplate)
                    <input type="hidden" name="template_id" value="{{ $selectedTemplate->id }}">
                    <input type="hidden" name="tpl_name" value="{{ $selectedTemplate->slug }}">
                    <input type="hidden" name="category" value="{{ $selectedTemplate->category }}">
                    <input type="hidden" name="subcategory" value="{{ $selectedTemplate->subcategory }}">
                    <input type="hidden" name="homepage" value="{{ request('homepage', 'main') }}">
                @endif

                <!-- Company Information (matching original php-form-page.php) -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="company_name" class="block text-sm font-medium text-gray-700 mb-2">
                            Q1: What is your company name? <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               id="company_name" 
                               name="company_name" 
                               value="{{ old('company_name') }}"
                               required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors">
                        @error('company_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="business_type" class="block text-sm font-medium text-gray-700 mb-2">
                            Business Type <span class="text-red-500">*</span>
                        </label>
                        <select id="business_type" 
                                name="business_type" 
                                required 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors">
                            <option value="">Select Business Type</option>
                            <option value="construction" {{ old('business_type') == 'construction' ? 'selected' : '' }}>Construction</option>
                            <option value="automotive" {{ old('business_type') == 'automotive' ? 'selected' : '' }}>Automotive</option>
                            <option value="cleaning" {{ old('business_type') == 'cleaning' ? 'selected' : '' }}>Cleaning Services</option>
                            <option value="healthcare" {{ old('business_type') == 'healthcare' ? 'selected' : '' }}>Healthcare</option>
                            <option value="professional" {{ old('business_type') == 'professional' ? 'selected' : '' }}>Professional Services</option>
                            <option value="retail" {{ old('business_type') == 'retail' ? 'selected' : '' }}>Retail</option>
                            <option value="hospitality" {{ old('business_type') == 'hospitality' ? 'selected' : '' }}>Hospitality</option>
                            <option value="personal" {{ old('business_type') == 'personal' ? 'selected' : '' }}>Personal Services</option>
                        </select>
                        @error('business_type')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Phone and Email -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                            Q2: What is your company phone number? <span class="text-red-500">*</span>
                        </label>
                        <input type="tel" 
                               id="phone" 
                               name="phone" 
                               value="{{ old('phone') }}"
                               placeholder="123-456-7890 or 1-800-123-4567"
                               required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors">
                        @error('phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            Q3: Company email visible on website? <span class="text-red-500">*</span>
                        </label>
                        <input type="email" 
                               id="email" 
                               name="email" 
                               value="{{ old('email') }}"
                               required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors">
                        @error('email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Address -->
                <div>
                    <label for="address" class="block text-sm font-medium text-gray-700 mb-2">
                        Q4: Company address? <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="address" 
                           name="address" 
                           value="{{ old('address') }}"
                           required 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors">
                    @error('address')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Subdomain Selection (matching original) -->
                <div>
                    <label for="subdomain" class="block text-sm font-medium text-gray-700 mb-2">
                        Q5: Sub-domain name? How your URL will look like (<strong>mycompany</strong>.find-local-services.com) <span class="text-red-500">*</span>
                    </label>
                    <div class="flex items-center space-x-2">
                        <input type="text" 
                               id="subdomain" 
                               name="subdomain" 
                               value="{{ old('subdomain') }}"
                               placeholder="mycompany"
                               required 
                               pattern="[a-z0-9-]+"
                               title="Use only lowercase letters, numbers, and hyphens"
                               class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors">
                        <span class="text-gray-500 font-medium">.</span>
                        <select id="domain" 
                                name="domain" 
                                required 
                                class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors">
                            <option value="find-local-services.com" data-ip="194.238.25.113">find-local-services.com</option>
                            <option value="local-business-directory.com" data-ip="192.168.1.2">local-business-directory.com</option>
                            <option value="services-near-me.com" data-ip="192.168.1.3">services-near-me.com</option>
                            <option value="pcm-demos.xyz" data-ip="194.238.25.113">pcm-demos.xyz</option>
                        </select>
                        <input type="hidden" id="selected_ip" name="selected_ip" value="194.238.25.113">
                    </div>
                    @error('subdomain')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-sm text-gray-500">
                        Use only lowercase letters, numbers, and hyphens (e.g., 'my-company-name')
                    </p>
                </div>

                <!-- Business Description -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        Business Description <span class="text-red-500">*</span>
                    </label>
                    <textarea id="description" 
                              name="description" 
                              rows="4" 
                              required 
                              placeholder="Tell us about your business, what services you offer, and what makes you unique..."
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Services Offered -->
                <div>
                    <label for="services" class="block text-sm font-medium text-gray-700 mb-2">
                        Services Offered <span class="text-gray-500">(Optional)</span>
                    </label>
                    <textarea id="services" 
                              name="services" 
                              rows="3" 
                              placeholder="List your main services (e.g., Plumbing repair, Bathroom renovation, Emergency services...)"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none">{{ old('services') }}</textarea>
                    @error('services')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Action Buttons -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                    <div class="flex items-center space-x-4">
                        @if(!$selectedTemplate)
                        <a href="{{ route('templates.index') }}" class="text-primary-600 hover:text-primary-700 font-medium">
                            <i class="fas fa-arrow-left mr-1"></i>Choose Template First
                        </a>
                        @else
                        <a href="{{ route('templates.index') }}" class="text-gray-600 hover:text-gray-700 font-medium">
                            <i class="fas fa-arrow-left mr-1"></i>Back to Templates
                        </a>
                        @endif
                    </div>
                    
                    <button type="submit" 
                            id="submit-btn"
                            class="bg-primary-600 hover:bg-primary-700 text-white px-8 py-3 rounded-lg font-semibold text-lg transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                        <i class="fas fa-rocket mr-2"></i>Create My Website
                        <span class="loading-spinner hidden ml-2">
                            <i class="fas fa-spinner fa-spin"></i>
                        </span>
                    </button>
                </div>

                <!-- Important Notice -->
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mt-6">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-yellow-600 mt-1 mr-3"></i>
                        <div>
                            <h4 class="text-yellow-800 font-semibold mb-1">Important Notice</h4>
                            <p class="text-yellow-700 text-sm">
                                Website creation takes 2-5 minutes. Please <strong>do not close this window</strong> during the process. 
                                You'll be redirected to track the progress automatically.
                            </p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('website-builder-form');
    const submitBtn = document.getElementById('submit-btn');
    const domainSelect = document.getElementById('domain');
    const selectedIpInput = document.getElementById('selected_ip');
    const subdomainInput = document.getElementById('subdomain');

    // Update IP when domain changes
    domainSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const ip = selectedOption.getAttribute('data-ip');
        selectedIpInput.value = ip;
    });

    // Validate subdomain format
    subdomainInput.addEventListener('input', function() {
        let value = this.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
        if (value !== this.value) {
            this.value = value;
        }
    });

    // Form submission with validation
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Basic validation
        const requiredFields = form.querySelectorAll('[required]');
        let isValid = true;
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('border-red-500');
                isValid = false;
            } else {
                field.classList.remove('border-red-500');
            }
        });

        // Validate phone format
        const phone = document.getElementById('phone').value;
        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').classList.add('border-red-500');
            alert('Please enter a valid US phone number');
            isValid = false;
        }

        // Validate subdomain format
        const subdomain = document.getElementById('subdomain').value;
        const subdomainRegex = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/;
        if (!subdomainRegex.test(subdomain)) {
            document.getElementById('subdomain').classList.add('border-red-500');
            alert('Invalid subdomain format. Use only letters, numbers, and hyphens.');
            isValid = false;
        }

        if (isValid) {
            // Show loading state
            submitBtn.disabled = true;
            submitBtn.querySelector('.loading-spinner').classList.remove('hidden');
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Creating Website...';
            
            // Show alert like original
            alert('We are setting up your website. It can take up to 2-5 minutes. DO NOT CLOSE THIS WINDOW');
            
            // Submit the form
            form.submit();
        }
    });
});
</script>
@endpush
@endsection