@extends('admin.template.layout')

@section('css')
@endsection

@section('page-title')
@endsection

@section('content')
    <!--begin::Tables Widget 13-->
    <div class="card mb-5 mb-xl-8">
        <form method="POST" id="form" action="{{ route('master-post.store') }}">
            @csrf
            <div class="card mb-5 mb-xl-8">
                <div class="card-body ps-10 mt-1">
                    <div class="judul mt-3">Post</div>
                    <div class="row mt-3">
                        <div class="col-md-6 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Nama Post</label>
                                <div class="col-sm-10">
                                    <input type="text" name="name" id="name" value="{{ $post->name }}"
                                        class="form-control" placeholder="Masukkan Menu" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Route/url</label>
                                <div class="col-sm-10">
                                    <input type="text" id="route" name="route" value="{{ $post->link }}"
                                        class="form-control" placeholder="Masukkan Route" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Tanggal Publish</label>
                                <div class="col-sm-10">
                                    <input type="text" name="date" value="{{ $post->publish_date }}"
                                        class="form-control tanggal" placeholder="Masukkan Tanggal Publish"
                                        autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Menu</label>
                                <div class="col-sm-10">
                                    @forelse ($menu as $item)
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" name="menu[]" type="checkbox"
                                                value="{{ $item->id }}" id="{{ $item->id }}"
                                                @checked($post->menu()->where('ms_dynamic_menu_id', $item->id)->exists()) />
                                            <label class="form-check-label" for="{{ $item->id }}">
                                                {{ $item->name }}
                                            </label>
                                        </div>
                                    @empty
                                        <div>
                                            <p class="text-muted">Menu Tidak Tersedia. Tambahkan menu dengan tipe list <a
                                                    href="{{ route('master-menu.create') }}">disini</a></p>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Tag</label>
                                <div class="col-sm-10">
                                    <input class="form-control" value="{{ $post->tag }}" name="tag" id="tag" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Keyword</label>
                                <div class="col-sm-10">
                                    <input class="form-control" value="{{ $post->keyword }}" name="keyword"
                                        id="keyword" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Status</label>
                                <div class="col-sm-10">
                                    <select class="form-control" data-control="select2" name="status" id="status"
                                        placeholder="Pilih Status">
                                        <option @selected($post->status == 1) value="1">Aktif</option>
                                        <option @selected($post->status == 0) value="0">Tidak Aktif</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Thumbnail</label>
                                <div class="col-sm-10">
                                    <img src="{{ asset($post->thumbnail) }}" class="img-fluid mb-2" alt="">
                                    <input type="file" class="form-control" value="" name="thumbnail"
                                        id="thumbnail" required />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-4">
                            <div class="form-group row">
                                <label class="form-label required">Publish</label>
                                <div class="col-sm-10">
                                    <select class="form-control" data-control="select2" name="publish" id="publish"
                                        placeholder="Pilih Status">
                                        <option @selected($post->publish == 1) value="1">Publish</option>
                                        <option @selected($post->publish == 0) value="0">Unpublish</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mt-4 content-container">
                            <div class="form-group row">
                                <label class="form-label">Deskripsi</label>
                                <div class="col-sm-12">
                                    <textarea class="form-control" name="description" id="" rows="3">{{ $post->description }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mt-4 content-container">
                            <div class="form-group row">
                                <label class="form-label">Content</label>
                                <div class="col-sm-12">
                                    <div id="kt_docs_ckeditor_document_toolbar_content"></div>
                                    <div name="ckeditor" id="kt_docs_ckeditor_document_content">{!! $post->content !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col d-flex flex-column">
                    <div class="card-footer">
                        <button type="submit" id="btn-submit" class="btn btn-success">Simpan</button>
                        <a href="{{ route('master-post.index') }}" class="btn btn-secondary">Batal</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <link href="{{ asset('plugins/custom/jstree/jstree.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/custom/jstree/jstree.bundle.js') }}"></script>
    <script src="{{ asset('plugins/custom/ckeditor/ckeditor-document.bundle.js') }}" type="text/javascript"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>

    <script>
        $(document).ready(function() {
            $(".tanggal").flatpickr({
                locale: "id", // format date indonesia
            });

            new Tagify(document.querySelector('input[name=tag]'))
            new Tagify(document.querySelector('input[name=keyword]'))

            // Convert To Slug
            function convertToSlug(Text) {
                return Text.toLowerCase()
                    .replace(/ /g, "-")
                    .replace(/[^\w-]+/g, "");
            }

            $('#name').on('input', function() {
                $('#route').val(convertToSlug(this.value));
            });

            $('#route').on('input', function() {
                $('#route').val(convertToSlug(this.value));
            });

            var form = $('#form');
            var content;

            DecoupledEditor.create(document.querySelector('#kt_docs_ckeditor_document_content'), {
                ckfinder: {
                    uploadUrl: '{{ route('CKEditor.store') . '?_token=' . csrf_token() }}',
                }
            }).then(editor => {
                const toolbarContainer = document.querySelector(
                    '#kt_docs_ckeditor_document_toolbar_content');
                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
                content = editor;
            }).catch(error => {});
            $('#btn-submit').click(function(e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin menyimpan?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire("Silahkan Tunggu ....");
                        Swal.showLoading();

                        var tag = $('#tag').val();
                        if (tag) {
                            // Parse the JSON data
                            var inputValues = JSON.parse(tag);

                            // Process the parsed values
                            var tagValues = [];
                            inputValues.forEach(function(tag) {
                                tagValues.push(tag.value);
                            });
                            $('input[name="tag"]').val(tagValues.join(','));
                        }

                        var keyword = $('#keyword').val();
                        if (keyword) {
                            // Parse the JSON data
                            var inputValues = JSON.parse(keyword);

                            // Process the parsed values
                            var tagValues = [];
                            inputValues.forEach(function(keyword) {
                                tagValues.push(keyword.value);
                            });
                            $('input[name="keyword"]').val(tagValues.join(','));
                        }

                        // Create a new FormData object to include form data
                        var formData = new FormData(form[0]);

                        // Add the CSRF token to the form data
                        formData.append('_token', $('input[name="_token"]').val());
                        formData.append('_method', 'PUT')
                        formData.append('content', content.getData())

                        // Perform AJAX form submission
                        $.ajax({
                            url: '{{ route('master-post.update', $post) }}',
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            beforeSend: function() {
                                Swal.fire({
                                    title: 'Silahkan tunggu',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false
                                });
                                Swal.showLoading();
                            },
                            success: function(response) {
                                if (response.status == true) {
                                    Swal.fire({
                                        text: "Data berhasil disimpan",
                                        icon: "success",
                                    }).then(() => {
                                        window.location.href =
                                            `{{ route('master-post.index') }}`;
                                    });
                                } else {

                                    errorForm(response.pesan);
                                }
                            },
                            error: function(xhr) {
                                console.log(xhr);
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: xhr.responseJSON.message,
                                    icon: 'warning'
                                });
                            },
                            complete: function() {
                                Swal.hideLoading();
                            }
                        });
                    }
                });
            });
        });


        //tag input
        var input1 = document.querySelector("#smt-tags");
        new Tagify(input1);
    </script>
@endsection