@php
        $ob_file = $contract->getFile($document_index);
    @endphp
    <div class="sample dropzone" id="preview_zone_front_right_{{ $document_index }}">
        <div id="img_zone_{{ $document_index }}">
            @if(!empty(old("contract_file.{$document_index}.file_path")) && Storage::disk('temp')->has(old("contract_file.{$document_index}.file_path")))
                <a id="{{ $document_index }}_link" href="{{ asset('storage/temp') }}/{{ old("contract_file.{$document_index}.file_path") }}" data-lity="data-lity">
                    <img id="{{ $document_index }}_src" src="{{ asset('storage/temp') }}/{{ old("contract_file.{$document_index}.file_path") }}">
                </a>
            @elseif(is_object($ob_file) && !empty($ob_file->file_path) && Storage::disk('contract')->has($contract->id.'/'.$ob_file->file_path))
                <a id="{{ $document_index }}_link" href="{{ asset('storage/contract/') }}/{{ $contract->id }}/{{ $ob_file->file_path }}" data-lity="data-lity">
                    <img src="{{ asset('storage/contract/') }}/{{ $contract->id }}/{{ $ob_file->file_path }}" id="{{ $document_index }}_src">
                </a>
            @else
                <a href="#" data-lity="data-lity" id="{{ $document_index }}_link">
                    <img class="hide" id="{{ $document_index }}_src">
                </a>
            @endif
            <label id="btn_rotate_{{ $document_index }}" class="btn_rotate {{ empty(old("contract_file.{$document_index}.file_path", is_object($ob_file) ? $ob_file->file_path : '')) ? 'hide' : '' }}" data-index="{{ $key }}"><img src="{{ asset("assets/user/img/common/rotating-arrow-to-the-right.png") }}"/></label>
        </div>
    </div>
    <div class="sample-right">
        <div class="form__file w70per d-inline-block">
            <div class="file_box dropzone" id="file_box_{{ $document_index }}" data-index="{{ $document_index }}">
                <label id="file_btn_{{ $document_index }}">ファイルを選択</label>
                <label id="btn_delete_{{ $document_index }}" class="btn_delete {{ empty(old("contract_file.{$document_index}.file_path", is_object($ob_file) ? $ob_file->file_path : '')) ? 'hide' : '' }}" data-index="{{ $key }}">削除</label>
                <input type="hidden" id="{{ $document_index }}_file_name" name="contract_file[{{ $document_index }}][file_name]" value="{{ old("contract_file.{$document_index}.file_name", is_object($ob_file) ? $ob_file->file_name : '') }}">
                <input type="hidden" id="{{ $document_index }}_file_path" name="contract_file[{{ $document_index }}][file_path]" value="{{ old("contract_file.{$document_index}.file_path", is_object($ob_file) ? $ob_file->file_path : '') }}">
                @if (isset($document) && is_object($document))
                    <input type="hidden" name="contract_file[{{ $document_index }}][title]" value="{{ config('const.document_category_front.'.$document->sub_category) }}">
                @endif
                <input type="hidden" id="{{ $document_index }}_rotate" name="contract_file[{{ $document_index }}][rotate]" value="0">
            </div>
        </div>
    </div>
    <script>
        $(function() {
            Dropzone.autoDiscover = false;
            $(document).ready(function (){
                $("#file_box_{{ $document_index }}").dropzone({
                    autoProcessQueue : true,
                    clickable:"#file_btn_{{ $document_index }}",
                    url:"{{ route("user.vehicles.upload_contract_file") }}",
                    params:{
                        "_token":"{{ csrf_token() }}"
                    },
                    previewsContainer:"#img_zone_{{ $document_index }}",
                    maxFiles:1,
                    dictCancelUpload:'キャンセル',
                    dictCancelUploadConfirmation:'このアップロードをキャンセルしてよろしいですか?',
                    acceptedFiles : "{{ '.'.implode(',.',config('const.image_file_extension')) }}",
                    dictDefaultMessage:"",
                    dictRemoveFileConfirmation:1,
                    addRemoveLinks:true,
                    init:function(){
                        myDropzone = this;
                        this.on("complete", function(){
                            if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
                            {
                                var _this = this;
                                _this.removeAllFiles();
                            }
                        });

                    },
                    success: function success(file) {
                        console.log(file.xhr.response);
                        let data = JSON.parse(file.xhr.response);
                        let img_src = "{{ asset('storage/temp') }}" + "/" + data.file_path;
                        $("#{{ $document_index }}_src").attr('src',img_src );
                        $("#{{ $document_index }}_link").attr('href',img_src );
                        $("#{{ $document_index }}_src").removeClass('hide');
                        $("#btn_delete_{{ $document_index }}").removeClass('hide');
                        $("#btn_rotate_{{ $document_index }}").removeClass('hide');
                        $("#{{ $document_index }}_rotate").val('');
                        $("#{{ $document_index }}_file_path").val(data.file_path );
                        $("#{{ $document_index }}_file_name").val(data.file_name );
                    }
                });

                $("#btn_delete_{{ $document_index }}").click(function () {
                    if (confirm('ファイルを削除します。よろしいですか？')) {
                        $.ajax({
                            type: "post",
                            url : '{{ route("user.vehicles.delete_file") }}',
                            data: {
                                'file_name':$("#{{ $document_index }}_file_path").val(),
                                'contract_id':"{{ $contract->id }}",
                                'type':"{{ $document_index }}",
                                _token: "{{ csrf_token() }}",
                            },
                            dataType:'json',
                            success: function(response) {
                                console.log(response.result_code);
                                if (response.result_code == 'success') {
                                    $("#{{ $document_index }}_src").attr('src','' );
                                    $("#{{ $document_index }}_link").attr('href','#' );
                                    $("#{{ $document_index }}_src").addClass('hide');
                                    $("#btn_delete_{{ $document_index }}").addClass('hide');
                                    $("#btn_rotate_{{ $document_index }}").addClass('hide');
                                    $("#{{ $document_index }}_rotate").val('');
                                    $("#{{ $document_index }}_file_path").val('');
                                    $("#{{ $document_index }}_file_name").val('');
                                } else {
                                }
                            }
                        });
                    }
                });

                $("#btn_rotate_{{ $document_index }}").click(function () {
                    console.log("image rotate");
                    let str_rotate =  $("#{{ $document_index }}_rotate").val();
                    let rotate = str_rotate == '' ? 90 : (parseInt(str_rotate)+90);

                    $("#{{ $document_index }}_src").rotate(rotate);

                    let img_width = $("#{{ $document_index }}_src").width();
                    let img_height = $("#{{ $document_index }}_src").height();

                    if($("#{{ $document_index }}_src").data('height') != '') {
                        $("#{{ $document_index }}_src").data('height')
                    }

                    console.log(img_width);
                    console.log(img_height);

                    $("#{{ $document_index }}_rotate").val(rotate);

                    if(img_width < img_height) {
                        $("#{{ $document_index }}_src").width(img_width);
                        //$("#{{ $document_index }}_src").height(img_width * (img_width/img_height));
                    }

                    /*$("#{{ $document_index }}_src").animate({
                        transform: rotate

                    }, {
                        step: function(now, fx) {
                            $(this).css({
                                '-webkit-transform': 'rotate(' + now + 'deg)',
                                '-moz-transform': 'rotate(' + now + 'deg)',
                                'transform': 'rotate(' + now + 'deg)'
                            });
                        }
                    });*/

                });
            })
        })
    </script>