@extends('partial.master')
@section('page_title','供應商')

@section('scripts')
<script type='text/javascript'>

    form_obj.module     = 'Partner';
    form_obj.controller = 'PartnerController';
    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: ''
                })
            }
        }
    );

    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');
                                    });
                                }
                            }
                        },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) {
        validator.resetForm(true);
        // console.log(data);

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

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

        // contact
        for(var i in data['contact'])
        {
            var contactRow = data['contact'][i];

            $($('.contact_name')[i]).val(contactRow['name']);
            $($('.contact_phone')[i]).val(contactRow['phone']);

            if(i<data['contact'].length-1)$('.add_contact_btn').click();
        }

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

    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() {
        dataTable = new DataTableCls('#data_table');
        dataTable.defineGetData = ()=> {
            return {
                module:form_obj.module,
                controller:form_obj.controller,
                type:'read',
                where:{},
                print_log:false,
            };
        }
        dataTable.defineColumn = ()=>{
            return [    
                { data: "sorting", className: 'text-center' ,orderable: false },
                { data: "code", className: 'text-center' },
                { data: "name", className: 'text-center',render: function(data, type, row) {
                        return `
                            <input type="hidden" class="data_id" value="${row.id}" />
                            <span class="">${data}</span>
                        `;
                    }
                },
                { data: null, className: 'text-center' ,orderable: false,render: function (data, type, row) {
                        return dataTable.getTableActionMenu('er',true);
                    }, 
                }
            ];
        }

        dataTable.defineOrder = () => {
            return [[ 1, 'asc' ]];
        }

        dataTable.renderRow = (list)=>{
            if(list==undefined)return;
            var row = list.map ( function (value, index, array) {
                return {
                    "id": value.id,
                    "sorting": index+1,
                    "code": value.code,
                    "name": value.name,
                }
            })
            return row;
        }

        // dataTable init
        KTUtil.onDOMContentLoaded(function () {
            dataTable.init();

            $('body')
                .on('add_row_end',function () {
                    validator.resetForm(true);
                    $('select').trigger('change.select2');

                    $('.del_contact_btn').not(':eq(0)').trigger('click');
                })
                .on('close_row_end',function(e){

                    if($('.dropzone').length>0) {
                        $('.dropzone').each(function(i,o) {
                            let file_id = [];
                            $(o).children('.dz-preview').each(function() {
                                var upload = $(this).attr('upload');
                                if(upload==0) {
                                    var md5 = $(this).attr('md5');
                                    if(!empty(md5)) file_id.push(md5);
                                }
                            })

                            $.ajax({
                                url: _dp.url,
                                data:{
                                    type: 'delete',
                                    file_id: file_id,
                                    master_id: '',
                                    upload_root_path: c_dp.upload_root_path,
                                    url_root_path: c_dp.url_root_path,
                                    print_log: false,
                                },
                                success:function( data, textStatus, jqXHR ) {
                                    // console.log(data);
                                },
                                error:ajaxError
                            });
                        })
                    }

                })
                .on('cancel_row_end',function(e){

                    if($('.dropzone').length>0) {
                        $('.dropzone').each(function(i,o) {
                            let file_id = [];
                            $(o).children('.dz-preview').each(function() {
                                var upload = $(this).attr('upload');
                                if(upload==0) {
                                    var md5 = $(this).attr('md5');
                                    if(!empty(md5)) file_id.push(md5);
                                }
                            })

                            $.ajax({
                                url: _dp.url,
                                data:{
                                    type: 'delete',
                                    file_id: file_id,
                                    master_id: '',
                                    upload_root_path: c_dp.upload_root_path,
                                    url_root_path: c_dp.url_root_path,
                                    print_log: false,
                                },
                                success:function( data, textStatus, jqXHR ) {
                                    // console.log(data);
                                },
                                error:ajaxError
                            });
                        })
                    }

                });

            $('#contact_detail').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() {
                    // Init select2
                    // $('[data-kt-repeater="select2"]').select2();
                }
            });
        });
    })

</script>
@endsection

@section('kt_content_container')
<!--begin::Card-->
<div class="card">
    <!--begin::Card header-->
    <div class="card-header border-0 pt-6">
        <!--begin::Card title-->
        <div class="card-title">
            <!--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="text" data-kt-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="搜尋" />
            </div>
            <!--end::Search-->
        </div>
        <!--begin::Card title-->
        <!--begin::Card toolbar-->
        <div class="card-toolbar">
            <!--begin::Toolbar-->
            <div class="d-flex justify-content-end" data-kt-table-toolbar="base">
                <!--begin::Filter-->
                {{-- <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <!--begin::Svg Icon | path: icons/duotune/general/gen031.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">
                            <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="black" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    篩選
                </button> --}}
                <!--begin::Menu 1-->
                <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" id="kt-toolbar-filter" >
                    <!--begin::Header-->
                    <div class="px-7 py-5">
                        <div class="fs-5 text-dark fw-bolder">篩選條件</div>
                    </div>
                    <!--end::Header-->
                    <!--begin::Separator-->
                    <div class="separator border-gray-200"></div>
                    <!--end::Separator-->
                    <!--begin::Content-->
                    <div class="px-7 py-5" data-kt-table-filter="form">
                        <!--begin::Actions-->
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary fw-bold px-6 me-2" data-kt-menu-dismiss="true" data-kt-table-filter="filter">送出</button>
                            <button type="reset" class="btn btn-light btn-active-light-primary fw-bold px-6" data-kt-menu-dismiss="true" data-kt-table-filter="reset">重設</button>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Menu 1-->
                <!--end::Filter-->
                <!--begin::Import user-->
                {{-- <button type="button" class="btn btn-primary me-3" id="import_btn">
                    <span class="svg-icon svg-icon-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.3" d="M4.425 20.525C2.525 18.625 2.525 15.525 4.425 13.525L14.825 3.125C16.325 1.625 18.825 1.625 20.425 3.125C20.825 3.525 20.825 4.12502 20.425 4.52502C20.025 4.92502 19.425 4.92502 19.025 4.52502C18.225 3.72502 17.025 3.72502 16.225 4.52502L5.82499 14.925C4.62499 16.125 4.62499 17.925 5.82499 19.125C7.02499 20.325 8.82501 20.325 10.025 19.125L18.425 10.725C18.825 10.325 19.425 10.325 19.825 10.725C20.225 11.125 20.225 11.725 19.825 12.125L11.425 20.525C9.525 22.425 6.425 22.425 4.425 20.525Z" fill="currentColor"/>
                            <path d="M9.32499 15.625C8.12499 14.425 8.12499 12.625 9.32499 11.425L14.225 6.52498C14.625 6.12498 15.225 6.12498 15.625 6.52498C16.025 6.92498 16.025 7.525 15.625 7.925L10.725 12.8249C10.325 13.2249 10.325 13.8249 10.725 14.2249C11.125 14.6249 11.725 14.6249 12.125 14.2249L19.125 7.22493C19.525 6.82493 19.725 6.425 19.725 5.925C19.725 5.325 19.525 4.825 19.125 4.425C18.725 4.025 18.725 3.42498 19.125 3.02498C19.525 2.62498 20.125 2.62498 20.525 3.02498C21.325 3.82498 21.725 4.825 21.725 5.925C21.725 6.925 21.325 7.82498 20.525 8.52498L13.525 15.525C12.325 16.725 10.525 16.725 9.32499 15.625Z" fill="currentColor"/>
                        </svg>
                    </span>
                    匯入Excel
                </button>
                <input id="upload_file" style="display:none;" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" > --}}
                <!--begin::Add user-->
                <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>
                <!--end::Add user-->
            </div>
            <!--end::Toolbar-->

            <!--begin::Modal - Add task-->
            <div class="modal fade" id="detail_modal" tabindex="-1" aria-hidden="true" >
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-dialog-centered mw-900px" >
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Modal header-->
                        <div class="modal-header" id="detail_modal_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bolder">供應商明細-<span class='modal_type'></span></h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <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>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                            <!--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">
                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7 row">
                                        <div class='col-md-6'>
                                            <label class="fw-bold fs-6 mb-2">{{ __('basic.Code') }}</label>
                                            <input type="text" id="code" name="code" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="系統產生" value="" readonly />
                                        </div>
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7 row">
                                        <div class='col-md-6'>
                                            <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 mb-3 mb-lg-0" placeholder="" value="" />
                                        </div>
                                        <div class='col-md-6'>
                                            <label class="fw-bold fs-6 mb-2">簡稱</label>
                                            <input type="text" id="name2" name="name2" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
                                        </div>
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7 row">
                                        <div class='col-md-6'>
                                            <label class="fw-bold fs-6 mb-2">統一編號</label>
                                            <input type="text" id="uniform_number" name="uniform_number" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
                                        </div>
                                        <div class='col-md-6'>
                                            <label class="fw-bold fs-6 mb-2">電話</label>
                                            <input type="tel" id="phone" name="phone" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
                                        </div>
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7 row">
                                        <div class='col-md-12'>
                                            <label class="fw-bold fs-6 mb-2">聯絡地址</label>
                                            <input type="text" id="contact_street" name="contact_street" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
                                        </div>
       
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <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 mb-3 mb-lg-0" placeholder="" rows=3 ></textarea>
                                        </div>
                                    </div>
                                    <!--end::Input group-->
                                    <div class="fv-row mb-7 row" >
                                        <div class="col-12">
                                            <label class="fw-bold fs-6 mb-2">聯絡人</label>
                                            <!--begin::Repeater-->
                                            <div id="contact_detail">
                                                <!--begin::Form group-->
                                                <div class="form-group">
                                                    <div data-repeater-list="contact_detail">
                                                        <div data-repeater-item>
                                                            <div class="form-group row mb-5">
                                                                <div class="col-md-4">
                                                                    <input type="text" name="contact_name" class="form-control form-control-solid mb-2 mb-md-0 contact_name" placeholder=聯絡人名稱 />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <input type="text" name="contact_phone" class="form-control form-control-solid mb-2 mb-md-0 contact_phone" placeholder="聯絡人電話" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mb-2 mb-md-0 del_contact_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_contact_btn">
                                                        <i class="la la-plus"></i>新增聯絡人
                                                    </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>
                            <!--end::Form-->
                        </div>
                        <!--end::Modal body-->

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

                    </div>
                    <!--end::Modal content-->
                </div>
                <!--end::Modal dialog-->
            </div>
            <!--end::Modal - Add task-->
        </div>
        <!--end::Card toolbar-->
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0">
        <!--begin::Table-->
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="data_table">
            <!--begin::Table head-->
            <thead>
                <!--begin::Table row-->
                <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                    {{-- <th class="w-10px pe-2">
                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                            <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#data_table .form-check-input" value="1" />
                        </div>
                    </th> --}}
                    
                    <th class=" min-w-100px">
                        {{ __('basic.ItemIndex') }}
                    </th>
                    <th class="text-center min-w-125px">{{ __('basic.Code') }}</th>
                    <th class="text-center min-w-150px">{{ __('basic.Name') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Actions') }}</th>
                </tr>
                <!--end::Table row-->
            </thead>
            <!--end::Table head-->
            <!--begin::Table body-->
            <tbody class="text-gray-600 fw-bold">
            </tbody>
            <!--end::Table body-->
        </table>
        <!--end::Table-->
    </div>
    <!--end::Card body-->
</div>
<!--end::Card-->
@endsection