<?php $__env->startSection('title', 'Home Page Settings'); ?>
<?php $__env->startSection('page-title', 'Home Page Content Management'); ?>

<?php $__env->startSection('content'); ?>
<div class="fade-in">
    <!-- Navigation Tabs -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg mb-6">
        <div class="border-b border-gray-200 dark:border-gray-800">
            <nav class="flex flex-wrap -mb-px px-4 md:px-6" aria-label="Tabs">
                <button type="button" onclick="switchSection('about')" 
                        class="section-tab px-4 py-3 text-sm font-medium border-b-2 transition-colors border-blue-600 text-blue-600 dark:text-blue-400"
                        data-section="about">
                    <i class="fas fa-info-circle mr-2"></i>About Section
                </button>
                <button type="button" onclick="switchSection('products')" 
                        class="section-tab px-4 py-3 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                        data-section="products">
                    <i class="fas fa-boxes mr-2"></i>Our Best Sellers
                </button>
                <button type="button" onclick="switchSection('contact')" 
                        class="section-tab px-4 py-3 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                        data-section="contact">
                    <i class="fas fa-envelope mr-2"></i>Contact Section
                </button>
                <button type="button" onclick="switchSection('promise')" 
                        class="section-tab px-4 py-3 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                        data-section="promise">
                    <i class="fas fa-star mr-2"></i>Our Promise
                </button>
            </nav>
        </div>
    </div>

    <!-- Form -->
    <form id="homePageForm" class="space-y-6">
        <?php echo csrf_field(); ?>
        
        <!-- About Section -->
        <div id="section-about" class="section-content bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">About Section - "Why Choose 360 Monica?"</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- English -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-language mr-2"></i>Title (English)
                    </label>
                    <input type="text" name="about[title_en]" value="<?php echo e($sections['about']->title_en ?? ''); ?>" 
                           placeholder="Why Choose 360 Monica?"
                           class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <!-- Khmer -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-language mr-2"></i>Title (Khmer)
                    </label>
                    <input type="text" name="about[title_km]" value="<?php echo e($sections['about']->title_km ?? ''); ?>" 
                           placeholder="ហេតុអ្វីជ្រើសរើស 360 Monica?"
                           class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <!-- English Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description (English)
                    </label>
                    <textarea name="about[description_en]" rows="4" 
                              placeholder="Enter description in English..."
                              class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><?php echo e($sections['about']->description_en ?? ''); ?></textarea>
                </div>
                
                <!-- Khmer Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description (Khmer)
                    </label>
                    <textarea name="about[description_km]" rows="4" 
                              placeholder="Enter description in Khmer..."
                              class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><?php echo e($sections['about']->description_km ?? ''); ?></textarea>
                </div>
            </div>

            <!-- Image Upload -->
            <div class="mt-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    <i class="fas fa-image mr-2"></i>Section Image
                </label>
                <div class="flex items-center gap-4">
                    <?php if($sections['about']?->image): ?>
                        <div class="relative" id="about-image-preview">
                            <img src="<?php echo e(asset('storage/' . $sections['about']->image)); ?>" alt="About image" 
                                 class="w-40 h-40 object-cover rounded-lg border border-gray-300 dark:border-gray-700">
                            <button type="button" onclick="removeAboutImage()" 
                                    class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    <?php endif; ?>
                    <input type="file" name="about[image]" accept="image/*" id="about-image-input"
                           class="flex-1 py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm">
                </div>
            </div>

            <!-- Highlights -->
            <div class="mt-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                    <i class="fas fa-list mr-2"></i>Highlights (4 items)
                </label>
                <div id="about-highlights" class="space-y-3">
                    <?php $highlights = $sections['about']?->highlights ?? []; ?>
                    <?php $__currentLoopData = range(0, 3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <input type="text" name="about[highlights][]" 
                               value="<?php echo e($highlights[$i] ?? ''); ?>"
                               placeholder="e.g., Hotel Standard Quality, Premium Materials, etc."
                               class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            <!-- Status -->
            <div class="mt-6">
                <label class="flex items-center gap-3">
                    <input type="checkbox" name="about[status]" value="active" 
                           <?php echo e(($sections['about']?->status ?? 'active') === 'active' ? 'checked' : ''); ?>

                           class="w-4 h-4 rounded border-gray-300 text-blue-600">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active</span>
                </label>
            </div>
        </div>

        <!-- Products Section -->
        <div id="section-products" class="section-content bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-6 hidden">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Our Best Sellers Section</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- English -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Title (English)
                    </label>
                    <input type="text" name="products[title_en]" value="<?php echo e($sections['products']->title_en ?? ''); ?>" 
                           placeholder="Our Best Sellers"
                           class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <!-- Khmer -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Title (Khmer)
                    </label>
                    <input type="text" name="products[title_km]" value="<?php echo e($sections['products']->title_km ?? ''); ?>" 
                           placeholder="ផលិតផលលក់ដាច់ជាងគេ"
                           class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <!-- English Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description (English)
                    </label>
                    <textarea name="products[description_en]" rows="3" 
                              placeholder="Discover our most loved premium bedding products"
                              class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><?php echo e($sections['products']->description_en ?? ''); ?></textarea>
                </div>
                
                <!-- Khmer Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description (Khmer)
                    </label>
                    <textarea name="products[description_km]" rows="3" 
                              placeholder="រកឃើញផលិតផលគ្រែដេកប្រណិត"
                              class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><?php echo e($sections['products']->description_km ?? ''); ?></textarea>
                </div>
            </div>

            <!-- Display Limit -->
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Number of Products to Display
                </label>
                <input type="number" name="products[display_limit]" value="<?php echo e($sections['products']->display_limit ?? 4); ?>" 
                       min="1" max="20"
                       class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Status -->
            <div class="mt-6">
                <label class="flex items-center gap-3">
                    <input type="checkbox" name="products[status]" value="active" 
                           <?php echo e(($sections['products']?->status ?? 'active') === 'active' ? 'checked' : ''); ?>

                           class="w-4 h-4 rounded border-gray-300 text-blue-600">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active</span>
                </label>
            </div>
        </div>

        <!-- Contact Section -->
        <div id="section-contact" class="section-content bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-6 hidden">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Contact Section - "Get In Touch"</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- English -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Title (English)
                    </label>
                    <input type="text" name="contact[title_en]" value="<?php echo e($sections['contact']->title_en ?? ''); ?>" 
                           placeholder="Get In Touch"
                           class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <!-- Khmer -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Title (Khmer)
                    </label>
                    <input type="text" name="contact[title_km]" value="<?php echo e($sections['contact']->title_km ?? ''); ?>" 
                           placeholder="ទាក់ទងមកយើង"
                           class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <!-- English Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description (English)
                    </label>
                    <textarea name="contact[description_en]" rows="3" 
                              placeholder="Have questions? We're here to help!"
                              class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><?php echo e($sections['contact']->description_en ?? ''); ?></textarea>
                </div>
                
                <!-- Khmer Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description (Khmer)
                    </label>
                    <textarea name="contact[description_km]" rows="3" 
                              placeholder="មានសំណួរ? យើងនៅទីនេះដើម្បីជួយ!"
                              class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><?php echo e($sections['contact']->description_km ?? ''); ?></textarea>
                </div>
            </div>

            <!-- Status -->
            <div class="mt-6">
                <label class="flex items-center gap-3">
                    <input type="checkbox" name="contact[status]" value="active" 
                           <?php echo e(($sections['contact']?->status ?? 'active') === 'active' ? 'checked' : ''); ?>

                           class="w-4 h-4 rounded border-gray-300 text-blue-600">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active</span>
                </label>
            </div>
        </div>

        <!-- Promise Section -->
        <div id="section-promise" class="section-content bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-6 hidden">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Our Promise Section</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- English -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Title (English)
                    </label>
                    <input type="text" name="promise[title_en]" value="<?php echo e($sections['promise']->title_en ?? ''); ?>" 
                           placeholder="Our Promise"
                           class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <!-- Khmer -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Title (Khmer)
                    </label>
                    <input type="text" name="promise[title_km]" value="<?php echo e($sections['promise']->title_km ?? ''); ?>" 
                           placeholder="約束របស់យើង"
                           class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <!-- English Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description (English)
                    </label>
                    <textarea name="promise[description_en]" rows="4" 
                              placeholder="Enter our promise description..."
                              class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><?php echo e($sections['promise']->description_en ?? ''); ?></textarea>
                </div>
                
                <!-- Khmer Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description (Khmer)
                    </label>
                    <textarea name="promise[description_km]" rows="4" 
                              placeholder="បញ្ចូលការពិពណ៌នាលម្អិតរបស់យើង..."
                              class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><?php echo e($sections['promise']->description_km ?? ''); ?></textarea>
                </div>
            </div>

            <!-- Image Upload -->
            <div class="mt-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    <i class="fas fa-image mr-2"></i>Section Image
                </label>
                <div class="flex items-center gap-4">
                    <?php if($sections['promise']?->image): ?>
                        <div class="relative" id="promise-image-preview">
                            <img src="<?php echo e(asset('storage/' . $sections['promise']->image)); ?>" alt="Promise image" 
                                 class="w-40 h-40 object-cover rounded-lg border border-gray-300 dark:border-gray-700">
                            <button type="button" onclick="removePromiseImage()" 
                                    class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    <?php endif; ?>
                    <input type="file" name="promise[image]" accept="image/*" id="promise-image-input"
                           class="flex-1 py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm">
                </div>
            </div>

            <!-- Status -->
            <div class="mt-6">
                <label class="flex items-center gap-3">
                    <input type="checkbox" name="promise[status]" value="active" 
                           <?php echo e(($sections['promise']?->status ?? 'active') === 'active' ? 'checked' : ''); ?>

                           class="w-4 h-4 rounded border-gray-300 text-blue-600">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active</span>
                </label>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex items-center justify-end gap-3 pt-6">
            <button type="button" onclick="window.location.reload()" 
                    class="px-6 py-2.5 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-medium rounded-lg border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-200">
                Cancel
            </button>
            <button type="submit" 
                    class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                <i class="fas fa-save mr-2"></i>Save All Changes
            </button>
        </div>
    </form>
</div>

<script>
function switchSection(section) {
    // Hide all sections
    document.querySelectorAll('.section-content').forEach(el => {
        el.classList.add('hidden');
    });
    
    // Show selected section
    document.getElementById('section-' + section).classList.remove('hidden');
    
    // Update tab styling
    document.querySelectorAll('.section-tab').forEach(tab => {
        tab.classList.remove('border-blue-600', 'text-blue-600', 'dark:text-blue-400');
        tab.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
    });
    
    event.target.closest('.section-tab').classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
    event.target.closest('.section-tab').classList.add('border-blue-600', 'text-blue-600', 'dark:text-blue-400');
}

function removeAboutImage() {
    if (confirm('Remove this image?')) {
        document.getElementById('about-image-input').value = '';
        document.getElementById('about-image-preview').remove();
    }
}

function removePromiseImage() {
    if (confirm('Remove this image?')) {
        document.getElementById('promise-image-input').value = '';
        document.getElementById('promise-image-preview').remove();
    }
}

// Form submission
document.getElementById('homePageForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    try {
        for (const section of ['about', 'products', 'contact', 'promise']) {
            const sectionData = new FormData();
            
            // Collect all fields for this section
            for (const [key, value] of formData.entries()) {
                if (key.startsWith(section + '[')) {
                    const fieldName = key.replace(section + '[', '').replace(']', '');
                    sectionData.append(fieldName, value);
                }
            }
            
            const response = await fetch(`/admin/home-page/${section}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>',
                    'Accept': 'application/json'
                },
                body: sectionData
            });
            
            const result = await response.json();
            if (!result.success) {
                throw new Error(result.message);
            }
        }
        
        // Show success message
        showSuccess('All sections saved successfully!');
    } catch (error) {
        showError('Error saving: ' + error.message);
    }
});

function showSuccess(message) {
    const msg = document.createElement('div');
    msg.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2';
    msg.innerHTML = '<i class="fas fa-check-circle"></i><span>' + message + '</span>';
    document.body.appendChild(msg);
    setTimeout(() => msg.remove(), 3000);
}

function showError(message) {
    const msg = document.createElement('div');
    msg.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2';
    msg.innerHTML = '<i class="fas fa-exclamation-circle"></i><span>' + message + '</span>';
    document.body.appendChild(msg);
    setTimeout(() => msg.remove(), 5000);
}
</script>

<style>
    .section-content {
        animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/mac/Documents/360monicaAPI/resources/views/admin/home-page/index.blade.php ENDPATH**/ ?>