@extends('back.layout.pages-layout')
@section('pageTitle', isset($pageTitle) ? $pageTitle : 'Page Title here')
@section('content')
    <div class="page-header">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="title">
                    <h4>Post hinzufügen</h4>
                </div>
                <nav aria-label="breadcrumb" role="navigation">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.dashboard') }}">Home</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Post erstellen
                        </li>
                    </ol>
                </nav>
            </div>
            <div class="col-md-6 col-sm-12 text-right">
                <a href="{{ route('admin.posts') }}" class="btn btn-primary">View all posts</a>
            </div>
        </div>
    </div>

    <form action="{{ route('admin.create_post') }}" method="POST" autocomplete="off" enctype="multipart/form-data"
        id="addPostForm">
        @csrf
        <div class="row">
            <div class="col-md-9">
                <div class="card card-box mb-2">
                    <div class="card-body">
                        <div class="form-group">
                            <label for=""><b>Title:</b></label>
                            <input type="text" class="form-control" name="title" placeholder="Titel angeben" />
                            <span class="text-danger error-text title_error"></span>
                        </div>
                        <div class="form-group">
                            <label for=""><b>Content:</b></label>
                            <textarea name="content" id="content" cols="30" rows="10" class="ckeditor form-control"
                                placeholder="Content eingeben"></textarea>
                            <span class="text-danger error-text content_error"></span>
                        </div>
                        <div class="form-group">
                            <label for=""><b>JSON FAQ:</b></label>
                            <textarea name="structured_data" id="structured_data" cols="30" rows="10" class="form-control"
                                placeholder="JSON FAQ eingeben"></textarea>
                            <small class="form-text text-muted">Format: <code>[{"question": "Frage?", "answer": "Antwort."}]</code> – wird als FAQ-Box unter dem Artikel angezeigt.</small>
                        </div>
                        <div class="alert alert-info small mb-0">
                            <b>Amazon-Affiliate im Content:</b><br>
                            Produktbox: <code>[amazon asin="B0XXXXXXXX" titel="Produktname" text="Warum ich es empfehle"]</code><br>
                            Ohne ASIN: <code>[amazon suche="verstellbare Kurzhanteln" titel="Verstellbare Kurzhanteln"]</code><br>
                            Textlink: <code>[amazon-link asin="B0XXXXXXXX"]Linktext[/amazon-link]</code><br>
                            Normale amazon.de-Links bekommen die Tracking-ID automatisch.<br>
                            <b>Rechner:</b> <code>[kalorienrechner]</code> fügt den Kaloriendefizit-Rechner ein.
                        </div>
                    </div>
                </div>
                <div class="card card-box mb-2">
                    <div class="card-header weight-500">SEO</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="meta_title"><b>SEO-Titel (Google):</b> <small>(optional, max. 60 Zeichen – leer = Beitragstitel)</small></label>
                            <input type="text" class="form-control seo-count" data-max="60" id="meta_title" name="meta_title" maxlength="120"
                                placeholder="z. B. Kaloriendefizit berechnen: Formel, Rechner &amp; Beispiel" />
                            <small class="form-text text-muted seo-counter"></small>
                        </div>
                        <div class="form-group">
                            <label for=""><b>Post Meta Keywords:</b>: <small>(Separated by Komma)</small></label>
                            <input type="text" class="form-control" name="meta_keywords"
                                placeholder="Meta Keywords angeben" />
                        </div>
                        <div class="form-group">
                            <label for=""><b>Post Meta Beschreibung:</b></label>
                            <textarea name="meta_description" id="meta_description" cols="30" rows="4" class="form-control seo-count" data-max="155"
                                placeholder="Meta Beschreibung eingeben"></textarea>
                            <small class="form-text text-muted seo-counter"></small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card card-box mb-2">
                    <div class="card-body">
                        <div class="form-group">
                            <label for=""><b>Post Kategorie:</b></label>
                            <select name="category" id="" class="custom-select form-control">
                                <option value="">Auswählen..</option>
                                {!! $categories_html !!}
                            </select>
                            <span class="text-danger error-text category_error"></span>
                        </div>
                        <div class="form-group">
                            <label for=""><b>Post Featured Foto:</b></label>
                            <input type="file" class="form-control-file form-control" name="featured_image"
                                id="featured_image_input" height="auto" accept="image/png,image/jpeg, image/jpg" />
                            <span class="text-danger error-text featured_image_error"></span>
                        </div>
                        <div class="d-block mb-3" style="max-width:250px;">
                            <img src="" alt="featured_image" class="img-thumbnail" id="featured_image_preview" />
                        </div>
                        <div class="form-group">
                            <label for=""><b>Tags:</b></label>
                            <input type="text" class="form-control" name="tags" data-role="tagsinput" />
                        </div>
                        <hr>
                        <div class="form-group">
                            <label for=""><b>Sichtbar:</b></label>
                            <div class="custom-control custom-radio mb-5">
                                <input type="radio" name="visibility" id="customRadio1" class="custom-control-input"
                                    value="1" checked />
                                <label for="customRadio1" class="custom-control-label">Öffentlich</label>
                            </div>
                            <div class="custom-control custom-radio mb-5">
                                <input type="radio" name="visibility" id="customRadio2" class="custom-control-input"
                                    value="0" />
                                <label for="customRadio2" class="custom-control-label">Privat</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-3">
            <button type="submit" class="btn btn-primary">Post erstellen</button>
        </div>
    </form>

@endsection
@push('stylesheets')
    <style>
        /* Schlichter Container */
        .bootstrap-tagsinput {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
            /* Abstand zwischen Tags/Eingabe */
            width: 100%;
            min-height: 40px;
            padding: 6px 8px;
            background-color: #ffffff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            /* keine Ei-Form mehr */
            box-shadow: none;
            font-size: 14px;
            line-height: 1.4;
            cursor: text;
        }

        /* Eingabefeld */
        .bootstrap-tagsinput input {
            border: none;
            box-shadow: none;
            outline: none;
            background: transparent;
            padding: 2px 0;
            margin: 0;
            min-width: 80px;
            max-width: 100%;
            font-size: 14px;
            color: #111827;
        }

        /* Placeholder */
        .bootstrap-tagsinput.form-control input::-moz-placeholder {
            color: #9ca3af;
            opacity: 1;
        }

        .bootstrap-tagsinput.form-control input:-ms-input-placeholder {
            color: #9ca3af;
        }

        .bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
            color: #9ca3af;
        }

        /* Tags */
        .bootstrap-tagsinput .tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 10px;
            border-radius: 999px;
            background: #2563eb;
            color: #ffffff;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            margin: 0;
            /* Abstand kommt über gap */
        }

        /* Remove-Icon */
        .bootstrap-tagsinput .tag [data-role="remove"] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border-radius: 999px;
            cursor: pointer;
            font-size: 11px;
            line-height: 1;
            background-color: rgba(15, 23, 42, 0.25);
            margin-left: 0;
        }

        .bootstrap-tagsinput .tag [data-role="remove"]:after {
            content: "×";
        }

        /* leichtes Hover nur auf dem Icon */
        .bootstrap-tagsinput .tag [data-role="remove"]:hover {
            background-color: rgba(15, 23, 42, 0.4);
        }
    </style>
@endpush
@push('scripts')
    <script src="/back/src/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
    <script src="/ckeditor/ckeditor.js"></script>
    // Image Preview
    <script>
        document.getElementById("featured_image_input").addEventListener("change", function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();

            reader.onload = function(event) {
                document.getElementById("featured_image_preview").src = event.target.result;
            };
            reader.readAsDataURL(file);
        });
    </script>
    // Create Post
    <script>
        $('#addPostForm').on('submit', function(e) {
            e.preventDefault();
            var form = this;
            var content = CKEDITOR.instances.content.getData();
            var formdata = new FormData(form);
            formdata.append('content', content);

            $.ajax({
                url: $(form).attr('action'),
                method: $(form).attr('method'),
                data: formdata,
                processData: false,
                dataType: 'json',
                contentType: false,
                beforeSend: function() {
                    $(form).find('span.error-text').text('');
                },
                success: function(data) {
                    if (data.status == 1) {
                        $(form)[0].reset();
                        CKEDITOR.instances.content.setData('');
                        $('img#featured_image_preview').attr('src', '');
                        $('input[name="tags"]').tagsinput('removeAll');
                        toastr.success(data.message);
                    } else {
                        toastr.error(data.message);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('AJAX error', textStatus, errorThrown);
                    console.log('Response:', jqXHR);

                    if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                        $.each(jqXHR.responseJSON.errors, function(prefix, val) {
                            $(form).find('span.' + prefix + '_error').text(val[0]);
                        });
                    } else {
                        toastr.error('Es ist ein unerwarteter Fehler aufgetreten.');
                    }
                }
            });
        });
    </script>
@endpush

@push('scripts')
<script>
    document.querySelectorAll('.seo-count').forEach(function (el) {
        var out = el.parentNode.querySelector('.seo-counter');
        var max = parseInt(el.dataset.max, 10);
        var upd = function () {
            var n = el.value.length;
            out.textContent = n + ' / ' + max + ' Zeichen' + (n > max ? ' – wird in Google abgeschnitten' : '');
            out.style.color = n > max ? '#dc3545' : '';
        };
        el.addEventListener('input', upd); upd();
    });
</script>
@endpush