@extends('partial.master')
@section('page_title','資料選單維護')

@section('scripts')
{{-- <script src="{{ asset('js/custom/apps/user-management/users/list/table.js') }}"></script> --}}
{{-- <script src="{{ asset('js/custom/apps/user-management/users/list/add.js') }}"></script> --}}
<script type='text/javascript'>

    form_obj.module     = 'Member';
    form_obj.controller = 'DropdownMenuController';
    form_obj.detail.controller = 'DropdownMenuDetailController';
    form_obj.route_name = '{{ basename(url()->current()) }}';

    // 驗證
    const validator = FormValidation.formValidation(
        document.getElementById('detail_fm'),
        {
            fields: {
                'name': {
                    validators: {
                        notEmpty: {
                            message: "{{ __('basic.Name').__('basic.CanNotEmpty') }}"
                        }
                    }
                },
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap: new FormValidation.plugins.Bootstrap5({
                    rowSelector: '.fv-row',
                    eleInvalidClass: '',
                    eleValidClass: ''
                })
            }
        }
    );

    function getlangValidator(idx)
    {
        return {
            validators: {
                notEmpty: {
                    message: '{{ __('basic.No2') }} '+ (idx+1) +' {{ __('basic.Row').' '.$select['langKey'][config('app.locale')]['name'].__('basic.CanNotEmpty') }}',
                },
            },
        }
    }

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

                    // Show loading indication
                    $('.modal button[type=submit]').attr('data-kt-indicator', 'on');
                    // Disable button to avoid multiple click
                    $('.modal button[type=submit]').prop('disabled', true);

                    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)) {
                                // Remove loading indication
                                $('.modal button[type=submit]').removeAttr('data-kt-indicator');
                                // Enable button
                                $('.modal button[type=submit]').prop('disabled', false);

                                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('.modal-content');
                                        $('.modal button[type=submit]').attr('data-kt-indicator', 'off');
                                        $('.modal button[type=submit]').prop('disabled', false);
                                    });
                                }
                            }
                        },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'][0]);

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

    }

    form_obj.detail.displayData = function(data) {
        // console.log(data);
        validator.resetForm(true);

        var detailData = data['detail'];
        $('#detail_master_id').val(data['id']);

        $('input,textarea,select').each(function() {
            if(this.id in data) {
                if(empty(data[this.id])) return;

                this.value = data[this.id];
                if(this.multiple) {
                    if(!empty(data[this.id]))
                    {
                        $(this).val(data[this.id].split(','));
                    }
                }
                if(this.type=='radio'){
                    if(this.value==data[this.id]){
                        this.checked=true;
                    }
                }
            }
        });

        if(data['is_multiple']==1)
        {
            $('#is_multiple_1').prop('checked',true);
            $('#is_multiple_1').parent().addClass('active');
            $('#is_multiple_0').parent().removeClass('active');
        }
        else
        {
            $('#is_multiple_0').prop('checked',true);
            $('#is_multiple_1').parent().removeClass('active');
            $('#is_multiple_0').parent().addClass('active');
        }


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


        // repeater
        
        $('div[data-repeater-item]').each(function(i,o) {
            if(i==0)return;            
            $(o).remove();
        })


        if(detailData.length<1){
            page.loading.stop('.modal-content');
            return;
        }

        {{-- var langArr = JSON.parse('{!! json_encode($select['lang']) !!}'); --}}

        for(var i in detailData)
        {
            var detailRow = detailData[i];
            var langData = detailRow['value'];

            for(var l in langData)
            {
                var langId = langData[l]['lang_id'];
                $('.detail_lang_'+langId)[i].value = langData[l]['description'];
            }

            $('.detail_id')[i].value = detailRow['id'];
            $('.detail_sorting')[i].value = detailRow['sorting'];

            if(i<detailData.length-1)$('.add_row_btn').click();
        }

        page.loading.stop('.modal-content');
    }

    form_obj.detail.ajax.delete = function(id) {
        page.loading.start();
        $.ajax({
            data: {
                module: form_obj.module,
                controller: form_obj.controller,
                type: 'delete',
                where: {
                    id: id,
                },
                print_log: false,
            },
            success: function(data,textStatus,jqXHR) {
                // console.log(data);
                if(isJson(data)) {
                    var json = JSON.parse(data);
                    if(json.status) {
                        Swal.fire({
                            text: json.msg + "!",
                            icon: "success",
                            buttonsStyling: !1,
                            confirmButtonText: "{{ __('basic.OK') }}",
                            customClass: {
                                confirmButton: "btn fw-bold btn-primary"
                            }
                        }).then((function() {
                            location.reload()
                        }))
                    } else {
                        page.loading.stop();
                        Swal.fire({
                            text: json.msg + "!",
                            icon: "error",
                            buttonsStyling: !1,
                            confirmButtonText: "{{ __('basic.OK') }}",
                            customClass: {
                                confirmButton: "btn fw-bold btn-primary"
                            }
                        })
                    }
                }
            },
            error:ajaxError
        });
    }

    $(function() {
        KTUtil.onDOMContentLoaded(function () {
            // 搜尋選單
            $('.search').on('input',function(){
                var oo = this;
                if(oo.value.trim()==''){
                    $('.detail-card-col').show('fast');
                    return;
                }
                var searchText = oo.value;
                $('.detail-card-col').each(function(i,o){
                    if(
                        $(o).find('.dropdown-menu-name').text().indexOf(searchText)>-1 ||
                        $(o).find('.dropdown-menu-desc').text().indexOf(searchText)>-1
                    )
                    {
                        $(o).show('fast');
                    }
                    else
                    {
                        $(o).hide('fast');
                    }
                });
                
            });


            var dt1 = new DataTableCls('#data_table_detail');
            var dt1Param = dt1.defaultParam();


            //修改選單
            $('.edit-btn').click(function(){
                page.loading.start('.modal-content');
                $('.modal_type').text('{{ __('basic.Edit') }}');

                var data = $('.detail_data_'+$(this).data('id')).val();
                if(isJson(data))data = JSON.parse(data);
                form_obj.detail.displayData(data);
                $('#'+form_obj.detail.type_id).val('update');


                $("#detail_modal").modal('show');
            });

            //刪除選單
            $('.delete-btn').click(function(){
                var dataId = $(this).data('id');
                Swal.fire({
                    text: "{{__('basic.AreYouSureYouWantToDelete')}}"+"?",
                    icon: "warning",
                    showCancelButton: !0,
                    buttonsStyling: !1,
                    confirmButtonText: "{{__('basic.Sure')}}",
                    cancelButtonText: "{{__('basic.Cancel')}}",
                    customClass: {
                        confirmButton: "btn fw-bold btn-danger",
                        cancelButton: "btn fw-bold btn-active-light-primary"
                    }
                }).then((function(result) {
                    if(result.value) form_obj.detail.ajax.delete(dataId);
                }));
            })


            $('#menu_detail').repeater({
                initEmpty: false,

                defaultValues: {
                },

                show: function () {
                    $(this).slideDown();
                    // $('#detail_modal #detail_modal_scroll').animate({ scrollTop: $('#detail_modal #detail_modal_scroll').height() }, 200);

                    $('#detail_modal .item_index').each(function (i,o){
                        $(o).text(i+1);
                    });

                    var len = $('#detail_modal .detail_sorting').length;

                    s = 0;
                    if(len>1)
                    {
                        if(isNaN(parseInt($('#detail_modal .detail_sorting')[len-2].value)))
                        {
                            $('#detail_modal .detail_sorting')[len-2].value = 5;
                            s = 5;
                        }
                        else
                        {
                            s = parseInt($('#detail_modal .detail_sorting')[len-2].value);
                        }
                    }
                    
                    $('#detail_modal .detail_sorting')[len-1].value = s+5;

                    //動態欄位的監聽
                    validator.addField('menu_detail['+(len-1)+'][lang-{{ config('app.locale') }}]',getlangValidator(len-1));

                    $($('.detail_delete_row_btn')[len-1]).click(function(e){
                        var idx = $('.detail_delete_row_btn').index(this);
                        validator.removeField('menu_detail['+(idx)+'][lang-{{ config('app.locale') }}]');
                    });
                },

                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                    // console.log(deleteElement);
                    // valid
                    setTimeout(function(){
                        $('#detail_modal .item_index').each(function (i,o){
                            $(o).text(i+1);
                        });
                    },500);



                }
            });


            //動態欄位的監聽
            validator.addField('menu_detail[0][lang-{{ config('app.locale') }}]',getlangValidator(0));

            $('.detail_delete_row_btn').click(function(e){
                var idx = $('.detail_delete_row_btn').index(this);
                validator.removeField('menu_detail['+(idx)+'][lang-{{ config('app.locale') }}]');
            });
        });
    });
    
</script>
@endsection

@section('kt_content_container')

{{-- begin::Row --}}
<div class="row row-cols-2 mb-5">
    <div class="col-10">
        {{-- begin::Search --}}
        <div class="d-flex align-items-center position-relative my-1">
            {{-- begin::Svg Icon | path: icons/duotune/general/gen021.svg --}}
            <span class="svg-icon svg-icon-1 position-absolute ms-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                    <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
                </svg>
            </span>
            {{-- end::Svg Icon --}}
            <input type="search" class="form-control w-300px ps-14 search" placeholder="搜尋" />
        </div>
        {{-- end::Search --}}
    </div>
    <div class='col-2 d-flex justify-content-end'>
        <button type="button" class="btn btn-primary" id="add_btn" {{--data-bs-toggle="modal" data-bs-target="#detail_modal"--}}>
            {{-- begin::Svg Icon | path: icons/duotune/arrows/arr075.svg --}}
            <span class="svg-icon svg-icon-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="black" />
                    <rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="black" />
                </svg>
            </span>
            {{-- end::Svg Icon --}}
            新增
        </button>
    </div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-5 g-xl-9">
    @if(count($data['list'])>0)
    @foreach($data['list'] as $key=>$row)
        {{-- begin::Col --}}
        <div class="col-md-4 detail-card-col ">
            {{-- begin::Card --}}
            <div class="card card-flush h-md-100 detail-card">
                {{-- begin::Card header --}}
                <div class="card-header">
                    {{-- begin::Card title --}}
                    <div class="card-title">
                        <h2 class='dropdown-menu-name'>{!! $row['name'] !!}</h2>
                        <div class="fw-bolder text-gray-600 ms-3 dropdown-menu-desc fs-base">{!! $row['description'] !!}</div>
                    </div>
                    {{-- end::Card title --}}
                </div>
                {{-- end::Card header --}}
                {{-- begin::Card body --}}
                <div class="card-body pt-1">
                    
                    <div><span class='fw-bolder text-gray-600 mb-5'>排序編號: {{ $row['sorting'] }}</span></div>
                    <div><span class='fw-bolder text-gray-600 mb-5'>選項可多選: <span class="{{($row['is_multiple'])?"text-primary":""}}">{{ $row['is_multiple_text'] }}</span></span></div>
                    <div class="fw-bolder text-gray-600 mb-5">此選單總共有 {!! count($row['detail']) !!} 個選項</div>
                    @if(count($row['detail'])>0)
                        <div class="d-flex flex-column text-gray-600">
                            @php
                                $detailCount = count($row['detail']);
                                if($detailCount>5)$detailCount=5;
                                $moreCount = count($row['detail'])-$detailCount;
                            @endphp
                            @for($i=0;$i<$detailCount;$i++)
                                @php
                                    $detailRow = $row['detail'][$i];
                                    
                                    // if($row['id']=='ideal_type')logger($row['detail'][$i]);
                                    
                                    $detailValue = $detailRow['value']
                                        ->where('lang_id',config('app.locale'))->first()->description ?? '--';
                                @endphp
                                <div class="d-flex align-items-center py-2">
                                    <span class="bullet bg-primary me-3"></span>{!! $detailValue !!}
                                </div>
                            @endfor

                            @if($moreCount>0)
                                <div class='d-flex align-items-center py-2'>
                                    <span class='bullet bg-primary me-3'></span>
                                    <em>尚有其他 {!! $moreCount !!} 個選項...</em>
                                </div>
                            @endif
                        </div>
                    @else 
                        <span class=''>尚無選項</span>
                    @endif

                    <input type="hidden" class='detail_data_{{ $row['id']}}' name='' value='{!! json_encode($row) !!}' />
                </div>
                {{-- end::Card body --}}
                {{-- begin::Card footer --}}
                <div class="card-footer flex-wrap pt-0 d-flex">
                   {{--  <button type="button" class="btn btn-light-primary my-1 me-auto detail-btn" data-id='{{ $row['id'] }}' data-name='{{ $row['name'] }}' >
                        <i class="la la-list fs-5"></i>{{ __('basic.MenuDetail') }}
                    </button> --}}
                    <button type="button" class="btn btn-light-warning my-1 me-5 edit-btn" data-id='{{ $row['id'] }}'  data-name='{{ $row['name'] }}' >
                        <i class="la la-edit fs-5"></i>{{ __('basic.Edit') }}
                    </button>
                    <button type="button" class="btn btn-light-danger my-1 delete-btn" data-id='{{ $row['id'] }}' >
                        <i class="la la-trash-o fs-5"></i> {{ __('basic.Delete') }}
                    </button>
                </div>
                {{-- end::Card footer --}}
            </div>
            {{-- end::Card --}}
        </div>
        {{-- end::Col --}}
    @endforeach
    @else
        <h2>尚無選單資料!</h2>
    @endif
</div>

{{-- begin::Modal --}}
<div class="modal fade" id="detail_modal" tabindex="-1" aria-hidden="true" >
    <div class="modal-dialog modal-dialog-centered mw-900px" >
        <div class="modal-content">
            <div class="modal-header" id="detail_modal_header">
                <h2 class="fw-bolder">選單明細{{-- -<span class='dropdown_menu_name'> </span>--}}-<span class='modal_type'></span></h2>

                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-kt-users-modal-action="close" id="modal_close">
                    {{-- begin::Svg Icon | path: icons/duotune/arrows/arr061.svg --}}
                    <span class="svg-icon svg-icon-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
                        </svg>
                    </span>
                </div>
            </div>

            <div class="modal-body scroll-y mx-5 mx-xl-4 my-5">
                {{-- begin::Form --}}
                <form id="detail_fm" class="form" method="post" enctype="multipart/form-data" >
                    <input type='hidden' id='detail_type' name='detail_type'/>
                    <input type='hidden' id='detail_master_id' name='detail_master_id'/>
                    {{-- begin::Scroll --}}
                    <div class="d-flex flex-column scroll-y me-n7 pe-7" id="detail_modal_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#detail_modal_header" data-kt-scroll-wrappers="#detail_modal_scroll" data-kt-scroll-offset="300px">

                        <div class="fv-row mb-7 row">
                            <div class='col-12'>
                                <label class="required fw-bold fs-6 mb-2">{{ __('basic.Name') }}</label>
                                <input type="text" id="name" name="name" class="form-control form-control-solid " placeholder="" value="" />
                            </div>
                        </div>

                        <div class="fv-row mb-7 row">
                            <div class='col-12'>
                                <label class="fw-bold fs-6 mb-2">{{ __('basic.Sorting') }}</label>
                                <input type="number" id="sorting" name="sorting" class="form-control form-control-solid " placeholder="未填寫會放在最前面" value="" />
                            </div>
                        </div>


                        <div class="fv-row mb-7 row">
                            <div class='col-12'>
                                <label class="fw-bold fs-6 mb-2">{{ __('basic.OptionCanMultiple') }}</label>
                                <div class="btn-group w-100" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button]">
                                    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success " data-kt-button="true">
                                        <input type='radio' class='btn-check' id='is_multiple_1' name='is_multiple' value='1'  />
                                        {{ __('basic.Yes') }}
                                    </label>

                                    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success active" data-kt-button="true">
                                        <input type='radio' class='btn-check' id='is_multiple_0' name='is_multiple' value='0' checked />
                                        {{ __('basic.No') }}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="fv-row mb-7 row">
                            <div class="col-12">
                                <label class="fw-bold fs-6 mb-2">{{ __('basic.Description') }}</label>
                                <textarea id="description" name="description" class="form-control form-control-solid " placeholder="" rows=3 ></textarea>
                            </div>
                        </div>


                        <div class="fv-row mb-7 row">
                            <div class='col-12'>
                                <label class="fw-bold fs-6 mb-2">{{ __('basic.MenuDetail') }}</label>

                                <!--begin::Repeater-->
                                <div id="menu_detail">
                                    <!--begin::Form group-->
                                    <div class="form-group">
                                        <div class="form-group row">
                                            <div class="col text-center">
                                                <label class="form-label">{{ __('basic.ItemIndex') }}</label>
                                            </div>
                                            <div class="col text-center">
                                                <label class="form-label">{{ __('basic.Sorting2') }}</label>
                                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="輸入數字來更改排序,數字越小越前面"></i>
                                            </div>

                                            @foreach($select['lang'] as $key => $value)
                                            <div class="col text-center">
                                                <label class="form-label {!! ($value['id']==config('app.locale'))?'required':'' !!}">{{ $value['name'] }}</label>
                                            </div>
                                            @endforeach

                                            <div class="col">

                                            </div>
                                            
                                        </div>        
                                        <div data-repeater-list="menu_detail">
                                            <div data-repeater-item>
                                                <div class="form-group row mb-3">
                                                    <div class="col d-flex flex-center">
                                                        <span class='item_index ' name='item_index'>1</span>
                                                    </div>
                                                    <div class="col">
                                                        <input type="hidden" class="form-control form-control-solid detail_id" name='detail_id' value='' placeholder="" />
                                                        <input type="text" class="form-control form-control-solid text-end detail_sorting" name='sorting' value='5' placeholder="" />
                                                    </div>
                                                    @foreach($select['lang'] as $key => $value)
                                                    <div class="col">
                                                        <input type="text" class="form-control form-control-solid detail_lang_{{ $value['id'] }}" name='lang-{{ $value['id'] }}' {!! ($value['id']==config('app.locale')) ? 'required' : '' !!} placeholder="" />
                                                    </div>
                                                    @endforeach
                                                    
                                                    <div class="col text-center">
                                                        <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger detail_delete_row_btn" name='delete_row_btn'>
                                                           <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 href="javascript:;" data-repeater-create class="btn btn-light-primary add_row_btn">
                                            <i class="la la-plus"></i> {{ __('basic.AddRow') }} 
                                        </a>
                                    </div>
                                    <!--end::Form group-->
                                </div>
                                <!--end::Repeater-->
                            </div>
                        </div>
                    </div>
                    {{-- end::Scroll --}}
                    {{-- begin::Actions --}}
                    <div class="text-center pt-15">
                        <button type="submit" class="btn btn-primary me-3" data-kt-users-modal-action="submit"  id="modal_submit">
                            <span class="indicator-label">{{ __('basic.Save') }}</span>
                            <span class="indicator-progress">{{ __('basic.PleaseWait') }}...
                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                        <button type="reset" class="btn btn-light " data-kt-users-modal-action="cancel" id="modal_cancel">{{ __('basic.Cancel') }}</button>
                    </div>
                    {{-- end::Actions --}}
                </form>
            </div>

            <div class="overlay-layer bg-dark-o-10" style='display: none;' >
                <div class="spinner spinner-primary"></div>
            </div>

        </div>
    </div>
</div>
{{-- end::Modal --}}



@endsection