@csrf
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<div class="mb-3">
    <label for="">商品類別</label>
    <select class="form-control " name="classId" id="">
        @foreach ($ProductMethods as $items => $row)
            <option value="{{ $row->id }}">{{  $row->ClassName }}</option>
        @endforeach
    </select>
</div>
<div class="mb-3">
    <label for="">名稱</label>
    <input type="text" class="form-control " name="Name" placeholder="名稱" value="{{ isset($item)?$item->Name:"" }}" required>
</div>
<div class="row">
    <div class="col-4">
        <div class="mb-3">
            <label for="">上傳圖片-1</label>
            <input name="progressbarTW_img[]" class="imgInp" data-index="0" type="file" accept="image/gif, image/jpeg, image/png">
        </div>
        <div class="mb-3">
            <label for="">上傳圖片-2</label>
            <input name="progressbarTW_img[]" class="imgInp" data-index="1" type="file" accept="image/gif, image/jpeg, image/png">
        </div>
        <div class="mb-3">
            <label for="">上傳圖片-3</label>
            <input name="progressbarTW_img[]" class="imgInp" data-index="2" type="file" accept="image/gif, image/jpeg, image/png">
        </div>
        <div class="mb-3">
            <label for="">上傳圖片-4</label>
            <input name="progressbarTW_img[]" class="imgInp" data-index="3" type="file" accept="image/gif, image/jpeg, image/png">
        </div>
    </div>
    <style>
        .img-box{
            border:1px solid rgb(222,222,222);
        }
    </style>
    <div class="col-8 row">
        <div class="col-6 img-box"><img class="preview_progressbarTW_img" style="width:100%;" src="{{ isset($Img[0])?$Img[0]->pImgSrc:"" }}" /></div>
        <div class="col-6 img-box"><img class="preview_progressbarTW_img" style="width:100%;" src="#" /></div>
        <div class="col-6 img-box"><img class="preview_progressbarTW_img" style="width:100%;" src="#" /></div>
        <div class="col-6 img-box"><img class="preview_progressbarTW_img" style="width:100%;" src="#" /></div>
    </div>
</div>
<style>
    .amount-box{
        /* padding: 8px 8px; */
    }
    .amount-bk{
        background: #e4e4ff;
        padding: 8px;
        border-radius: 6px;
    }
    .amount-plus-bk{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        cursor: pointer;
        border: 1px solid rgb(222,222,222);
        border-radius: 6px;
        color: rgb(67, 67, 67);
        font-weight: 900;
        user-select: none;
        min-height: 140px;
    }
    .amount-plus-bk:hover{
        background: rgb(245, 245, 245);
    }
</style>
<div class="mb-3">
    <label for="">金額</label>
    <div class="row m-0">
        @isset($amountArray)
            @foreach ($amountArray as $key => $val)
                <div class="amount-box col-4 mb-2">
                    <div class="amount-bk">
                        單位
                        <input type="text" class="form-control " name="AmountName[]" placeholder="單位名稱" value="{{ $key }}">
                        價格
                        <input type="text" class="form-control " name="Amount[]"  placeholder="金額" value="{{ $amountArray[$key]['Amount'] }}" required>
                        庫存量
                        <input type="text" class="form-control " name="Inventory[]"  placeholder="庫存量" value="{{ $amountArray[$key]['Inventory'] }}" required>
                    </div>
                </div>
                @endforeach
            @else
            <div class="amount-box col-4 mb-2">
                <div class="amount-bk">
                    單位
                    <input type="text" class="form-control " name="AmountName[]" placeholder="單位名稱">
                    價格
                    <input type="text" class="form-control " name="Amount[]"  placeholder="金額" value="" required>
                    庫存量
                    <input type="text" class="form-control " name="Inventory[]"  placeholder="庫存量" value="" required>
                </div>
            </div>
            @endisset

        <div class="amount-plus-box col-4">
            <div class="amount-plus-bk">
                +
            </div>
        </div>
    </div>
</div>
<div class="mb-3">
    <label for="">商品描述</label>
    <textarea type="text" class="form-control " name="Describe" id="editor"  placeholder="描述">
        {{ isset($item)?$item->describe:"" }}
    </textarea>
</div>
<div class="mb-3">
    <label for="">排序</label>
    <input type="text" class="form-control " name="Order"  placeholder="排序" value="{{ isset($item)?$item->order:"1" }}" required>
</div>
<div class="mb-3">
    <label for="">狀態</label>
    <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="open_status" id="customSwitch" @checked(empty($item)?false:$item->Status)>
        <label class="custom-control-label" for="customSwitch"></label>
    </div>
</div>
<input class="btn btn-primary " style="float: right" type="submit">

<script>
    $(".imgInp").change(function(){
        //當檔案改變後，做一些事
        // console.log();
        readURL(this,$(this).data('index'));   // this代表<input id="imgInp">
   });

   $('.amount-plus-box').click(function(){
        var html = `<div class="amount-box col-4">
                        <div class="amount-bk">
                            單位
                            <input type="text" class="form-control " name="AmountName[]" placeholder="單位名稱">
                            價格
                            <input type="text" class="form-control " name="Amount[]"  placeholder="金額" value="" required>
                            庫存量
                            <input type="text" class="form-control " name="Inventory[]"  placeholder="庫存量" value="" required>
                        </div>
                    </div>`;
        $(this).before(html);
   });

   function readURL(input,index){
        console.log(index);
        if(input.files && input.files[0]){
            var reader = new FileReader();
            reader.onload = function (e) {
                $(".preview_progressbarTW_img").eq(index).attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

</script>

<script>
    CKEDITOR.replace('editor');
</script>