@extends('layout.store_layout.master')
@section('custom_css')
@endsection
@section('content')
    <!--begin::Form-->
    <form id="update_form" class="form d-flex flex-column flex-lg-row" data-kt-redirect="{{route('admin.pages.index')}}">

        <!--begin::Aside column-->
        {{--<div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">--}}
            {{--<!--begin::Thumbnail settings-->--}}
            {{--<div class="card card-flush py-4">--}}
                {{--<!--begin::Card header-->--}}
                {{--<div class="card-header">--}}
                    {{--<!--begin::Card title-->--}}
                    {{--<div class="card-title">--}}
                        {{--<h2>الأيقونه</h2>--}}
                    {{--</div>--}}
                    {{--<!--end::Card title-->--}}
                {{--</div>--}}
                {{--<!--end::Card header-->--}}
                {{--<!--begin::Card body-->--}}
                {{--<div class="card-body text-center pt-0">--}}
                    {{--<!--begin::Image input-->--}}
                    {{--<!--begin::Image input placeholder-->--}}
                    {{--<style>.image-input-placeholder { background-image: url({{ asset('assets/media/svg/files/blank-image.svg') }}); }--}}
                        {{--[data-theme="dark"] .image-input-placeholder { background-image: url({{ asset('assets/media/svg/files/blank-image-dark.svg') }}); }</style>--}}
                    {{--<!--end::Image input placeholder-->--}}
                    {{--<!--begin::Image input-->--}}
                    {{--<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" title="رفع صورة جديدة">--}}
                            {{--<!--begin::Icon-->--}}
                            {{--<i class="bi bi-pencil-fill fs-7"></i>--}}
                            {{--<!--end::Icon-->--}}
                            {{--<!--begin::Inputs-->--}}
                            {{--<input type="file" name="avatar" 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" title="الغاء رفع الصورة">--}}
                            {{--<i class="bi bi-x fs-2"></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" title="حذف الصورة">--}}
															{{--<i class="bi bi-x fs-2"></i>--}}
														{{--</span>--}}
                        {{--<!--end::Remove-->--}}
                    {{--</div>--}}
                    {{--<!--end::Image input-->--}}
                    {{--<!--begin::Description-->--}}
                    {{--<div class="text-muted fs-7">@lang('general.allowed_files_types',['types'=>'*.png, *.jpg , *.jpeg'])</div>--}}
                    {{--<!--end::Description-->--}}
                {{--</div>--}}
                {{--<!--end::Card body-->--}}
            {{--</div>--}}
            {{--<!--end::Thumbnail settings-->--}}
            {{--<!--begin::Status-->--}}
            {{--<div class="card card-flush py-4">--}}
                {{--<!--begin::Card header-->--}}
                {{--<div class="card-header">--}}
                    {{--<!--begin::Card title-->--}}
                    {{--<div class="card-title">--}}
                        {{--<h2>الحالة</h2>--}}
                    {{--</div>--}}
                    {{--<!--end::Card title-->--}}
                    {{--<!--begin::Card toolbar-->--}}
                    {{--<div class="card-toolbar">--}}
                        {{--<div class="rounded-circle bg-success w-15px h-15px" id="kt_add_category_status"></div>--}}
                    {{--</div>--}}
                    {{--<!--begin::Card toolbar-->--}}
                {{--</div>--}}
                {{--<!--end::Card header-->--}}
                {{--<!--begin::Card body-->--}}
                {{--<div class="card-body pt-0">--}}
                    {{--<!--begin::Select2-->--}}
                    {{--<select class="form-select mb-2" data-control="select2" data-hide-search="true" data-placeholder="اختر الحالة" id="kt_add_category_status_select">--}}
                        {{--<option></option>--}}
                        {{--<option value="enabled" selected="selected">مفعل</option>--}}
                        {{--<option value="disabled">معطل</option>--}}
                    {{--</select>--}}
                    {{--<!--end::Select2-->--}}
                    {{--<!--begin::Description-->--}}
                    {{--<div class="text-muted fs-7">اختر الحالة</div>--}}
                    {{--<!--end::Description-->--}}
                {{--</div>--}}
                {{--<!--end::Card body-->--}}
            {{--</div>--}}
            {{--<!--end::Status-->--}}

        {{--</div>--}}
        <!--end::Aside column-->
        <!--begin::Main column-->
        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
            <!--begin::General options-->
            <div class="card card-flush py-4">
                <!--begin::Card header-->
                <div class="card-header">
                    <div class="card-title">
                        <h2>تعديل صفحة {{ $item->title }}</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                        @foreach(getStoreLanguages() as $language)
                            <li class="nav-item">
                                <a class="nav-link {{$language->code == 'ar'?'active':''}}" data-bs-toggle="tab" href="#g_lang_{{$language->code}}">{{$language->name_ar}}</a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="tab-content mb-10" id="myTabContent">
                        @foreach(getStoreLanguages() as $language)
                            <div class="tab-pane fade{{$language->code == 'ar'?'show active':''}} " id="g_lang_{{$language->code}}" role="tabpanel">

                                <div class="mb-10 fv-row">
                                    <label class="required form-label">العنوان ب{{$language->name_ar}}</label>
                                    <input readonly disabled dir="{{ $language->code == 'ar'?'rtl':'ltr' }}" type="text" name="title[{{ $language->code }}]" id="title_{{ $language->code }}"
                                           placeholder="الاسم ب{{$language->name_ar}}"
                                           value="{{ old("title.$language->code",($item->translate($language->code)?$item->translate($language->code)->title:'')) }}"
                                           class="form-control mb-2{{ $errors->has("title.$language->code") ? ' is-invalid' : '' }}">
                                    @if ($errors->has("title.$language->code"))
                                        <span class="invalid-feedback">{{ $errors->first("title.$language->code") }}</span>
                                    @endif

                                    <div class="text-muted fs-7">اسم المطلوب ويوصى بأن يكون مميز.</div>
                                    <span id="title_{{ $language->code }}_error" class="invalid-feedback custom-error"></span>
                                </div>


                                <div>
                                    <label class="form-label">المحتوى ب {{$language->name_ar}}</label>
                                    <textarea id="editor-{{$language->code}}" dir="{{ $language->code == 'ar'?'rtl':'ltr' }}" name="details[{{ $language->code }}]" id="details_{{ $language->code }}" class="editor-1 min-h-200px mb-2">
                                        {{ old("details.$language->code",($item->translate($language->code)?$item->translate($language->code)->details:'')) }}
                                    </textarea>
                                    <span id="details_{{ $language->code }}_error" class="invalid-feedback custom-error"></span>
                                </div>
                            </div>
                        @endforeach
                    </div>



                    <!--end::Input group-->
                </div>
                <!--end::Card header-->
            </div>
            <!--end::General options-->


            <div class="d-flex justify-content-end">
                <!--begin::Button-->
                <a href="{{ route('admin.pages.index') }}" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">الغاء</a>
                <!--end::Button-->
                <!--begin::Button-->
                <button type="submit" id="submit_btn" class="btn btn-primary">
                    <span class="indicator-label">@lang('general.submit')</span>
                    <span class="indicator-progress">@lang('general.please_wait')
								<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                </button>
                <!--end::Button-->
            </div>
        </div>
        <!--end::Main column-->

    </form>
    <!--end::Form-->
@endsection
@section('custom_js')

    <script src="{{ asset('assets/plugins/custom/tinymce/tinymce.bundle.js') }}"></script>
    <script>
        tinymce.init({
            selector: ".editor-1",
            height : "480"
        });
        // Define variables
        let validator;

        // Get elements
        const form = document.getElementById('update_form');
        const submitButton = document.getElementById('submit_btn');

        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
        validator = FormValidation.formValidation(

            form,
            {
                locale: 'ar_MA',
                localization: FormValidation.locales.en_US,
                fields: {
                    @foreach(getStoreLanguages() as $language)
                    {{--'title[{{$language->code}}]': {--}}
                        {{--validators: {--}}
                            {{--notEmpty: {--}}
                                {{--message: 'الاسم ب{{$language->name_ar}} مطلوب'--}}
                            {{--},--}}
                            {{--stringLength:{--}}
                                {{--min:3,--}}
                                {{--message: 'الاسم ب{{$language->name_ar}} يجب أن يكون أكثر من 3 أحرف',--}}
                            {{--}--}}
                        {{--}--}}
                    {{--},--}}
                    {{--'details[{{$language->code}}]': {--}}
                        {{--validators: {--}}
                            {{--notEmpty: {--}}
                                {{--message: 'الاسم ب{{$language->name_ar}} مطلوب'--}}
                            {{--},--}}
                            {{--stringLength:{--}}
                                {{--min:3,--}}
                                {{--message: 'الاسم ب{{$language->name_ar}} يجب أن يكون أكثر من 3 أحرف',--}}
                            {{--}--}}
                        {{--}--}}
                    {{--},--}}
                    @endforeach
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        );

        // Handle submit button
        submitButton.addEventListener('click', e => {
            e.preventDefault();
            $('.invalid-feedback.custom-error').hide();

            // Validate form before submit
            if (validator) {
                validator.validate().then(function (status) {

                    if (status == 'Valid') {
                        tinymce.triggerSave();
                        var form_data = new FormData($('#update_form')[0]);

                        submitButton.setAttribute('data-kt-indicator', 'on');
                        // Disable submit button whilst loading
                        submitButton.disabled = true;
                        $.ajax({
                            type: "POST",
                            url: "{{route('admin.pages.update',[$item->getKey()])}}",
                            data: form_data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                            success: function (data) {

                                if (data.status === 0) {
                                    // Enable submit button after loading
                                    submitButton.setAttribute('data-kt-indicator', 'off');
                                    submitButton.disabled = false;
                                    if(data.errors && data.errors.length > 0){
                                        var errors = data.errors;
                                        for(var error = 0;error < errors.length; error++){
                                            var input_name = errors[error].input_name;
                                            var input_error = errors[error].errors;
                                            console.log(input_name,input_error);
                                            $('#'+input_name+'_error').html(input_error).show();

                                        }
                                    }
                                    if(data.not_found && data.not_found == 1){
                                        Swal.fire({
                                            text: "عذرا!العنصر المطلوب لم يعد متاح",
                                            icon: "error",
                                            buttonsStyling: false,
                                            confirmButtonText: "تم!",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then(function (result) {
                                            if (result.isConfirmed) {
                                                // Redirect to customers list page
                                                window.location = form.getAttribute("data-kt-redirect");
                                            }
                                        });
                                    }

                                } else {
                                    setTimeout(function () {
                                        submitButton.removeAttribute('data-kt-indicator');

                                        Swal.fire({
                                            text: "تمت عملية التعديل بنجاح!",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "تم!",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then(function (result) {
                                            if (result.isConfirmed) {
                                                // Enable submit button after loading
                                                submitButton.setAttribute('data-kt-indicator', 'off');
                                                submitButton.disabled = false;

                                                // Redirect to customers list page
                                                window.location = form.getAttribute("data-kt-redirect");
                                            }
                                        });
                                    }, 2000);
                                }
                            },
                            error: function (data) {
                                // Enable submit button after loading
                                submitButton.setAttribute('data-kt-indicator', 'off');
                                submitButton.disabled = false;
                                Swal.fire({
                                    icon: "error",
                                    title: 'حدثت خلل أثناء العملية',
                                    timer: 4000
                                });
                            }
                        });


                    } else {
                        // Enable submit button after loading
                        submitButton.setAttribute('data-kt-indicator', 'off');
                        submitButton.disabled = false;

                    }
                });
            }
        })

        $(document).ready(function () {
            const target = document.getElementById('kt_add_category_status');
            const select = document.getElementById('kt_add_category_status_select');
            const statusClasses = ['bg-success', 'bg-danger'];

            $(select).on('change', function (e) {
                const value = e.target.value;

                switch (value) {
                    case "enabled": {
                        target.classList.remove(...statusClasses);
                        target.classList.add('bg-success');
                        break;
                    }

                    case "disabled": {
                        target.classList.remove(...statusClasses);
                        target.classList.add('bg-danger');
                        break;
                    }
                    default:
                        break;
                }
            });
        })

    </script>
    <script>
        $(function () {
            // var options = {selector: "#editor-ar", height : "480"};
            //
            // if ( KTThemeMode.getMode() === "dark" ) {
            //     options["skin"] = "oxide-dark";
            //     options["content_css"] = "dark";
            // }


            // $('#editor-ar').tinymce({
            //     height: 500,
            //     menubar: false,
            //     plugins: [
            //         'a11ychecker','advlist','advcode','advtable','autolink','checklist','export',
            //         'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks',
            //         'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount'
            //     ],
            //     toolbar: 'undo redo | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist checklist outdent indent | removeformat | code table help'
            // });
            // Loop all elements
            // $( '.editor-1' ).each(function( index, element ) {
            //     // element == this
            //     // Get quill element
            //     // let quill = $(this);
            //     let quill = $(element);
            //
            //     // Break if element not found
            //     if (!quill) {
            //         return;
            //     }
            //
            //     // Init quill --- more info: https://quilljs.com/docs/quickstart/
            //     quill = new Quill(element, {
            //         modules: {
            //             toolbar: [
            //                 [{
            //                     header: [1, 2, false]
            //                 }],
            //                 ['bold', 'italic', 'underline'],
            //                 ['image', 'code-block']
            //             ]
            //         },
            //         placeholder: 'اكتب النص هنا...',
            //         theme: 'snow' // or 'bubble'
            //     });
            //     quill.format('align', 'right');
            //     quill.format('direction', 'rtl');
            //
            // });

        });
    </script>
@endsection