@extends('admin.layout.master')
@section('title', 'PRODUCT SETTING')
@section('page')
    @endsection

@section('custom_style')
    <style>
        .custom_card {
            text-align: center;
        }
        .pro-sett-card-single li.list-group-item {
            display: flex;
            justify-content: start;
            padding: 5px 8px;
        }
        .pro-sett-card-single li.list-group-item>label {
            padding-right: 0.5rem;
        }
        .btn-sina-submit {
            color: var(--bs-white);
        }
    </style>
@endsection

@section('content')
    @php
        $req = request();
        $settingObj = $data ? $data->setting_object : null;
        $formObj = $data ? $data->form_object : null;
        // dd($formObj);
    @endphp

    <div class="card sina-card">
        <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
        <div class="card-header card-header-s d-flex1 flex-wrap1 align-items-center1">
            {{-- <h4 class="col-6 pl-0">Product Setting</h4> --}}
            <!-- setting obj Nav tabs -->
            <div class="row">
                <div class="col-xl-2 col-md-3 col-6">
                    <form action="{{ route('product-setting.index') }}" class="mb-0">
                        <select class="form-select select_2" onchange="this.form.submit()" id="setting" name="setting">
                            @foreach (productSettingTypes() as $productSettingType)
                                <option value="{{ $productSettingType['value']??'' }}" {{ $req->setting == $productSettingType['value'] ? 'selected' : '' }}>{{ $productSettingType['name']??'' }}</option>
                            @endforeach
                        </select>
                        {{-- <select class="form-select select_2" onchange="this.form.submit()" id="setting" name="setting">
                            <option value="1" {{ $req->setting == 1 ? 'selected' : '' }}>Product Setting</option>
                            <option value="2" {{ $req->setting == 2 ? 'selected' : '' }}>Customer Setting</option>
                            <option value="3" {{ $req->setting == 3 ? 'selected' : '' }}>Supplier Setting</option>
                            <option value="sell.create" {{ $req->setting == 'sell.create' ? 'selected' : '' }}>Sales Setting</option>
                            <option value="sell.return" {{ $req->setting == 'sell.return' ? 'selected' : '' }}>Sales Return</option>
                            <option value="purchase.create" {{ $req->setting == 'purchase.create' ? 'selected' : '' }}>Purchase Setting</option>
                            <option value="purchase.return" {{ $req->setting == 'purchase.return' ? 'selected' : '' }}>Purchase Return</option>
                            <option value="damage.create" {{ $req->setting == 'damage.create' ? 'selected' : '' }}>Damage Setting</option>
                            <option value="opening.create" {{ $req->setting == 'opening.create' ? 'selected' : '' }}>Opening Setting</option>
                            <option value="voucher.cash_payment_voucher" {{ $req->setting == 'voucher.cash_payment_voucher' ? 'selected' : '' }}>Cash Payment Voucher</option>
                            <option value="voucher.bank_payment_voucher" {{ $req->setting == 'voucher.bank_payment_voucher' ? 'selected' : '' }}>Bank Payment Voucher</option>
                            <option value="voucher.cash_receive_voucher" {{ $req->setting == 'voucher.cash_receive_voucher' ? 'selected' : '' }}>Cash Receive Voucher</option>
                            <option value="voucher.bank_receive_voucher" {{ $req->setting == 'voucher.bank_receive_voucher' ? 'selected' : '' }}>Bank Receive Voucher</option>
                            <option value="voucher.journal_voucher" {{ $req->setting == 'voucher.journal_voucher' ? 'selected' : '' }}>Journal Voucher</option>
                        </select> --}}
                    </form>
                </div>
                <div class="col-xl-8 col-md-7">
                    <h4 class="text-center">Product Setting</h4>
                </div>
                <div class="col-xl-2 col-md-3"></div>
            </div>
        </div>
        <div class="card-body">
            <!-- Tab panes -->
            <div class="">
                {{-- Product Setting Tab --}}
                <div id="" class="">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active"
                            data-toggle="tab"
                            id="product-setting-create-tab"
                            data-bs-toggle="pill"
                            data-bs-target="#product_create"
                            type="button" role="tab"
                            aria-controls="product_create"
                            aria-selected="true"
                            >
                                {{$title}} Create
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"
                                data-toggle="tab"
                                id="product-setting-list-tab"
                                data-bs-toggle="pill"
                                data-bs-target="#product_list"
                                type="button" role="tab"
                                aria-controls="product_list"
                                aria-selected="true"
                            >
                                {{$title}} List
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        {{-- Product create Setting Tab --}}
                        <div id="product_create" class="container tab-pane p-0 fade show active">
                            <h4 class="text-center py-2">{{$title}} {{__('obs.create')}} {{__('obs.setting')}}</h4>

                            <div class="row g-2" id="pro_setting_row">
                                <div class="col-xl-3 col-lg-4 col-6 @if($req->setting == 2) d-none @endif">
                                    <div class="card">
                                        <div class="card-header custom_card">
                                            {{__('obs.setting')}}
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item">
                                                <label class="text-nowrap mr-1">{{__('obs.multi')}} {{__('obs.color')}} :</label>

                                                <div class="form-check cl-form-check me-2">
                                                    <input class="form-check-input cl-form-check-input" id="multi_color_yes" onchange="gettingSettingInput()"
                                                    type="radio" name="multi_color" value="1" @isset($settingObj) {{ $settingObj->multi_color == 1 ? 'checked' : '' }} @endisset>

                                                    <label class="form-check-label cl-form-check-label" for="multi_color_yes">
                                                       {{__('obs.yes')}}
                                                    </label>
                                                </div>

                                                <div class="form-check cl-form-check me-2">
                                                    <input class="form-check-input cl-form-check-input" id="multi_color_no" onchange="gettingSettingInput()"
                                                    type="radio" name="multi_color" value="" @if(isset($settingObj)) {{ $settingObj->multi_color != 1 ? 'checked' : '' }} @else checked @endisset>

                                                    <label class="form-check-label cl-form-check-label" for="multi_color_no">
                                                        {{__('obs.no')}}
                                                    </label>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <label class="text-nowrap mr-1">Multi Size:</label>
                                                <div class="form-check cl-form-check me-2">
                                                    <input class="form-check-input cl-form-check-input multi_size" id="multi_size_yes" onchange="gettingSettingInput()" type="radio"
                                                        name="multi_size" value='1' @isset($settingObj) {{ $settingObj->multi_size == 1 ? 'checked' : '' }} @endisset />

                                                    <label class="form-check-label mr-2" for="multi_size_yes">
                                                        {{__('obs.yes')}}
                                                    </label>
                                                </div>
                                                <div class="form-check cl-form-check me-2">
                                                    <input class="form-check-input cl-form-check-input multi_size" id="multi_size_no" onchange="gettingSettingInput()" type="radio"
                                                        name="multi_size" value="" @if(isset($settingObj)) {{ $settingObj->multi_size != 1 ? 'checked' : '' }} @else checked @endisset>

                                                    <label class="form-check-label"  for="multi_size_no">
                                                        {{__('obs.no')}}
                                                    </label>
                                                </div>
                                            </li>

                                            <li class="list-group-item">
                                                <label class="text-nowrap mr-1">Dual Unit:</label>
                                                <div class="form-check cl-form-check">
                                                    <input class="form-check-input cl-form-check-input dual_unit" id="dual_unit_yes" onchange="gettingSettingInput()" type="radio"
                                                        name="dual_unit" value="1" @isset($settingObj) {{ $settingObj->dual_unit == 1 ? 'checked' : '' }} @endisset />

                                                    <label class="form-check-label mr-2" for="dual_unit_yes">
                                                        {{__('obs.yes')}}
                                                    </label>
                                                </div>
                                                <div class="form-check cl-form-check">
                                                    <input class="form-check-input cl-form-check-input dual_unit" id="dual_unit_no" onchange="gettingSettingInput()" type="radio"
                                                    name="dual_unit" value="" @if(isset($settingObj)) {{ $settingObj->dual_unit != 1 ? 'checked' : '' }} @else checked @endif />

                                                    <label class="form-check-label" for="dual_unit_no">
                                                         {{__('obs.no')}}
                                                    </label>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <label class="text-nowrap mr-1">Clear Form After New Create:</label>
                                                <div class="form-check cl-form-check">
                                                    <input class="form-check-input cl-form-check-input clear_form_after_posting" id="clear_form_after_posting_yes"
                                                        onchange="gettingSettingInput()" type="radio" name="clear_form_after_posting" value="1"
                                                        @isset($settingObj) {{ $settingObj->clear_form_after_posting == 1 ? 'checked' : '' }} @endisset />

                                                    <label class="form-check-label mr-2" for="clear_form_after_posting_yes"> {{__('obs.yes')}}</label>
                                                </div>
                                                <div class="form-check cl-form-check">
                                                    <input class="form-check-input cl-form-check-input clear_form_after_posting" id="clear_form_after_posting_no"
                                                        onchange="gettingSettingInput()" type="radio" name="clear_form_after_posting" value=""
                                                        @if(isset($settingObj)) {{ $settingObj->clear_form_after_posting != 1 ? 'checked' : '' }} @else checked @endisset />

                                                    <label class="form-check-label" for="clear_form_after_posting_no"> {{__('obs.no')}}</label>
                                                </div>
                                            </li>
                                        </ul>

                                        <input type="hidden" id="db_id" value="{{ $data ? $data->id : '' }}" name="db_id" />
                                    </div>
                                </div>

                                <button type="button" class="btn-sina-submit" onclick="submitForm()"
                                    style="position: fixed;bottom:15%;right:2px;z-index: 1;">
                                    Submit
                                </button>
                            </div>
                        </div>

                        {{-- Product List Setting Tab --}}
                        <div id="product_list" class="container tab-pane fade">
                            <h4 class="text-center py-2">{{$title}} List Setting</h4>
                            <div class="row">
                                <div class="col-8 table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr id="pro_list_sett_th">
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="col-4">
                                    <table class="table ">
                                        <thead>
                                            <tr>
                                                <th colspan="2">{{__('obs.title')}}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="pro_list_sett_obj_list">
                                            {{-- this list load from js --}}
                                        </tbody>
                                    </table>
                                    {{-- <ul class="list-group" id="pro_list_sett_obj_list">
                                    </ul> --}}
                                </div>
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn-sina-submit" onclick="plSubmitForm()"
                                    style="position: fixed;bottom:15%;right:2px;">
                                    {{__('obs.submit')}}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('.select_2').select2();
        let formObjectArray = [];
        const formObject = {
            id: 1,
            form_label: '',
            form_required: '',
            form_hide: '',
            form_highlight: '',
            form_name: '',
            form_sorting: 0,
            form_width: '',
        }
        const targetDiv = $('#pro_setting_row');

        function formObjSkull(el, key = null) {
            console.log(el, key);
            return (`<div class="col-xl-3 col-md-4 col-6 pro-sett-card-single">
                <div class="card">
                    <div class="card-header custom_card">
                        <div class="d-flex align-items-center">
                            <input type="text" id="form_label" name="form_label" class="form-control"
                                placeholder="Heading Label" onchange="setFormObj(event.target, ${key})" value="${el.form_label ?? ''}">
                            ${key == 0
                                ? `<button type="button" class="btn cl-btn-primary btn-sm ms-1"
                                    onclick="addFormObj(formObject)">+</button>`
                                : ''
                            }
                        </div>
                    </div>
                    <ul id="formObj" class="list-group list-group-flush">
                        <li class="list-group-item">
                            <label>{{__('obs.required')}} : </label>
                            <div class="form-check cl-form-check">
                                <label class="form-check-label cl-form-check-label mr-2">
                                    <input class="form-check-input cl-form-check-input form_required" id="form_required" value="1"
                                    type="radio" name="form_required_${key}" onchange="setFormObj(event.target, ${key})" ${(el.form_required == 'd-none') ? 'checked' : ''} />
                                        {{__('obs.yes')}}
                                </label>
                            </div>
                            <div class="form-check cl-form-check ms-2">
                                <label class="form-check-label cl-form-check-label">
                                    <input class="form-check-input cl-form-check-input form_required" id="form_required" value="0"
                                    type="radio" name="form_required_${key}" onchange="setFormObj(event.target, ${key})" ${el.form_required != 'd-none' ? 'checked' : ''} />
                                        {{__('obs.no')}}
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <label> {{__('obs.hide')}} :</label>
                            <div class="form-check form-check-inline">
                                <label class="form-check-label">
                                    <input class="form-check-input cl-form-check-input" type="radio" id="form_hide" value="1"
                                    name="form_hide_${key}" ${el.form_hide == 'd-none' ? 'checked' : ''} onchange="setFormObj(event.target, ${key})" />
                                        {{__('obs.yes')}}
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <label class="form-check-label">
                                    <input class="form-check-input cl-form-check-input" type="radio" id="form_hide" value="0"
                                    name="form_hide_${key}" ${el.form_hide != 'd-none' ? 'checked' : ''} onchange="setFormObj(event.target, ${key})" />
                                        {{__('obs.no')}}
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item flex-wrap">
                            <div class="d-flex align-items-center w-100">
                                <label class="me-2">{{__('obs.highlight')}}:</label>
                                <input type="text" name="form_highlight" id="form_highlight"
                                    class="form-control flex-grow-1 mb-0" value="${el.form_highlight ?? ''}" onchange="setFormObj(event.target, ${key})" />
                            </div>
                            <div class="form_name_error text-danger fw-bold"></div>
                        </li>
                        <li class="list-group-item flex-wrap">
                            <div class="d-flex align-items-center w-100">
                                <label class="me-2">{{__('obs.name')}}:</label>
                                <input type="text" name="form_name" id="form_name"
                                    class="form-control flex-grow-1 mb-0" value="${el.form_name ?? ''}" onchange="setFormObj(event.target, ${key})" />
                            </div>

                            <div class="form_name_error text-danger fw-bold"></div>
                        </li>
                        <li class="list-group-item">
                            <label> {{__('obs.sorting')}}:</label>
                            <input type="number" name="form_sorting" id="form_sorting"
                                class="form-control" value="${el.form_sorting ?? ''}" onchange="setFormObj(event.target, ${key})" />
                        </li>
                        <li class="list-group-item">
                            <label>{{__('obs.width')}}:</label>
                            <input type="text" name="form_width" id="form_width"
                                class="form-control" value="${el.form_width ?? ''}" onchange="setFormObj(event.target, ${key})" />
                        </li>
                    </ul>
                </div>
            </div>`);
        }

        function loadFormObject() {
            formObjectArray.forEach((el, key) => {
                const formHTML = formObjSkull(el, key);
                targetDiv.append(formHTML);
            })
        }

        function validate() {
            let validated = true;
            console.log(formObjectArray);
            formObjectArray.forEach((el, key) => {
                if (el.form_name == null || el.form_name == '') {
                    $('.form_name_error')[key].innerHTML = 'This field is required';
                    validated = false;
                } else {
                    $('.form_name_error')[key].innerHTML = '';
                }
            })
            return validated;
        }

        function addFormObj(el) {
            const num = formObjectArray.length;
            const newObj = {...formObject, id: num+1};

            formObjectArray.push(newObj);
            const formHTML = formObjSkull(newObj, num);
            targetDiv.append(formHTML);
            console.log(formObjectArray);
        }

        function setFormObj(target, key) {
            const { value,name,id,type,checked } = target;

            const isRadio = (type == 'radio');
            formObjectArray[key][isRadio ? id : name] =  value;

            if (isRadio) {
                if (id === 'form_highlight') {
                    formObjectArray[key][id] = (value == 1);
                } else {
                    formObjectArray[key][id] = (value == 1) ? 'd-none' : 'd-block';
                }
            }
            console.log(formObjectArray);
        }

        $(document).ready(function() {
            const formData = @json(@$data->form_object);
            console.log(formData);
            formObjectArray = formData ? formData : [formObject];
            loadFormObject();
        })
    </script>


    <script>
        let formObj = {};
        let listObj = {};
        let SettingObj = {
            'multi_color': '',
            'multi_size': '',
            'dual_unit': '',
            'clear_form_after_posting': ''
        };

        $(document).ready(function() {
            gettingSettingInput()
            // loadData();
            listLoad();
        });
        var staticForm = '';

        function loadData() {
            if (typeof @json($data) !== 'undefined' || $data !== '') {
                formObj = JSON.parse(@json($data).form_object);
                listObj = JSON.parse(@json($data).list_object);
                // console.log(listObj, "listObj");
                // SettingObj = JSON.parse(@json($data).setting_object);

                Object.keys(formObj).map((key) => {
                    // console.log(formObj[key].name);
                    staticForm += `<div class="col-md-3 col-sm-6 px-1 pro-sett-card-single">
                        <div class="card">
                            <div class="card-header custom_card">
                                <input type="text" onchange="gettingInput('${key}')" id='label_name_${key}' name="label_name_${key}" value="${key}" data-key="${key}" data-value="label_name" class="form-control" placeholder="Heading Label" />
                            </div>
                            <div class="">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <label>{{__('obs.required')}}:</label>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label mr-2">
                                                <input class="form-check-input cl-form-check-input required-${key}"
                                                    onchange='gettingInput('${key}')' type="radio"
                                                    name="required_${key}"
                                                    value="required" ${formObj[key].is_required == 'required' ? 'checked' : null }
                                                    data-key="${key}" data-value="required"
                                                />
                                                {{__('obs.yes')}}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input cl-form-check-input required-${key}"
                                                    type="radio"
                                                    name="required_${key}"
                                                    value="" ${formObj[key].is_required == '' ? 'checked' : null }
                                                    data-key="${key}" data-value="required"
                                                />
                                               {{__('obs.no')}}
                                            </label>
                                        </div>
                                    </li>

                                    <li class="list-group-item">
                                        <label>Hide:</label>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label mr-2">
                                                <input class="form-check-input cl-form-check-input hide-${key}"
                                                    onchange="gettingInput('${key}')" type="radio"
                                                    name="hide_${key}" value='display:none'  ${formObj[key].hide == 'display:none' ? 'checked' : null }
                                                    data-key="${key}" data-value="hide"
                                                >
                                                {{__('obs.yes')}}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input cl-form-check-input hide-${key}"
                                                    onchange="gettingInput('${key}')" type="radio"
                                                    name="hide_${key}" value="" ${formObj[key].hide == '' ? 'checked' : null }
                                                    data-key="${key}" data-value="hide"
                                                    >
                                                {{__('obs.no')}}
                                            </label>
                                        </div>
                                    </li>

                                    <li class="list-group-item">
                                        <label>{{__('obs.highlight')}}:</label>
                                        <input type="text" name="highlight_${key}" value="${formObj[key].highlight}"
                                            onkeyup="gettingInput('${key}')" id="highlight-${key}"
                                            class="form-control" data-key="${key}" data-value="highlight"/>
                                    </li>

                                    <li class="list-group-item">
                                        <label>{{__('obs.name')}}:</label>
                                        <input type="text" name="name_${key}" value="${formObj[key].name}"
                                            onkeyup="gettingInput('${key}')" id="name-${key}"
                                            class="form-control" data-key="${key}" data-value="name"/>
                                    </li>

                                    <li class="list-group-item">
                                        <label>{{__('obs.sorting')}}:</label>
                                        <input type="number" name="sorting_${key}" value="${formObj[key].sorting}"
                                            onkeyup="gettingInput('${key}')" id="sorting-${key}"
                                            class="form-control" data-key="${key}" data-value="sorting"/>
                                    </li>

                                    <li class="list-group-item">
                                        <label>{{__('obs.width')}}:</label>
                                        <input type="text" name="width_${key}" value="${formObj[key].width}"
                                            onkeyup="gettingInput('${key}')" id="width-${key}"
                                            class="form-control" data-key="${key}" data-value="width"/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>`;
                });

                $('#pro_setting_row').append(staticForm);
            }
        }
        // Note: For add to form ...
        function objAddToForm() {
            var obj_label = $('#label-name-0').val();
            var required = $(`input[name=required_0].required-0:checked`).val();
            var hide = $(`input[name=hide_0].hide-0:checked`).val();
            var name = $('#name-0').val();
            var sorting = $('#sorting-0').val();
            var width = $('#width-0').val();
            // console.log('objAddToForm:', obj_label + '<br/>' + required + '<br/>' + hide + '<br/>' + name + '<br/>' + sorting + '<br/>' + width);
            if (obj_label == '') {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'center',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                });

                Toast.fire({
                    icon: 'error',
                    title: 'Heading Label name is required!'
                });
            } else {
                addCardToForm = `<div class="col-md-3 col-sm-6 px-1 pro-sett-card-single">
                        <div class="card">
                            <div class="card-header custom_card">
                                <input type="text"
                                onchange="gettingInput('${obj_label}')" id='label_name_${obj_label}' name="label_name_${obj_label}" value="${obj_label}" data-key="${obj_label}" data-value="label_name" class="form-control" placeholder="Heading Label" />
                            </div>
                            <div class="">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <label>Required:</label>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label mr-2">
                                                <input class="form-check-input cl-form-check-input required-${obj_label}"
                                                    onchange='gettingInput('${obj_label}')' type="radio"
                                                    name="required_${obj_label}"
                                                    value="required" ${required == 'required' ? 'checked' : null }
                                                    data-key="${obj_label}" data-value="required"
                                                />
                                                {{__('obs.yes')}}
                                            </label>
                                            <label class="form-check-label">
                                                <input class="form-check-input cl-form-check-input required-${obj_label}"
                                                     type="radio"
                                                    name="required_${obj_label}"
                                                    value="" ${required == '' ? 'checked' : null }
                                                    data-key="${obj_label}" data-value="required"
                                                />
                                                {{__('obs.no')}}
                                            </label>
                                        </div>
                                    </li>

                                    <li class="list-group-item">
                                        <label>Hide:</label>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label">
                                                <input class="form-check-input cl-form-check-input hide-${obj_label}"
                                                    onchange="gettingInput('${obj_label}')" type="radio"
                                                    name="hide_${obj_label}" value='display:none'  ${hide == 'display:none' ? 'checked' : null }
                                                    data-key="${obj_label}" data-value="hide"
                                                >
                                                // {{__('obs.yes')}}
                                            </label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label">
                                                <input class="form-check-input cl-form-check-input hide-${obj_label}"
                                                    onchange="gettingInput('${obj_label}')" type="radio"
                                                    name="hide_${obj_label}" value="" ${hide == '' ? 'checked' : null }
                                                    data-key="${obj_label}" data-value="hide"
                                                    >
                                                {{__('obs.no')}}
                                            </label>
                                        </div>
                                    </li>

                                    <li class="list-group-item">
                                        <label>{{__('obs.highlight')}}:</label>
                                        <input type="text" name="highlight_${obj_label}" value="${highlight}"
                                            onkeyup="gettingInput('${obj_label}')" id="highlight-${obj_label}"
                                            class="form-control" data-key="${obj_label}" data-value="highlight"/>
                                    </li>

                                    <li class="list-group-item">
                                        <label>{{__('obs.name')}}:</label>
                                        <input type="text" name="name_${obj_label}" value="${name}"
                                            onkeyup="gettingInput('${obj_label}')" id="name-${obj_label}"
                                            class="form-control" data-key="${obj_label}" data-value="name"/>
                                    </li>

                                    <li class="list-group-item">
                                        <label>{{__('obs.sorting')}}:</label>
                                        <input type="number" name="sorting_${obj_label}" value="${sorting}"
                                            onkeyup="gettingInput('${obj_label}')" id="sorting-${obj_label}"
                                            class="form-control" data-key="${obj_label}" data-value="sorting"/>
                                    </li>

                                    <li class="list-group-item">
                                        <label>{{__('obs.width')}}:</label>
                                        <input type="text" name="width_${obj_label}" value="${width}"
                                            onkeyup="gettingInput('${obj_label}')" id="width-${obj_label}"
                                            class="form-control" data-key="${obj_label}" data-value="width"/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>`;
                $(addCardToForm).insertAfter('#pro_setting_row .blank-obj-card');

                formObj[obj_label] = {
                    'label': $(`input[name=required_${obj_label}].required-${obj_label}:checked`).val(),
                    'is_required': $(`input[name=required_${obj_label}].required-${obj_label}:checked`).val(),
                    'hide': $(`input[name=hide_${obj_label}].hide-${obj_label}:checked`).val(),
                    'highlight': $(`input[name=highlight_${obj_label}].highlight-${obj_label}:checked`).val(),
                    'name': $('#name-' + obj_label).val(),
                    'sorting': $('#sorting-' + obj_label).val(),
                    'width': $('#width-' + obj_label).val(),
                }

                $('#label-name-0').val('');
                $(`input[name=required_0]`).prop('checked', false);
                $(`input[name=hide_0]`).prop('checked', false);
                $(`input[name=highlight_0]`).prop('checked', false);
                $('#name-0').val('');
                $('#sorting-0').val('');
                $('#width-0').val('');
            }
            // console.log(formObj, "preapend==");
        }
        // Note: For form object ...
        function gettingInput(title) {
            if (formObj[title]) {
                // formObj[title] = $(`#label_name_${title}`).attr('data-key'),
                formObj[title].is_required = $(`input[name=required_${title}].required-${title}:checked`).val(),
                formObj[title].hide = $(`input[name=hide_${title}].hide-${title}:checked`).val(),
                formObj[title].highlight = $(`input[name=highlight_${title}].highlight-${title}:checked`).val();
                formObj[title].name = $('#name-' + title).val(),
                formObj[title].sorting = $('#sorting-' + title).val(),
                formObj[title].width = $('#width-' + title).val()
            } else {
                formObj[title] = {
                    'is_required': $(`input[name=required_${title}].required-${title}:checked`).val(),
                    'hide': $(`input[name=hide_${title}].hide-${title}:checked`).val(),
                    'highlight': $(`input[name=highlight_${title}].highlight-${title}:checked`).val(),
                    'name': $('#name-' + title).val(),
                    'sorting': $('#sorting-' + title).val(),
                    'width': $('#width-' + title).val(),
                }
            }
        }


        // Note: For setting object ...
        function gettingSettingInput() {
            SettingObj.multi_color = $('#multi_color_yes').is(':checked')?1:null;
            SettingObj.multi_size = $('#multi_size_yes').is(':checked')?1:null;
            SettingObj.dual_unit = $('#dual_unit_yes').is(':checked')?1:null;
            SettingObj.clear_form_after_posting = $('#clear_form_after_posting_yes').is(':checked')?1:null;
        }

        function submitForm() {
            const isValidated = validate();
            if (!isValidated) return;

            ajaxCallV2('/product-setting/update', 'POST', {
                id: $('#db_id').val(),
                setting : $('#setting').val(),
                form_object: formObjectArray,
                setting_object: SettingObj,
            }, (data) => {
                successMessage(data.message);
                window.location.reload(3000);
                // $('.pro-sett-card-single').hide();
                // loadData();
            });
        }

        function successMessage(message) {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            })

            Toast.fire({
                icon: 'success',
                title: message
            })
        }
        let rawData = [];

        function listLoad() {
            if (typeof @json($data) !== 'undefined' || $data !== '') {
                formObj = @json($data).form_object;
                let listObj = @json($list_object);
                console.log('list-Obj', listObj);
                objList = '';
                sorting = 1;
                // for (let index = 0; index < list_object.length; index++) {
                //     const element = array[index];

                // }
                var usedKeys = [];
                for (let index = 0; index < listObj.length; index++) {
                    let key=listObj[index].key;

                    usedKeys.push(key);
                    objList += `
                        <tr draggable='true' ondragstart='start()' ondragover='dragover()' ondragend='dragend()' class="w-100">
                            <td class="p-0 fa-2x" style="vertical-align:middle;line-height: 30px;">
                                &equiv;
                            </td>
                            <td class="p-0 d-flex justify-content-between align-items-center w-100"  draggable="false">
                                <input draggable="false" type="checkbox" checked onclick="gettingListObj()" data-field="${key}" class="pro_sett_obj" value="${key}" sorting-val="${sorting}" >
                                <input draggable="false" type="text" id="${key}_title" class="form-control ml-1"  placeholder="name" value="${key}" list-obj-key="${key}">
                            </td>
                        </tr>
                    `;
                    sorting++;
                }
                Object.keys(formObj).map((key) => {
                    if(!usedKeys.includes(key)){
                        objList += `
                            <tr draggable='true' ondragstart='start()' ondragover='dragover()' ondragend='dragend()' class="w-100">
                                <td class="p-0 fa-2x" style="vertical-align:middle;line-height: 30px;">
                                    &equiv;
                                </td>
                                <td class="p-0 d-flex justify-content-between align-items-center w-100"  draggable="false">
                                    <input draggable="false" type="checkbox" onclick="gettingListObj()" data-field="${key}" class="pro_sett_obj" value="${key}" sorting-val="${sorting}" >
                                    <input draggable="false" type="text" id="${key}_title" class="form-control ml-1"  placeholder="name" value="${key}" list-obj-key="${key}">
                                </td>
                            </tr>
                        `;
                        sorting++;
                    }
                });
                $('#pro_list_sett_obj_list').html(objList);
                gettingListObj();
            }
        }
        function gettingListObj() {
            let sort = 1;
            // let theadValues = '';
            rawData = [];
            $('.pro_sett_obj').each(function() {
                if ($(this).prop("checked") == true) {
                    let k = $(this).attr('data-field');
                    let title = $('#' + k + '_title').val();
                    let data_pass = {
                        'key': k,
                        'title': title,
                        'sort_index': sort++
                    }
                    rawData.push(data_pass);
                }
            });
            console.log(rawData);
            tableAppend();
        }

        function plSubmitForm() {
            console.log(JSON.stringify(rawData));
            return;
            ajaxCall('/product-setting/plUpdate/', 'POST', {
                id: $('#db_id').val(),
                list_object: JSON.stringify(rawData),
            }, (data) => {
                $('#db_id').val(data.id),
                    successMessage(data.message);
                window.location.reload(3000);
                // $('.pro-sett-card-single').hide();
                // loadData();
            }, (errors) => {

            });
        }
        function tableAppend(th) {
            let thAppend = '';
            for (let index = 0; index < rawData.length; index++) {
                thAppend += `<th class="text-center">${rawData[index].title}</th>`;
            }
            $('#pro_list_sett_th').html(thAppend);

        }

        // $(function() {
        //     $( ".list-single").draggable({
        //     });
        // });

        var row;
        const start=()=>{
            row = event.target;
        }
        const dragend=()=>{
            gettingListObj();
        }
        const dragover=()=>{
            var e = event;
            e.preventDefault();
            etp=e.target.parentNode;
            // console.log(etp);
            let children= Array.from(etp.parentNode.children);
            if(children.indexOf(etp)>children.indexOf(row)){
                etp.after(row);
            }else{
                etp.before(row);
            }
        }
    </script>
@endsection