@extends('admin._layouts.master')

@section('content')

    {!! html()->modelForm($article, $method, $action)->open() !!}
    <div class="row">
        <div class="col-xl-8 col-lg-10 col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Hizmet Bilgileri</h3>
                </div>
                <div class="card-body">

                    <label>Görsel (640x360)</label>
                    <label for="image" class="image w100 clickable">
                        <div>
                            <img id="image-preview" class="image-preview w100"
                                 src="{{ $article->image ? $article->image->getUrl('default') : '/assets/images/placeholder.png' }}">
                            <input type="hidden" name="image_id" value="{{ object_get($article, 'image.id') }}">
                        </div>
                    </label>


                    <div class="form-group">
                        <label for="title">Başlık :</label>
                        {!! html()->text('title') ->class('form-control') !!}
                    </div>

                    <div class="form-group">
                        <label for="body">Detay :</label>
                        {!! html()->textarea('body')->class('form-control ckeditor') !!}
                    </div>

                    <br>
                    <div class="input-group">
                        <input class="btn-lg" type="checkbox" name="is_published" value="1" {{ $article->is_published ? 'checked' : '' }}
                        data-toggle="toggle" data-on="Yayında" data-off="Taslak" data-size="small" data-onstyle="success"
                               data-offstyle="warning">
                    </div>

                </div>
            </div>
        </div>

        <div class="col-xl-8 col-lg-10 col-12">
            <div class="card">
                <div class="card-header with-border">
                    <h3 class="card-title">Arama Motoru Optimizasyonu (SEO)</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <div class="alert alert-info">
                            <i class="fa fa-question-circle"></i>&nbsp;&nbsp;
                            Title, tarayıcı sekmesinde ve arama sonuçlarında gözüken sayfa başlığıdır.
                            <br>
                            <b>Varsayılan değer</b> : "<i>[Sayfa Adı]</i> | metinaytemur.com"
                        </div>

                        <div class="form-group">
                            {!! html()->label('meta[title]', 'Title') !!}
                            {!! html()->text('meta[title]', $article->getMeta('title'))->class('form-control') !!}
                        </div>
                        <div class="form-group">

                            <div class="alert alert-info">
                                <i class="fa fa-question-circle"></i>&nbsp;&nbsp;
                                Meta description, sayfa içeriğinin kısa bir özetidir. Sadece arama sonuçlarının açıklama kısımında görünür.<br>
                                Arama motorları zaman zaman açıklama kısımını sayfa içeriğinden de alabilmektedir.
                            </div>
                            {!! html()->label('meta[description]', 'Meta Description') !!}
                            {!! html()->textarea('meta[description]', $article->getMeta('description'))->class('form-control')->rows(6) !!}
                        </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>

        {!! html()->closeModelForm() !!}
    </div>


@endsection

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

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

@endpush

@push('scripts')

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

    <script>
        (function() {
            window.addEventListener('load', () => {

                const galleryModal = document.getElementById('image-gallery-modal')
                const imageInput   = document.querySelector('[name="image_id"]')
                const imagePreview = document.getElementById('image-preview')

                galleryModal.addEventListener('select-image.Gallery', e => {
                    imagePreview.setAttribute('src', e.detail.baseUrl.replace('{size}', 'index'))
                    imageInput.value = e.detail.id
                })

                const imageGallery = gallery(galleryModal, {
                    type        : 2,
                    relationType: 'article',
                    relationId  : '{{ $article->id }}',
                    url         : '{{ route('admin.images.index') }}'
                })

                imagePreview.addEventListener('click', () => {
                    imageGallery.show()
                })
            })
        })()
    </script>
@endpush