@extends('admins.layouts.main')
@section('content')

    <link href="{{ asset('/js/jquery-ui-1.12.1/jquery-ui.css') }}" rel="stylesheet" type="text/css"></link>
    <link rel="stylesheet" href="{{ asset('/js/jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css') }}">
    <script src="{{ asset('/js/jquery-ui-1.12.1/jquery-ui.js') }}"></script>
    <script src="{{ asset('/js/jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.js') }}"></script>
{{--    <script src="{{ asset('/js/admins/user_management/users/edit_profile.js') }}"></script>--}}
    <div class="row">
        <div class="col-lg-12">

            <div class="panel panel-bordered">
                <div class="example table-responsive">
                    <div class="panel p-4 form-title-right">
                        <form id="form" action=""">
                            @method($forms['method'])
                            <div class="row">
                                <div class="col-12">
                                    <h3 class="example-title" style="color: #ff9090">{{$msgStr}}</h3>
                                 </div>
                                <div class="col-12">
                                    <h3 class="example-title">測試檔案上傳頁面</h3>
                                </div>
                                <hr style="width:0%" ;/>
                                <div class="col-md-6 col-xl-6">
                                    <div class="">
                                        <div class="example-wrap">
                                            <div class="example">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">
                                                        <span class="txt-red">*</span>上傳訓練證明文件
                                                    </label>
                                                    <input type="file" accept=".jpg,.jpeg,.png,.pdf" name="certificate" class="upload_image" style="display:none">
                                                    <div class="col-md-8">
                                                        <input id="upload_name" type="text" style="width: 163px;"disabled>
                                                        <button class="btn btn-info btn-sm waves-effect waves-classic" type="button" id="upload_button">
                                                            <i class="icon md-upload" aria-hidden="true"></i>
                                                        </button>
                                                        <button class="btn btn-danger btn-sm waves-effect waves-classic" type="button" id="del_button">
                                                            <i class="icon md-close-circle" aria-hidden="true"></i>
                                                        </button>
                                                        <p style="color: #ff9090">格式僅支援jpg, jpeg, png, pdf</p>
                                                    </div>
                                                    <label class="col-lg-4 col-form-label">
                                                        <span class="txt-red"></span>上傳訓練證明附件
                                                    </label>
                                                    <input type="file" accept=".jpg,.jpeg,.png,.pdf" name="certificate2" class="upload_image2" style="display:none">
                                                    <div class="col-md-8">
                                                        <input id="upload_name2" type="text" style="width: 163px;"disabled>
                                                        <button class="btn btn-info btn-sm waves-effect waves-classic" type="button" id="upload_button2">
                                                            <i class="icon md-upload" aria-hidden="true"></i>
                                                        </button>
                                                        <button class="btn btn-danger btn-sm waves-effect waves-classic" type="button" id="del_button2">
                                                            <i class="icon md-close-circle" aria-hidden="true"></i>
                                                        </button>
                                                        <p style="color: #ff9090">格式僅支援jpg, jpeg, png, pdf</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-6">
                                    <div class="">
                                        <div class="example-wrap">
                                            <div class="example">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">
                                                        <span class="txt-red">*</span>顯示系統相關設定
                                                    </label>
                                                    <div class="col-md-8">
                                                        
                                                        <input
                                                        type="checkbox"
                                                        id="show_profile"
                                                        name="show_profile"
                                                        value="1" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>


                    <div class="col-lg-12 p-4 text-center">

                        <button class="btn btn-primary btn-lg waves-effect waves-classic"  type="button" id="submit_preview">
                            <i class="icon md-calendar-note" aria-hidden="true"></i>預覽
                        </button>&nbsp;&nbsp;
                    </div>

            

        </div>
    </div>
    <script>
        $('#acquired_date').datetimepicker({
            yearRange: "-100:+0",
            dateFormat: 'yy-mm-dd',
            maxDate: 0,
            changeYear: true,
            changeMonth: true,
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
            showTimepicker: false,
        });

        $('#upload_button').click(function(){
            $('input[name="certificate"]').click();
        });

        $('.upload_image').change(function(e){
            $('#upload_name').val(this.files[0]['name']);
        });
        $('#del_button').click(function(){
            $('#upload_name').val('');
        });

        $('#upload_button2').click(function(){
            $('input[name="certificate2"]').click();
        });
        $('#del_button2').click(function(){
            $('#upload_name2').val('');
        });

        $('input[name="certificate2"]').change(function(e){
            $('#upload_name2').val(this.files[0]['name']);
        });

        $('#submit_button').click(function(){
            $('#submit_button').attr('disabled', true);
            if(empty($('#upload_name').val())){
                notie.alert({type: 'error', text: '請上傳訓練證明文件', time: 2});
                setInterval(function(){$('#submit_button').attr('disabled', false);}, 500);
                return false;
            }


            formData = new FormData($('#form')[0]);

            showLoading();
            $.ajax({
                type: 'post',
                url: $('#form').attr('action'),
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                enctype: 'multipart/form-data',
                success: function (response) {
                    hideLoading();
                    if(response.status){
                        notie.alert({type: 'success', text: response.message, time: 3});
                        setTimeout(function(){
                            var mySubmitForm = document.createElement("FORM");
                            mySubmitForm.setAttribute("id", "mySubmitForm");
                            mySubmitForm.setAttribute("action", response.url);
                            document.body.appendChild(mySubmitForm);
                            mySubmitForm.submit();;
                        }, 2000);

                        return false;
                    }
                    setInterval(function(){$('#submit_button').attr('disabled', false);}, 500);
                    notie.alert({type: 'error', text: response.message, time: 3});
                }
            });
        });

        
            //預覽
            $('#submit_preview').click(function () {
                clickObj= $('#submit_preview');
                clickObj.attr('disabled', true);
                let formData;
                formData = new FormData($('#form')[0]);
                var url ='{{route('admin.showCertificate_Preview_for_test')}}';

                showLoading();
               

                const form = document.createElement('form');
                form.method = 'POST';
                form.action = url;
                form.target = '_blank'; // 在新視窗打開
                form.enctype = 'multipart/form-data';

                // 獲取 CSRF token
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                // 創建 CSRF token 
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = csrfToken; 
                form.appendChild(csrfInput);

                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'id';
                input.value = '{{$certificateApply->id ?? ''}}';
                form.appendChild(input);

                for (let [key, value] of formData.entries()) {
             
                    const input = document.createElement('input');
                    if (value instanceof File) { //上傳檔案處理
                        input.type = 'file';
                        input.name = key; 
                        const dataTransfer = new DataTransfer();
                        dataTransfer.items.add(value);
                        input.files = dataTransfer.files; 
                        //console.log(`File key: ${key}, File name: ${value.name}`);
                        form.appendChild(input);
                    }else{
                        input.type = 'hidden';
                        input.name = key;
                        input.value = value;
                        form.appendChild(input);
                        //console.log('key:'+key + '|| val: '+value);
                    }
                
                }

                document.body.appendChild(form);
                form.submit();

                document.body.removeChild(form);
                hideLoading();
                clickObj.attr('disabled', false);
            });
    </script>
@endsection