@extends('layout.store_layout.master')
@section('custom_css')
@endsection
@section('content')
    <!--begin::Form-->
    <form method="post" id="add_discount_form" action="{{route('admin.discounts.store')}}" class="form d-flex flex-column flex-lg-row" data-kt-redirect="{{ route('admin.discounts.index') }}">
        @csrf

        <!--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::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 required name="status" class="form-select mb-2" data-control="select2" data-hide-search="true" data-placeholder="اختر الحالة" id="kt_add_category_status_select">
                        <option>@lang('admin.select_status')</option>
                        <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_status')</div>
                    <!--end::Description-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Status-->
            <!--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('general.discount_type')</label>
                        <select required name="type" class="form-select discount_type" data-control="select2" data-hide-search="true" data-placeholder="اختر">
                            <option></option>
                            <option value="{{ \App\Constants\DiscountTypes::PRODUCT }}" >@lang('general.discount_type_product')</option>
                            <option value="{{ \App\Constants\DiscountTypes::PRODUCTS_GROUP }}" >@lang('general.discount_type_products_group')</option>
                            <option value="{{ \App\Constants\DiscountTypes::MAIN_CATEGORY }}" >@lang('general.discount_type_products_group')</option>
                            <option value="{{ \App\Constants\DiscountTypes::SUB_CATEGORY }}" >@lang('general.discount_type_sub_category')</option>
                            <option value="{{ \App\Constants\DiscountTypes::CATEGORIES_GROUP }}" >@lang('general.discount_type_categories_group')</option>
                            <option value="{{ \App\Constants\DiscountTypes::STORE_PRODUCTS }}" >@lang('general.discount_type_store_products')</option>
                            <option value="{{ \App\Constants\DiscountTypes::ORDER_TOTAL }}"  >@lang('general.discount_type_order_total')</option>
                        </select>
                        <span id="type_error" class="invalid-feedback custom-error"></span>
                    </div>
                    <style>
                        .option_item{
                            display: none;
                        }
                    </style>
                    <div class="fv-row mb-10 option_item product">
                        <label class="required form-label">@lang('admin.product'):</label>
                        {{ Form::select('product_id', [''=>trans('general.select')]+$products,  null , [
                            'class' => 'form-select',
                            'data-control' => 'select2',
                            'data-hide-search' => 'false',
                            'data-allow-clear' => 'false',
                            'data-placeholder' => 'الرجاء الاختيار..',
                            'required' => 'required',
                            ]) }}
                        <span id="product_id_error" class="invalid-feedback custom-error"></span>
                    </div>
                    <div class="fv-row mb-10 option_item products_group">
                        <label class="required form-label">@lang('admin.products'):</label>
                        {{ Form::select('products[]', [''=>trans('general.select')]+$products,  null , [
                            'class' => 'form-select',
                            'data-control' => 'select2',
                            'data-hide-search' => 'false',
                            'data-allow-clear' => 'false',
                            'multiple' => 'multiple',
                            'data-placeholder' => 'الرجاء الاختيار..',
                            'required' => 'required',

                            ]) }}
                        <span id="products_error" class="invalid-feedback custom-error"></span>
                    </div>
                    <div class="fv-row mb-10 option_item category">
                        <label class="required form-label">@lang('admin.main_category'):</label>
                        {{ Form::select('category_id', [''=>trans('general.select')]+$categories,  null , [
                            'id' => 'category_id',
                            'class' => 'form-select',
                            'data-control' => 'select2',
                            'data-hide-search' => 'false',
                            'data-allow-clear' => 'false',
                            'data-placeholder' => 'الرجاء الاختيار..',
                            'required' => 'required',
                            ]) }}
                        <span id="category_id_error" class="invalid-feedback custom-error"></span>
                    </div>
                    <div class="fv-row mb-10 option_item subcategory">
                        <label class="required form-label">@lang('admin.sub_category'):</label>
                        <select required name="sub_category_id" id="sub_category_id" class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار" data-allow-clear="false" >
                            <option></option>
                        </select>
                        <span id="sub_category_id_error" class="invalid-feedback custom-error"></span>
                    </div>
                    <div class="fv-row mb-10 option_item categories_group">
                        <label class="required form-label">@lang('general.main_categories'):</label>
                        {{ Form::select('categories[]', $categories,  null , [
                            'id' => 'categories',
                            'class' => 'form-select',
                            'data-control' => 'select2',
                            'data-hide-search' => 'false',
                            'data-allow-clear' => 'false',
                            'multiple' => 'multiple',
                            'data-placeholder' => 'الرجاء الاختيار..',
                            'required' => 'required',
                            ]) }}
                        <span id="categories_error" class="invalid-feedback custom-error"></span>
                    </div>
                    <div class="fv-row mb-10 option_item categories_group">
                        <label class="required form-label">@lang('general.sub_categories'):</label>
                        <select required name="sub_categories[]" id="sub_categories" multiple class="form-select" data-control="select2" data-hide-search="true" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                            <option></option>
                        </select>
                        <span id="sub_categories_error" class="invalid-feedback custom-error"></span>

                    </div>
                    <div class="option_item order_total">
                        <div class="fv-row mb-10">
                            <label class="required form-label">@lang('general.order_total_type'):</label>
                            {{ Form::select('order_total_type', [
                                    \App\Constants\DiscountTypes::GREATER_OR_EQUAL_TOTAL => trans('general.greater_than_or_equal'),
                                    \App\Constants\DiscountTypes::LESS_OR_EQUAL_TOTAL => trans('general.less_than_or_equal'),
                                ],  null , [
                            'class' => 'form-select',
                            'data-control' => 'select2',
                            'data-hide-search' => 'false',
                            'data-allow-clear' => 'false',
                            'multiple' => 'multiple',
                            'data-placeholder' => 'الرجاء الاختيار..',
                            'required' => 'required',
                            ]) }}
                            <span id="order_total_type_error" class="invalid-feedback custom-error"></span>
                        </div>
                        <div class="mb-10 fv-row">
                            <label class="required form-label">@lang('general.total_order_amount')</label>
                            <input required type="text" name="order_total" class="form-control mb-2" value="" />
                            <div class="text-muted fs-7">@lang('general.enter_total_order_amount')</div>
                            <span id="order_total_error" class="invalid-feedback custom-error"></span>
                        </div>
                    </div>
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Thumbnail settings-->


        </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" 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>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="mb-10 fv-row">
                                <label class="required form-label">@lang('general.start_date')</label>
                                <input class="form-control" name="start_date" required id="discount_start_date" placeholder="@lang('general.select_date')" />
                                <span id="start_date_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('general.end_date')</label>
                                <input required class="form-control" name="end_date" id="discount_end_date" placeholder="@lang('general.select_date')" />
                                <span id="end_date_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                    </div>



                    <div class="fv-row mb-10 d-none">
                        <label class="fs-6 fw-semibold mb-2">نوع الخصم
                            <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="اختر نوع الخصم الذي سوف يطبق"></i>
                        </label>

                        <div class="row row-cols-1 row-cols-md-3 row-cols-lg-1 row-cols-xl-3 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="discount_option" value="1" 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 d-none">
                                <!--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="2" />
                                    </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>

                    <div class=" mb-10 fv-row" id="coupon_discount_percentage">
                        <!--begin::Label-->
                        <label class="form-label required">@lang('general.discount_percentage')</label>
                        <!--end::Label-->
                        <!--begin::Slider-->
                        <div class="d-flex flex-column text-center mb-5">
                            <div class="d-flex align-items-start justify-content-center mb-7">
                                <input required type="hidden" id="discount_value" name="discount_value">
                                <span class="fw-bold fs-3x" id="coupon_discount_label">0</span>
                                <span class="fw-bold fs-4 mt-1 ms-2">%</span>
                            </div>
                            <div id="coupon_discount_slider" class="noUi-sm"></div>
                        </div>
                        <!--end::Slider-->
                        <!--begin::Description-->
                        <div class="text-muted fs-7">@lang('general.discount_percentage_hint')</div>
                        <span id="discount_value_error" class="invalid-feedback custom-error"></span>
                        <!--end::Description-->
                    </div>

                    <div class="d-none mb-10 fv-row" id="coupon_discount_fixed">
                        <!--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-->
                        <!--begin::Description-->
                        <div class="text-muted fs-7">حدد قيمة الخصم.</div>
                        <!--end::Description-->
                    </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.discounts.index') }}" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">@lang('general.cancel')</a>
                <!--end::Button-->
                <!--begin::Button-->
                <button type="submit" class="btn btn-primary" id="add_discount_form_submit">
                    <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>
        $(document).ready(function () {
            let modalForm = $('#add_discount_form');
            modalForm.submit(function (e) {
                e.preventDefault();
            }).validate({
                rules: {
                    name: {
                        required: true
                    },
                },

                submitHandler: function (form) {
                    var formData = new FormData($(form)[0]);
                    let action = $(form).attr('action');
                    let submitButton = $('#add_discount_form_submit');
                    submitButton.attr('data-kt-indicator', 'on');
                    submitButton.attr('disabled', 'true');
                    $.ajax({
                        url: action,
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function (data, status) {
                            submitButton.attr('data-kt-indicator', 'off');
                            submitButton.removeAttr('disabled');
                            if (data.success == false || data.status == 0) {
                                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();

                                    }
                                }

                            } else {
                                // toastr.success(data.message, {timeOut: 5000});
                                submitButton.removeAttr('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.setAttribute('data-kt-indicator', 'off');
                                        submitButton.removeAttr('disabled');

                                        // Redirect to customers list page
                                        // window.location = form.getAttribute("data-kt-redirect");
                                        window.location = $(form).attr('data-kt-redirect');
                                    }
                                });
                            }
                        },
                        error: function (data) {
                            submitButton.attr('data-kt-indicator', 'off');
                            submitButton.removeAttr('disabled');
                            toastr.error(data.statusText, {timeOut: 5000});
                            // Swal.fire({
                            //     icon: "error",
                            //     title: 'حدثت خلل أثناء العملية',
                            //     timer: 4000
                            // });
                        }
                    });
                }
            });
        });


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

            // init expired date
            var endDate = $('#discount_end_date').flatpickr({
                // enableTime: true,
                dateFormat: "Y-m-d",
                minDate: "today",
                onChange: function(selectedDates, dateStr, instance) {
                    // alert('pass '+ dateStr);
                    startDate.set('maxDate', dateStr);
                }
            });
            var startDate = $('#discount_start_date').flatpickr({
                // enableTime: true,
                dateFormat: "Y-m-d",
                minDate: "today",
                onChange: function(selectedDates, dateStr, instance) {
                    // alert('pass '+ dateStr);
                    endDate.set('minDate', dateStr);
                }
            });



            // display and hidden base on coupon type
            $(document).on('change','select.discount_type',function (e) {
                let _val = $(this).val();
                $('.option_item').hide();
                if(_val=='1'){
                    $('.option_item.product').show();
                }
                else if(_val=='2'){
                    $('.option_item.products_group').show();
                }
                else if(_val=='3'){
                    $('.option_item.category').show();
                }
                else if(_val=='4'){
                    $('.option_item.category,.option_item.subcategory').show();
                }
                else if(_val=='5'){
                    $('.option_item.categories_group').show();
                }
                else if(_val=='7'){
                    $('.option_item.order_total').show();
                }
            });

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

                getSubCategories(id,'#sub_category_id');
            });
            $("#categories").on('change', function () {
                var ids = $(this).val();

                getSubCategories(ids,'#sub_categories');
            });
            function getSubCategories(id,selector) {
                var elem = $(selector);
                elem.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) {
                            elem.empty().html(data.html).trigger('select2.change');
                            if(elem.attr('data-value') !=''){
                                elem.val(parseInt($('#sub_category_id').attr('data-value')));
                            }

                        }
                    },
                    error: function (data) {
                        // Enable submit button after loading
                        Swal.fire({
                            icon: "error",
                            title: 'حدثت خلل أثناء العملية',
                            timer: 4000
                        });
                    }
                });
            }
        });


        function handleDiscount() {
            const discountOptions = document.querySelectorAll('input[name="discount_option"]');
            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 '1': {
                            percentageEl.classList.remove('d-none');
                            fixedEl.classList.add('d-none');
                            break;
                        }
                        case '2': {
                            percentageEl.classList.add('d-none');
                            fixedEl.classList.remove('d-none');
                            break;
                        }
                        default: {
                            percentageEl.classList.remove('d-none');
                            fixedEl.classList.add('d-none');
                            break;
                        }
                    }
                });
            });
        }
        function initSlider(){
            var slider = document.querySelector("#coupon_discount_slider");
            var value = document.querySelector("#coupon_discount_label");
            var inputValue = document.querySelector("#discount_value");

            noUiSlider.create(slider, {
                start: [0],
                connect: true,
                range: {
                    "min": 0,
                    "max": 100
                }
            });

            slider.noUiSlider.on("update", function (values, handle) {
                value.innerHTML = Math.round(values[handle]);
                inputValue.value = Math.round(values[handle]);
                if (handle) {
                    value.innerHTML = Math.round(values[handle]);
                    inputValue.value = Math.round(values[handle]);
                }
            });
        }
        initSlider();
        handleDiscount();
    </script>

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