@extends('backend.layouts.app')

@section('title')
    レンタル車種画像管理
@endsection

@section('content')
    <div id="wrapper">
        <div id="r-content">
            <h2 class="title">レンタル車種画像管理</h2>


            {{ Form::open(["route"=>"backend.rental.vehicle.save_rental_car_type", "method"=>"post"]) }}

            <table class="normal">
                @foreach(config('const.contact_search_type') as $key=>$type)
                    <tr>
                        <th>{{ $type }}</th>
                        <td>
                            <div class="file-wrap dropzone" data-id="{{ $key }}" id="dropZoneBox{{$key}}">
                                @php
                                    $k_file_path = 'file_path'.$key;
                                    $image_path = old('img_path.'.$key, isset($arr_types[$key]) ?  $arr_types[$key]->img_path : '');
                                    $image_url = '';
                                    if(isset($arr_types[$key]) && Storage::disk('rental_car_type')->exists($image_path)) {
                                        $image_url = asset("storage/rental_car_type/" . $image_path);
                                    }
                                    if(Storage::disk('temp')->exists($image_path)) {
                                        $image_url = asset("storage/temp/" . $image_path);
                                    }
                                @endphp

                                <a target="_blank" href="{{ $image_url }}" id="addition_file_link{{ $key }}" data-id="{{ $key }}" class="img-link {{ $image_url ? '' : 'hide' }}">
                                    <span id="addition_file_span{{ $key }}"></span>
                                    <img id="addition_file_img{{ $key }}" src="{{ $image_url }}">
                                </a>

                                <input type="hidden" name="img_path[{{ $key }}]" id="addition_file_path{{ $key }}" value="{{ $image_path }}">
                                <div class="file-box">
                                    <label id="addition_file_upload{{ $key }}">ファイル選択</label>
                                    <label class="delete-file minus {{ $image_url ? '' : 'hide' }} " id="addition_file_delete{{ $key }}" data-file_path="{{ $image_path }}" data-id="{{ $key }}">削除</label>
                                </div>
                            </div>
                            @error('img_path.'.$key)
                                <span class="error_text">{{ $message }}</span>
                            @enderror
                        </td>
                    </tr>
                @endforeach
            </table>

            <div class="center-submit double">
                <input type="submit" value="保存">
            </div>
            {{ Form::close() }}
        </div>
    </div>
@endsection

@section('page_css')
    <link href="{{ asset('vendor/dropzone/dropzone.css') }}?20201006" rel="stylesheet">

    <style>
        .dropzone {
            min-height: 50px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            background: white;
        }
        .dropzone .dz-message {
            display: none !important;
        }
        .dropzone img {
            width: 200px;
        }

        .dropzone .img-link {
            display: block;
        }
        div.addition_file_box {
            display: inline-block !important;
        }
        .file-wrap label.minus {
            margin-left: 10px;
            min-width: unset !important;
        }

        .hide {
            display: none !important;
        }
    </style>
@endsection

@section('page_js')
    <script src="{{ asset('vendor/dropzone/dropzone.js') }}"></script>

    <script>
        Dropzone.autoDiscover = false;
        $(document).ready(function () {
            @foreach(config('const.contact_search_type') as $key=>$type)

                $("#dropZoneBox{{ $key }}").dropzone({
                    autoProcessQueue : true,
                    clickable:"#addition_file_upload{{ $key }}",
                    //maxFilesize:1,
                    acceptedFiles : "image/*",
                    maxFiles:1,
                    url:"{{ route("backend.rental.vehicle.upload_file") }}",
                    params:{
                        "_token":"{{ csrf_token() }}"
                    },
                    dictDefaultMessage:"",
                    dictRemoveFileConfirmation:1,
                    addRemoveLinks:false,
                    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) {
                        let data = JSON.parse(file.xhr.response);
                        let src = "{{ asset('storage/temp') }}" + "/" + data.file_path;
                        $("#addition_file_path{{ $key }}").val(data.file_path);
                        $("#addition_file_link{{ $key }}").attr('href', src);
                        $("#addition_file_link{{ $key }}").removeClass('hide');

                        $("#addition_file_img{{ $key }}").attr('src', src)
                        $("#addition_file_img{{ $key }}").removeClass('hide');
                        $("#addition_file_span{{ $key }}").empty();

                        $("#addition_file_delete{{ $key }}").attr('data-file_path', data.file_path);
                        $("#addition_file_delete{{ $key }}").removeClass('hide');
                    }
                });
            @endforeach

            $(".delete-file").click(function () {
                let file_path = $(this).data('file_path');
                let index = $(this).data('id');
                if(confirm("ファイルを削除します。よろしいですか？")){
                    $.ajax({
                        type: 'post',
                        url: "{{ route("backend.rental.vehicle.delete_file") }}",
                        data: {
                            'file_path':file_path,
                            _token: "{{ csrf_token() }}",
                        },
                        success: function() {
                            $("#addition_file_path" + index).val('');
                            $("#addition_file_link" + index).attr('href', '#');
                            $("#addition_file_delete" + index).attr('data-file_path');
                            $("#addition_file_delete" + index).addClass('hide');
                            $("#addition_file_img" + index).addClass('hide');
                            $("#addition_file_img" + index).attr('src', '');
                            $("#addition_file_span" + index).empty();
                        }
                    });
                }
            });

        });
    </script>
@endsection