@extends('layouts.admin')
@section('content')
    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
    <style>
        .table td {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .table th {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .ck-editor__editable {
            min-height: 400px;
        }


    </style>
    <h1 class="app-page-title">Přidání článku</h1>
    <div class="col-12">
        <div class="app-card app-card-chart h-100 shadow-sm">
            <div class="app-card-header p-3">
                <div class="row justify-content-between align-items-center">
                    <div class="col-auto">
                        <h4 class="app-card-title">Přidání článku</h4>
                    </div>
                    <!--//col-->
                    <div class="col-auto">

                        <!--//card-header-actions-->
                    </div>
                    <!--//col-->
                </div>
                <!--//row-->
            </div>
            <!--//app-card-header-->
            <div class="app-card-body p-3 p-lg-4">

                <form class="settings-form" action="/blog/add" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="setting-input-2" class="form-label">Nadpis</label>
                        <input type="text" class="form-control" id="setting-input-2" name="title" required="">
                    </div>
                    <div class="mb-3">
                        <label for="setting-input-3" class="form-label">URL odkaz</label>
                        <input type="text" class="form-control" id="setting-input-3" name="url" required="">
                    </div>
                    <div class="mb-3 row">
                        <div class="col-md-6">
                            <label for="setting-input-4" class="form-label">Kategorie</label>
                            <select name="category" class="form-select" id="settings-input-4">
                                <option value="Instagram">Instagram</option>
                                <option value="TikTok">TikTok</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="setting-input-5" class="form-label">Náhleďák</label>
                            <input type="file" style="height: auto; padding: 0.375rem 0.75rem;" class="form-control"
                                id="setting-input-5" name="image">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="seo" class="form-label">SEO popisek</label>
                        <textarea class="form-control" id="seo" name="seo" required="" style="min-height: 100px;"></textarea>
                    </div>
                    <div style="margin-bottom: 30px;">
                        <label for="text" class="form-label">Obsah článku</label>
                        <textarea class="form-control" id="text" name="text"></textarea>
                    </div>
                    <div style="text-align: center;">
                        <button type="submit" class="btn app-btn-primary"
                            style="font-size:16px; padding:8px 25px;">Zveřejnit</button>
                    </div>
                </form>

            </div>
            <!--//app-card-body-->
        </div>
        <!--//app-card-->
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $('#socials').DataTable({
                searching: false,
                ordering: false,
                paging: false
            });
        });
    </script>
    <script>
        ClassicEditor
            .create(document.querySelector('#text'), {
                // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
                toolbar: ['exportPDF', 'exportWord', '|',
                    'findAndReplace', 'selectAll', '|',
                    'heading', '|',
                    'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript',
                    'removeFormat', '|',
                    'bulletedList', 'numberedList', 'todoList', '|',
                    'outdent', 'indent', '|',
                    'undo', 'redo',
                    '-',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                    'alignment', '|',
                    'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
                    'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                    'textPartLanguage', '|',
                    'sourceEditing'
                ]
            })
            .catch(error => {
                console.error(error);
            });
    </script>
@endsection