@extends('layouts.main')
@section('style')
<style>
    .component-section {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: white;
    }

    .component-preview {
        border: 1px dashed #cbd5e1;
        border-radius: 6px;
        min-height: 120px;
        background: #f8fafc;
    }

    .customization-panel {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 320px;
        background: white;
        border-left: 1px solid #e5e7eb;
        z-index: 1000;
        overflow-y: auto;
    }
</style>
@endsection

@section('content')
<div class="container-fluid py-6">
    <div class="d-flex justify-content-between align-items-center mb-6 px-4">
        <h1 class="text-2xl font-bold">Customize Your Website</h1>
        <div class="space-x-3">
            <button class="btn btn-outline-primary" onclick="saveProgress()">
                <i class="fas fa-save me-2"></i>Save Progress
            </button>
            <button class="btn btn-primary" onclick="previewWebsite()">
                <i class="fas fa-eye me-2"></i>Preview
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-9">
            <!-- Banner Section -->
            <div class="component-section p-4 mb-4">
                <h3 class="text-lg font-semibold mb-3">Banner Section</h3>
                <div class="component-preview p-4" id="bannerPreview">
                    <div class="text-center text-gray-500" data-empty-state>
                        <i class="fas fa-image fa-2x mb-2"></i>
                        <p>Drop banner images here or click to upload</p>
                    </div>
                </div>
            </div>

            <!-- Products Section -->
            <div class="component-section p-4 mb-4">
                <h3 class="text-lg font-semibold mb-3">Featured Products</h3>
                <div class="component-preview p-4" id="productsPreview">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="productGrid"></div>
                </div>
            </div>

            <!-- Categories Section -->
            <div class="component-section p-4 mb-4">
                <h3 class="text-lg font-semibold mb-3">Product Categories</h3>
                <div class="component-preview p-4" id="categoriesPreview">
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4" id="categoryGrid"></div>
                </div>
            </div>

            <!-- Footer Section -->
            <div class="component-section p-4">
                <h3 class="text-lg font-semibold mb-3">Footer</h3>
                <div class="component-preview p-4" id="footerPreview">
                    <div class="row">
                        <div class="col-md-4">
                            <h4 class="font-semibold mb-3">About Us</h4>
                            <div class="mb-3">
                                <textarea class="form-control" rows="3" placeholder="Enter about us text"></textarea>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h4 class="font-semibold mb-3">Contact Info</h4>
                            <div class="mb-3">
                                <input type="text" class="form-control mb-2" placeholder="Email">
                                <input type="text" class="form-control mb-2" placeholder="Phone">
                                <input type="text" class="form-control" placeholder="Address">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h4 class="font-semibold mb-3">Social Media</h4>
                            <div class="mb-3">
                                <input type="text" class="form-control mb-2" placeholder="Facebook URL">
                                <input type="text" class="form-control mb-2" placeholder="Instagram URL">
                                <input type="text" class="form-control" placeholder="Twitter URL">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Customization Panel -->
        <div class="customization-panel p-4" id="customizationPanel">
            <h3 class="text-xl font-semibold mb-4">Customization</h3>
            <div class="mb-4">
                <label class="form-label">Theme Color</label>
                <input type="color" class="form-control form-control-color w-100" id="themeColor" value="#4f46e5">
            </div>
            <div class="mb-4">
                <label class="form-label">Font Family</label>
                <select class="form-select" id="fontFamily">
                    <option value="Inter">Inter</option>
                    <option value="Roboto">Roboto</option>
                    <option value="Poppins">Poppins</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="form-label">Button Style</label>
                <select class="form-select" id="buttonStyle">
                    <option value="rounded">Rounded</option>
                    <option value="square">Square</option>
                    <option value="pill">Pill</option>
                </select>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    let components = [];
    let customizations = [];

    function saveProgress() {
        const data = {
            components: components,
            customizations: {
                themeColor: document.getElementById('themeColor').value,
                fontFamily: document.getElementById('fontFamily').value,
                buttonStyle: document.getElementById('buttonStyle').value
            }
        };

        fetch('{{ route("website.builder.customize-components", ["id" => $template->id]) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Progress saved successfully!');
                }
            });
    }

    function previewWebsite() {
        window.open('{{ route("website.builder.preview", ["id" => $template->id]) }}', '_blank');
    }

    // Initialize components and customizations
    document.addEventListener('DOMContentLoaded', function() {
        if (customizations) {
            document.getElementById('themeColor').value = customizations.themeColor || '#4f46e5';
            document.getElementById('fontFamily').value = customizations.fontFamily || 'Inter';
            document.getElementById('buttonStyle').value = customizations.buttonStyle || 'rounded';
        }
    });
</script>
@endsection