@extends('layouts.master')

@section('title')
    LT-168 :: แก้ไขตั้งค่าอัตราส่วนของเอเยนต์
@endsection

@section('sub_title')
    <button class="border-0 btn btn-icon-only btn-outline-white rounded-circle" onclick="history.back()"><i class="fas fa-2x fa-angle-left"></i></button>
    แก้ไขตั้งค่าอัตราส่วน :: <span class="badge bg-primary text-sm">{{ $user->username }} : {{ $user->name }}</span> <span class="text-sm badge badge-default">{{ lotteryName($country) }}</span>
@endsection

@section('content')
    <form id="setting-form" action="{{ route('setting.member.default.index') }}/{{ $user->id }}?country={{ $country }}">
        @csrf
        <div class="row justify-content-center">
            <div id="step-1" class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0">แก้ไขตั้งค่าอัตราส่วน</h3>
                            </div>
                            <div class="col text-right">
                                <button id="submit-btn" type="submit" class="btn btn-outline-default">
                                    <i class="fas fa-save"></i> บันทึกรายการ
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">

                        <ul class="nav nav-pills nav-fill row" id="tabs-text" role="tablist">
                            <li class="px-1 text-center col-sm mb-2 mb-sm-0">
                                <a class="nav-link mb-sm-3 mb-md-0 active show" data-toggle="tab" href="#mainB" role="tab" aria-controls="mainB" aria-selected="true">ขั้นต่ำ / สูงสุดต่อไม้</a>
                            </li>
                            <li class="px-1 text-center col-sm mb-2 mb-sm-0">
                                <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#mainC" role="tab" aria-controls="mainC" aria-selected="false">ไลน์ส่วนลด</a>
                            </li>
                            @if (isLotteryType($country))
                                <li class="px-1 text-center col-sm mb-2 mb-sm-0">
                                    <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#mainA" role="tab" aria-controls="mainA" aria-selected="false">อัตราจ่ายเงินรางวัล</a>
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content">
            <div class="row justify-content-center tab-pane fade show active" id="mainB">
                <div class="col-md-10 mx-auto">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="mb-0">ขั้นต่ำต่อไม้ / สูงสุดต่อไม้ / สูงสุดต่อหมายเลข</h3>
                                </div>
                                <div class="col-auto text-right">
                                    <div class="form-check">
                                        <input class="form-check-input help-checkbox" type="checkbox" value="1"
                                            id="helpSetting1">
                                        <label class="form-check-label" for="helpSetting1">
                                            ตั้งค่าตามแถวแรก
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            @foreach ($editUserLimit as $type => $lotteryValue)
                                <div class="form-row">
                                    <label class="col-sm-3 col-form-label text-center">{{ $type }}</label>
                                    <div class="form-group col-sm-3">
                                        <input type="nubmer" class="form-control limit-helper" placeholder="ขั้นต่ำต่อไม้"
                                            value="{{ $lotteryValue['min'] }}" name="min[{{ $type }}]" title="กรุณาระบุข้อมูลให้ครบถ้วน" min="0"
                                            data-helper_name="min" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <input type="nubmer" class="form-control limit-helper" placeholder="สูงสุดต่อไม้"
                                            value="{{ $lotteryValue['max'] }}" name="max[{{ $type }}]" title="กรุณาระบุข้อมูลให้ครบถ้วน" min="0"
                                            data-helper_name="max" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <input type="nubmer" class="form-control limit-helper" placeholder="สูงสุดต่อหมายเลข"
                                            name="max_per_number[{{ $type }}]" title="กรุณาระบุข้อมูลให้ครบถ้วน" min="0"
                                            data-helper_name="max_per_number" value="{{ $lotteryValue['max_per_number'] }}" required>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center tab-pane fade" id="mainC">
                <div class="col-md-10 mx-auto">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="mb-0">ส่วนลด / เงินรางวัล</h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="nav nav-pills nav-fill flex-column flex-sm-row" id="tabs-text" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link mb-sm-3 mb-md-0 active show" data-toggle="tab" href="#line_a" role="tab"
                                        aria-controls="tabs-text-1" aria-selected="true">ไลน์ A</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#line_b" role="tab"
                                        aria-controls="tabs-text-2" aria-selected="false">ไลน์ B</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#line_c" role="tab"
                                        aria-controls="tabs-text-3" aria-selected="false">ไลน์ C</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade active show" id="line_a" role="tabpanel">
                                    @foreach ($editUserCommission['a'] as $type => $lotteryValue)
                                        <div class="form-row my-3">
                                            <label class="col-sm col-form-label text-center">{{ $type }}</label>
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <select class="form-control" name="percent[a][{{ $type }}]"
                                                    title="กรุณาเลือกส่วนลด" required data-line="a">
                                                    {{-- @for ($i = 0; $i <= ($editUserCommission ? $editUserCommission['a'][$type]['discount']:100); $i++) --}}
                                                    @for ($i = 0; $i <= 100; $i++)
                                                        <option {{ ($i == $lotteryValue['discount'] ? 'selected' : '') }}>{{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            @if (isLotteryType($country))
                                                <input type="hidden" name="payment_line[a][{{ $type }}]">
                                            @else
                                                <div class="mb-3 mb-sm-0 col-sm">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        placeholder="กรุณาระบุเงินรางวัล" value="{{ $lotteryValue['payment'] }}" data-line="a"
                                                        name="payment_line[a][{{ $type }}]" title="กรุณาระบุเงินรางวัล" step="0.1" required
                                                        @if ($user->upline && $user->upline->isAgent()) max="{{ $uplineCommission['a'][$type]['payment'] }}" @endif>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                                <div class="tab-pane fade" id="line_b" role="tabpanel">
                                    @foreach ($editUserCommission['b'] as $type => $lotteryValue)
                                        <div class="form-row my-3">
                                            <label class="col-sm col-form-label text-center">{{ $type }}</label>
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <select class="form-control" name="percent[b][{{ $type }}]"
                                                    title="กรุณาเลือกส่วนลด" required data-line="b">
                                                    {{-- @for ($i = 0; $i <= ($editUserCommission ? $editUserCommission['b'][$type]['discount']:100); $i++) --}}
                                                    @for ($i = 0; $i <= 100; $i++)
                                                        <option {{ ($i == $lotteryValue['discount'] ? 'selected' : '') }}>{{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            @if (isLotteryType($country))
                                                <input type="hidden" name="payment_line[b][{{ $type }}]">
                                            @else
                                                <div class="mb-3 mb-sm-0 col-sm">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        placeholder="กรุณาระบุเงินรางวัล" value="{{ $lotteryValue['payment'] }}" data-line="b"
                                                        name="payment_line[b][{{ $type }}]" title="กรุณาระบุเงินรางวัล" step="0.1" required
                                                        @if ($user->upline && $user->upline->isAgent()) max="{{ $uplineCommission['b'][$type]['payment'] }}" @endif>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                                <div class="tab-pane fade" id="line_c" role="tabpanel">
                                    @foreach ($editUserCommission['c'] as $type => $lotteryValue)
                                        <div class="form-row my-3">
                                            <label class="col-sm col-form-label text-center">{{ $type }}</label>
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <select class="form-control" name="percent[c][{{ $type }}]"
                                                    title="กรุณาเลือกส่วนลด" required data-line="c">
                                                    {{-- @for ($i = 0; $i <= ($editUserCommission ? $editUserCommission['c'][$type]['discount']:100); $i++) --}}
                                                    @for ($i = 0; $i <= 100; $i++)
                                                        <option {{ ($i == $lotteryValue['discount'] ? 'selected' : '') }}>{{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            @if (isLotteryType($country))
                                                <input type="hidden" name="payment_line[c][{{ $type }}]">
                                            @else
                                                <div class="mb-3 mb-sm-0 col-sm">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        placeholder="กรุณาระบุเงินรางวัล" value="{{ $lotteryValue['payment'] }}" data-line="c"
                                                        name="payment_line[c][{{ $type }}]" title="กรุณาระบุเงินรางวัล" step="0.1" required
                                                        @if ($user->upline && $user->upline->isAgent()) max="{{ $uplineCommission['c'][$type]['payment'] }}" @endif>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if (isLotteryType($country))
                <div class="row justify-content-center tab-pane fade" id="mainA">
                    <div class="col-md-10 mx-auto">
                        <div class="card">
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h3 class="mb-0">อัตราจ่ายเงินรางวัล</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <ul class="nav nav-pills nav-fill flex-column flex-sm-row" id="payment" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link mb-sm-3 mb-md-0 active show" data-toggle="tab" href="#payment_line_a"
                                            role="tab" aria-controls="payment_line_a" aria-selected="true">ไลน์ A</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#payment_line_b" role="tab"
                                            aria-controls="payment_line_b" aria-selected="false">ไลน์ B</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#payment_line_c" role="tab"
                                            aria-controls="payment_line_c" aria-selected="false">ไลน์ C</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade active show" id="payment_line_a" role="tabpanel">
                                        @foreach ($editLotteryCommission['a'] as $key => $item)
                                            <div class="form-row my-3">
                                                <label class="col-sm-6 col-form-label text-center">{{ $key }}</label>
                                                <div class="mb-3 mb-sm-0 col-sm-6">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        placeholder="กรุณาระบุเงินรางวัล"
                                                        value="{{ $editLotteryCommission['a'][$key] ?? null }}"
                                                        name="lottery_commission[a][{{ $key }}]" title="กรุณาระบุเงินรางวัล"
                                                        max="{{ $uplineLotteryCommission['a'][$key] ?? null }}" required>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="tab-pane fade" id="payment_line_b" role="tabpanel">
                                        @foreach ($editLotteryCommission['b'] as $key => $item)
                                            <div class="form-row my-3">
                                                <label class="col-sm-6 col-form-label text-center">{{ $key }}</label>
                                                <div class="mb-3 mb-sm-0 col-sm-6">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        placeholder="กรุณาระบุเงินรางวัล"
                                                        value="{{ $editLotteryCommission['b'][$key] ?? null }}"
                                                        name="lottery_commission[b][{{ $key }}]" title="กรุณาระบุเงินรางวัล"
                                                        max="{{ $uplineLotteryCommission['b'][$key] ?? null }}" required>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="tab-pane fade" id="payment_line_c" role="tabpanel">
                                        @foreach ($editLotteryCommission['c'] as $key => $item)
                                            <div class="form-row my-3">
                                                <label class="col-sm-6 col-form-label text-center">{{ $key }}</label>
                                                <div class="mb-3 mb-sm-0 col-sm-6">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        placeholder="กรุณาระบุเงินรางวัล"
                                                        value="{{ $editLotteryCommission['c'][$key] ?? null }}"
                                                        name="lottery_commission[c][{{ $key }}]" title="กรุณาระบุเงินรางวัล"
                                                        max="{{ $uplineLotteryCommission['c'][$key] ?? null }}" required>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                </div>
            @endif
        </div>
    </form>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var agentForm = document.forms['setting-form'];
            var $agentForm = $(agentForm);
            var updateUrl = $agentForm.attr('action');

            agentForm['submit-btn'].onclick = async e => {
                const btn = e.target;
                if (!agentForm.checkValidity()) {
                    e.preventDefault();
                    for (const input of agentForm.elements) {
                        if (!input.max) continue;
                        if (input.value <= input.max) continue;
                        const line = input.dataset.line;
                        const target = `line_${line}`;
                        const targetTab = document.querySelector('a[href="#mainC"]');
                        const targetLink = document.querySelector(`a[href="#${target}"]`);
                        if (!targetTab.className.includes('active show')) {
                            targetTab.click();
                            await sleep(300);
                        }
                        if (targetLink.className.includes('active show')) break;
                        targetLink.click();
                        await sleep(300);
                    }
                    agentForm.reportValidity();
                }
            }

            /**
             * Agent Form Validate
             */
            $agentForm.on('submit', function(e) {
                e.preventDefault();
                swal('ยืนยันการแก้ไข?', 'โปรดตรวจสอบความถูกต้องของข้อมูลทุกครั้งก่อนดำเนินการแก้ไข', 'warning', {
                    buttons: ['ยกเลิก', 'ยืนยัน'],
                    dangerMode: true
                }).then((sure) => {
                    if(sure){
                        $('[name*=user_holdhelp]').attr('disabled', false);
                        // const formData = new FormData(form);
                        $.ajax({
                            url: updateUrl,
                            type: "PUT",
                            dataType: 'JSON',
                            data: $agentForm.serialize(),
                            success: function(response) {
                                if (!response.success) {
                                    return swal('ขออภัย', response.text, 'error', {button: 'ปิด'});
                                }
                                swal('แก้ไขการตั้งค่าเรียบร้อย', ' ', 'success', {
                                    buttons: ['ปิด', 'ย้อนกลับ']
                                }).then(redirect => redirect ? location.assign(`{{ route('lotterySetting.index', $user->id) }}`) : null);
                                // agentForm.reset();
                            }
                        });
                    }
                });
            });

            // $agentForm.validate({
            //     errorElement: 'span',
            //     errorClass: 'text-danger text-sm',
            //     highlight: function(element) {
            //         $(element).removeClass("is-valid");
            //         $(element).addClass("is-invalid");
            //         while (true) {
            //             const span = element.nextElementSibling;
            //             if (!span) break;
            //             const nextSpan = span.nextElementSibling;
            //             if (!span) break;
            //             span.remove();
            //         }
            //     },
            //     unhighlight: function(element) {
            //         $(element).removeClass("is-invalid");
            //         $(element).addClass("is-valid");
            //         while (true) {
            //             const span = element.nextElementSibling;
            //             if (!span) break;
            //             span.remove();
            //         }
            //     },
            //     rules: {
            //         password: {
            //             minlength: 6
            //         },
            //         phone: {
            //             maxlength: 10,
            //             minlength: 10,
            //         }
            //     },
            //     messages: {
            //         password: {
            //             required: "กรุณาระบุรหัสผ่าน",
            //             minlength: "รหัสผ่านต้องมีความยาวไม่น้อยกว่า 6 ตัวอักษร"
            //         },
            //         phone: {
            //             required: "กรุณาระบุหมายเลขโทรศัพท์",
            //             maxlength: "ท่านกรอกหมายเลขโทรศัพท์ไม่ถูกต้อง",
            //             minlength: "ท่านกรอกหมายเลขโทรศัพท์ไม่ถูกต้อง",
            //         }
            //     },
            //     submitHandler: function(form) {
            //         swal('ยืนยันการแก้ไข?', 'โปรดตรวจสอบความถูกต้องของข้อมูลทุกครั้งก่อนดำเนินการแก้ไข', 'warning', {
            //             buttons: ['ยกเลิก', 'ยืนยัน'],
            //             dangerMode: true
            //         }).then((sure) => {
            //             if(sure){
            //                 $('[name*=user_holdhelp]').attr('disabled', false);
            //                 const formData = new FormData(form);
            //                 $.ajax({
            //                     url: updateUrl,
            //                     type: "PUT",
            //                     dataType: 'JSON',
            //                     data: $agentForm.serialize(),
            //                     success: function(response) {
            //                         if (!response.success) {
            //                             return swal('ขออภัย', response.text, 'error', {button: 'ปิด'});
            //                         }
            //                         swal('แก้ไขการตั้งค่าเรียบร้อย', ' ', 'success', {
            //                             buttons: ['ปิด', 'ย้อนกลับ']
            //                         }).then(redirect => redirect ? location.assign(`{{ route('lotterySetting.index', $user->id) }}`) : null);
            //                         // agentForm.reset();
            //                     }
            //                 });
            //             }
            //         });
            //     }
            // });

            /**
             * Fetch Username by Position
             */
            $('select[name="position"]').on('change', function() {
                var select_value = $(this).val();
                // if (select_value == 1) {
                //     var option = "<option value='0'>บริษัท</option>";
                //     $('select[name="advisor"]').append(option);
                // } else {

                // }
                $.get("{{ route('agent.api.getUsername') }}", {
                    position: select_value
                }, function(response) {
                    if (response.username.length > 0) {
                        var inputUsername = $('input[name="username"]');
                        inputUsername.val(response.agentusername);
                        inputUsername.attr('readonly', true);

                    }
                });
            });

            $('.limit-helper').on('keyup', function() {
                var help_checkbox = $('.help-checkbox');
                var firstValue = $(this).val();
                var attr_help = $(this).attr('data-helper_name');

                if (help_checkbox.is(':checked')) {
                    $.each($('[data-helper_name="' + attr_help + '"]'), function(index, value) {
                        $(this).val(firstValue);
                    });
                }
            });

            var is_first_help = false;
            $('.advisor_select:eq(0)').on('change', function() { // เลือกช่อง ผู้แนะนำถือสู้
                if(is_first_help) return false;
                
                var eq = $('.advisor_select').index(this);
                var max = +$(this).data('max_percent');
                var value = +$(this).val();
                var balance = max - value;

                var next_option = $('.user_select:eq(' + eq + ') option');
                next_option.not(':eq(0)').remove();
                for (i = 0; i <= balance; i++) {
                    var option = "<option>" + i + "</option>";
                    next_option.closest('select').append(option);
                }
                next_option = $('.user_select:eq(' + eq + ') option');
                next_option.first().attr('selected', false);
                next_option.last().attr('selected', true);

                $('.advisor_select option').each(function(i, n) {
                    if (this.text == value) {
                        $(this).prop('selected', true);
                    }
                });

                $('.user_select').each(function(i, n) {
                    if (i > 0) {
                        $(this).find('option').remove();
                        for (ex = 0; ex <= balance; ex++) {
                            var option = "<option>" + ex + "</option>";
                            $(this).closest('select').append(option);
                        }
                        $('.user_select:eq(' + i + ') option').last().attr('selected', true);
                    }
                });
                is_first_help = true;
            });

            $('.user_select:eq(0)').on('change', function() { // เลือกช่อง เอเยนต์ถือสู้
                var eq = $('.user_select').index(this);
                var max = +$(this).data('max_percent');
                var value = +$(this).val();
                var balance = max - value;

                var next_option = $('.advisor_select:eq(' + eq + ') option');
                next_option.not(':eq(0)').remove();
                for (i = 0; i <= balance; i++) {
                    var option = "<option>" + i + "</option>";
                    next_option.closest('select').append(option);
                }
                next_option = $('.advisor_select:eq(' + eq + ') option');
                next_option.first().attr('selected', false);
                next_option.last().attr('selected', true);

                $('.user_select option').each(function(i, n) {
                    if (this.text == value) {
                        $(this).prop('selected', true);
                    }
                });

                $('.advisor_select').each(function(i, n) {
                    if (i > 0) {
                        $(this).find('option').remove();
                        for (ex = 0; ex <= balance; ex++) {
                            var option = "<option>" + ex + "</option>";
                            $(this).closest('select').append(option);
                        }
                        $('.advisor_select:eq(' + i + ') option').last().attr('selected', true);
                    }
                });
            });

            $('.advisor_select').on('change', function(){
                var eq = $('.advisor_select').index(this);
                var max = +$(this).data('max_percent');
                var value = +$(this).val();
                var balance = max - value;

                $(`.user_select:eq(${eq})`).find('option').remove();
                var opton = '';
                for(i=0;i<=balance;i++){
                    opton += `<option>${i}</option>`;
                }
                $(`.user_select:eq(${eq})`).html(opton);
                $(`.user_select:eq(${eq}) option`).last().attr('selected', true);
            });

            var is_abc = {
                'a': 0,
                'b': 0,
                'c': 0
            };
            $('select[name*="percent"]').on('change', function() {
                var val = $(this).val();
                var at = $(this).attr('name').slice(8, -4);
                if (is_abc[at] <= 0) {
                    $('select[name*="percent[' + at + ']"] option').each(function() {
                        if (this.text == val) {
                            $(this).prop('selected', true);
                        }
                        is_abc[at]++;
                    });
                }
            });

            var is_abc_2 = {
                'a': 0,
                'b': 0,
                'c': 0
            };
            $('[name*=payment_line]').on('change', function() {
                var val = $(this).val();
                var at = $(this).attr('name').slice(13, -4);
                if (is_abc_2[at] <= 0) {
                    $('[name*="payment_line['+at+']"]').each(function(i, n) {
                        $(this).val(val);
                    });
                    is_abc_2[at]++;
                }
            });

            $('[selectPercent]').on('change', function(){
                var val = $(this).val();
                var url = `{{ route('agent.api.percent', $user->id) }}`;
                var dataSet = {type:val};
                var el = $('[showPercent]');
                var html =  ``;
                $.getJSON(url, dataSet, function(response){
                    $(response).each(function(i, n){
                        html += `<li class="list-group-item px-0">
                                    <div class="form-row align-items-center">
                                        <div class="col ml--2">
                                            <h4 class="mb-0">
                                                <a href="#!">${n.position}</a>
                                            </h4>
                                        </div>
                                        <div class="col-auto">
                                            <h4 class="mb-0">
                                                <a href="#!">${n.percent}%</a>
                                            </h4>
                                        </div>
                                    </div>
                                </li>`;
                    });
                    el.html(html);
                });
            });

        });

    </script>
@endsection