@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="" 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="" 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="" 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 }}" />
                                            <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="" 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="" name="keyword" id="keyword" />
                                </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">
                                    <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">Status</label>
                                <div class="col-sm-10">
                                    <select class="form-control" data-control="select2" name="status" id="status"
                                        placeholder="Pilih Status">
                                        <option value="1">Aktif</option>
                                        <option value="0">Tidak Aktif</option>
                                    </select>
                                </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 value="1">Publish</option>
                                        <option 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"></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"></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('content', content.getData())

                    // Perform AJAX form submission
                    $.ajax({
                    url: '{{ route('master-post.store') }}',
                    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