@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>Edit Attribute</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">Attributes</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Edit Attribute</div>
        </li>
    </ul>
</div>
<!-- new-attribute -->
<div class="wg-box">
    <form class="form-new-product form-style-1" method="POST" action="{{route('shop-bo.attributes.update',['attributes_id' => Crypt::encrypt($attributes_id)])}}">
        @csrf
        @honeypot
        <fieldset class="name">
            <div class="body-title">Attribute name</div>
            <input class="flex-grow" type="text" placeholder="Attribute name" name="name" tabindex="0" aria-required="true" required="" value="{{$attribute_query->name}}">
        </fieldset>
        <fieldset style="font-size:15px">
            <div class="body-title mb-10">Tags</div>
            <select class="form-select" id="attribute-values" type="text" name="values[]" required="" multiple="multiple">
                @foreach($attribute_query->values as $value)
                    <option selected>{{$value->value}}</option>
                @endforeach

            </select>
        </fieldset>
        <div class="bot">
            <div></div>
            <button class="tf-button w208" type="submit">Save Changes</button>
        </div>
    </form>
</div>
<!-- /new-category -->

@endsection
@section('page_script')
@parent
<script>
    $(".attributes-menu").addClass("active");
    $(".attributes-index").addClass("active");
    var created_attribute_values    = [];
    $('#attribute-values').select2({
        tags: true,              // Enable tagging
        tokenSeparators: [','],  // Use commas to separate tags
        placeholder: 'Add values',
        minimumInputLength: 2,   // Suggest after typing 2 characters
        createTag: function (params) {
            const term = $.trim(params.term);
            if (term === '' || created_attribute_values.includes(term)) {
                return null;
            }
            // Return the new tag format
            return {
                id: term,
                text: term,
                newTag: true  // This flag identifies it as a new tag
            };
        }
    });
    $("#attribute-values").on('select2:unselecting',function(e){

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

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

        let tag = e.params.args.data;

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