@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 bearbeiten</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 bearbeiten
                        </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.update_post', ['post_id' => $post->id]) }}" method="POST" autocomplete="off"
        enctype="multipart/form-data" id="updatePostForm">
        @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"
                                value="{{ $post->title }}" />
                            <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">{!! $post->content !!}</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">{!! $post->structured_data !!}</textarea>
                        </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=""><b>Post Meta Keywords:</b>: <small>(Separated by Komma)</small></label>
                            <input type="text" class="form-control" name="meta_keywords"
                                value="{{ $post->meta_keywords }}" placeholder="Meta Keywords angeben" />
                        </div>
                        <div class="form-group">
                            <label for=""><b>Post Meta Beschreibung:</b></label>
                            <textarea name="meta_description" id="" cols="30" rows="10" class="form-control"
                                placeholder="Meta Beschreibung eingeben">{{ $post->meta_description }}</textarea>
                        </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">
                                {!! $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="/images/posts/resized/resized_{{ $post->featured_image }}" 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"
                                value="{{ $post->tags }}" />
                        </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" {{ $post->visibility == 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" {{ $post->visibility == 0 ? 'checked' : '' }} />
                                <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 bearbeiten</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>
        $('#updatePostForm').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();
                        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