@extends('backend.layouts.app')

@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container  d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{translate('Settings')}}</h1>
                    <!--end::Title-->
                </div>
                <!--end::Page title-->
                <!--end::Actions-->
            </div>
            <!--end::Toolbar container-->
        </div>

        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container ">
                <!--begin::Card-->
                <form action="{{route('marketer.setting.store')}}" method="post" id="news" class="repeater-default"
                      enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <div class="col-xl-9">
                            <div class="card   card-flush">

                                <div class="card-body">

                                    <div class="row ">
                                        <div class="col-xl-5">
                                            <label class="form-label">{{translate('Selling margin ratio')}} %</label>
                                            <input class="form-control form-control-solid mb-3 mb-lg-0"
                                                   type="number" min="1" max="100" value="{{ get_setting('selling_margin_ratio')}}"
                                                   name="type[selling_margin_ratio]" required>
                                        </div>

                                    </div>

                                    <div class="row ">
                                        <div class="col-xl-5">
                                            <label class="form-label">{{translate('Active Marketer')}} $</label>
                                            <input class="form-control form-control-solid mb-3 mb-lg-0"
                                                   type="number" min="0" value="{{ get_setting('active_marketer')??0}}"
                                                   name="type[active_marketer]" required>
                                        </div>

                                    </div>
                                    <div class="row mt-5">
                                        <div class="col-xl-5">
                                            <label class="form-label">{{translate('Product Discount')}} %</label>
                                            <input class="form-control form-control-solid mb-3 mb-lg-0"
                                                   type="number" min="0"
                                                   value="{{ get_setting('product_discount_marketer')??0}}" max="100"
                                                   name="type[product_discount_marketer]" required>
                                        </div>

                                    </div>
                                    <div class="row mt-5">
                                        <div class="col-xl-5 ">
                                            <div class="mt-5 form-check form-switch form-check-custom form-check-solid">
                                                <input class="form-check-input status_send_gift" type="checkbox"
                                                       {{get_setting('send_gift')>0?'checked':''}} value=""
                                                       id="flexSwitchDefault"/>
                                                <label class="form-check-label mx-10 px-5" for="flexSwitchDefault">
                                                    {{translate('send gift')}}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-xl-5 send_gift">
                                            <label
                                                class="form-label">{{translate('Send a gift to the marketer for his birthday')}}
                                                $</label>
                                            <input class="form-control form-control-solid mb-3 mb-lg-0"
                                                   type="number" min="0" value="{{ get_setting('send_gift')??0}}"
                                                   name="type[send_gift]" required>
                                        </div>

                                    </div>


                                    <div class="row mt-5" >
                                        <div class="col  sortable_left">
                                            <h3>Primary ranking of the emergence of primary marketers</h3>
                                            <ul id="sortable1" class="pl-0 menu_list js-sortable-group js-drop-target  py-3 list-unstyled">
                                                @foreach(explode(',',get_setting('primary_marketers')) as $key=>$li)
                                                <li class="ui-state-default">
                                                    <div id="r_{{$key+1}}" class="p-2 alert fs-3 alert-primary text-primary fade show alert_box course d-block"
                                                         optiondata="{{$li}}">
                                                        <i class="fas fa-grip-vertical  d_icon mx-3"></i>{{$li}}
                                                    </div>
                                                </li>
                                                @endforeach
                                            </ul>
                                        </div>

                                    </div>

                                    <input type="hidden"  id="sorted_order_input" value="{{ get_setting('primary_marketers')??''}}"
                                           name="type[primary_marketers]">


                                </div>
                            </div>

                        </div>
                        <div class="col">
                            <div class="card   card-flush">

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col">
                                            <h4>{{translate('Selling margin ratio')}}:<span class="text-danger">*</span>
                                            </h4>
                                            <h6 class="text-primary">
                                                -{{translate('It is the percentage multiplied by the value of personal sales')}}</h6>
                                        </div>

                                    </div>



                                    <div class="row mt-5">
                                        <div class="col">
                                            <h4>{{translate('Product Discount')}}:<span class="text-danger">*</span>
                                            </h4>
                                            <h6 class="text-primary">
                                                -{{translate('The discount value on a product when you log in as a marketer or come via the refunded url')}}</h6>
                                        </div>

                                    </div>
                                    <div class="row mt-5">
                                        <div class="col">
                                            <h4>{{translate('Send Gift')}}:<span class="text-danger">*</span></h4>
                                            <h6 class="text-primary">
                                                -{!! translate('Sending a gift on the occasion of the marketed Christmas <br> (keep it zero if you do not want to send a gift)') !!}</h6>
                                        </div>

                                    </div>

                                    <div class="row mt-5">
                                        <div class="col">
                                            <h4>{{translate('Active Marketer')}}:<span class="text-danger">*</span></h4>
                                            <h6 class="text-primary">
                                                -{!! translate('For the marketer’s account to be activated, his first order must be at the set value') !!}</h6>
                                        </div>

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

                        </div>
                    </div>
                    <div class="">
                        <button class="btn btn-primary fs-2" type="submit">{{translate('Save')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <script>
        @if(get_setting('send_gift') == 0)
        $('.send_gift').hide();
        @endif
        $('.status_send_gift').change(function () {
            $('.send_gift').toggle();
            $('.send_gift input').val(0);
        });



        function stopHandler(event, obj) {
            var elem = obj.item[0];
            var sampleSortableGroup = $(".js-sortable-group").first().clone().html("");

            var idCount = 1;
            $(".menu_list .alert_box").each(function () {
                $(this).attr("id", "m_" + idCount);
                idCount++;
            });
        }

        $(".js-sortable-parent").sortable().disableSelection();

        var sortableGroup = $(".js-sortable-group")
            .sortable({
                connectWith: ".js-drop-target",

                stop: stopHandler,
            })
            .disableSelection();




        var idCount = 1;
        $(".menu_list .alert_box").each(function () {
            $(this).attr("id", "m_" + idCount);
            idCount++;
        });


        function captureSortOrder() {
            var sortOrder = [];
            $(".menu_list .alert_box").each(function() {
                sortOrder.push($(this).attr("optiondata"));
            });
            // Add sorted order data to a hidden input field in the form
            $("#sorted_order_input").val(sortOrder);
        }

        // Call captureSortOrder() when the order of the sortable list changes
        $(".js-sortable-group").on("sortupdate", function() {
            captureSortOrder();
        });

        // Submit form with sorted order data when Save button is clicked
        $("form").submit(function() {
            captureSortOrder();
            return true; // Allow form submission to proceed
        });

        // Call captureSortOrder() initially to capture the initial order
        captureSortOrder();
    </script>
@endsection