@extends('admin.layout.layout')

@section('title', 'İlan Resimleri')

@section('styles')
    @parent
    {{-- <link rel="stylesheet" href="{{ asset('assets/plugins/dropzone/dropzone.min.css') }}"/> 
    <link rel="stylesheet" href="{{ asset('assets/plugins/dropzone/dropzone-custom.css') }}"/>  --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">

    <style>
        .dz-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .dz-remove {
            text-decoration: underline;
            color: #222;
        }
    </style>
@stop

@section('content')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb bg-transparent p-0 text_small">
        <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Admin</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.properties.index') }}">İlanlar</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ $property->slug }}</li>
        <li class="breadcrumb-item active" aria-current="page">İlan Resimleri</li>
    </ol>
</nav>
{{-- {{ dd($cities->first()->district->first()->neighborhood->first()->name) }} --}}
<section class="mb-5 pb-5">
    <header class="border-bottom my-4">
        <h3 class="text-primary font-weight-light"><i class="fas fa-sign"></i>İlan Kaydet</h3>
    </header>
    <div class="py-3">
        <div class="wizard-content bg-white rounded border shadow-sm py-3 py-md-4 py-lg-5 px-3 px-md-4 px-lg-5">
            {{-- <form method="post" action="{{ route('admin.imageUpload', ['slug' => $property->slug]) }}" enctype="multipart/form-data" 
                  class="dropzone" id="dropzone">
                @csrf
                
            </form> --}}
            <form method="post" action="{{ route('admin.imageUpload', ['slug' => $property->slug]) }}" enctype="multipart/form-data" class="dropzone" id="dropzone" style="border: 2px dashed #e6e6e6;border-radius: 0px;">
                @csrf
                <div class="dz-default dz-message" style="display: block !important;"></div>

                {{-- @foreach (Storage::allFiles($property->post->images_folder) as $image)
                    <div class="dz-preview dz-processing dz-image-preview dz-success">
                        <div class="">
                            <img data-dz-thumbnail=""
                            src="{{ Storage::url($image) }}"
                            class="img-fluid" style="min-width: 250px;max-width: 175px;height: 175px;object-fit:cover;">
                        </div>
                    </div>
                @endforeach --}}

            </form>
            <div class="col-12 text-center" style="margin-top: 50px;">
                <a href="{{ route('admin.properties.index') }}" class="btn btn-primary">Bitir</a>
            </div>
        </div>
    </div>

</section>
@stop

@section('scripts')
    {{-- @parent --}}
    {{-- <script src="{{ asset('assets/plugins/dropzone/dropzone.min.js') }}"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
    <!-- Dropzone https://www.dropzonejs.com/ -->
    <script type="text/javascript">
    Dropzone.autoDiscover = false;
    $(document).ready(function () {

        var media = {!! $media !!};

        // Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#dropzone", 
        {
            maxFilesize: 3,  // 3 mb
            acceptedFiles: ".jpeg,.jpg,.png,.pdf",
            addRemoveLinks: true,
            success: function (file, response) {
                // console.log(response);
                if (response.valid !== true) {
                    $(file.previewElement).addClass("dz-error").find('.dz-error-message').done("Processing error");
                } else {
                    file.id = response.id;
                }
            },
            error: function (file, response) {
                $(file.previewElement).addClass("dz-error").find('.dz-error-message').text('Upload error');
                return false;
            },
            removedfile: function (file) {
                // console.log(file    );
                // var name = file.upload.id;
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    type: 'POST',
                    url: "{!! route('admin.imageDelete', ['slug' => $property->slug]) !!}",
                    data: {_image: file.id},
                    success: function (data) {
                        if (data.valid === true) {
                            var fileRef;
                            return (fileRef = file.previewElement) != null ? fileRef.parentNode.removeChild(file.previewElement) : void 0;
                        }
                    },
                    error: function (e) {
                    }
                });
            },
            init: function () {
                // $(".dz-remove").html("<div><span class='fa fa-trash text-danger' style='font-size: 1.5em'></span></div>");
                // var mockFile = { name: "myimage.jpg", size: 12345, type: 'image/jpeg' };
                // this.options.addedfile.call(this, mockFile);
                // this.options.thumbnail.call(this, mockFile, "http://someserver.com/myimage.jpg");
                // mockFile.previewElement.classList.add('dz-success');
                // mockFile.previewElement.classList.add('dz-complete');
            }
        }
        );

        myDropzone.on("sending", function (file, xhr, formData) {
            formData.append("_token", document.querySelector('meta[name="csrf-token"]').getAttribute("content"));
            // formData.set('_product', _p);
        });

        media.forEach(v => {
            var mockFile = {name: v.name, size: v.size, type: v.type, id: v.id};
            myDropzone.options.addedfile.call(myDropzone, mockFile);
            myDropzone.options.thumbnail.call(myDropzone, mockFile, v.url);
            mockFile.previewElement.classList.add('dz-success');
            mockFile.previewElement.classList.add('dz-complete');
        });

        $('.dz-remove').html('Resmi Sil');

    });
    </script>
@endsection