@extends('layout.store_layout.master')
@section('custom_css')
@endsection
@section('content')
    <!--begin::Form-->
    <form id="add_category_form" class="form d-flex flex-column flex-lg-row" data-kt-redirect="#">

        <!--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 and *.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>البيانات</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <div class="mb-10 fv-row">
                        <label class="required form-label">الاسم</label>
                        <input type="text" name="category_name" class="form-control mb-2" placeholder="الاسم" value="" />
                        <div class="text-muted fs-7">الاسم مطلوب ويفضل ان يكون مميز.</div>
                    </div>
                    <div class="mb-10 fv-row">
                        <label class="form-label">نص السلايدر</label>
                        <textarea name="description" class="form-control mb-2" id="" cols="30" rows="5"></textarea>
                    </div>
                    <div class="mb-10 fv-row">
                        <label class="required form-label">نوع الربط</label>
                        <select class="form-select mb-2 slider_type" placeholder="اختر">
                            <option></option>
                            <option value="category">تصنيف رئيسي</option>
                            <option value="subcategory">تصنيف فرعي</option>
                            <option value="product">منتج</option>
                            <option value="link">رابط خارجي</option>
                        </select>
                    </div>
                    <div id="connect_options" style="display: none;">
                        <div class="mb-10 fv-row option-item category">
                            <label class="required form-label">التصنيف الرئيسي</label>
                            <select class="form-select"  data-control="select2" data-hide-search="false" data-placeholder="اختر">
                                <option></option>
                                <option value="1">تصنيف 1</option>
                                <option value="2">تصنيف 2</option>
                                <option value="3">تصنيف 3</option>
                            </select>
                        </div>
                        <div class="mb-10 fv-row option-item subcategory">
                            <label class="required form-label">التصنيف الفرعي</label>
                            <select class="form-select"  data-control="select2" data-hide-search="false" data-placeholder="اختر">
                                <option></option>
                                <option value="1">تصنيف فرعي 1</option>
                                <option value="2">تصنيف فرعي 2</option>
                                <option value="3">تصنيف فرعي 3</option>
                            </select>
                        </div>
                        <div class="mb-10 fv-row option-item product">
                            <label class="required form-label">المنتج</label>
                            <select class="form-select"  data-control="select2" data-hide-search="false" data-placeholder="اختر">
                                <option></option>
                                <option value="1">منتج 1</option>
                                <option value="2">منتج 2</option>
                                <option value="3">منتج 3</option>
                            </select>
                        </div>
                        <div class="mb-10 fv-row option-item link">
                            <label class="required form-label">الرابط الخارجي</label>
                            <input type="url" name="link" class="form-control mb-2" placeholder="الرابط" value="" />
                            {{--<div class="text-muted fs-7">الاسم مطلوب ويفضل ان يكون مميز.</div>--}}
                        </div>
                    </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.slider.index') }}" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">الغاء</a>
                <!--end::Button-->
                <!--begin::Button-->
                <button type="submit" id="kt_ecommerce_add_category_submit" class="btn btn-primary">
                    <span class="indicator-label">حفظ التعديلات</span>
                    <span class="indicator-progress">الرجاء الانتظار ...
													<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>
        // Define variables
        let validator;

        // Get elements
        const form = document.getElementById('add_category_form');
        const submitButton = document.getElementById('kt_ecommerce_add_category_submit');

        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
        validator = FormValidation.formValidation(
            form,
            {
                fields: {
                    'category_name': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            }
                        }
                    }
                },
                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();

            // Validate form before submit
            if (validator) {
                validator.validate().then(function (status) {
                    console.log('validated!');

                    if (status == 'Valid') {
                        submitButton.setAttribute('data-kt-indicator', 'on');

                        // Disable submit button whilst loading
                        submitButton.disabled = true;

                        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.disabled = false;

                                    // Redirect to customers list page
                                    window.location = form.getAttribute("data-kt-redirect");
                                }
                            });
                        }, 2000);
                    } else {
                        Swal.fire({
                            text: "معذرة ، يبدو أنه تم اكتشاف بعض الأخطاء ، يرجى المحاولة مرة أخرى.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "حسنًا، إغلاق!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                    }
                });
            }
        });

        $(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;
                }
            });



        });
        // show/hide field base on slider type
        $(document).on('change','.slider_type', function (e) {
            const value = $(this).val();
            let container = $('#connect_options');
            let options = container.find('.option-item');
            container.show();
            options.hide();
            switch (value) {
                case "category": {
                    container.find('.option-item.category').slideDown();
                    break;
                }
                case "subcategory": {
                    container.find('.option-item.category').slideDown();
                    container.find('.option-item.subcategory').slideDown();
                    break;
                }
                case "product": {
                    container.find('.option-item.product').slideDown();
                    break;
                }

                case "link": {
                    container.find('.option-item.link').slideDown();
                    break;
                }
                default:
                    container.hide();
                    break;

            }

        });

    </script>

    <!--end::Custom Javascript-->
@endsection