@extends('admin.layout.index')
@section('title', 'Yeni Filtre Ekle')
@section('content')
    <section class="content-body">
        <form action="" class="form-container" enctype="multipart/form-data" method="POST">
            @csrf
            <div class="form-item">
                <label for="name">Filtre Adı</label>
                <input type="text" id="name" name="name">
            </div>
            <input type="hidden" id="fields" name="fields">
            <div class="form-item">
                <label for=""> Özellik Gir </label>
                <input type="text" id="feature_input" placeholder="">
            </div>
            <div id="container" class="hidden" data-role="variants-container">
                <ul id="list" class="variants-list"></ul>
            </div>
            <div class="flex items-center justify-end gap-2">
                <button class="border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md" type="reset"> Sıfırla</button>
                <button class="border border-green-300 bg-green-50 hover:bg-green-200 px-4 py-2 rounded-md"> Kaydet</button>
            </div>
        </form>
    </section>
    <script>
        let fields_input = document.querySelector('#fields');
        let feature_input = document.querySelector('#feature_input');
        let container = document.querySelector('#container')
        let list = container.querySelector('#list');
        let features = [];
        feature_input.addEventListener('keydown', event => {
            if(event.keyCode === 13){
                if(event.target.value !== '' && event.target.value !== ' '){
                    features.push(event.target.value)
                    render();
                    event.target.value = '';
                }
                event.preventDefault();
            }
        })

        const render = () => {
            if(features.length !== 0){
                container.classList.remove('hidden')
                let html = '';
                features.forEach((feature, index) => {
                    html += `<li>
                                <input value="${feature}" data-input="${index}" data-role="name" style="flex: 1"/>
                                <div>
                                    <button data-remove="${index}" type="button">
                                        <i class="icon-trash-02"></i>
                                    </button>
                                </div>
                             </li>`
                });
                list.innerHTML = html
                setTimeout(() => {
                    container.querySelectorAll('button[data-remove]').forEach(element => {
                        element.addEventListener('click', event => {
                            if(confirm('bu öğreyi silmek istediğinizden eminmisiniz?')){
                                let key = element.dataset.remove
                                let newArray = [];
                                features.forEach((value, index) => {
                                    if(Number(index) !== Number(key)){
                                        newArray.push(value)
                                    }
                                })
                                features = newArray
                                render()
                            }
                        })
                    })

                    container.querySelectorAll('input[data-input]').forEach(element => {
                        element.addEventListener('input', event => {
                            let key = element.dataset.input
                            let newArray = [];
                            features.forEach((value, index) => {
                                if(Number(index) !== Number(key)){
                                    newArray.push(value)
                                } else {
                                    newArray[key] = event.target.value
                                }
                            })
                            features = newArray
                        })
                        element.addEventListener('blur', event => {
                            render()
                        })
                    })
                }, 100)
            } else {
                container.classList.add('hidden')
            }
        }
        setInterval(() => {
            fields_input.value = JSON.stringify(features);
        }, 100)
    </script>
@endsection