@extends('Backend.Layout.app')

@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container  d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{translate('Create Blog')}}</h1>
                    <!--end::Title-->
                </div>
                <!--end::Page title-->
                <!--end::Actions-->
            </div>
            <!--end::Toolbar container-->
        </div>

        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container ">
                <!--begin::Card-->
                <form action="{{route('backend.blog.store')}}" method="post" id="news" class="repeater-default"
                      enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <div class="col-xl-9">
                            <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-bold fw-semibold mb-4"
                                role="tablist">

                                @foreach(languages() as $lang)
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link text-active-primary pb-4 @if($loop->first) active @endif text-capitalize"
                                           data-bs-toggle="tab"
                                           href="#kt_tab_pane_{{$lang}}">  {{$lang}}</a>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="card   card-flush">

                                <div class="card-body">

                                    @foreach(languages() as $lang)
                                        <div class="tab-content" id="myTabContent">
                                            <div class="tab-pane fade show @if($loop->first) active @endif"
                                                 id="kt_tab_pane_{{$lang}}"
                                                 role="tabpanel">
                                                <div class="fv-row mb-7">
                                                    <!--begin::Label-->
                                                    <label
                                                        class="required fw-semibold fs-6 mb-2">{{translate('Name')}}  {{$lang}}</label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <input type="text" name="name_{{$lang}}"
                                                           value="{{old('name_'.$lang)}}"
                                                           @if($loop->first) required @endif
                                                           class="form-control form-control-solid mb-3 mb-lg-0"
                                                           placeholder="{{translate('Name')}}"/>
                                                    <!--end::Input-->
                                                </div>
                                                <div class="fv-row mb-7">
                                                    <!--begin::Label-->
                                                    <label
                                                        class="required fw-semibold fs-6 mb-2">{{translate('Description')}}  {{$lang}}</label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <input name="des_{{$lang}}" type="hidden">
                                                    <div
                                                        id="kt_docs_ckeditor_document_toolbar_{{$lang}}"></div>
                                                    <div
                                                        id="kt_docs_ckeditor_document_{{$lang}}">{{old('des_'.$lang)}}</div>
                                                </div>

                                                @include('Backend.variables.inputs',['lang'=>$lang,'data_value'=>null])
                                            </div>
                                        </div>

                                    @endforeach


                                </div>
                            </div>
                            <div class="card mt-5">
                                <div class="card-body">
                                    <h4>{{translate('More Info')}}</h4>

                                    <div class="row">
                                        <div class="col mb-7">
                                            <label class="form-label">{{translate('Report')}}</label>
                                            <div class="dropzone" id="kt_dropzonejs_example_2">
                                                <!--begin::Message-->
                                                <div class="dz-message needsclick">
                                                    <i class="ki-duotone ki-file-up fs-3x text-primary"><span
                                                            class="path1"></span><span class="path2"></span></i>

                                                    <!--begin::Info-->
                                                    <div class="ms-4">
                                                        <h3 class="fs-5 fw-bold text-gray-900 mb-1">{{translate('Drop files here
                                                            or click to upload.')}}</h3>
                                                        <span
                                                            class="fs-7 fw-semibold text-gray-500">{{translate('Upload up to 10 files')}}</span>
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                            </div>
                                            <input name="report" id="report" type="hidden">
                                        </div>
                                    </div>

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

                        <div class="col-xl-3">

                            <div class="card mt-1">
                                <div class="card-header">
                                    <div class="card-title">
                                        <h2>{{translate('Main Image')}}</h2>

                                    </div>
                                </div>

                                <div class="card-body text-center pt-3">
                                    <!--begin::Image input-->
                                    <!--begin::Image input placeholder-->
                                    <style>
                                        .image-input-placeholder {
                                            background-image: url({{asset('assets/backend/media/svg/files/blank-image.svg')}});
                                        }

                                        [data-bs-theme="dark"] .image-input-placeholder {
                                            background-image: url({{asset('assets/backend/media/svg/files/blank-image-dark.svg')}});
                                        }
                                    </style>
                                    <!--end::Image input placeholder-->

                                    <div
                                        class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                        data-kt-image-input="true">
                                        <!--begin::Preview existing avatar-->
                                        <div class="image-input-wrapper w-150px h-150px"></div>
                                        <!--end::Preview existing avatar-->

                                        <!--begin::Label-->
                                        <label
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                            aria-label="Change avatar" data-bs-original-title="Change avatar"
                                            data-kt-initialized="1">
                                            <i class="ki-duotone ki-pencil fs-7"><span class="path1"></span><span
                                                    class="path2"></span></i>
                                            <!--begin::Inputs-->
                                            <input type="file" name="image" required accept=".png, .jpg, .jpeg">
                                            <input type="hidden" name="avatar_remove">
                                            <!--end::Inputs-->
                                        </label>
                                        <!--end::Label-->

                                        <!--begin::Cancel-->
                                        <span
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                            aria-label="Cancel avatar" data-bs-original-title="Cancel avatar"
                                            data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>            </span>
                                        <!--end::Cancel-->

                                        <!--begin::Remove-->
                                        <span
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                            aria-label="Remove avatar" data-bs-original-title="Remove avatar"
                                            data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>            </span>
                                        <!--end::Remove-->
                                    </div>
                                    <!--end::Image input-->

                                    <!--begin::Description-->
                                    <div
                                        class="text-muted fs-7">{{translate('Set the product thumbnail image. Only *.png, *.jpg and *.jpeg image files are accepted')}}</div>
                                    <!--end::Description-->
                                </div>
                            </div>


                            <div class="card mt-2">
                                <div class="card-header">
                                    <div class="card-title">
                                        <h2>{{translate('More Data')}}</h2>

                                    </div>
                                </div>

                                <div class="card-body">

                                    <div class="mt-5">
                                        <label class="form-label">{{translate('Category')}}</label>
                                        <select class="form-select form-select-solid fw-bold"
                                                name="category_id"
                                                data-kt-select2="true" data-placeholder="Select option"
                                                data-allow-clear="true" data-kt-user-table-filter="role"
                                                data-hide-search="true">
                                            <option></option>
                                            @foreach($categories as $category)
                                                <option
                                                    value="{{$category->id}}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                    {{$category->getTranslation('name')}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>




                                </div>


                            </div>

                            <div class=" my-3 ">
                                <button class="btn btn-primary w-100 btn-submit"
                                        type="submit">{{translate('Save')}}</button>
                            </div>

                        </div>
                    </div>

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

@endsection
@section('script')
    <script src="{{asset('assets/backend/plugins/custom/ckeditor/ckeditor-document.bundle.js')}}"></script>
    <!-- JavaScript to dynamically add inputs -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const targetSelect = document.getElementById('targetSelect');
            const targetValuesContainer = document.getElementById('targetValuesContainer');

            $(targetSelect).select2({
                placeholder: 'Select an option',
                allowClear: true,
            });

            $(targetSelect).on('change', function () {
                const selectedTargets = $(this).select2('data');

                targetValuesContainer.innerHTML = '';

                selectedTargets.forEach(target => {
                    const targetId = target.id;
                    const targetName = target.text;

                    const inputDiv = document.createElement('div');
                    inputDiv.classList.add('mb-3');
                    inputDiv.innerHTML = `
                    <label class="form-label">${targetName} {{translate('price')}}</label>
                    <input class="form-control form-control-solid mb-3 mb-lg-0"
                           type="number" min="0" value="0" name="target_values[${targetId}]" required>

                    <label class="form-label">${targetName} {{translate('photo')}}</label>
                    <input class="form-control form-control-solid mb-3 mb-lg-0"
                           type="file" name="target_photos[${targetId}]" accept="image/*">
                `;

                    targetValuesContainer.appendChild(inputDiv);
                });
            });
        });
    </script>


    <script>

        @foreach(languages() as $lang)
        DecoupledEditor
            .create(document.querySelector('#kt_docs_ckeditor_document_{{$lang}}'))
            .then(editor_{{$lang}} => {
                const toolbarContainer = document.querySelector('#kt_docs_ckeditor_document_toolbar_{{$lang}}');
                toolbarContainer.appendChild(editor_{{$lang}}.ui.view.toolbar.element);
                editor_{{$lang}}.model.document.on('change:data', () => {
                    document.querySelector('input[name=des_{{$lang}}]').value = editor_{{$lang}}.getData();
                });
            })
            .catch(error => {
                console.error('Error creating editor:', error);
            });
        @endforeach

            Dropzone.autoDiscover = false;
        var csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;

        var report = [];


        var myDropzoneReport = new Dropzone("#kt_dropzonejs_example_2", {
            url: '{{ route('report') }}',
            paramName: "report",
            maxFiles: 10,
            addRemoveLinks: true,
            acceptedFiles: ".pdf, .xlsx, .docx, .cvs",
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            accept: function (file, done) {
                if (!file.name.match(/\.(pdf|xlsx|docx|cvs)$/i)) {
                    done("Unsupported file type");
                } else {
                    done();
                }
            }
        });

        myDropzoneReport.on("addedfile", function () {
            $('.btn-submit').addClass('disabled')
        });

        // Enable the submit button when all files are uploaded
        myDropzoneReport.on("queuecomplete", function () {
            $('.btn-submit').removeClass('disabled')
        });

        myDropzoneReport.on("success", function (file, response) {

            report.push(response);
            $('#report').val(report)
        });

        myDropzoneReport.on("error", function (file, errorMessage, xhr) {
        });


    </script>

    <script>
        $(document).ready(function () {
            $('#youtubeUrl').on('input', function () {
                let value = $(this).val();

                let youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\//;

                if (!youtubeRegex.test(value) && value.length > 0) {
                    $(this).val('');
                }
            });
        });
    </script>

@endsection