@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="/storage/temp/{{ old('vehicle.exterior.image' . $value . '_path') }}">
                @else
                    @if(is_object($vehicle_check_exterior) &&  ($vehicle_check_exterior->{'image'.$value.'_path'}))
                        <img id="exterior_picture_{{$value}}" class="exterior-picture" src="/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') }}"/>
                <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-temp_file="" style="display: 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', is_object($vehicle_check_exterior) ? $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', is_object($vehicle_check_exterior) ? $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', is_object($vehicle_check_exterior) ? $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', '/storage/temp/'+filename);
                    /* $("#delete_pic_temp_file_0").attr('data-temp_file', filename);
                     $("#delete_pic_temp_file_0").show();*/

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

        });
    });
</script>