@extends('dashboard.parent')

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

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

@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.specialty')}}</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.specialty._form', ['categories' => $categories , 'specializations' => $specializations,
            'cities' => $cities , '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>
    const validation_error ="{{__('validation.validation_error')}}";
    
    buttonSideBar()

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

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

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

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

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

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

    function store() {
        buttonLoading();
        let formData = new FormData();
        formData.append("name_en", document.getElementById('name_en').value);
        formData.append("name_ar", document.getElementById('name_ar').value);
        formData.append("status", document.getElementById('status').value);
        formData.append("category_id", document.getElementById('category_id').value);
        formData.append("specialization_id", document.getElementById('specialization_id').value);
        formData.append("city_id", document.getElementById('city_id').value);
        formData.append("description_en", tinymce.get('description_en').getContent());
        formData.append("description_ar", tinymce.get('description_ar').getContent());
        formData.append("introduction_en", tinymce.get('introduction_en').getContent());
        formData.append("introduction_ar", tinymce.get('introduction_ar').getContent());
        formData.append("image",document.getElementById('image').files[0]);
        formData.append("icon",document.getElementById('icon').files[0]);

        axios.post('/dashboard/specialty',formData)
        .then(function (response) {
            removeButtonLoading();
            
            toastr.success(response.data.message);
            window.location.href = '/dashboard/specialty';
            
        }).catch(function (error) {
            removeButtonLoading();
            
            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]);
            });
        });
    }

    function getSpecializations(){
        const selectElement = document.getElementById('category_id').value;
        axios.get('/dashboard/get-category-specializations',{
            params: {
                category_id: selectElement,
            }
        })
        .then(function (response) {
            $('#specialization_id').html(response.data);
            }).catch(function (error) {
                console.error('There was an error!', error);
            });
    }

     function buttonLoading() {
        var submitButton = document.getElementById("kt_ecommerce_add_category_submit");
        submitButton.setAttribute('data-kt-indicator', 'on');
        submitButton.disabled = true;
    }

    function removeButtonLoading() {
        var submitButton = document.getElementById("kt_ecommerce_add_category_submit");
        submitButton.setAttribute('data-kt-indicator', 'off');
        submitButton.disabled = false;
    }

</script>
@endsection