@extends('layouts.admin')
@section('content')
    <section class="content-header">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card card-info card-outline card-outline-tabs">
                            <div class="card-header p-0 border-bottom-0">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="description_tab" data-toggle="pill"
                                           href="#description_pane">Descriere</a>
                                    </li>
                                    @if($product->exists)
                                        <li class="nav-item">
                                            <a class="nav-link" id="photo_tab" data-toggle="pill"
                                               href="#photo_pane">Poze</a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="tab-pane fade active show" id="description_pane">
                                        @include('admin.product.partial.main')
                                    </div>
                                    <div class="tab-pane fade" id="photo_pane">
                                        <div class="photo-success">
                                            @include('admin.product.partial.photo')
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script src="{{ asset('assets/admin/plugins/dropzone/dropzone.js') }}"></script>
    <script src="{{ asset('assets/admin/plugins/jquery-ui/jquery-ui.js') }}"></script>
    <script>
        function uploadedImages() {
            $.ajax({
                url: $('.uploaded-images').data('url'),
                type: 'get',
            }).done(function (data) {
                $('.uploaded-images').html(data);
                m_sortable();
                // console.log('sortable restarted?');
            });
        }

        Dropzone.options.myDropzone = {
            init: function () {
                this.on("queuecomplete", function (data) {
                    uploadedImages();
                });
            }
        }

        function m_sortable() {
            //Sort photos
            $('.sortable').sortable({
                stop: function () {
                    $.ajax({
                        url: $('.sortable').data('url'),
                        type: 'POST',
                        data: $(this).sortable('serialize') + '&product_id=' + $('.sortable').data('product'),
                    }).done(function () {
                        uploadedImages();
                    });
                }
            });
        }

        //Delete photo
        function m_delete() {
            $(document).on('click', '.delete-bar', function () {
                if (confirm('Sigur vreti sa stergeti imaginea?')) {
                    $.ajax({
                        url: $(this).data('url'),
                        type: 'get'
                    }).done(function (data) {
                        uploadedImages();
                    });
                }
            });
        }

        $(function () {
            // // Summernote
            // $('#description_ro, #description_en, #description_de, #description_hu, #specifications_ro, #specifications_en, #specifications_de, #specifications_hu').summernote({
            //     height: 300,
            //     toolbar: [
            //         ['cleaner', ['cleaner']],
            //         ['font', ['bold', 'underline', 'italic', 'clear']],
            //         // ['fontname', ['fontname']],
            //         ['color', ['color']],
            //         ['para', ['ul', 'ol', 'paragraph']],
            //         ['table', ['table']],
            //         // ['insert', ['link', 'picture', 'video']],
            //         ['insert', ['link']],
            //         ['view', ['fullscreen', 'codeview', 'help']]
            //     ]
            // });
            // Dropzone.autoDiscover = false;
            //Ajax setup, add csrf field
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
            });
            m_delete();
            m_sortable();
        })
    </script>
@endsection