@extends('layouts.admin.master')

@section('title')
    {{ __('Add Blogs') }}
@endsection

@push('css')
@endpush

@section('content')
    @component('components.breadcrumb')
        @slot('breadcrumb_title')
            <h3></h3>
        @endslot

        <li class="breadcrumb-item"><a href="{{ route('blogs.index') }}">{{ __('Blog') }}</a></li>
        <li class="breadcrumb-item active">{{ __('Add Blogs') }}</li>
    @endcomponent

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h5>{{ __('Data') }}</h5>
                    </div>
                    <div class="card-body">
                        <form id="addBlogForm" class="needs-validation" novalidate="" method="post"
                              action="{{ route('blogs.store') }}">
                            @csrf
                            @method('POST')
                            <input type="hidden" name="blogList" id="blogListInput" value="">

                            <div id="firstRow">
                                <div class="row g-1">
                                    <div class="col-md-8 mb-3">
                                        <label class="form-label" for="title">{{ __('Title') }}</label>
                                        <input class="form-control" id="title" type="text" required=""
                                               name="title" placeholder="{{ __('Title') }}"
                                               value="{{ old('title') }}"/>
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>
                                    <div class="col-md-1 mb-3">
                                        <label for="f1-btn+">btn+</label><br>
                                        <a class="btn btn-primary buttonPlus">+</a>
                                    </div>
                                </div>
                                <div class="row g-1">
                                    <div class="form-group">
                                        <label>{{ __('Description') }}</label>
                                        <textarea id="descriptionn"  required="" name="description" cols="10"
                                                  rows="2">{{ old('description') }}</textarea>
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>
                                </div>
                            </div>

                            <div id="rowContainer">

                            </div>

                            <div class="row g-1">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label" for="validationDefault04">{{ __('Status') }}</label>
                                    <select class="form-select" id="validationDefault04" required="" name="status">
                                        <option value="active"
                                            {{ old('status') ? (old('status') == 'active' ? 'selected' : '') : '' }}>
                                            {{ __('Active') }}</option>
                                        <option value="inactive"
                                            {{ old('status') ? (old('status') == 'inactive' ? 'selected' : '') : '' }}>
                                            {{ __('Inactive') }}</option>
                                    </select>
                                    <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                    <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                </div>
                            </div>

{{--                            <div class="form-group">--}}
{{--                                <label for="validationDefault04">{{ __('Country') }}</label>--}}
{{--                                <select id="country_id" class="form-select" required=""--}}
{{--                                        onchange="getCities()" name="country_id">--}}
{{--                                    <option selected="" disabled="" value=""> {{ __('Country') }}--}}
{{--                                    </option>--}}
{{--                                    @foreach ($countries as $country)--}}
{{--                                        <option value="{{ $country->id }}"--}}
{{--                                            {{ old('country_id') ? (old('country_id') == $country->id ? 'selected' : '') : '' }}>--}}
{{--                                            {{ $country->name }}</option>--}}
{{--                                    @endforeach--}}
{{--                                </select>--}}
{{--                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>--}}
{{--                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>--}}
{{--                            </div>--}}

{{--                            <div class="form-group">--}}
{{--                                <label for="city_id">{{ __('Cities') }}</label>--}}
{{--                                <select id="city_id" class="form-select" required=""--}}
{{--                                        name="city_id">--}}
{{--                                </select>--}}
{{--                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>--}}
{{--                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>--}}
{{--                            </div>--}}

                            <div class="row g-1">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label" for="showImage">{{ __('Image') }}</label>
                                    <div class="avatar">
                                        <img class="img-100 b-r-8" id="showImage" src="{{ asset('assets/images/uniguideLogo1.png') }}" alt="#">
                                    </div>
                                    @include('dashbord.include.image', ['button_name' => 'Image', 'model_id' => 'ImageModel', 'type' => 'radio', 'name' => 'image_id'])
                                    <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                    <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                </div>
                            </div>
                            <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

    @push('scripts')
        <script src="{{ asset('assets/js/form-validation-custom.js') }}"></script>
        <script src="{{ asset('assets/js/editor/ckeditor/ckeditor.js') }}"></script>
        <script src="{{ asset('assets/js/editor/ckeditor/adapters/jquery.js') }}"></script>
        <script src="{{ asset('assets/js/form-wizard/form-wizard-three.js') }}"></script>
        <script src="{{ asset('assets/js/form-wizard/jquery.backstretch.min.js') }}"></script>

{{--        <script>--}}
{{--            function getCities() {--}}
{{--                var country_id = $('#country_id').val();--}}
{{--                $.ajax({--}}
{{--                    url: '/dashboard/getCities/' + country_id,--}}
{{--                    method: 'GET',--}}
{{--                    success: function (data) {--}}
{{--                        $('#city_id').empty();--}}
{{--                        $.each(data, function (key, value) {--}}
{{--                            $('#city_id').append('<option value="' + value.id + '">' + value.name + '</option>');--}}
{{--                        });--}}
{{--                    }--}}
{{--                });--}}
{{--            }--}}
{{--        </script>--}}

        <script>
            "use strict";
            CKEDITOR.replace('descriptionn', {
                on: {
                    contentDom: function (evt) {
                        evt.editor.editable().on('contextmenu', function (contextEvent) {
                            var path = evt.editor.elementPath();
                            if (!path.contains('table')) {
                                contextEvent.cancel();
                            }
                        }, null, null, 5);
                    }
                }
            });
        </script>

        <script>
            $(document).ready(function () {
                let blogList = [];
                let rowId = 0;

                function createNewRow(rowId) {
                    return `
                    <div class="blog-row" id="blog_${rowId}">
                        <div class="row g-1">
                            <div class="col-md-8 mb-3">
                                <label class="form-label" for="title_${rowId}">{{ __('Title') }}</label>
                                <input class="form-control" id="title_${rowId}" type="text" required=""
                                       name="titleList" placeholder="{{ __('Title') }}" required=""
                                       value="{{ old('titleList') }}"/>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                            <div class="col-md-1 mb-3">
                                <label for="f1-btn+">btn+</label><br>
                                <a class="btn btn-primary buttonPlus">+</a>
                            </div>
                            <div class="col-md-1 mb-3">
                                <label for="f1-btn-">btn-</label><br>
                                <a class="btn btn-danger buttonMin">-</a>
                            </div>
                        </div>
                        <div class="row g-1">
                            <div class="form-group">
                                <label>{{ __('Description') }}</label>
                                <textarea id="description_${rowId}" name="descriptionList" cols="10"
                                          required="" rows="2">{{ old('descriptionList') }}</textarea>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>
                    </div>
                `;
                }

                function updateBlogList() {
                    blogList = [];
                    $('#rowContainer .blog-row').each(function () {
                        const titleList = $(this).find('input[name="titleList"]').val();
                        const descriptionList = $(this).find('textarea[name="descriptionList"]').val();
                        if (titleList || descriptionList) {
                            blogList.push({
                                titleList: titleList,
                                descriptionList: descriptionList
                            });
                        }
                    });
                }

                function synchronizeCKEditorInstances() {
                    for (let instance in CKEDITOR.instances) {
                        if (CKEDITOR.instances.hasOwnProperty(instance)) {
                            CKEDITOR.instances[instance].updateElement();
                        }
                    }
                }

                updateBlogList();

                $(document).on('click', '.buttonPlus', function () {
                    rowId++;
                    $('#rowContainer').append(createNewRow(rowId));
                    CKEDITOR.replace('description_' + rowId, {
                        on: {
                            contentDom: function (evt) {
                                evt.editor.editable().on('contextmenu', function (contextEvent) {
                                    var path = evt.editor.elementPath();
                                    if (!path.contains('table')) {
                                        contextEvent.cancel();
                                    }
                                }, null, null, 5);
                            }
                        }
                    });
                    updateBlogList();
                });

                $(document).on('click', '.buttonMin', function () {
                    $(this).closest('.blog-row').remove();
                    updateBlogList();
                });

                $(document).on('change', 'input[name="titleList"], textarea[name="descriptionList"]', function () {
                    updateBlogList();
                });

                $('#addBlogForm').submit(function (event) {
                    synchronizeCKEditorInstances(); // Ensure CKEditor content is synchronized with textarea
                    updateBlogList(); // Ensure blogList is up-to-date
                    $('#blogListInput').val(JSON.stringify(blogList));
                });
            });
        </script>
        @include('dashbord.include.imageScriptEdit')

    @endpush
@endsection