@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.store')}}" 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="" id="product-image-input" alt="">
                    </label>
                </div>
                <div class="flex gap20 flex-wrap">
                </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"  aria-required="true"  value="{{old('product_title')}}">
            <div class="text-tiny text-surface-2">Do not exceed 20 characters when entering the product name.</div>
        </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[]"  multiple="multiple"></select>
        </fieldset>

        <div class="cols gap22">
            <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[]"  multiple="multiple" title="These attributes will affect the prices"></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[]" multiple="multiple"></select>
            </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[]"  multiple="multiple"></select>
            </fieldset>
            <fieldset class="sku">
                <div class="body-title mb-10">SKU</div>
                <input class="" type="text" placeholder="Enter SKU" name="product_sku" tabindex="0"  aria-required="true"  value="{{old('product_sku')}}">
            </fieldset>
            <fieldset class="bpv">
                <div class="body-title mb-10">BPV</div>
                <input class="" type="text" placeholder="Enter BPV Amount" name="product_bpv" tabindex="0"  aria-required="true" value="{{old('product_bpv')}}">
            </fieldset>
            <fieldset class="upv">
                <div class="body-title mb-10">UPV</div>
                <input class="" type="text" placeholder="Enter UPV Amount" name="product_upv" tabindex="0"  aria-required="true"  value="{{old('product_upv')}}">
            </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"  aria-required="true"  value="{{old('product_stock')}}">
            </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"  aria-required="true"  value="{{old('product_stock_treshold')}}">
            </fieldset>


        </div>
        <div id="prices">

        </div>
        <fieldset class="description">
            <div class="body-title mb-10">Description <span class="tf-color-1">*</span></div>
            <textarea class="mb-10" name="product_description" placeholder="Short description about product" tabindex="0" aria-required="true" >{{old('product_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" >
        </fieldset>
    </div>

    <div class="cols gap10">
        <button class="tf-button w380" type="submit">Add product</button>
        <a href="#" class="tf-button style-3 w380" type="submit">Cancel</a>
    </div>
</form>
<!-- /form-add-product -->
@endsection
@section('page_script')
@parent
<script>
    $(".product-menu").addClass("active");
    $(".product-add").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)
    })


    $('#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);

        if (index < 0) {
            return
        }
        $("#" + 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="` + attribute.id + `-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"  >
                </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"  >
                </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"  >
                </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
        }
        $("#" + 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>
@endsection
<!-- App js -->