@extends('admin._layouts.master')

@section('content')
    {!! html()->modelForm($gallery, $method,  $action)->open() !!}
    <div class="row">
        <div class="col-xl-7">
            <div class="card">
                <div class="card-header with-border">
                    <h3 class="card-title">Galeri
                        @if($editing)
                            Düzenle
                        @else
                            Oluştur
                        @endif
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name"># :</label>
                                {!! html()->text('key')->class('form-control')->readonly($editing) !!}
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="description">İsim :</label>
                                {!! html()->text('title')->class('form-control')->readonly($gallery->readonly) !!}
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="description">Açıklama :</label>
                                {!! html()->text('description')->class('form-control')->readonly($gallery->readonly) !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-right">
                    <button type="submit" class="btn btn-outline-success shadow-sm text-bold">
                        Kaydet
                    </button>
                </div>
            </div>
        </div>

        {{-------------------------------------------------------------------------------------------------------------------------------- IMAGES --}}
        <div class="col-xl-5 col-lg-12">
            <div class="card">
                <div class="card-header with-border">
                    <h3 class="card-title">Galeri (1920x520)</h3>
                    @if($editing)
                        <label id="image-create-btn" class="btn btn-success btn-xslim float-right"><i class="fa fa-plus"></i> Ekle</label>
                    @endif
                </div>
                <div class="card-body">
                    @if($editing)
                        <div id="gallery-items" class="image-gallery" data-sortable-url="{{ route('admin.sorting', 'image') }}">
                            @if(count($gallery->images))
                                @foreach($gallery->images as $image)
                                    <div class="media" data-id="{{ $image->id }}">
                                        <div class="media-left sortable-handle">
                                            <img class="media-object" src="{{ $image->getUrl('list') }}">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading editable" data-pk="{{ $image->id }}" data-name="title" data-type="text"
                                                data-url="/admin/editable/image">{{ $image->title }}</h5>
                                        </div>
                                        <div class="media-right">
                                            <label class="btn btn-sm btn-danger deletable" data-root=".media"
                                                   data-url="{{ route('admin.images.destroy', $image->id) }}">
                                                <i class="fa fa-trash"></i>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            <div class="media hidden" data-id="">
                                <div class="media-left sortable-handle">
                                    <img class="media-object" src="">
                                </div>
                                <div class="media-body">
                                    <h5 class="media-heading editable" data-pk="" data-name="title" data-url="/admin/editable/image"></h5>
                                </div>
                                <div class="media-right">
                                    <label class="btn btn-sm btn-danger deletable" data-root=".media">
                                        <i class="fa fa-trash"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning">
                            <p>Görsel eklemek için galeri kaydedin.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {!! html()->closeModelForm() !!}


@endsection
{{---------------------------------------------------------------------------------------------------------------------------------------- modals --}}
@push('modals')

    @include('admin._common.galleries.image.modal')
    @include('admin._common.galleries.image.gallery')

@endpush

@push('scripts')

    <script src="/assets/admin/js/plugin.js"></script>
    <script src="/assets/admin/js/gallery.js"></script>

    <script>
        $(function() {

            /* ------------------------------------------------------------------------------------------------------------------ image gallery -+- */
            var $imageUploadModal   = $('#image-upload-modal')
            var $imageCreateBtn = $('#image-create-btn')
            var $galleryItems   = $('#gallery-items')

            $galleryItems.sortable(SortableDefaults())

            $imageUploadModal.on('hidden.bs.modal', function() {
                $imageUploadModal.find('.modal-content').html('')
            })

            $imageUploadModal.on('image-gallery:create', imageCreated)

            // Get Create Form
            $imageCreateBtn.on('click', function() {
                $.ajax({
                    url    : '{!! route('admin.images.create', ['type' => '3', 'relationType' => 'gallery', 'relationId' => $gallery->id, 'width' => 1920, 'height' => 520]) !!}',
                    type   : 'GET',
                    success: function(data) {
                        console.log('items received!')
                        $imageUploadModal.find('.modal-content').html(data)
                        $imageUploadModal.modal()
                    }
                })
            })

            function imageCreated(e, data) {
                console.log('imageCreated!', data)
                $imageUploadModal.modal('hide')

                var $item = $galleryItems.find('.media.hidden').clone().removeClass('hidden')
                $item.attr('data-id', data.id)
                $item.find('img').attr('src', data.imageUrl)
                $item.find('.media-heading').text(data.title)
                $item.find('.deletable').deletable({
                    url : '/admin/images/' + data.id,
                    root: 'div.media'
                })
                $item.find('.editable').attr('data-pk', data.id).editable({
                    type: 'text'
                })

                $galleryItems.prepend($item)
            }

            /* ------------------------------------------------------------------------------------------------------------------ image gallery -^- */

            var sortingUrl = '{{ route('admin.sorting', 'image') }}'
            $galleryItems.sortable({
                axis                : 'y',
                items               : '.media',
                handle              : '.sortable-handle',
                tolerance           : 'pointer',
                forcePlaceholderSize: true,
                scroll              : true,
                update              : function(event, ui) {
                    var list = []
                    $galleryItems.find('.media:not(.hidden)').each(function() {
                        list.push($(this).attr('data-id'))
                    })
                    console.log(list)
                    $.ajax({
                        url    : sortingUrl,
                        method : 'POST',
                        data   : {list: list},
                        success: function(data) {
                            console.log(data)
                        }
                    })
                }
            })
        })
    </script>
@endpush