@foreach(range(1, 15) as $value)
    <tr>
        <th>関連画像</th>
        <td>
            <div class="file-wrap">
                <label >ファイルを選択
                    <input class="exterior_picture" data-id="{{ $value }}" id="select_exterior_picture_{{$value}}">
                </label>

                @if(old('vehicle.exterior.image' . $value . '_path'))
                        <img id="exterior_picture_{{$value}}" class="exterior-picture" src="{{ asset('storage/temp/').'/'.old('vehicle.exterior.image' . $value . '_path') }}">
                @else
                    @if(isset($vehicle_check_exterior['id']) && isset($vehicle_check_exterior["image".$value."_path"]) && ($vehicle_check_exterior["image".$value."_path"]))
                        <img id="exterior_picture_{{$value}}" class="exterior-picture" src="{{ asset('storage/vehicle/exterior_picture/').'/'.$vehicle_check_exterior['id'] }}/{{ $vehicle_check_exterior["image".$value."_path"] }}">
                    @else
                        <img id="exterior_picture_{{$value}}" class="exterior-picture">
                    @endif

                @endif

                <input type="hidden" name="vehicle[exterior][image{{ $value }}_path]" id="exterior_picture_path_{{ $value }}" value="{{ old('vehicle.exterior.image' . $value . '_path', isset($vehicle_check_exterior["image".$value."_path"]) ? $vehicle_check_exterior["image".$value."_path"] : "") }}"/>
                <input type="hidden" name="vehicle[exterior][image{{ $value }}_name]" id="exterior_picture_name_{{ $value }}" value="{{ old('vehicle.exterior.image' . $value . '_name') }}"/>

                <div class="file-box" >
                    <label class="delete-picture-file minus" id="delete_exterior_piture_{{ $value }}" data-id="{{ $value }}" data-temp_file="{{ isset($vehicle_check_exterior["image".$value."_path"]) ? $vehicle_check_exterior["image".$value."_path"] : "" }}" style="display: {{ (isset($vehicle_check_exterior["image".$value."_path"]) && !empty($vehicle_check_exterior["image".$value."_path"])) ? "inline" : "none" }}">削除</label>
                </div>
            </div>
            <div id="progressbar_exterior_picture_{{$value}}"></div>

        </td>
        <td class="CH-check">
            @include('backend.share.vehicle.form._s_select_check', ['name'=>'vehicle[exterior][image'.$value.'_csch1]', 'select' => old('vehicle.exterior.image'.$value.'_csch1', isset($vehicle_check_exterior["{'image'.$value.'_csch1'}"]) ? $vehicle_check_exterior["{'image'.$value.'_csch1'}"] : ''), 'class'=> 'exterior-csch1'])
        </td>
        <td class="CH-check">
            @include('backend.share.vehicle.form._s_select_check', ['name'=>'vehicle[exterior][image'.$value.'_csch2]', 'select' => old('vehicle.exterior.image'.$value.'_csch2', isset($vehicle_check_exterior["{'image'.$value.'_csch2'}"]) ? $vehicle_check_exterior["{'image'.$value.'_csch2'}"] : ''), 'class'=> 'exterior-csch2'])
        </td>
        <td class="CH-check">
            @include('backend.share.vehicle.form._s_select_check', ['name'=>'vehicle[exterior][image'.$value.'_csch3]', 'select' => old('vehicle.exterior.image'.$value.'_csch3', isset($vehicle_check_exterior["{'image'.$value.'_csch3'}"]) ? $vehicle_check_exterior["{'image'.$value.'_csch3'}"] : ''), 'class'=> 'exterior-csch3'])
        </td>
    </tr>
@endforeach


<style>
    img.exterior-picture {
        width: 150px;
        vertical-align: middle;
    }
</style>

<script>
    $(function () {
        $(document).ready(function () {

            var real_exterior_picture_name;
            var selected_index;

            $('.exterior_picture').click(function(){
                selected_index = $(this).data('id');
                $.ajaxUploadSettings.name = 'ajax_file_upload';
            }).ajaxUploadPrompt({
                url : '{{ route("backend.{$department}.vehicle.upload_exterior_picture") }}',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                beforeSend : function () {
                    fullPath = $("input[name=ajax_file_upload]").last().val();
                    if (fullPath) {
                        var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
                        var filename = fullPath.substring(startIndex);
                        if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
                            filename = filename.substring(1);
                        }
                        real_exterior_picture_name = filename;
                    }
                },
                onprogress : function (e) {
                    if (e.lengthComputable) {
                        var percentComplete = e.loaded / e.total;
                        $( "#progressbar_exterior_picture_" + selected_index ).progressbar({
                            value: percentComplete*100,
                            complete: function () {
                                $(this).progressbar( "destroy" );
                            }
                        });
                    }
                },
                error : function () {
                    showAlertDialog("画像ファイルを選択してください。");
                },
                success : function (filename) {
                    $("#exterior_picture_path_" + selected_index).val(filename);
                    $("#exterior_picture_name_" + selected_index).val(real_exterior_picture_name);
                    $("#exterior_picture_" + selected_index).attr('src', "{{ asset('storage/temp') }}" + "/" + filename);
                    $("#delete_exterior_piture_" + selected_index).attr('data-temp_file', filename);
                    $("#delete_exterior_piture_" + selected_index).show();

                },
                accept: "image/*"
            });

            $(".delete-picture-file").click(function(){
                var basic_id = "{{ isset($vehicle_check_exterior['id']) ? $vehicle_check_exterior['id'] : 0 }}"
                var id = $(this).data('id');
                var temp_file = $("#exterior_picture_path_" + id).val();
                helper_confirm("dialog-confirm", "削除", "画像を削除します。<br />よろしいですか？", 300, "確認", "閉じる", function(){

                    $.ajax({
                        type: "post",
                        url : '{{ route("backend.{$department}.vehicle.delete_exterior_image") }}',
                        data: {
                            file_path: temp_file,
                            basic_id:basic_id,
                            _token: '{{ csrf_token() }}',
                        },
                        dataType: "json",
                        success: function(result) {
                            if (result.result_code == 'success') {
                                $("#exterior_picture_" + id).attr('src', '');
                                $("#exterior_picture_path_" + id).val('');
                                $("#delete_exterior_piture_" + id).hide();
                                $("#delete_exterior_piture_" + id).attr('temp_file', '');
                                $("#exterior_picture_name_" + id).val('');
                                showAlertDialog('削除', '画像を削除しました。');
                            } else {
                                showAlertDialog('削除', '画像の削除に失敗しました。');
                            }
                        },
                        error: function(){
                            alert('画像削除が失敗しました。');
                        },

                    });
                });
            });
        });
    });
</script>