@extends('layouts.master')

@section('title')
    LT-99 :: ตั้งค่าเมมเบอร์
@endsection

@section('sub_title')
ตั้งค่าเมมเบอร์
@endsection

@section('content')
    <form id="setting-form" action="{{ route('member.limit.update', $limitId) }}">
        @csrf
        <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 type="submit" class="btn btn-outline-default"><i class="fas fa-save"></i> บันทึกรายการ</button>
                    </div>                    
                </div>
            </div>
            <div class="card-body">
                @foreach ($limit->limit as $lotteryType => $limitVal)
                <div class="form-row">
                    <label class="col-sm-3 col-form-label text-center">{{ $lotteryType }}</label>
                    <div class="mb-3 col-sm-3">
                        <input type="number" class="form-control limit-helper" placeholder="ขั้นต่ำต่อไม้" value="{{ +$limitVal['min'] }}" name="min[{{ $lotteryType }}]" title="กรุณาระบุข้อมูลให้ครบถ้วน" min="0" data-helper_name="min" required="" />
                    </div>
                    <div class="mb-3 col-sm-3">
                        <input type="number" class="form-control limit-helper" placeholder="สูงสุดต่อไม้" value="{{ +$limitVal['max'] }}" name="max[{{ $lotteryType }}]" title="กรุณาระบุข้อมูลให้ครบถ้วน" min="0" data-helper_name="max" required="" />
                    </div>
                    <div class="mb-3 col-sm-3">
                        <input type="number" class="form-control limit-helper" placeholder="สูงสุดต่อหมายเลข" value="{{ +$limitVal['max_per_number'] }}" name="max_per_number[{{ $lotteryType }}]" title="กรุณาระบุข้อมูลให้ครบถ้วน" min="0" data-helper_name="max_per_number" required="" />
                    </div>
                </div>
                @endforeach
            </div>
        </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 = $('#setting-form');
            var updateUrl = agentForm.attr('action');

            /**
             * Agent Form Validate
             */

            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();
                    }
                },
                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(``) : null);
                                    // agentForm[0].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 = ``;
                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="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