@extends('user-panelv2.layouts.userv2')
@section('head')
    <link rel="stylesheet" type="text/css"
          href="{{asset('user-panel/app-assets/vendors/css/editors/quill/katex.min.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{asset('user-panel/app-assets/vendors/css/editors/quill/monokai-sublime.min.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{asset('user-panel/app-assets/vendors/css/editors/quill/quill.snow.css')}}">


    <link rel="stylesheet" type="text/css" href="{{asset('user-panel/app-assets/css/pages/page-blog.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{asset('user-panel/app-assets/css/plugins/forms/pickers/form-flat-pickr.css')}}">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css"
          href="{{asset('user-panel/app-assets/css/plugins/forms/form-quill-editor.css')}}">
    <!-- END: Page CSS-->

    <style>
        .blur-me {
            filter: blur(5px); /* Adjust the blur level as needed */
            width: 100%;
            height: 100%;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent overlay */
            color: red; /* Text color */
            font-size: 30px; /* Adjust text size as needed */
        }

    </style>
@endsection

@section('content-header')
    <div class="content-header-left col-md-9 col-12 mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">
                <h2 class="content-header-title float-left mb-0">Yazı Əlavə Et</h2>
                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        {{--                                <li class="breadcrumb-item"><a href="index.html">Home</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="breadcrumb-item"><a href="#">Pages</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="breadcrumb-item"><a href="#">Blog</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="breadcrumb-item active">Edit--}}
                        {{--                                </li>--}}
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection
<!-- BEGIN: Content-->
@section('content')
    <!-- Blog Edit -->
    <div class="blog-edit-wrapper">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="media">
                            <div class="avatar mr-75">
                                <img src="{{ asset('user-panel/app-assets/images/portrait/small/avatar-s-9.jpg')}}"
                                     width="38" height="38" alt="Avatar"/>
                            </div>
                            <div class="media-body">
                                <h6 class="mb-25">{{ \Illuminate\Support\Facades\Auth::user()->username }}</h6>
                                <p class="card-text">{{ date('F d, Y') }}</p>
                            </div>
                        </div>
                        <!-- Form -->
                        <form id="blog-form" action="{{route('userv2.addBlogApi')}}" method="POST" class="mt-2"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-2">
                                        <label for="blog-edit-title">{{ __('forms.title') }}</label>
                                        <input type="text" name="title" id="blog-edit-title" class="form-control"
                                               value="The Best Features Coming to iOS and Web design"/>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-2">
                                        <label for="blog-edit-category">{{ __('forms.category') }}</label>
                                        <select name="cat[]" id="blog-edit-category" class="select2 form-control"
                                                multiple>
                                            @foreach($cats as $cat)
                                                <option value="{{$loop->iteration}}" @if($loop->iteration == 1) selected @endif >{{$cat->b_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                {{--                                <div class="col-md-6 col-12">--}}
                                {{--                                    <div class="form-group mb-2">--}}
                                {{--                                        <label for="blog-edit-slug">{{ __('forms.slug') }}</label>--}}
                                {{--                                        <input type="text" id="blog-edit-slug" class="form-control"--}}
                                {{--                                               value="the-best-features-coming-to-ios-and-web-design"/>--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}
                                <!-- <div class="col-md-6 col-12">
                                    <div class="form-group mb-2">
                                        <label for="blog-edit-status">{{ __('forms.status') }}</label>
                                        <select class="form-control" id="blog-edit-status">
                                            <option value="Published">Published</option>
                                            <option value="Pending">Pending</option>
                                            <option value="Draft">Draft</option>
                                        </select>
                                    </div>
                                </div> -->
                                <div class="col-12">
                                    <div class="form-group mb-2">
                                        <label>{{ __('forms.content') }}</label>
                                        <div id="blog-editor-wrapper">
                                            <div id="blog-editor-container">
                                                <div class="editor">
                                                    <!-- Quill editor content will go here -->
                                                    <p>
                                                        Cupcake ipsum dolor sit. Amet dessert donut candy chocolate bar
                                                        cotton dessert candy
                                                        chocolate. Candy muffin danish. Macaroon brownie jelly beans
                                                        marzipan cheesecake oat cake.
                                                        Carrot cake macaroon chocolate cake. Jelly brownie jelly.
                                                        Marzipan pie sweet roll.
                                                    </p>
                                                    <p><br/></p>
                                                    <p>
                                                        Liquorice dragée cake chupa chups pie cotton candy jujubes bear
                                                        claw sesame snaps. Fruitcake
                                                        chupa chups chocolate bonbon lemon drops croissant caramels
                                                        lemon drops. Candy jelly cake
                                                        marshmallow jelly beans dragée macaroon. Gummies sugar plum
                                                        fruitcake. Candy canes candy
                                                        cupcake caramels cotton candy jujubes fruitcake.
                                                    </p>

                                                </div>
                                            </div>
                                            <textarea rows="3" class="mb-3 d-none" name="editor1"
                                                      id="quill-content"></textarea>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-2">
                                    <div class="border rounded p-2">
                                        <h4 class="mb-1">{{ __('forms.image') }}</h4>
                                        <div class="media flex-column flex-md-row">
                                            <img src="{{ asset('user-panel/app-assets/images/slider/03.jpg')}}"
                                                 id="blog-feature-image" class="rounded mr-2 mb-1 mb-md-0" width="170"
                                                 height="110" alt="Blog Featured Image"/>
                                            <div class="media-body">
                                                <small class="text-muted">Required image resolution 800x400, image size
                                                    10mb.</small>
                                                <p class="my-50">
                                                    <a href="javascript:void(0);" id="blog-image-text">C:\fakepath\banner.jpg</a>
                                                </p>
                                                <div class="d-inline-block">
                                                    <div class="form-group mb-0">
                                                        <div class="custom-file">
                                                            <input type="file" class="custom-file-input" name="preview"
                                                                   id="blogCustomFile" accept="image/*"/>
                                                            <label class="custom-file-label" for="blogCustomFile">Choose
                                                                file</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-50">
                                    <button type="submit" class="btn btn-primary mr-1">Save Changes</button>
                                    <button type="reset" class="btn btn-outline-secondary">Cancel</button>
                                </div>
                            </div>
                        </form>
                        <!--/ Form -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ Blog Edit -->
@endsection
<!-- END: Content-->

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            console.log('DOM loaded');

            // Try to get the existing Quill instance
            var editor = Quill.find(document.querySelector('#blog-editor-container .editor'));

            if (editor) {
                console.log('Existing Quill editor found');

                var form = document.getElementById('blog-form');
                var contentInput = document.getElementById('quill-content');

                console.log('Form:', form);
                console.log('Content input:', contentInput);

                if (form && contentInput) {
                    // Use Quill's text-change event to update the hidden input
                    editor.on('text-change', function () {
                        contentInput.value = editor.root.innerHTML;
                        console.log('Content updated:', contentInput.value);
                    });

                    console.log('Text-change event listener added');

                    // Update hidden input with Quill content before form submission
                    form.addEventListener('submit', function (event) {
                        contentInput.value = editor.root.innerHTML;
                        console.log('Form submitted, content:', contentInput.value);
                    });

                    console.log('Submit event listener added');
                } else {
                    console.error('Form or content input not found');
                }
            } else {
                console.error('No existing Quill editor found');
            }
        });
    </script>
@endsection