@extends('backend.layout.master-tailwind')
@section('title', __('Edit Blog'))

@section('admin_styles')
    <x-media.css />
    <link rel="stylesheet" href="{{ asset('assets/backend/css/summernote-lite.min.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
    <x-select2.select2-css />
    <style>
        .blog-create-grid {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 20px;
            align-items: start;
        }

        @media (max-width: 960px) {
            .blog-create-grid {
                grid-template-columns: 1fr;
            }
        }

        .meta-tab-bar {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--border);
            padding: 0 18px;
        }

        .meta-tab {
            padding: 9px 14px;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-3);
            border: none;
            background: none;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }

        .meta-tab.on {
            color: var(--accent, #6366f1);
            border-bottom-color: var(--accent, #6366f1);
        }

        .meta-tab:hover:not(.on) {
            color: var(--text-2);
        }

        .meta-panel {
            display: none;
            padding: 18px;
        }

        .meta-panel.on {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .slug-preview {
            font-size: 12px;
            color: var(--text-3);
            word-break: break-all;
            padding: 6px 0;
        }

        /* Tagify styling */
        .tagify {
            --tags-border-color: var(--border);
            --tags-hover-border-color: var(--border-strong);
            --tags-focus-border-color: var(--accent, #6366f1);
            --tag-bg: var(--accent, #6366f1);
            --tag-hover: color-mix(in oklch, var(--accent, #6366f1) 80%, black);
            --tag-text-color: #fff;
            --tag-text-color--edit: var(--text);
            --tag-pad: 0.3em 0.5em;
            --tag-invalidate-bg-color: var(--danger, #ef4444);
            --tag--max-width: 200px;
            --tag-hide-duration: 0.1s;
            --input-color: var(--text);
            --placeholder-color: var(--text-3);
            --placeholder-color-focus: var(--text-3);
            background: var(--surface-2);
            border-radius: 7px;
            min-height: 38px;
            font-size: 13px;
        }

        .tagify__tag {
            border-radius: 4px;
        }

        .tagify__tag > div {
            border-radius: 4px;
        }

        .tagify__tag__removeBtn {
            color: rgba(255, 255, 255, 0.7);
        }

        .tagify__tag__removeBtn:hover {
            color: #fff;
            background: rgba(0, 0, 0, 0.15);
        }

        /* Media uploader image preview */
        .img-wrap .attachment-preview {
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        .img-wrap .thumbnail,
        .img-wrap .centered {
            width: 100%;
            height: 160px;
        }
        .img-wrap .centered img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    </style>
@endsection

@section('content')

    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Edit Blog') }}</h1>
                <p class="page-sub">{{ __('Update blog post details') }}</p>
            </div>
            <div class="page-actions">
                <a href="{{ route('admin.blog.all') }}" class="btn ghost sm">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 12H5M5 12l7-7M5 12l7 7" />
                    </svg>
                    {{ __('Back') }}
                </a>
            </div>
        </div>

        <form action="{{ route('admin.blog.update', $blog->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <x-validation.error />
            <div class="blog-create-grid">

                {{-- Left: Content + Meta --}}
                <div style="display:flex;flex-direction:column;gap:20px">

                    {{-- Blog Details --}}
                    <div class="card">
                        <div style="padding:14px 18px;border-bottom:1px solid var(--border)">
                            <p style="font-size:13px;font-weight:600;margin:0">{{ __('Blog Details') }}</p>
                        </div>
                        <div style="padding:18px;display:flex;flex-direction:column;gap:14px">

                            <div>
                                <label class="field-label" for="edit_title">{{ __('Title') }}</label>
                                <input class="input wide" type="text" id="edit_title" name="title"
                                    value="{{ $blog->title }}" placeholder="{{ __('Enter blog title…') }}">
                            </div>

                            <div>
                                <label class="field-label">{{ __('Slug') }}</label>
                                <div style="display:flex;align-items:center;gap:8px">
                                    <span class="full-slug-show slug-preview">{{ $blog->slug }}</span>
                                    <button type="button" class="edit_blog_slug btn ghost sm"
                                        style="flex-shrink:0;font-size:11px">
                                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                                        </svg>
                                        {{ __('Edit') }}
                                    </button>
                                </div>
                                <input class="input wide display_label_title" style="display:none;margin-top:6px"
                                    type="text" id="edit_slug" name="slug" value="{{ $blog->slug }}"
                                    placeholder="{{ __('custom-slug') }}">
                            </div>

                            <div>
                                <label class="field-label" for="blog_content">{{ __('Content') }}</label>
                                <textarea name="blog_content" id="blog_content" class="summernote">{{ $blog->content }}</textarea>
                            </div>

                        </div>
                    </div>

                    {{-- SEO Meta --}}
                    <div class="card">
                        <div style="padding:14px 18px;border-bottom:1px solid var(--border)">
                            <p style="font-size:13px;font-weight:600;margin:0">{{ __('SEO & Meta') }}</p>
                        </div>

                        <div class="meta-tab-bar">
                            <button type="button" class="meta-tab on" data-tab="general">{{ __('Blog Meta') }}</button>
                            <button type="button" class="meta-tab" data-tab="facebook">{{ __('Facebook') }}</button>
                            <button type="button" class="meta-tab" data-tab="twitter">{{ __('Twitter') }}</button>
                        </div>

                        {{-- General Meta --}}
                        <div class="meta-panel on" id="meta-general">
                            <div>
                                <label class="field-label" for="meta_title">{{ __('Meta Title') }}</label>
                                <input class="input wide" type="text" id="meta_title" name="meta_title"
                                    value="{{ $blog?->meta_data->meta_title ?? '' }}" placeholder="{{ __('Meta title…') }}">
                            </div>
                            <div>
                                <label class="field-label" for="meta_tags">{{ __('Meta Tags') }}</label>
                                <input class="input wide" type="text" id="meta_tags" name="meta_tags"
                                    value="{{ $blog?->meta_data->meta_tags ?? '' }}" placeholder="{{ __('Add tags…') }}">
                            </div>
                            <div>
                                <label class="field-label" for="meta_description">{{ __('Meta Description') }}</label>
                                <textarea class="input wide" id="meta_description" name="meta_description" rows="3" style="resize:vertical">{{ $blog?->meta_data->meta_description ?? '' }}</textarea>
                            </div>
                        </div>

                        {{-- Facebook Meta --}}
                        <div class="meta-panel" id="meta-facebook">
                            <div>
                                <label class="field-label"
                                    for="facebook_meta_tags">{{ __('Facebook Meta Title') }}</label>
                                <input class="input wide" type="text" id="facebook_meta_tags"
                                    name="facebook_meta_tags" value="{{ $blog?->meta_data->facebook_meta_tags ?? '' }}">
                            </div>
                            <div>
                                <label class="field-label"
                                    for="facebook_meta_description">{{ __('Facebook Meta Description') }}</label>
                                <textarea class="input wide" id="facebook_meta_description" name="facebook_meta_description" rows="3"
                                    style="resize:vertical">{{ $blog?->meta_data->facebook_meta_description ?? '' }}</textarea>
                            </div>
                            <div>
                                <label class="field-label">{{ __('Facebook Meta Image') }}</label>
                                <div class="media-upload-btn-wrapper">
                                    <div class="img-wrap" style="margin-bottom:8px">
                                        {!! render_attachment_preview_for_admin($blog->meta_data->facebook_meta_image ?? '') !!}
                                    </div>
                                    <input type="hidden" name="facebook_meta_image">
                                    <button type="button" class="btn ghost sm media_upload_form_btn"
                                        data-btntitle="{{ __('Select Image') }}"
                                        data-modaltitle="{{ __('Upload Image') }}" data-bs-toggle="modal"
                                        data-bs-target="#media_upload_modal">
                                        {{ __('Upload Image') }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- Twitter Meta --}}
                        <div class="meta-panel" id="meta-twitter">
                            <div>
                                <label class="field-label" for="twitter_meta_tags">{{ __('Twitter Meta Title') }}</label>
                                <input class="input wide" type="text" id="twitter_meta_tags"
                                    name="twitter_meta_tags" value="{{ $blog?->meta_data->twitter_meta_tags ?? '' }}">
                            </div>
                            <div>
                                <label class="field-label"
                                    for="twitter_meta_description">{{ __('Twitter Meta Description') }}</label>
                                <textarea class="input wide" id="twitter_meta_description" name="twitter_meta_description" rows="3"
                                    style="resize:vertical">{{ $blog?->meta_data->twitter_meta_description ?? '' }}</textarea>
                            </div>
                            <div>
                                <label class="field-label">{{ __('Twitter Meta Image') }}</label>
                                <div class="media-upload-btn-wrapper">
                                    <div class="img-wrap" style="margin-bottom:8px">
                                        {!! render_attachment_preview_for_admin($blog->meta_data->twitter_meta_image ?? '') !!}
                                    </div>
                                    <input type="hidden" name="twitter_meta_image">
                                    <button type="button" class="btn ghost sm media_upload_form_btn"
                                        data-btntitle="{{ __('Select Image') }}"
                                        data-modaltitle="{{ __('Upload Image') }}" data-bs-toggle="modal"
                                        data-bs-target="#media_upload_modal">
                                        {{ __('Upload Image') }}
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                {{-- Right: Catalogue --}}
                <div class="card">
                    <div style="padding:14px 18px;border-bottom:1px solid var(--border)">
                        <p style="font-size:13px;font-weight:600;margin:0">{{ __('Blog Catalogue') }}</p>
                    </div>
                    <div style="padding:18px;display:flex;flex-direction:column;gap:14px">

                        <div>
                            <label class="field-label" for="category">{{ __('Category') }}</label>
                            <select name="category" id="category" class="input wide select2_category"
                                style="height:38px;appearance:auto">
                                <option value="">{{ __('Select Category') }}</option>
                                @foreach(\Modules\Service\Entities\Category::all_categories() as $data)
                                    <option value="{{ $data->id }}" @if($blog->category_id == $data->id) selected @endif>{{ $data->category }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="field-label" for="tag_name">{{ __('Blog Tags') }}</label>
                            <input type="text" class="input wide" id="tag_name" name="tag_name"
                                value="{{ $blog->tag_name }}" placeholder="{{ __('Add tags…') }}">
                        </div>

                        <div>
                            <label class="field-label" for="status">{{ __('Status') }}</label>
                            <select class="input wide" name="status" id="status"
                                style="height:38px;appearance:auto">
                                <option value="1" @if($blog->status == 1) selected @endif>{{ __('Active') }}</option>
                                <option value="0" @if($blog->status == 0) selected @endif>{{ __('Inactive') }}</option>
                            </select>
                        </div>

                        <div>
                            <label class="field-label">{{ __('Blog Image') }}</label>
                            <p style="font-size:11px;color:var(--text-3);margin:0 0 8px">
                                {{ __('Recommended: 590×320 pixels') }}</p>
                            <div class="media-upload-btn-wrapper">
                                <div class="img-wrap" style="margin-bottom:8px">
                                    @if($blog->image)
                                        {!! render_attachment_preview_for_admin($blog->image) !!}
                                    @endif
                                </div>
                                <input type="hidden" name="image" id="image" value="{{ $blog->image }}">
                                <button type="button" class="btn ghost sm media_upload_form_btn"
                                    data-btntitle="{{ __('Select Image') }}" data-modaltitle="{{ __('Upload Image') }}"
                                    data-bs-toggle="modal" data-bs-target="#media_upload_modal">
                                    {{ __('Upload Image') }}
                                </button>
                            </div>
                        </div>

                        <button type="submit" class="btn primary sm"
                            style="width:100%;justify-content:center;margin-top:4px">
                            {{ __('Update Blog') }}
                        </button>

                    </div>
                </div>

            </div>
        </form>

    </div>

    <x-media.markup />

@endsection

@section('script')
    <x-select2.select2-js />
    <x-media.js />
    <script src="{{ asset('assets/backend/js/summernote/summernote-lite.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
    @include('blog::backend.blog-js')
    <script>
        (function($) {
            'use strict';

            // Summernote
            $('#blog_content').summernote({
                disableDragAndDrop: true,
                codeviewFilter: true,
                codeviewIframeFilter: true,
                height: 320,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['Insert', ['link', 'table', 'picture']],
                ]
            });

            // Tagify initialization
            var tagifyConfig = {
                delimiters: ",",
                addTagOnBlur: true,
                enforceWhitelist: false,
                whitelist: []
            };

            var metaTagsInput = document.getElementById('meta_tags');
            if (metaTagsInput) {
                new Tagify(metaTagsInput, tagifyConfig);
            }

            var blogTagsInput = document.getElementById('tag_name');
            if (blogTagsInput) {
                new Tagify(blogTagsInput, tagifyConfig);
            }

            // Meta tabs
            $(document).on('click', '.meta-tab', function() {
                var tab = $(this).data('tab');
                $('.meta-tab').removeClass('on');
                $(this).addClass('on');
                $('.meta-panel').removeClass('on');
                $('#meta-' + tab).addClass('on');
            });

        }(jQuery));
    </script>
@endsection