@extends('admin.layout.index')
@section('title', 'Kargo Düzenle')
@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">Firma Adı</label>
                <input type="text" id="name" name="name" value="{{ $cargo->name }}">
            </div>
            <div class="form-item">
                <label for="top_desi">Ücretsiz Kargo Üst Desi Limiti</label>
                <input type="text" name="top_desi" id="top_desi" value="{{ $cargo->top_desi }}">
            </div>
            <div class="form-item">
                <label for="bottom_fee">Ücretsiz Kargo Alt Alışveriş Limiti</label>
                <input type="text" name="bottom_fee" id="bottom_fee" value="{{ $cargo->bottom_fee }}">
            </div>
            <div class="form-item">
                <label for="region">Bölge</label>
                <select name="region" id="region">
                    <option value="{{ $cargo->region }}" selected>{{ \app\Models\Region::where("id", $cargo->region)->get()->first()->name }}</option>
                </select>
            </div>
            <div class="form-item mt-4" data-role="variants-container">
                <div class="flex items-center justify-between pb-3">
                    <label>Desi Bilgileri</label>
                    <button class="border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md" type="button" id="add-button">Ekle</button>
                </div>
                <div>
                    <ul class="variants-list" id="list-container">
                        @foreach($cargo->features as $key => $feature)
                            <li class="flex items-center gap-4">
                                <input type="text" class="!w-20 !h-10 text-center disabled:opacity-60 disabled:select-none" name="features[{{ $key }}][first]" value="{{ $feature->first ?? "0" }}">
                                <span class="whitespace-nowrap">ile</span>
                                <input type="number" class="!w-20 !h-10 text-center" name="features[{{ $key }}][last]" value="{{ $feature->last }}" >
                                <span class="whitespace-nowrap">desi arası</span>
                                <input type="text" class="w-full" name="features[{{ $key }}][fee]" id="fee" value="{{ $feature->fee }}">
                                <button class="border border-red-300 bg-red-50 hover:bg-red-200 text-red-600 transition duration-300 flex items-center justify-center rounded-md !w-10 !h-10 aspect-square disabled:opacity-60 !disabled:hover:bg-red-50" type="button" id="remove">
                                    <i class="icon-trash-02"></i>
                                </button>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </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>
@endsection
@section('scripts')
    <script>
        let addButton = document.querySelector('#add-button')
        let listContainer = document.querySelector('ul#list-container');

        $('select#region').select2({
            ajax: {
                url: "{{ site('api/v2/get-regions') }}",
                dataType: 'json'
            }
        })


        function uuid(){
            return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
            );
        }

        addButton.addEventListener('click', event => {
            let id = uuid();
            let li = document.createElement("li");
            li.className = "flex items-center gap-4";

            let input1 = document.createElement("input");
            input1.type = "number";
            input1.className = "!w-20 !h-10 text-center";
            input1.name = "features[" + id + "][first]";
            li.appendChild(input1);

            let span1 = document.createElement("span");
            span1.textContent = "ile";
            span1.className = 'whitespace-nowrap'
            li.appendChild(span1);

            let input2 = document.createElement("input");
            input2.type = "number";
            input2.className = "!w-20 !h-10 text-center";
            input2.name = "features[" + id + "][last]";
            li.appendChild(input2);

            let span2 = document.createElement("span");
            span2.textContent = "desi arası";
            span2.className = 'whitespace-nowrap'
            li.appendChild(span2);

            let input3 = document.createElement("input");
            input3.type = "text";
            input3.className = "w-full";
            input3.name = "features[" + id + "][fee]";
            input3.id = 'fee'
            li.appendChild(input3);

            let removeButton = document.createElement('button');
            removeButton.className = 'border border-red-300 bg-red-50 hover:bg-red-200 text-red-600 transition duration-300 flex items-center justify-center rounded-md !w-10 !h-10 aspect-square'
            removeButton.type = 'button'
            removeButton.id = 'remove'

            let icon = document.createElement('i');
            icon.className = 'icon-trash-02'
            removeButton.appendChild(icon)
            li.appendChild(removeButton)

            listContainer.appendChild(li);


            let remove = document.querySelectorAll('button[type=button]#remove')
            remove.forEach(element => {
                element.addEventListener('click', event => {
                    element.parentElement.remove();
                })
            })


            document.querySelectorAll('#fee').forEach(element => {
                new Cleave(element, {
                    numeral: !0,
                    numeralThousandsGroupStyle: "thousand",
                    delimiter: '.',
                    numeralDecimalMark: ','
                })
            })
        });
    </script>
@endsection