@extends('client.layouts.app')

@section("content")
    <div class="wrapper">
      <div class="content-header">
        <div class="container">
          <div class="pt-4">
            <h2 class="title before:bg-[url('../images/icon01.png')]">上傳打卡資料</h2>
          </div>
        </div>
      </div>
      <div class="content-inner">
        <div class="container">
          <div class="py-8 max-w-[540px] mx-auto 2xl:max-w-[740px]">
            <div class="bg-white text-center border border-[#cc0033] shadow-md py-[72px] 2xl:py-[190px]" id="div-container">
                <a class="btn btn-red !px-4 !rounded-none"  id="upload-button">上傳照片</a>

                <input type="file" name="file" id="home_img_file" accept="image/*" style="display: none;">
                <input type="hidden" name="home_img_photo" id="home_img_photo" >

                <span id="home_img_zone">
                </span>
                
            </div>
        <p>*點選上方照片，可重新上傳。</p>


            <div class="my-7">
              <textarea class="w-full h-28 shadow-md text-lg p-4 2xl:text-2xl 2xl:p-6 2xl:h-40" id="text" placeholder="請輸入說明文字(最多十個文字）"></textarea>
            </div>
<div class="form-group">
                  <div>
                    <label class="!grid gap-2 grid-cols-[1.45em_1fr]">
                        <span>
                            <input class="aspect-square w-full shadow-md mt-1" type="checkbox" id="agree">
                        </span>
                        <span>我同意Honda Taiwan 公開使用本照片<br>
                        <small style="color: #7a7a7a;">
                            1.我已同意將上傳於本網頁之照片、文章等著作權，無償授權予Honda Taiwan使用(包括重製、發布、公開展示、公開發表該內容，以及該內容產生的衍生著作)
                            <br>
                            2.請勿上傳腥膻色、政治、裸露之圖片
                        </small>
                        </span></label>
                  </div>
                </div>
            <div class="text-center">
              <button class="btn btn-red" type="submit" onclick="uploadSubmit();">確認送出</button>
            </div>
          </div>
        </div>
      </div>
    </div>
@endsection

@section("script")
<script type="text/javascript">
    @include("partials.message")

// 创建一个标志以避免无限递归
var isClicking = false;

// 为 <div> 元素添加点击事件监听器
$("#div-container").click(function () {
  if (!isClicking) {
    // 设置标志为 true，以避免递归触发
    isClicking = true;
    // 模拟点击文件输入框
    $("#home_img_file").click();
  }
});

// $("#home_img_file").on('change', function () {
//   alert('123');
// });

    // $('input[type="file"]').on('change', img_photo);
    // // $(document).on('change', 'input[type="file"]', img_photo);
    // function img_photo (event) {
    $("#home_img_file").on('change', function () {
        isClicking = false;
        var id = event.target.id;
        if(id == 'home_img_file'){
            var data = new FormData();
            var files = event.target.files;


            // 用于调整大小并压缩图像的函数
            function resizeAndCompressImage(file, maxWidth, quality) {
                return new Promise((resolve) => {
                    var img = new Image();
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        img.src = e.target.result;

                        img.onload = function () {
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');

                            // 计算新高度，保持纵横比
                            var aspectRatio = img.width / img.height;
                            var newHeight = maxWidth / aspectRatio;

                            // 设置画布尺寸
                            canvas.width = maxWidth;
                            canvas.height = newHeight;

                            // 在画布上绘制图像
                            ctx.drawImage(img, 0, 0, maxWidth, newHeight);

                            // 将画布内容转换为带有指定质量的基于base64的JPEG数据URL
                            var compressedDataURL = canvas.toDataURL('image/jpeg', quality);

                            // 将基于base64的数据URL转换为Blob
                            var blob = dataURLtoBlob(compressedDataURL);

                            // 将Blob附加到FormData对象
                            data.append("file", blob);

                            // 使用修改后的FormData对象解析Promise
                            resolve(data);
                        };
                    };

                    // 以数据URL形式读取图像文件
                    reader.readAsDataURL(file);
                });
            }

            // 将数据URL转换为Blob
            function dataURLtoBlob(dataURL) {
                var arr = dataURL.split(',');
                var mime = arr[0].match(/:(.*?);/)[1];
                var bstr = atob(arr[1]);
                var n = bstr.length;
                var u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            }

            // 对输入中的第一个文件调用resizeAndCompressImage函数
            resizeAndCompressImage(files[0], 1050, 0.7).then(function (modifiedData) {
                // 添加其他表单数据
                modifiedData.append("type", "post");
                modifiedData.append("_token", "{{ csrf_token() }}");


                $.ajax({
                    url: "/photo",
                    type: 'POST',
                    data: modifiedData,
                    enctype: 'multipart/form-data',
                    cache: false,
                    processData: false,
                    contentType: false
                }).done(function(r) {
                    console.log(r);
                    if(r.status == 1){
                        swal({
                            title: "未選擇檔案",
                            type:'error'
                        });
                    }else if(r.status == 2){
                        swal({
                            title: "檔案格式錯誤",
                            type:'error'
                        });
                    }else{
                        if(id == 'home_img_file'){
                            $("#home_img_zone").html('<img width="100%;" height="100%;" src="/'+r.src+'"/>');
                            $("#home_img_photo").val(r.src);
                            var uploadButton = document.getElementById("upload-button");

                            if (uploadButton) {
                                // 找到元素并将其样式设置为 "none"
                                uploadButton.style.display = "none";
                            }
                            swal({
                                title: "上傳成功",
                                type:'success'
                            });
                        }
                    }
                        
                });
            });
        }
    });
    // }
var check = 0;
function uploadSubmit(){
    if(check == 1){
        return false;
    }
    text = $('#text').val();
    text = text.replace(/\r?\n/g, '<br />');

    var agree = document.getElementById("agree");

    if(agree.checked != true){
        if (navigator.appName == 'Microsoft Internet Explorer' ||  !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/)) || (typeof $.browser !== "undefined" && $.browser.msie == 1)) // If Internet Explorer, return version number
        {
            alert('請勾選我同意Honda Taiwan 公開使用本照片');
            return false;
        }else{

            swal({
                title: "請勾選我同意Honda Taiwan 公開使用本照片",
            });
            return false;
        }
        return false;
    }

    if(text== ''){
        swal({
            title: "錯誤",
            text:'請填寫說明文字',
            type:'warning'
        });
        return false;
    }

    if(text.length > 10){

        swal({
            title: "錯誤",
            text:'文字超過十字',
            type:'warning'
        });
        return false;
    }

    if($('input[id=home_img_photo]').val().length === 0){
        swal({
            title: "錯誤",
            text:'請上傳圖片',
            type:'warning'
        });
        return false;
    }
    check = 1;
    $.ajax({
        url: "/upload/{{$zone_id}}",
        type: "POST",
        data: {
            _method: "POST",
            _token: $('#token').val(),
            img: $('#home_img_photo').val(),
            text: text,
        },
        dataType: "json",
    }).done(function(r){
        if( r.status==0 ) {
            location.href = "/well";
        }else{
            swal({
                title: "錯誤",
                text:'請聯絡客服人員',
                type:'warning'
            });
            return false;
        }
    });
}
</script>
@stop