@extends('dashboard.parent')

@section('title', __('pages.city'))

@section('page_name', __('pages.add_new_city'))

@section('css')
@endsection

@section('bread_crumb')
    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">
            <a href="{{ route('home') }}" class="text-muted text-hover-primary">{{ __('pages.home') }}</a>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item">
            <span class="bullet bg-gray-400 w-5px h-2px"></span>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">{{ __('pages.city') }}</li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item">
            <span class="bullet bg-gray-400 w-5px h-2px"></span>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">{{ __('pages.create') }}</li>
        <!--end::Item-->
    </ul>
@endsection

@section('actions')

@endsection

@section('content')
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                {{-- form --}}
                @include('dashboard.city._form', [
                    'countries' => $countries,
                    'constants' => $constants,
                    'function' => 'store',
                ])
                {{-- end form --}}
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content container-->
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <script src="{{ asset('assets/plugins/custom/tinymce/tinymce.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/apps/ecommerce/catalog/save-category.js') }}"></script>
    <script>
        const validation_error = "{{ __('validation.validation_error') }}";

        buttonSideBar()

        function buttonSideBar() {
            const button = document.getElementById('city');
            button.classList.add('here', 'show');
        }

        function clearErrorMessage() {
            const errorElements = document.querySelectorAll('[class^="error_"]');
            errorElements.forEach(element => {
                element.innerText = '';
            });
        }

        function store() {
            let formData = new FormData();
            formData.append("name_en", document.getElementById('name_en').value);
            formData.append("name_ar", document.getElementById('name_ar').value);
            formData.append("keyword_ar", document.getElementById('keyword_ar').value);
            formData.append("keyword_en", document.getElementById('keyword_en').value);
            formData.append("details_en", document.getElementById('details_en').value);
            formData.append("details_ar", document.getElementById('details_ar').value);
            formData.append("status", document.getElementById('status').value);
            formData.append("country_id", document.getElementById('country_id').value);
            formData.append("constant_id", document.getElementById('constant_id').value);
            formData.append("introduction_en", tinymce.get('introduction_en').getContent());
            formData.append("introduction_ar", tinymce.get("introduction_ar").getContent());
            formData.append("summary_en", tinymce.get('summary_en').getContent());
            formData.append("summary_ar", tinymce.get("summary_ar").getContent());
            formData.append("image", document.getElementById('image').files[0]);
            formData.append("icon", document.getElementById('icon').files[0]);
            formData.append("banner_computer", document.getElementById('banner_computer').files[0]);
            formData.append("banner_mobile", document.getElementById('banner_mobile').files[0]);

            formData.append("meta_title_en", document.getElementById('meta_title_en').value);
            formData.append("meta_title_ar", document.getElementById('meta_title_ar').value);
            formData.append("slug_en", document.getElementById('slug_en').value);
            formData.append("slug_ar", document.getElementById('slug_ar').value);
            formData.append("meta_keyword_ar", document.getElementById('meta_keyword_ar').value);
            formData.append("meta_keyword_en", document.getElementById('meta_keyword_en').value);
            formData.append("meta_description_en", tinymce.get('meta_description_en').getContent());
            formData.append("meta_description_ar", tinymce.get('meta_description_ar').getContent());

            axios.post('/dashboard/city', formData)
                .then(function(response) {

                    toastr.success(response.data.message);
                    window.location.href = '/dashboard/city';
                }).catch(function(error) {

                    if (error.response.status == 500) {
                        toastr.error(error.response.data.message);
                    } else {
                        toastr.error(validation_error);
                    }

                    clearErrorMessage();
                    var errors = error.response.data.errors;
                    Object.keys(errors).forEach(function(key) {
                        document.querySelector(`.error_${key}`).innerText = errors[key][0];
                        console.log('Key:', key, 'Value:', errors[key]);
                    });
                });
        }

        document.addEventListener("DOMContentLoaded", function() {
            function generateSlug(text) {
                return text
                    .toLowerCase()
                    .replace(/[^a-z0-9\u0600-\u06FF\s-]/g, "")
                    .replace(/\s+/g, "-")
                    .replace(/-+/g, "-")
                    .trim();
            }

            // English Name to Slug
            let nameEnInput = document.getElementById("name_en");
            let slugEnInput = document.getElementById("slug_en");

            nameEnInput.addEventListener("input", function() {
                slugEnInput.value = generateSlug(nameEnInput.value);
            });

            // Arabic Name to Slug
            let nameArInput = document.getElementById("name_ar");
            let slugArInput = document.getElementById("slug_ar");

            nameArInput.addEventListener("input", function() {
                slugArInput.value = generateSlug(nameArInput.value);
            });
        });

        // var introductionEn = {selector: "#introduction_en", height : "480"};
        // tinymce.init(introductionEn);

        // var introductionAr = {selector: "#introduction_ar", height : "480"};
        // tinymce.init(introductionAr);

        // var summaryEn = {selector: "#summary_en", height : "480"};
        // tinymce.init(summaryEn);

        // var summaryAr = {selector: "#summary_ar", height : "480"};
        // tinymce.init(summaryAr);
    </script>
@endsection