@extends('main.layouts.app')

@section('content')
    <!-- @include('ckfinder::setup') -->
    <style>
    .img-thumbs {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    margin: 1.5rem 0;
    padding: 0.75rem;
    }
    .img-thumbs-hidden {
    display: none;
    }

    .wrapper-thumb {
    position: relative;
    display:inline-block;
    margin: 1rem 0;
    justify-content: space-around;
    }

    .img-preview-thumb {
    background: #fff;
    border: 1px solid none;
    border-radius: 0.25rem;
    box-shadow: 0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
    margin-right: 1rem;
    max-width: 140px;
    padding: 0.25rem;
    }

    .remove-btn{
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:.7rem;
    top:-5px;
    right:10px;
    width:20px;
    height:20px;
    background:white;
    border-radius:10px;
    font-weight:bold;
    cursor:pointer;
    }

    .remove-btn:hover{
    box-shadow: 0px 0px 3px grey;
    transition:all .3s ease-in-out;
    }
        .suggestions {
            border: 1px solid #ccc;
            background-color: white;
            max-height: 200px;
            overflow-y: auto;
            position: absolute;
            z-index: 999;
            width: calc(100% - 20px); /* Adjust width to fit under the input */
            display: none; /* Start hidden */
        }

        .suggestion-item {
            padding: 10px;
            cursor: pointer;
        }

        .suggestion-item:hover {
            background-color: #f0f0f0;
        }

        .tag-bubble {
            display: inline-block;
            padding: 5px 10px;
            margin: 5px;
            background-color: #007bff;
            color: white;
            border-radius: 15px;
        }

        .remove-tag {
            margin-left: 8px;
            cursor: pointer;
            color: white;
            font-weight: bold;
        }
        /* General styles for the Select2 container */
.select2-container {
    width: 100% !important; /* Make the dropdown full width */
}

/* Style the select2 dropdown itself */
.select2-selection {
    height: 38px; /* Match the input height */
    border: 1px solid #ced4da; /* Border color */
    border-radius: 4px; /* Rounded corners */
    padding: 6px 12px; /* Padding */
}

/* Style for the selected option */
.select2-selection__rendered {
    line-height: 28px; /* Center align text */
    color: #495057; /* Text color */
}

/* Placeholder style */
.select2-selection__placeholder {
    color: #999; /* Placeholder color */
}

/* Focus state */
.select2-selection--single:focus {
    border-color: #80bdff; /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); /* Shadow effect on focus */
}

/* Style the dropdown items */
.select2-results {
    max-height: 200px; /* Max height for dropdown */
    overflow-y: auto; /* Scrollable if overflow */
}

/* Style for each dropdown item */
.select2-results__option {
    padding: 8px 12px; /* Padding for dropdown items */
    cursor: pointer; /* Cursor style */
}

/* Highlighted dropdown item */
.select2-results__option--highlighted {
    background-color: #007bff; /* Background color for highlighted item */
    color: white; /* Text color for highlighted item */
}
.custom-modal-width {
    max-width: 800px; /* Set your desired width here */
    width: 100%; /* This ensures it is responsive */
}
    </style>
    
    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <div class="card mt-4">

            <div class="card-head">
                <div class="row wrapper border-bottom white-bg page-heading">
                    <div class="col-sm-8">
                        <h2> Product Page </h2>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"> <a class="" href="dashboard"> Home </a> </li>
                            <li class="breadcrumb-item"> <a class="" href="{{ route('admin.create-product') }}">Add Products</a></li>
                        </ol>
                    </div>
                    <div class="col-sm-4">
                        <div class="title-action"></div>
                    </div>
                </div>
            </div>


            <div class="card-body mt-0 pt-0">
                <div class="wrapper wrapper-content m-0 p-0">
                    <div class="animated fadeInUp">
                        <form action="{{ route('admin.store-product') }}" method="post" enctype="multipart/form-data">
                            @csrf
            
                            <div class="form-group">
                                <label>Product Title</label>
                                <input type="text" name="product_title" class="form-control" value="" required>
                            </div>
                            <div class="form-group">
                                <label>Variant Title</label>
                                <input type="text" name="title_addition" class="form-control" value="" required>
                            </div>
            
                            <div class="form-group">
                                <label>Description</label>
                                <textarea class="ckeditor" name="description" required></textarea>
                            </div>
            
                            <div class="form-group">
                                <label for="exampleInputPassword1">Product URL</label>
                                <input type="text" class="form-control" name="product_url" required placeholder="Enter service URL">
                            </div>
            
                            <div class="form-group">
                                <label>Select Category</label>
                                <select required class="form-control" id="category" name="category">
                                    <option value="">Select</option>
                                                                    </select>
                                <span class="material-input"></span>
                            </div>
            
                           <div class="row">
                <div class="form-group col-md-6">
                    <label for="price" class="form-label">Amount</label>
                    <input type="text" name="price" class="form-control" value="" maxlength="20" required>
                </div>
                <div class="form-group col-md-6">
                    <label for="discount" class="form-label">Discount Price</label>
                    <input type="text" name="discount" class="form-control" value="" maxlength="20" required placeholder="">
                </div>
            </div>
            
                                 
                            <div class="form-group">
                                <label>Tags</label>
                                <div id="tag-container" class="tag-container">
                                    <!-- Selected tags will be displayed here as bubbles -->
                                </div>
                                <input type="hidden" name="tag" id="tags-input-hidden" value=""> <!-- Hidden input for storing tags -->
                                <input type="text" id="tags-input" class="form-control" placeholder="Add tags" autocomplete="off">
                                <div id="tag-suggestions" class="suggestions"></div>
                            </div>
                            <div class="form-group">
                <label>Select Artist</label>
                <select required class="form-control" id="artistSelect" name="artist_id">
                    <option value="">Select</option>
                                    </select>
                <span class="material-input"></span>
            </div>
            
                 
                            <div class="form-group">
                                <label for="formFileSm" class="form-label">Quantity</label>
                                <input type="text" name="quantity" class="form-control" value="" maxlength="20" required>
                            </div>
            
                            <div class="mb-3">
            
            
                            <label for="formFileSm" class="form-label">Choose Images</label>
                            <input class="form-control form-control-sm" name="pictures[]" id="upload-img" type="file" multiple required>
                            <div class="img-thumbs img-thumbs-hidden" id="img-preview"></div>
                             </div>
            
            
                            <div class="mb-3">
                                <label for="formFileSm" class="form-label">Card Image</label>
                                <input class="form-control form-control-sm" name="banner_image" id="banner_image" type="file" required>
                            </div>
            
                            
                            <div class="form-group">
                                <label for="formFileSm" class="form-label">Scale
                                </label>
                                <input type="text" name="scale" class="form-control" value="" maxlength="20" >
                            </div>
            
                            <div class="form-group">
                                <label for="formFileSm" class="form-label">material
                                </label>
                                <input type="text" name="material" class="form-control" value="" maxlength="20" >
                            </div>
                            <div class="form-group">
                                <label for="formFileSm" class="form-label">brands
                                </label>
                                <input type="text" name="brand" class="form-control" value="" maxlength="20" >
                            </div>
                          
                       <div class="row">
                       <div class="form-group col-md-3">
                                <label for="formFileSm" class="form-label">Height
                                </label>
                                <input type="text" name="height" class="form-control" value="" maxlength="20" >
                            </div>
                            <div class="form-group col-md-3">
                                <label for="formFileSm" class="form-label">Width
                                </label>
                                <input type="text" name="width" class="form-control" value="" maxlength="20" >
                            </div>
                            <div class="form-group col-md-3">
                                <label for="formFileSm" class="form-label">depth
                                </label>
                                <input type="text" name="depth" class="form-control" value="" maxlength="20" >
                            </div>
                            <div class="form-group col-md-3">
                                <label for="formFileSm" class="form-label">Weight
                                                        </label>
                                <input type="text" name="weight" class="form-control" value="" maxlength="20" >
                            </div>
                       
                       </div>
                       <div class="form-group">
                                <label for="formFileSm" class="form-label">Youtube link
                                </label>
                                <input type="text" name="youtube_video_link" class="form-control" value=""  >
                            </div>
                            <div class="form-group">
                                <label for="formFileSm" class="form-label">Product code
                                </label>
                                <input type="text" name="productcode" class="form-control" value="" maxlength="20" >
                            </div>
                       
                            <div class="form-group mb-0">
                                <label class="control-label">Best Seller</label>
                                <input type="checkbox" name="best_seller" value="1">
            
                                <label class="control-label">Home</label>
                                <input type="checkbox" name="home" value="1">
            
                                {{-- <div class="form-group">
                                    <label for="sub_services">Sub-Services</label>
                                    <select name="sub_services[]" multiple class="form-control h-75">
                                        <option value="">Select</option>
                                        @foreach($products as $sub_services)
                                            <option value="{{$sub_services['product_title']}}">{{$sub_services['product_title']}}</option>
                                        @endforeach
                                    </select>
                                </div> --}}
                            </div>
            
                            <fieldset class="border p-2">
                                <legend class="float-none w-auto p-2 text-center">Meta Details</legend>
                                <div class="form-group">
                                    <label class="control-label">Meta Title</label>
                                    <input type="text" name="meta_title" class="form-control" required/>
                                </div>
            
                                <div class="form-group">
                                    <label class="control-label">Meta Description</label>
                                    <input class="form-control" required type="text" name="meta_desc" />
                                </div>
            
                                <div class="form-group">
                                    <label class="control-label">Meta Keywords</label>
                                    <input class="form-control" required type="text" name="meta_keywords" />
                                </div>
                            </fieldset>
            
                            {{-- OG Details --}}
                            <fieldset class="border p-2">
                                <legend class="float-none w-auto p-2 text-center">OG Details</legend>
                                <div class="form-group">
                                    <label class="control-label">OG Title</label>
                                    <input type="text" name="og_title" class="form-control" required/>
                                </div>
            
                                <div class="form-group">
                                    <label class="control-label">OG Description</label>
                                    <input class="form-control" required type="text" name="og_desc" />
                                </div>
            
                                <div class="mb-3">
                                    <label for="formFileSm" class="form-label">OG Image</label>
                                    <input class="form-control form-control-sm" name="og_image" id="og_image" type="file">
                                </div>
                            </fieldset>
            
                            <input style="margin:10px" type="submit" class="btn btn-primary" name="save" value="submit">
                        </form>
                    </div>
                </div>
        
            </div>

        </div>


   

 
    

    <script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script>
    <script>
        CKFinder.config({
            connectorPath: '/ckfinder/connector'
        });
    </script>
    <script src="https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>



    <script>
     document.addEventListener('DOMContentLoaded', function() {
    // Get references to the input and suggestions box
    const tagsInput = document.getElementById('tags-input');
    const tagsContainer = document.getElementById('tag-container');
    const hiddenInput = document.getElementById('tags-input-hidden');
    const suggestionsContainer = document.getElementById('tag-suggestions');

    let tags = [];

    function addTag(tag) {
        if (!tags.includes(tag)) {
            tags.push(tag);
            const tagBubble = document.createElement('div');
            tagBubble.className = 'tag-bubble';
            tagBubble.innerText = tag;

            const removeBtn = document.createElement('span');
            removeBtn.innerText = 'x';
            removeBtn.className = 'remove-tag';
            removeBtn.onclick = () => {
                removeTag(tagBubble, tag);
            };

            tagBubble.appendChild(removeBtn);
            tagsContainer.appendChild(tagBubble);
            updateHiddenInput();
        }
        tagsInput.value = '';
        suggestionsContainer.innerHTML = ''; // Clear suggestions
        suggestionsContainer.style.display = 'none'; // Hide suggestions
    }

    function removeTag(tagBubble, tag) {
        tagsContainer.removeChild(tagBubble); // Remove the tag visually
        tags = tags.filter(t => t !== tag);  // Remove from tags array
        updateHiddenInput(); // Update the hidden input
    }

    function updateHiddenInput() {
        hiddenInput.value = tags.join(',');
    }

    tagsInput.addEventListener('input', function () {
        const inputValue = this.value.trim();
        suggestionsContainer.innerHTML = '';

        if (inputValue.length > 0) {
            fetch(`/admin/tags/suggestions?query=${inputValue}`)
                .then(response => response.json())
                .then(data => {
                    if (data.length > 0) {
                        suggestionsContainer.style.display = 'block'; // Show suggestions
                        data.forEach(tag => {
                            const suggestionItem = document.createElement('div');
                            suggestionItem.className = 'suggestion-item';
                            suggestionItem.innerText = tag;
                            suggestionItem.onclick = () => {
                                addTag(tag);
                                suggestionsContainer.innerHTML = '';
                                suggestionsContainer.style.display = 'none'; // Hide suggestions after selection
                            };
                            suggestionsContainer.appendChild(suggestionItem);
                        });
                    } else {
                        suggestionsContainer.style.display = 'none'; // Hide if no suggestions
                    }
                })
                .catch(error => console.error('Error fetching tags:', error));
        } else {
            suggestionsContainer.style.display = 'none'; // Hide if input is empty
        }
    });

    tagsInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' && this.value.trim() !== '') {
            event.preventDefault();
            addTag(this.value.trim());
        }
    });
});

document.getElementById('pictures').addEventListener('change', function(event) {
    const imagePreview = document.getElementById('imagePreview');
    imagePreview.innerHTML = ''; // Clear previous previews
    const files = event.target.files;

    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.width = '100px';
                img.style.margin = '10px';
                imagePreview.appendChild(img);
            };
            reader.readAsDataURL(file);
        }
    }
});
document.getElementById('secondVariantForm').addEventListener('submit', function(event) {
    event.preventDefault();
    // Add your AJAX or form submission logic here
    $('#variantModal').modal('hide'); // Close the modal after submission
});

    </script>
    <!-- jQuery -->

    <script>
        var imgUpload = document.getElementById('upload-img')
        , imgPreview = document.getElementById('img-preview')
        , imgUploadForm = document.getElementById('form-upload')
        , totalFiles
        , previewTitle
        , previewTitleText
        , img;

        imgUpload.addEventListener('change', previewImgs, true);

        function previewImgs(event) {
        totalFiles = imgUpload.files.length;
        
            if(!!totalFiles) {
            imgPreview.classList.remove('img-thumbs-hidden');
        }
        
        for(var i = 0; i < totalFiles; i++) {
            wrapper = document.createElement('div');
            wrapper.classList.add('wrapper-thumb');
            removeBtn = document.createElement("span");
            nodeRemove= document.createTextNode('x');
            removeBtn.classList.add('remove-btn');
            removeBtn.appendChild(nodeRemove);
            img = document.createElement('img');
            img.src = URL.createObjectURL(event.target.files[i]);
            img.classList.add('img-preview-thumb');
            wrapper.appendChild(img);
            wrapper.appendChild(removeBtn);
            imgPreview.appendChild(wrapper);
        
            $('.remove-btn').click(function(){
            $(this).parent('.wrapper-thumb').remove();
            });    

        }
        
        
}
    </script>

@endsection