@extends('layout.store_layout.master')
@section('custom_css')
    <!--begin::Vendor Stylesheets(used for this page only)-->

    <link href="{{asset('assets/plugins/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
    <!--end::Vendor Stylesheets-->
@endsection
@section('content')
    <!--begin::Form-->
    <form id="add_category_form" class="form d-flex flex-column flex-lg-row" data-kt-redirect="{{route('super_admin.package.index')}}">
        @csrf
        <!--begin::Aside column-->
        <!--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>{{trans('super_admin.create') .' '. trans('super_admin.add_new_package')}}</h2>
                    </div>

                    <div class="card-toolbar">
                        <div class="card-body pt-0">
                            <div class="d-flex align-items-center">
                                <div class="me-2">
                                    <label>{{__('super_admin.status')}}</label>
                                </div>
                                <div>
                                    <!--begin::Select2-->
                                    <select name="status" class="form-select mb-2" data-control="select2" data-hide-search="true" data-placeholder="{{ __('super_admin.select_the_status') }}" id="kt_add_category_status_selects">
                                        <option value="1" selected="selected">{{__('super_admin.active')}}</option>
                                        <option value="0">{{__('super_admin.in_active')}}</option>
                                    </select>
                                    <!--end::Select2-->
                                    <!--begin::Description-->
                                    <!--end::Description-->
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <div class="mb-10 fv-row">
                        <!--langs-->
                        <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                            @foreach(getSuperAdminArEnLanguages() 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(getSuperAdminArEnLanguages() as $language)
                                <div class="tab-pane fade{{$language->code == 'ar'?'show active':''}} " id="g_lang_{{$language->code}}" role="tabpanel">
                                    <!--begin::Input group-->
                                    <div class="mb-10 fv-row">
                                        <!--begin::Label-->
                                        <label class="required form-label">@lang('super_admin.the_name_of') {{$language->name_ar}}</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input dir="{{ $language->code == 'ar'?'rtl':'ltr' }}" type="text" name="name_{{ $language->code }}" id="name_{{ $language->code }}"
                                               placeholder="@lang('super_admin.the_name_of') {{$language->name_ar}}"
                                               value="{{ old("name.$language->code") }}"
                                               class="form-control mb-2{{ $errors->has("name.$language->code") ? ' is-invalid' : '' }}">
                                        @if ($errors->has("name.$language->code"))
                                            <span class="invalid-feedback">{{ $errors->first("name.$language->code") }}</span>
                                        @endif

                                        <!--end::Input-->
                                        <!--begin::Description-->
                                        <div class="text-muted fs-7">@lang('super_admin.name_is_required_and_preferably_be_distinctive')</div>
                                        <!--end::Description-->
                                        <span id="name_{{ $language->code }}_error" class="invalid-feedback custom-error"></span>
                                    </div>
                                    <!--end::Input group-->
                                </div>
                            @endforeach
                        </div>
                        <!--langs-->
                        {{--                        <label class="required form-label">اسم التصنيف</label>--}}
                        {{--                        <input type="text" name="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>--}}
                    {{--                        <select name="language"  class="form-select mb-2" data-control="select2"  data-placeholder="اختر التصنيف الاب" id="select_parent_category">--}}
                    {{--                            <option></option>--}}
                    {{--                            <option value="cat1">تصنيف 1</option>--}}
                    {{--                            <option value="cat2">تصنيف 2</option>--}}
                    {{--                            <option value="cat3">تصنيف 3</option>--}}
                    {{--                        </select>--}}
                    {{--                        <div class="text-muted fs-7">لاضافه تصنيف فرعي اختر التصنيف الاب.</div>--}}
                    {{--                    </div>--}}
                    {{--                    <div>--}}
                    {{--                        <label class="form-label">الوصف</label>--}}
                    {{--                        <textarea name="description" class="form-control mb-2" id="" cols="30" rows="5"></textarea>--}}
                    {{--                        --}}{{--<div class="text-muted fs-7">Set a description to the category for better visibility.</div>--}}

                    {{--                    </div>--}}
                    <!--end::Input group-->
                </div>
                <!--end::Card header-->

            </div>
            <!--end::General options-->



            <!--begin::Pricing-->
            <div class="card card-flush py-4">
                <!--begin::Card header-->
                <div class="card-header">
                    <div class="card-title">
                        <h2>@lang('admin.price')</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Input group-->
                    <div class="mb-10 row">
                        <!--begin::Label-->
                        <div class="col-6">
                            <label class="required form-label">السعر الأساسي</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" name="price" class="form-control mb-2" placeholder="سعر الباقة" value="" />
                            <!--end::Input-->
                            <!--begin::Description-->
                            <span id="price_error" class="invalid-feedback custom-error"></span>

                            {{--<div class="text-muted fs-7">Set the product price.</div>--}}
                        </div>
                        <div class="col-6">
                            <label class="required form-label">مدة الاشتراك</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" name="period" class="form-control mb-2" placeholder="مدة الاشتراك بالأشهر" value="" />
                            <!--end::Input-->
                            <!--begin::Description-->
                            {{--<div class="text-muted fs-7">Set the product price.</div>--}}
                            <span id="period_error" class="invalid-feedback custom-error"></span>
                        </div>

                        <!--end::Description-->
                    </div>
                    <!--end::Input group-->
                    <!--begin::Input group-->
                    <div class="fv-row mb-10">
                        <!--begin::Label-->
                        <!--End::Label-->
                        <!--begin::Row-->
                        <div class="row " data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Option-->
                                <label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
                                    <!--begin::Radio-->
                                    <span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                    <input class="form-check-input" type="radio" name="discount_option" value="0" checked="checked" />
                                                </span>
                                    <!--end::Radio-->
                                    <!--begin::Info-->
                                    <span class="ms-5">
                                                    <span class="fs-4 fw-bold text-gray-800 d-block">بدون خصم</span>
                                                </span>
                                    <!--end::Info-->
                                </label>
                                <!--end::Option-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col">
                                <!--begin::Option-->
                                <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
                                    <!--begin::Radio-->
                                    <span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                    <input class="form-check-input" type="radio" name="discount_option" value="1" />
                                                                            <span id="discount_option_error" class="invalid-feedback custom-error"></span>

                                    </span>
                                    <!--end::Radio-->
                                    <!--begin::Info-->
                                    <span class="ms-5">
                                                    <span class="fs-4 fw-bold text-gray-800 d-block">الخصم</span>
                                                </span>
                                    <!--end::Info-->
                                </label>
                                <!--end::Option-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Row-->
                    </div>
                    <!--end::Input group-->
                    <!--begin::Input group-->
                    <div class="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_percentage">
                        <!--begin::Label-->
                        <label class="form-label">سعر مخفض ثابت</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <input type="text" name="dicsounted_price" class="form-control mb-2" placeholder="قيمة الخصم" />
                        <!--end::Input-->
                        <span id="dicsounted_price_error" class="invalid-feedback custom-error"></span>

                        <!--begin::Description-->
                        <div class="text-muted fs-7">حدد قيمة الخصم. سيتم خصم القيمة المحددة من السعر</div>
                        <!--end::Description-->
                    </div>
                    <!--end::Input group-->

                </div>
                <!--end::Card header-->
            </div>
            <!--end::Pricing-->

            <!--begin::Pricing-->
            <div class="card card-flush py-4">
                <!--begin::Card header-->
                <div class="card-header">
                    <div class="card-title">
                        <h2>خصائص الباقة</h2>
                    </div>
                    <span id="features_error" class="invalid-feedback custom-error"></span>

                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Input group-->
                    <div class="mb-10 row">
                        <!--begin::Label-->
                        @foreach(\App\Models\SubscriptionFeature::get() as $feature)
                            <div class="col-lg-6">
                                <!--begin::Input group-->
                                <div class="fv-row mb-3">
                                    <!--begin::Label-->
                                    <label class="form-label"> </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <div class="form-check form-check-custom form-check-solid mb-2">
                                        <input class="form-check-input" name="features[]" type="checkbox" value="{{$feature->id}}" />
                                        <label class="form-check-label">{{$feature->{'name_' . app()->getLocale()} }}</label>
                                    </div>
                                    <!--end::Input-->
                                    <!--begin::Description-->
                                    <div class="text-muted fs-7"></div>

                                    <!--end::Description-->
                                </div>
                                <!--end::Input group-->
                            </div>
                        @endforeach

                        <!--end::Description-->
                    </div>
                    <!--end::Input group-->

                </div>
                <!--end::Card header-->
            </div>
            <!--end::Pricing-->


            <div class="d-flex justify-content-end">
                <!--begin::Button-->
                <a href="{{ route('super_admin.package.index') }}" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">@lang('super_admin.cancel')</a>
                <!--end::Button-->
                <!--begin::Button-->
                <button type="submit" id="kt_ecommerce_add_category_submit" class="btn btn-primary">
                    <span class="indicator-label">@lang('super_admin.save')</span>
                    <span class="indicator-progress">@lang('admin.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')
    <!--begin::Vendors Javascript(used for this page only)-->
    <script src="{{asset('assets/plugins/custom/datatables/datatables.bundle.js')}}"></script>
    <script src="{{asset('assets/plugins/custom/formrepeater/formrepeater.bundle.js')}}"></script>
    <!--end::Vendors Javascript-->
    <!--begin::Custom Javascript(used for this page only)-->
    {{--    <script src="{{asset('assets/js/custom/apps/ecommerce/catalog/save-category.js')}}"></script>--}}
    <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,
            {
                locale: 'ar_MA',
                localization: FormValidation.locales.en_US,
                fields: {
{{--                    @foreach(getSuperAdminLanguages() as $language)--}}
{{--                    'name[{{$language->code}}]': {--}}
{{--                        validators: {--}}
{{--                            notEmpty: {--}}
{{--                                message: '@lang('super_admin.the_name_of') {{$language->name_ar}} مطلوب'--}}
{{--                            },--}}
{{--                            stringLength:{--}}
{{--                                min:3,--}}
{{--                                message: '@lang('super_admin.the_name_of') {{$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') {
                        var form_data = new FormData($('#add_category_form')[0]);
                        submitButton.setAttribute('data-kt-indicator', 'on');
                        // Disable submit button whilst loading
                        submitButton.disabled = true;
                        $.ajax({
                            type: "POST",
                            url: "{{route('super_admin.package.store')}}",
                            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();

                                        }
                                    }
                                    // Swal.fire({
                                    //     text: "عذرا! يجب معالجة بعض الأخطاء",
                                    //     icon: "error",
                                    //     buttonsStyling: false,
                                    //     confirmButtonText: "@lang('super_admin.done')!",
                                    //     customClass: {
                                    //         confirmButton: "btn btn-primary"
                                    //     }
                                    // });
                                } else {
                                    setTimeout(function () {
                                        submitButton.removeAttribute('data-kt-indicator');

                                        Swal.fire({
                                            text: "@lang('super_admin.the_addition_completed_successfully')",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "@lang('super_admin.done')!",
                                            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: '@lang('super_admin.an_error_occurred_during_the_operation')',
                                    timer: 4000
                                });
                            }
                        });


                    } else {
                        // Enable submit button after loading
                        submitButton.setAttribute('data-kt-indicator', 'off');
                        submitButton.disabled = false;
                        // Swal.fire({
                        //     text: "عذرا! يجب ملئ الحقول الفارغة",
                        //     icon: "error",
                        //     buttonsStyling: false,
                        //     confirmButtonText: "@lang('super_admin.done')!",
                        //     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 '1': {
                        target.classList.remove(...statusClasses);
                        target.classList.add('bg-success');
                        break;
                    }

                    case '0': {
                        target.classList.remove(...statusClasses);
                        target.classList.add('bg-danger');
                        break;
                    }
                    default:
                        break;
                }
            });
        })
        $(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 '1': {
                        target.classList.remove(...statusClasses);
                        target.classList.add('bg-success');
                        break;
                    }

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

            $('input:radio[name="discount_option"]').on('change', function (e) {
                if ($(this).val() == 1) {
                    $('#kt_ecommerce_add_product_discount_percentage').removeClass('d-none')
                } else {
                    $('#kt_ecommerce_add_product_discount_percentage').addClass('d-none')
                }

            });
        })

    </script>

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