@extends('partial.master')
@section('page_title', '商品輪播設定')

@section('scripts')
    @php
        $list = [['name' => '限時搶購', 'key' => 'flash'], ['name' => '首購優惠', 'key' => 'first_buy'], ['name' => '熱銷商品', 'key' => 'popular'], ['name' => '精選品牌', 'key' => 'selected_brand'], ['name' => 'CLC嚴選', 'key' => 'clc_selected'], ['name' => '為您推薦', 'key' => 'just_for_you'], ['name' => '四國_TW', 'key' => 'cnt_tw'], ['name' => '四國_EN', 'key' => 'cnt_ph'], ['name' => '四國_ID', 'key' => 'cnt_id'], ['name' => '四國_VN', 'key' => 'cnt_vn']];
    @endphp
    <script src="{{ asset('js/jquery.repeater.js') }}"></script>

    <script type='text/javascript'>
        form_obj.module = 'Setting';
        form_obj.controller = 'SliderStockController';
        form_obj.route_name = '{{ basename(url()->current()) }}';
        const list_key = [
            'flash', //限時搶購
            'first_buy', //首購優惠
            'popular', //熱銷商品
            'selected_brand', //精選品牌
            'clc_selected', //CLC嚴選
            'just_for_you', //為您推薦
            'cnt_tw',
            'cnt_ph',
            'cnt_id',
            'cnt_vn',
        ];

        const validator = FormValidation.formValidation(
            document.getElementById('detail_fm'), {
                fields: {
                    'btn_reg_text_male': {
                        validators: {
                            stringLength: {
                                //utf8Bytes:true,
                                max: 10,
                                message: "{{ __('basic.Max') . __('basic.Length') }} : 10"
                            },
                            notEmpty: {
                                message: "{{ __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'btn_reg_text_female': {
                        validators: {
                            stringLength: {
                                //utf8Bytes:true,
                                max: 10,
                                message: "{{ __('basic.Max') . __('basic.Length') }} : 10"
                            },
                            notEmpty: {
                                message: "{{ __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'icoin_exchange_rate': {
                        validators: {
                            between: {
                                inclusive: true,
                                max: 1,
                                min: 0,
                                message: "數值需在0~1之間"
                            },
                            notEmpty: {
                                message: "{{ __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        );

        form_obj.detail.ajax.save = function() {
            // Validate form before submit
            if (validator) {
                validator.validate().then(function(status) {
                    if (status == 'Valid') {
                        page.loading.start();

                        var formData = new FormData($('#detail_fm')[0]);
                        formData.append('module', form_obj.module);
                        formData.append('controller', form_obj.controller);
                        formData.append('type', formData.get(form_obj.detail.type_id));
                        formData.append('id', formData.get(form_obj.detail.master_id));
                        formData.append('print_log', false);

                        $.ajax({
                            data: formData,
                            datatype: 'json',
                            contentType: false,
                            processData: false,
                            success: function(data, textStatus, jqXHR) {
                                // console.log(data);
                                if (isJson(data)) {

                                    let json = JSON.parse(data);
                                    if (json.status) {
                                        // Show popup confirmation
                                        Swal.fire({
                                            text: json.msg + "!",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "{{ __('basic.OK') }}",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then((function(t) {
                                            location.reload()
                                        }));
                                    } else {
                                        Swal.fire({
                                            html: json.msg.replaceAll("\r\n", "<BR>"),
                                            icon: "error",
                                            buttonsStyling: !1,
                                            confirmButtonText: "{{ __('basic.OK') }}",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then(function() {
                                            page.loading.stop();
                                        });
                                    }
                                }
                            },
                            error: ajaxError
                        });
                    }
                });
            }

        }

        form_obj.detail.ajax.get = function() {

            $.ajax({
                data: {
                    module: form_obj.module,
                    controller: form_obj.controller,
                    type: 'read',
                    where: {
                        id: $('#' + form_obj.detail.master_id).val(),
                    },
                    print_log: false,
                },
                success: function(data, textStatus, jqXHR) {
                    // console.log(data);
                    if (isJson(data)) {
                        var json = JSON.parse(data);
                        form_obj.detail.displayData(json['data']['list']);

                        $("#detail_modal").modal('show');
                    }
                },
                error: ajaxError
            });

        }

        form_obj.detail.displayData = function(data) {

            console.log(data);
            if (!empty(data)) {
                $.each(list_key, function(idx, v) {
                    let arrByID = data.filter(function(item) {
                        if (item.group_id == v) {
                            return true;
                        }
                        return false;
                    });
                    $.each(arrByID, function(idx2, v2) {
                        $('select[name="' + v + '[' + idx2 + '][stock_id]"]').val(v2['stock_id'])
                            .trigger('change');
                        if (idx2 < arrByID.length - 1) {

                            $('#btn_add_' + v).click();
                        }
                    });
                });
                // $.each(data, function(idx, v) {

                //     if (key != v['group_id']) {
                //         key = v['group_id'];
                //         sorting = 0;
                //     } else {
                //         $('#btn_add_' + key).click();
                //     }
                //     $('select[name="' + key + '[' + sorting + '][stock_id]"]').val(v['stock_id']).trigger(
                //         'change');
                //     sorting++;
                // });

            }
            // $('select').trigger('change.select2');


        }

        $(function() {
            form_obj.detail.ajax.get();


            // KTUtil.onDOMContentLoaded(function() {
            @foreach ($list as $item)

                $('#{{ $item['key'] }}').repeater({
                    initEmpty: false,
                    defaultValues: {
                        'text-input': 'foo'
                    },
                    show: function() {
                        $(this).slideDown();

                        // Re-init select2
                        $(this).find('[data-kt-repeater="select2"]').select2();
                    },
                    hide: function(deleteElement) {
                        $(this).slideUp(deleteElement);
                    },
                    ready: function(setIndexes) {
                        // Init select2
                        $('#{{ $item['key'] }}').find('[data-kt-repeater="select2"]')
                            .select2();
                    }
                });
            @endforeach

            const sortable = $(".sortable").sortable({
                update: function() {
                    @foreach ($list as $item)

                        $('#{{ $item['key'] }}_detail').repeater(
                            "setIndexes");
                    @endforeach
                    console.log($('#detail_fm').serializeArray());

                }
            });
            // });
        })
    </script>
@endsection

@section('kt_content_container')

    <form class="form" id="detail_fm" method="post" enctype="multipart/form-data">
        <input name="detail_type" type="hidden" value='create' />
        <input name="detail_master_id" type="hidden" value='i2csolution' />
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    @foreach ($list as $item)
                        <li class="nav-item">
                            <a class="nav-link @if ($loop->first) active @endif" data-bs-toggle="tab"
                                href="#{{ $item['key'] }}">{{ $item['name'] }}</a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body">
                <div class="tab-content" id="meta_tab">
                    @foreach ($list as $item)
                        <div class="tab-pane fade @if ($loop->first) show active @endif"
                            id="{{ $item['key'] }}" role="tabpanel">
                            <div class="fv-row row justify-content-center mb-7">
                                <div class='col-md-10'>
                                    <!--begin::Repeater-->
                                    <!--begin::Repeater-->
                                    <div id="{{ $item['key'] }}">
                                        <!--begin::Form group-->
                                        <div class="form-group">
                                            <div class="sortable" data-repeater-list="{{ $item['key'] }}">
                                                <div data-repeater-item>
                                                    <div class="form-group row bg-light-dark mb-5 rounded p-2">
                                                        <div class="col-md-10">
                                                            <select class="form-select form-select-solid fw-bolder"
                                                                name="stock_id" data-kt-repeater="select2"
                                                                data-placeholder="{{ __('basic.PleaseChoice') }}"
                                                                data-dropdown-parent="" data-allow-clear="true">
                                                                {!! app('FrontendService')->getOption($select['stock'], 'id', 'full_name', '', __('basic.PleaseChoice')) !!}
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <a class="btn btn-sm btn-light-danger del_partner_btn mt-1"
                                                                data-repeater-delete href="javascript:;">
                                                                <i class="la la-trash-o"></i>{{ __('basic.Delete') }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Form group-->

                                        <!--begin::Form group-->
                                        <div class="form-group mt-5">
                                            <a class="btn btn-light-primary add_{{ $item['key'] }}_btn"
                                                id="btn_add_{{ $item['key'] }}" data-repeater-create href="javascript:;">
                                                <i class="la la-plus"></i>新增商品
                                            </a>
                                        </div>
                                        <!--end::Form group-->
                                    </div>
                                    <!--end::Repeater-->
                                    <!--end::Repeater-->
                                </div>
                            </div>

                        </div>
                    @endforeach


                </div>

            </div>
            <div class='row justify-content-center'>
                <div class='col-12'>
                    <div class="py-15 text-center">
                        <button class="btn btn-primary me-3" id="modal_submit" data-kt-users-modal-action="submit"
                            type="submit">
                            <span class="indicator-label">{{ __('basic.Save') }}</span>
                            <span class="indicator-progress">{{ __('basic.PleaseWait') }}...
                                <span class="spinner-border spinner-border-sm ms-2 align-middle"></span></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>


    </form>
@endsection