@extends('layouts.app')
@section('page_head')
@parent
<style>
    form textarea{
        height: auto !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice{
        vertical-align: top !important;
    }
</style>
@endsection
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Add Product</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Product</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Add Product</div>
        </li>
    </ul>
</div>
<!-- form-add-product -->
<form class="form-add-product" method="POST" action="{{route('shop-bo.product.update',['product_id' => Crypt::encrypt($product_id)])}}" enctype="multipart/form-data">
    @csrf
    @honeypot
    <div class="wg-box mb-30">
        <fieldset>
            <div class="body-title mb-10">Upload images</div>
            <div class="upload-image mb-16">
                <div class="up-load">
                    <label class="uploadfile" for="product-image">
                        <span class="icon">
                            <i class="icon-upload-cloud"></i>
                        </span>
                        <div class="text-tiny"><span class="text-secondary">click to browse</span></div>
                        <input type="file" id="product-image" name="product_image" multiple>
                        <img src="{{url('storage/admin/shop-bo/'.$product_query->image)}}" class="has-img" id="product-image-input" alt="{{$product_query->name}}">

                    </label>
                </div>
                <div class="flex gap20 flex-wrap">
                    @foreach($product_images_query as $product_image)
                    <div class="item">
                        <img src="{{url('storage/admin/shop-bo/'.$product_image->image)}}" alt="{{$product_query->name}}">
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="body-text">You need to add at least 4 images. Pay attention to the quality of the pictures you add, comply with the background color standards. Pictures must be in certain dimensions. Notice that the product shows all the details</div>
        </fieldset>
    </div>
    <div class="wg-box mb-30">
        <fieldset class="name">
            <div class="body-title mb-10">Product title <span class="tf-color-1">*</span></div>
            <input class="mb-10" type="text" placeholder="Enter title" name="product_title" tabindex="0" value="{{$product_query->name}}" aria-required="true" required="">
            <div class="text-tiny text-surface-2">Do not exceed 20 characters when entering the product name.</div>
        </fieldset>
        {{--<fieldset class="category">
            <div class="body-title mb-10">Category <span class="tf-color-1">*</span></div>
            <select class="" type="text" name="product_category" tabindex="0" value="" aria-required="true" required="">
                @foreach($categories_query as $category)
                    <option value="{{$category->id}}" {{$product_query->category == $category->name ? 'selected' : ''}}>{{$category->name}}</option>
                @endforeach
            </select>
        </fieldset>--}}
        <fieldset style="font-size:15px">
            <div class="body-title mb-10">Categories</div>
            <select class="form-select" id="categories" type="text" name="product_categories[]" required="" multiple="multiple">
                @foreach($categories_query as $category)
                    <option value="{{$category->name}}" selected>{{$category->name}}</option>
                @endforeach
            </select>
        </fieldset>
        <div id="prices">

        </div>
        {{--<div class="cols gap22">
            <fieldset class="price">
                <div class="body-title mb-10">SRP <span class="tf-color-1">*</span></div>
                <input class="" type="number" placeholder="Price" name="product_price[srp]" tabindex="0" value="{{$product_query->srp}}" aria-required="true" required="">
            </fieldset>
            <fieldset class="sale-price">
                <div class="body-title mb-10">Partner Price </div>
                <input class="" type="number" placeholder="Price " name="product_price[partner_price]" tabindex="0" value="{{$product_query->partner_price}}" aria-required="true" required="">
            </fieldset>
            <fieldset class="sale-price">
                <div class="body-title mb-10">Branch Hub Price </div>
                <input class="" type="number" placeholder="Price " name="product_price[branch_hub_price]" tabindex="0" value="{{$product_query->branch_hub_price}}" aria-required="true" required="">
            </fieldset>
        </div>--}}
        <div class="cols gap22">
            <fieldset class="sku">
                <div class="body-title mb-10">SKU</div>
                <input class="" type="text" placeholder="Enter SKU" name="product_sku" tabindex="0" value="{{$product_query->sku}}" aria-required="true" required="">
            </fieldset>
            <fieldset class="bpv">
                <div class="body-title mb-10">BPV</div>
                <input class="" type="text" placeholder="Enter BPV" name="product_bpv" tabindex="0" value="{{$product_query->bpv}}" aria-required="true" required="">
            </fieldset>
            <fieldset class="upv">
                <div class="body-title mb-10">UPV</div>
                <input class="" type="text" placeholder="Enter UPV" name="product_upv" tabindex="0" value="{{$product_query->upv}}" aria-required="true" required="">
            </fieldset>
            {{--<fieldset class="category">
                <div class="body-title mb-10">Stock <span class="tf-color-1">*</span></div>
                <input class="" type="text" placeholder="Enter Stock" name="product_stock" tabindex="0" value="{{$product_query->new_stock}}" aria-required="true" required="">
            </fieldset>
            <fieldset class="category">
                <div class="body-title mb-10">Stock Low Threshold<span class="tf-color-1">*</span></div>
                <input class="" type="text" placeholder="Enter Treshold" name="product_stock_treshold" tabindex="0" value="{{$product_query->threshold}}" aria-required="true" required="">
            </fieldset>--}}
            <fieldset style="font-size:15px">
                <div class="body-title mb-10">Tags</div>
                <select class="form-select" id="tags" type="text" name="product_tags[]" required="" multiple="multiple">

                    @foreach(explode(",",$product_query->tags) as $tag)
                    <option selected>{{$tag}}</option>
                    @endforeach
                </select>
            </fieldset>
            <fieldset style="font-size:15px">
                <div class="body-title mb-10">Primary Attributes</div>
                <select class="form-select" id="primary_attributes" type="text" name="product_primary_attributes[]" required="" multiple="multiple" title="These attributes will affect the prices">
                    {{--@foreach(explode(",",$attribute_value_query) as $tag)
                    <option selected>{{$tag}}</option>
                    @endforeach--}}

                    @foreach(explode(",",$attributes_primary_query) as $tag)
                    <option selected>{{$tag}}</option>
                    @endforeach

                </select>
            </fieldset>
            <fieldset style="font-size:15px">
                <div class="body-title mb-10">Secondary Attributes</div>
                <select class="form-select" id="secondary_attributes" type="text" name="product_secondary_attributes[]" required="" multiple="multiple">
                    @foreach(explode(",",$attributes_secondary_query) as $tag)
                    <option selected>{{$tag}}</option>
                    @endforeach
                </select>
            </fieldset>
        </div>
        <fieldset class="description">
            <div class="body-title mb-10">Description <span class="tf-color-1">*</span></div>
            <textarea class="mb-10" id="product_description" name="product_description" placeholder="Short description about product" tabindex="0" aria-required="true" required="">{{$product_query->description}}</textarea>
            <div class="text-tiny">Do not exceed 100 characters when entering the product name.</div>
        </fieldset>
        <fieldset class="description">
            <div class="body-title mb-10">Featured </div>
            <input type="checkbox" name="featured" {{$product_query->featured ? 'checked' : ''}}>
        </fieldset>
    </div>

    <div class="cols gap10">
        <button class="tf-button w380" type="submit">Save Changes</button>
        <a href="#" class="tf-button style-3 w380" type="submit">Cancel</a>
    </div>
</form>
<!-- /form-add-product -->
@endsection
@section('page_script')
@parent
<script src="{{asset('assets/admin/shop-bo/js/ckeditor/ckeditor.js')}}"></script>
<script>
    $(document).ready(function() {
        CKEDITOR.replace('product_description', {
            height: 150,
            removePlugins: 'elementspath',
            resize_enabled: false,
            toolbar: [
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
                { name: 'paragraph',   items: ['NumberedList', 'BulletedList'] },
                { name: 'insert',      items: ['Link', 'Unlink'] },
                { name: 'editing',     items: ['Scayt'] }
            ]
        });
    });
</script>

<script>
    $(".product-menu").addClass("active");
    $(".product-index").addClass("active");
    var created_categories            = [];
    var created_tags            = [];
    var created_attributes      = [];
    $('#categories').select2({
        categories: true,              // Enable tagging
        tokenSeparators: [','],  // Use commas to separate categories
        placeholder: 'Add categories',
        minimumInputLength: 2,   // Suggest after typing 2 characters
        ajax: {
            url: '{{route("shop-bo.product.get-categories")}}',   // Your route for fetching category suggestions
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term // Pass the search term
                };
            },
        },
        createTag: function (params) {
            const term = $.trim(params.term);
            if (term === '' || created_categories.includes(term)) {
                return null;
            }
            // Return the new category format
            return {
                id: term,
                text: term,
                newTag: true  // This flag identifies it as a new category
            };
        }
    });
    $("#categories").on('select2:unselecting',function(e){

        let category = e.params.args.data;
        const index = created_categories.indexOf(category.text);

        if (index < 0) {
            return
        }
        created_categories.splice(index, 1); // Removes element 3
        console.log(created_categories)
    })
    $("#categories").on('select2:selecting',function(e){

        let category = e.params.args.data;

        created_categories.push(category.text);
        console.log(created_categories)
    })


    $('#tags').select2({
        tags: true,              // Enable tagging
        tokenSeparators: [','],  // Use commas to separate tags
        placeholder: 'Add tags',
        minimumInputLength: 2,   // Suggest after typing 2 characters
        ajax: {
            url: '{{route("shop-bo.product.get-tags")}}',   // Your route for fetching tag suggestions
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term // Pass the search term
                };
            },
        },
        createTag: function (params) {
            const term = $.trim(params.term);
            if (term === '' || created_tags.includes(term)) {
                return null;
            }
            // Return the new tag format
            return {
                id: term,
                text: term,
                newTag: true  // This flag identifies it as a new tag
            };
        }
    });


    $("#tags").on('select2:unselecting',function(e){

        let tag = e.params.args.data;
        const index = created_tags.indexOf(tag.text);

        if (index < 0) {
            return
        }
        created_tags.splice(index, 1); // Removes element 3
        console.log(created_tags)
    })
    $("#tags").on('select2:selecting',function(e){

        let tag = e.params.args.data;

        created_tags.push(tag.text);
        console.log(created_tags)
    })

    $(document).ready(function() {
        function loadPreSelectedPrices() {
            $.ajax({
                url: '{{route("shop-bo.product.get-attributes-price",['product_id'=>Crypt::encrypt($product_id)])}}',   // Your route for fetching tag suggestions
                dataType: 'json',
                success: function(response) {
                    // console.log('Data sent successfully:', response);
                    response.results.forEach(function(data) {
                        console.log(data)

                        let attribute       = data;

                        let price_html      = `

                            <div class="cols gap22 mb-20" id="PROD${attribute.value.replace(/\s+/g, '')}-pricing">
                                <fieldset class="price">
                                    <div class="body-title mb-10">${attribute.text} SRP <span class="tf-color-1">*</span></div>
                                    <input class="" type="number" placeholder="Price" name="product_prices[${attribute.id}][srp]" tabindex="0" value="${data.srp}" aria-required="true" required="">
                                </fieldset>
                                <fieldset class="sale-price">
                                    <div class="body-title mb-10">${attribute.text} Partner Price </div>
                                    <input class="" type="number" placeholder="Price " name="product_prices[${attribute.id}][partner_price]" tabindex="0" value="${data.partner_price}" aria-required="true" required="">
                                </fieldset>
                                <fieldset class="sale-price">
                                    <div class="body-title mb-10">${attribute.text} Branch Hub Price </div>
                                    <input class="" type="number" placeholder="Price " name="product_prices[${attribute.id}][branch_hub_price]" tabindex="0" value="${data.branch_hub_price}" aria-required="true" required="">
                                </fieldset>
                            </div>

                        `;

                        $("#prices").append(price_html)
                        created_attributes.push(attribute.value);

                    });

                },
                error: function(xhr, status, error) {
                    console.error('Error sending data:', status, error);
                }
            });


        }
        loadPreSelectedPrices();
    });
    $('#primary_attributes').select2({
        tokenSeparators: [','],  // Use commas to separate attributes
        placeholder: 'Add primary attributes',
        minimumInputLength: 2,   // Suggest after typing 2 characters
        ajax: {
            url: '{{route("shop-bo.product.get-attributes")}}',   // Your route for fetching tag suggestions
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term // Pass the search term
                };
            },
        },
        createTag: function (params) {
            const term = $.trim(params.term);
            if (term === '' || created_attributes.includes(term)) {
                return null;
            }
            // Return the new tag format
            return {
                id: term,
                text: term,
                newTag: true  // This flag identifies it as a new tag
            };
        }
    });
    $("#primary_attributes").on('select2:unselecting',function(e){

        let attribute = e.params.args.data;
        const index = created_attributes.indexOf(attribute.text);
        const attribute_id = attribute.id.replace(/\s+/g, ''); // remove all whitespace
        console.log(attribute.id +"-pricing");
        // if (index < 0) {
        //     return
        // }

        //NOTE: The issue occurs because HTML IDs that start with a number (like id="256GB-pricing") are invalid in CSS selectors and jQuery. instead you can change it to id="PROD256GB-pricing"

        // $("#" + attribute.id +"-pricing").remove();
        $("#PROD" + attribute_id +"-pricing").remove()
        created_attributes.splice(index, 1); // Removes element 3
    })
    $("#primary_attributes").on('select2:selecting',function(e){

        let attribute       = e.params.args.data;
        let price_html      = `

            <div class="cols gap22 mb-20" id="PROD${attribute.id.replace(/\s+/g, '')}-pricing">
                <fieldset class="price">
                    <div class="body-title mb-10">${attribute.text} SRP <span class="tf-color-1">*</span></div>
                    <input class="" type="number" placeholder="Price" name="product_prices[${attribute.id}][srp]" tabindex="0" value="" aria-required="true" required="">
                </fieldset>
                <fieldset class="sale-price">
                    <div class="body-title mb-10">${attribute.text} Partner Price </div>
                    <input class="" type="number" placeholder="Price " name="product_prices[${attribute.id}][partner_price]" tabindex="0" value="" aria-required="true" required="">
                </fieldset>
                <fieldset class="sale-price">
                    <div class="body-title mb-10">${attribute.text} Branch Hub Price </div>
                    <input class="" type="number" placeholder="Price " name="product_prices[${attribute.id}][branch_hub_price]" tabindex="0" value="" aria-required="true" required="">
                </fieldset>
            </div>

        `;

        $("#prices").append(price_html)
        created_attributes.push(attribute.text);
    })

    $('#secondary_attributes').select2({
        tokenSeparators: [','],  // Use commas to separate attributes
        placeholder: 'Add secondary attributes',
        minimumInputLength: 2,   // Suggest after typing 2 characters
        ajax: {
            url: '{{route("shop-bo.product.get-attributes")}}',   // Your route for fetching tag suggestions
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term // Pass the search term
                };
            },
        },
        createTag: function (params) {
            const term = $.trim(params.term);
            if (term === '' || created_attributes.includes(term)) {
                return null;
            }
            // Return the new tag format
            return {
                id: term,
                text: term,
                newTag: true  // This flag identifies it as a new tag
            };
        }
    });
    $("#secondary_attributes").on('select2:unselecting',function(e){

        let attribute = e.params.args.data;
        const index = created_attributes.indexOf(attribute.text);

        if (index < 0) {
            return
        }
        //alert(attribute.id);
        $("#" + attribute.id +"-pricing").remove()
        created_attributes.splice(index, 1); // Removes element 3
    })
    $("#secondary_attributes").on('select2:selecting',function(e){

        let attribute       = e.params.args.data;
        created_attributes.push(attribute.text);
    })

</script>
{{--<script>
    $(".product-menu").addClass("active");
    $(".product-add").addClass("active");
    var created_tags    = [];
    $('#tags').select2({
        tags: true,              // Enable tagging
        tokenSeparators: [','],  // Use commas to separate tags
        placeholder: 'Add tags',
        minimumInputLength: 2,   // Suggest after typing 2 characters
        ajax: {
            url: '{{route("shop-bo.product.get-tags")}}',   // Your route for fetching tag suggestions
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    query: params.term // Pass the search term
                };
            },
        },
        createTag: function (params) {
            const term = $.trim(params.term);
            if (term === '' || created_tags.includes(term)) {
                return null;
            }
            // Return the new tag format
            return {
                id: term,
                text: term,
                newTag: true  // This flag identifies it as a new tag
            };
        }
    });
    $("#tags").on('select2:unselecting',function(e){

        let tag = e.params.args.data;
        const index = created_tags.indexOf(tag.text);

        if (index < 0) {
            return
        }
        created_tags.splice(index, 1); // Removes element 3
        console.log(created_tags)
    })
    $("#tags").on('select2:selecting',function(e){

        let tag = e.params.args.data;

        created_tags.push(tag.text);
        console.log(created_tags)
    })

    var created_primary_attributes    = [];
    $('#primary_attributes').select2({
        tags: true,              // Enable tagging
        tokenSeparators: [','],  // Use commas to separate tags
        placeholder: 'Add tags',
        minimumInputLength: 2,   // Suggest after typing 2 characters
        ajax: {
            url: '{{route("shop-bo.product.get-attributes")}}',   // Your route for fetching tag suggestions
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    query: params.term // Pass the search term
                };
            },
        },
        createTag: function (params) {
            const term = $.trim(params.term);
            if (term === '' || created_primary_attributes.includes(term)) {
                return null;
            }
            // Return the new tag format
            return {
                id: term,
                text: term,
                newTag: true  // This flag identifies it as a new tag
            };
        }
    });
    $("#primary_attributes").on('select2:unselecting',function(e){

        let tag = e.params.args.data;
        const index = created_primary_attributes.indexOf(tag.text);

        console.log(index);
            return
        }
        created_primary_attributes.splice(index, 1); // Removes element 3
        console.log(created_primary_attributes)
    })
    $("#primary_attributes").on('select2:selecting',function(e){

        let tag = e.params.args.data;

        created_primary_attributes.push(tag.text);
        console.log(created_primary_attributes)
    })

    var created_secondary_attributes    = [];
    $('#secondary_attributes').select2({
        tags: true,              // Enable tagging
        tokenSeparators: [','],  // Use commas to separate tags
        placeholder: 'Add tags',
        minimumInputLength: 2,   // Suggest after typing 2 characters
        ajax: {
            url: '{{route("shop-bo.product.get-secondary-attributes")}}',   // Your route for fetching tag suggestions
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    query: params.term // Pass the search term
                };
            },
        },
        createTag: function (params) {
            const term = $.trim(params.term);
            if (term === '' || created_secondary_attributes.includes(term)) {
                return null;
            }
            // Return the new tag format
            return {
                id: term,
                text: term,
                newTag: true  // This flag identifies it as a new tag
            };
        }
    });
    $("#secondary_attributes").on('select2:unselecting',function(e){

        let tag = e.params.args.data;
        const index = created_secondary_attributes.indexOf(tag.text);

        if (index < 0) {
            return
        }
        created_secondary_attributes.splice(index, 1); // Removes element 3
        console.log(created_secondary_attributes)
    })
    $("#secondary_attributes").on('select2:selecting',function(e){

        let tag = e.params.args.data;

        created_secondary_attributes.push(tag.text);
        console.log(created_secondary_attributes)
    })
</script>--}}
@endsection
<!-- App js -->