@extends('layouts.main')

@section('meta')
@include('blocks.meta', ['meta' => 'test'])
@endsection

@section('content')


<div class="wrapper">
    <div class="main-section">
        <div class="categories web">
            
          

        
        </div>

        <div class="categories-style-2 mob">
            <div class="container">
                            </div>
        </div>
        <div class="main-container">

            <div class="row-style-1">
                <div class="col_1">
                    <a class="tab-style-1 active" onclick="changeTab(this)" data-id="#text-control">
                        <i><img src="front/images/icons/text.png"></i>
                        <span>Add text</span>
                    </a>

                    <a class="tab-style-1" onclick="changeTab(this)" data-id="#image-control">
                        <i><img src="front/images/icons/image.png"></i>
                        <span> image</span>
                    </a>

                    <a class="tab-style-1" onclick="changeTab(this)" data-id="#sticker-control">
                        <i><img src="front/images/icons/stickers.png"></i>
                        <span> sticker</span>
                    </a>
                </div>
                <div class="col_2 " id="col_2">
                    <a class="close-controls" onclick="removeAllActiveButtons()"></a>
                    <div class="controls">
                        <div class="inner-controls">
                            <div class="bx-control active" id="text-control">
                                <div class="item-control " id="text-control-1">
                                    <h3>Add Text</h3>
                                    <input type="text" id="text-input" class="form-input" placeholder="Enter your text">
                                    <button id="add-text-btn" class="btn-style-1 mt-1">Add Text</button>
                                </div>

                                <div class="item-control" id="text-control-2">
                                    <div id="text-editor">
                                        <div class="">


                                            <div class="row-m">
                                                <label>Size:</label>
                                                <div class="font-input">

                                                    <input type="range" id="editor-font-size" class="form-input" min="8"
                                                        max="100" value="16" />
                                                    <span id="font-size-value" class="bebas">16</span>

                                                </div>
                                            </div>


                                            <div class="row-m">
                                                <label>Color:</label>
                                                <input type="color" id="editor-font-color" value="#000000">
                                            </div>

                                            <div class="row-m">
                                                <label>Style:</label>
                                                <div class="editor-buttons w-100">
                                                    <button id="btn-bold" title="Bold"><strong>B</strong></button>
                                                    <button id="btn-italic" title="Italic"><em>I</em></button>
                                                    <button id="btn-underline" title="Underline"><u>U</u></button>
                                                </div>
                                            </div>
                                            <button id="editor-apply-btn" style="display:none">Apply</button>
                                        </div>
                                    </div>


                                    <div id="editor-font-family" class="font-list">
                                        <div class="font-card montserrat" data-font="Montserrat">Montserrat Style</div>
                                        <div class="font-card anton" data-font="Anton">Anton Style</div>
                                        <div class="font-card bebas" data-font="Bebas Neue">Bebas Neue</div>
                                        <div class="font-card oswald" data-font="Oswald">Oswald</div>
                                        <div class="font-card righteous" data-font="Righteous">Righteous</div>
                                        <div class="font-card archivo" data-font="Archivo Black">Archivo Black</div>
                                        <div class="font-card alfa" data-font="Alfa Slab One">Alfa Slab One</div>
                                        <div class="font-card ultra" data-font="Ultra">Ultra Serif</div>
                                        <div class="font-card carter" data-font="Carter One">Carter One</div>
                                        <div class="font-card bungee" data-font="Bungee Inline">Bungee Inline</div>
                                        <div class="font-card pacifico" data-font="Pacifico">Pacifico</div>
                                        <div class="font-card lobster" data-font="Lobster">Lobster</div>
                                        <div class="font-card greatvibes" data-font="Great Vibes">Great Vibes</div>
                                        <div class="font-card allura" data-font="Allura">Allura Script</div>
                                        <div class="font-card satisfy" data-font="Satisfy">Satisfy Brush</div>
                                    </div>
                                </div>
                            </div>
                            <div class="bx-control" id="image-control">
                                <h3>Upload Image</h3>
                                <input type="file" id="sticker-upload" class="form-input" accept="image/*">
                                <p>Choose Stickers</p>


                                <ul class="list-style-2" id="images-cont">
                                   
                                </ul>
                            </div>

                            <div class="bx-control" id="sticker-control">
                                <h3>Choose Sticker</h3>

                                <ul class="list-style-2" id="stickers-cont">
                               
                                </ul>

                            </div>


                        </div>


                    </div>
                </div>

                <div class="col_3">

                    <div class="canvas-area">
                        <div class="design-sizes">
                            
                        </div>

                        <div class="design-colors" id="design-colors">
                            
                        </div>
                        <div id="design-area">
                            <img id="tshirt" src="" alt="T-Shirt">
                            <!-- <div class="desgin-text" data-side="front" style="position: absolute; cursor: move; left: 29.5%; top: 15.0029%; font-size: 24px;z-index:100">
                            <textarea   contenteditable="true"></textarea>
                            </div> -->
                            <!-- Stickers will be added here -->


                        </div>

                        <div class="atd-parts-bar">
                            <a class="active" data-id="front">
                                <span>Front</span>
                                <i>
                                    <img src="front/images/tshirt.png" id="front-img" alt="T-Shirt">
                                </i>
                            </a>

                            <a data-id="back">
                                <span>Back</span>
                                <i>
                                    <img src="front/images/tshirt.png" id="back-img" alt="T-Shirt">
                                </i>
                            </a>
                        </div>




                    </div>
                </div>

                <div class="col_4">
                    <h4>Options</h4>
                    <div class="design-options" id="design-options">
                    

                    </div>
                </div>

            </div>



        </div>

        <div class="selected-item-price mb-5">
            <label class="item-row-price">Price: <span class="item-price" id="price">100$</span></label>
            <a class="btn-style-2 d-inline-block" onclick="addToCart()">Add To Card</a>
            <a class="btn-style-1 d-inline-block">Buy Now</a>
        </div>


    </div>
</div>



<script>
const products = null;
const categories = null;
const colors = null;
const stickers = null;
const images = null;
let product = null;
let category = null;

function selectCategory(id) {

    category = categories.find(c => c.id === id);
    
    if (category) {
 
        document.querySelectorAll(".category").forEach(option => {
            option.classList.remove("active");
        });

        document.querySelector(`.category[data-id="${id}"]`)?.classList.add('active');
        const filteredProducts = products.filter(p => p.category_id ===  id.toString());

   

        const DesignOptionsCont = document.getElementById('design-options');

        DesignOptionsCont.innerHTML="";
      let selectedProductBool=false;
        filteredProducts.forEach(product => {
            

            const color = product.colors && product.colors.length > 0 ? product.colors[0] : null;
        if (!color) return; // skip if no color

        
        const a = document.createElement('a');
        a.id = `product-${product.id}`;
        a.className = 'design-option';
        a.href = 'javascript:void(0)';
        a.onclick = () => selectProduct(product.id);

        const img = document.createElement('img');
        // Adjust the path below if needed depending on your project structure
        img.src = `storage/${color.image_front}`;
        img.alt = `Product ${product.id}`;

        a.appendChild(img);
        DesignOptionsCont.appendChild(a);

        if(color.quantity>0 && !selectedProductBool) {
      selectProduct(product['id']);selectedProductBool=true;}
    });

    }
}

function selectProduct(id) {
    product = products.find(p => p.id === id);
    if (product) {
        document.querySelectorAll(".design-option").forEach(option => {
            option.classList.remove("active");
        });

        if(document.getElementById("product-" + id))
        document.getElementById("product-" + id).classList.add('active');

        //////////////DISPLAY COLORS//////
        document.querySelectorAll(".design-colors a").forEach(option => {
            option.classList.remove("show");
            option.classList.remove("active");
        });


        const DesignColorsCont = document.getElementById('design-colors');
        
        DesignColorsCont.innerHTML = "";
        colors.forEach(color => {
            product.colors.forEach(product_color => {
                if (color.id == product_color.id) {
                    console.log(product_color);
                    const colorBtn = document.createElement('a');
                    colorBtn.id = `color-${color.id}`;
                    colorBtn.dataset.id = color.id;
                    colorBtn.style.background = color.color;
                    colorBtn.className = 'show';
                    colorBtn.onclick = () => selectColor(color);

                    if (color.image_front) {
                  
                const img = document.createElement('img');
                img.src  = "