@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="{{route('admin.coupons.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 min-w-300px">
                <!--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">
                    <div class="mb-10 fv-row">
                        <label class="required form-label">@lang('admin.coupon_code')</label>
                        <input type="text" name="coupon_code" id="coupon_code" class="form-control mb-2" placeholder="@lang('admin.the_code')" value="" />
                        <div class="text-muted fs-7">@lang('admin.the_code_is_required_and_must_be_unique')</div>
                        <span id="coupon_code_error" class="invalid-feedback custom-error"></span>
                    </div>
                    <div class="mb-10 fv-row">
                        <label class="required form-label">@lang('admin.number_of_times_the_coupon_can_be_used')</label>
                        <input type="number" min="1" id="total_usage_times" name="total_usage_times" class="form-control mb-2" placeholder="@lang('admin.number_of_times_used')" value="" />
                        <span id="total_usage_times_error" class="invalid-feedback custom-error"></span>
                    </div>
                    <div class="mb-10 fv-row">
                        <label class="required form-label">@lang('admin.maximum_number_of_times_a_customer_can_use')</label>
                        <input type="number" min="1" id="user_usage_times" name="user_usage_times" class="form-control mb-2" placeholder="@lang('admin.number_of_times_used')" value="" />
                        <div class="text-muted fs-7">@lang('admin.enter_the_maximum_number_of_times_the_coupon_can_be_used_per_customer')</div>
                        <span id="user_usage_times_error" class="invalid-feedback custom-error"></span>

                    </div>
                </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>@lang('admin.status')</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 name="status" class="form-select mb-2" data-control="select2" data-hide-search="true"
                            data-placeholder="@lang('admin.select_status')" id="kt_add_category_status_select">
                        <option value="1" selected="selected">@lang('admin.active')</option>
                        <option value="0">@lang('admin.inactive')</option>
                    </select>
                    <!--end::Select2-->
                    <!--begin::Description-->
                    <div class="text-muted fs-7">@lang('admin.select_the_publishing_status_for_the_coupon')</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">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="mb-10 fv-row">
                                <label class="required form-label">@lang('admin.name')</label>
                                <input type="text" id="name" name="name" class="form-control mb-2" placeholder="@lang('admin.name')" value="" />
                                <div class="text-muted fs-7">@lang('admin.unique_name_required')</div>
                                <span id="name_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-10 fv-row">
                                <label class="required form-label">@lang('admin.expiration_date')</label>
                                <input class="form-control" name="end_date" id="coupon_expired_date" placeholder="@lang('admin.select_date')" />
                                <span id="end_date_error" class="invalid-feedback custom-error"></span>

                            </div>
                        </div>
                    </div>



                    <div class="fv-row mb-10">
                        <label class="fs-6 fw-semibold mb-2">@lang('admin.discount_type')
                            <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="@lang('admin.choose_the_type_of_discount_that_will_be_applied')"></i>
                        </label>

                        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 row-cols-xl-2 g-9" 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="c_type" value="percentage" checked="checked"/>
                                    </span>
                                    <!--end::Radio-->
                                    <!--begin::Info-->
                                    <span class="ms-5">
                                        <span class="fs-4 fw-bold text-gray-800 d-block">@lang('admin.percentage_rate')</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="c_type" value="value" />
                                    </span>
                                    <!--end::Radio-->
                                    <!--begin::Info-->
                                    <span class="ms-5">
                                        <span class="fs-4 fw-bold text-gray-800 d-block">@lang('admin.constant_value')</span>
                                    </span>
                                    <!--end::Info-->
                                </label>
                                <!--end::Option-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Row-->
                    </div>

                    <div class=" mb-10 fv-row" id="coupon_discount_percentage">
                        <!--begin::Label-->
                        <label class="form-label">@lang('admin.discount_rate')</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <input type="number" min="0.1" max="100" id="c_value_percentage" name="c_value_percentage" class="form-control mb-2" placeholder=""@lang('admin.discount_rate')" />
                        <!--end::Input-->
                        <!--begin::Description-->
                        <div class="text-muted fs-7">@lang('admin.specify_the_discount_rate')</div>
                        <!--end::Description-->
                        <span id="c_value_percentage_error" class="invalid-feedback custom-error"></span>
                    </div>

                    <div class="d-none mb-10 fv-row" id="coupon_discount_fixed">
                        <!--begin::Label-->
                        <label class="form-label">@lang('admin.discount_value')</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <input type="number" id="c_value"  min="0.1" max="999999" name="c_value" class="form-control mb-2" placeholder="@lang('admin.discount_value')" />
                        <!--end::Input-->
                        <!--begin::Description-->
                        <div class="text-muted fs-7">@lang('admin.specify_the_discount_value')</div>
                        <!--end::Description-->
                        <span id="c_value_error" class="invalid-feedback custom-error"></span>
                    </div>


                    <div class="row">
                        <div class="col-lg-6">
                            <div class="mb-10 fv-row">
                                <label class="required form-label"> @lang('admin.discount_priority')</label>
                                <select name="coupon_priority" id="coupon_priority" class="form-select "  data-control="select2" data-hide-search="true"
                                        data-placeholder="@lang('admin.select')">
                                    <option></option>
                                    <option value="static_discount">@lang('admin.fixed_discount_priority')</option>
                                    <option value="coupon_discount">@lang('admin.coupon_discount_priority')</option>
                                    <option value="both">@lang('admin.apply_both_discounts_together')</option>
                                </select>
                                <span id="coupon_priority_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="mb-10 fv-row">
                                <label class="required form-label">@lang('admin.coupon_type')</label>
                                <select  name="coupon_model_id" id="coupon_model_id"  class="form-select coupon_type"  data-control="select2" data-hide-search="true"
                                         data-placeholder="@lang('admin.select')">
                                   @foreach($coupon_models as $coupon_model)
                                       <option value="{{$coupon_model->id}}">{{$coupon_model->name}}</option>
                                   @endforeach
                                </select>
                                <span id="coupon_model_id_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                        <style>
                            .option_item{
                                display: none;
                            }
                        </style>
                        <div class="col-lg-6">
                            <div class="fv-row mb-10 option_item category">
                                <label class="required form-label">@lang('admin.main_category'):</label>
                                <select class="form-select" name="main_category_id" id="main_category_id" data-control="select2"  data-placeholder="@lang('admin.select_the_main_category')" data-allow-clear="false" data-filter="category" >
                                    <option></option>
                                   @foreach($main_categories as $main_category)
                                        <option value="{{$main_category->id}}"> {{ $main_category->name }}</option>
                                   @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="fv-row mb-10 option_item subcategory">
                                <label class="required form-label">@lang('admin.sub_category'):</label>
                                <select name="sub_category_id" id="sub_category_id" class="form-select" data-control="select2"  data-placeholder="@lang('admin.select_the_subcategory')" data-allow-clear="false" data-filter="subcategory" >
                                </select>
                            </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.coupons.index') }}" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">@lang('general.cancel')</a>
                <!--end::Button-->
                <!--begin::Button-->
                <button type="submit" id="kt_ecommerce_add_category_submit" class="btn btn-primary">
                    <span class="indicator-label">@lang('general.save')</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>
        // 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: {
                    'name': {
                        validators: {
                            notEmpty: {
                                message: 'اسم الكوبون الحقل مطلوب'
                            }
                        }
                    },
                    'coupon_code': {
                        validators: {
                            notEmpty: {
                                message: 'كود الكوبون الحقل مطلوب'
                            }
                        }
                    },
                    'total_usage_times': {
                        validators: {
                            notEmpty: {
                                message: 'عدد مرات الاستخدام الكلي الحقل مطلوب'
                            }
                        }
                    },
                    'user_usage_times': {
                        validators: {
                            notEmpty: {
                                message: 'عدد مرات الاستخدام لكل عميل الحقل مطلوب'
                            }
                        }
                    },
                    'end_date': {
                        validators: {
                            notEmpty: {
                                message: 'تاريخ انتهاء الكوبون الحقل مطلوب'
                            }
                        }
                    },
                    'coupon_priority': {
                        validators: {
                            notEmpty: {
                                message: 'أولوية الكوبون الحقل مطلوب'
                            }
                        }
                    },
                    'coupon_model_id': {
                        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') {
                        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('admin.coupons.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('general.done')!",
                                    //     customClass: {
                                    //         confirmButton: "btn btn-primary"
                                    //     }
                                    // });
                                } else {
                                    setTimeout(function () {
                                        submitButton.removeAttribute('data-kt-indicator');

                                        Swal.fire({
                                            text: "@lang('general.the_addition_completed_successfully')",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "@lang('general.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 = data.route ? data.route : 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('general.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('general.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;
                }
            });

            // init expired date
            $('#coupon_expired_date').flatpickr({
                // enableTime: true,
                dateFormat: "Y-m-d",
            });


            // display and hidden base on coupon type
            $(document).on('change','select.coupon_type',function (e) {
                let _val = $(this).val();
                $('.option_item').hide();
                if(_val=='2'){
                    $('.option_item.category').show();
                }
                else if(_val=='3'){
                    $('.option_item.category,.option_item.subcategory').show();
                }
            });

        });


        function handleDiscount() {
            const discountOptions = document.querySelectorAll('input[name="c_type"]');
            const percentageEl = document.getElementById('coupon_discount_percentage');
            const fixedEl = document.getElementById('coupon_discount_fixed');

            discountOptions.forEach(option => {
                option.addEventListener('change', e => {
                    const value = e.target.value;

                    switch (value) {
                        case 'percentage': {
                            percentageEl.classList.remove('d-none');
                            fixedEl.classList.add('d-none');
                            break;
                        }
                        case 'value': {
                            percentageEl.classList.add('d-none');
                            fixedEl.classList.remove('d-none');
                            break;
                        }
                        default: {
                            percentageEl.classList.remove('d-none');
                            fixedEl.classList.add('d-none');
                            break;
                        }
                    }
                });
            });
        }


        handleDiscount();
        $("#main_category_id").on('change', function () {
            var id = $(this).val();

            getSubCategories(id);
        });
        function getSubCategories(id) {
            $('#sub_category_id').empty();
            $('#sub_sub_category_id').empty();
            $.ajax({
                type: "GET",
                url: "{{route('admin.categories.getSubCategories')}}",
                data: {id: id},
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function (data) {

                    if (data.done === 1) {
                        $('#sub_category_id').empty().html(data.html).trigger('select2.change');

                    }
                },
                error: function (data) {
                    // Enable submit button after loading
                    Swal.fire({
                        icon: "error",
                        title: "@lang('general.an_error_occurred_during_the_operation')",
                        timer: 4000
                    });
                }
            });
        }
    </script>

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