@extends('layouts.master')

@section('title')
    LT-168 :: เพิ่มผู้ใช้เอเยนต์
@endsection

@section('sub_title')
    จัดการผู้ใช้เอเยนต์
@endsection

@section('content')
    <form id="agent-form">
        @csrf

        @if ($lotteryRound)
            {{-- <fieldset id="step-1" data-step="1">
                <div class="row">
                    <div class="col-md-10 mx-auto">
                        <div class="card">
                            <h3 class="card-header">เลือกงวดที่จะตั้งค่าอัตราจ่าย</h3>
                            <div class="card-body text-center">
                                <p class="text-center">
                                    ในขั้นตอนต่อไปจะเป็นการตั้งค่าอัตราจ่ายของหวยแต่ละงวด<br>โปรดเลือกหวยงวดที่คุณต้องการตั้งค่า
                                </p>
                                <div class="btn-group btn-group-toggle mb-4" data-toggle="buttons">
                                    <label class="btn">
                                        <input type="radio" name="lottery_round_id" value="{{ $lotteryRound->id }}"
                                            required>
                                        งวดปัจจุบัน
                                    </label>
                                    <label class="btn">
                                        <input type="radio" name="lottery_round_id" value="">
                                        งวดหน้า
                                    </label>
                                </div>
                                <div class="text-center">
                                    <span id="lottery_round_id-error" class="text-center text-danger text-sm"
                                        style="display: none;"></span>
                                </div>
                                <div class="row">
                                    <div class="col text-right">
                                        <button type="button" class="btn btn-outline-default" data-nextstep-notuse="1"
                                            onclick="step('next', this)">ถัดไป <i
                                                class="fas fa-angle-double-right"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset> --}}
        @endif

        <fieldset id="step-1" data-step="1">
            <div class="row">
                <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">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>ระดับสมาชิก</label>
                                        <select class="form-control" name="position" title="กรุณาเลือกระดับสมาชิก" required>
                                            <option value="" selected disabled>กรุณาเลือกระดับสมาชิก</option>
                                            <option value="{{ Auth::user()->position + 1 }}">
                                                {{ positionText(Auth::user()->position + 1) }}</option>
                                        </select>
                                    </div>
                                </div>
                                @php
                                $selfDetail = Auth::user();
                                @endphp
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>ภายใต้เอเยนต์</label>
                                        <select class="form-control" name="advisor" title="กรุณาเลือกเอเยนต์" required>
                                            <option value="" selected disabled>กรุณาเลือกเอเยนต์</option>
                                            <option value="{{ $selfDetail->id }}">{{ $selfDetail->username }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>ชื่อผู้ใช้</label>
                                        <input class="form-control" type="text" name="username" title="กรุณาระบุชื่อผู้ใช้"
                                            placeholder="กรุณากรอกชื่อผู้ใช้" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>รหัสผ่าน</label>
                                        <input class="form-control" type="text" minlength="6" value=""
                                            placeholder="กรุณากรอกรหัสผ่าน" name="password" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>ชื่อ - นามสกุล</label>
                                        <input class="form-control" type="text" name="fullname" value=""
                                            title="กรุณาระบุชื่อ - นามสกุล" placeholder="กรุณากรอกรหัสผ่าน" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>เบอร์โทรศัพท์</label>
                                        <input class="form-control" type="text" name="phone" value="" maxlength="10"
                                            minlength="10" placeholder="กรุณากรอกรหัสผ่าน" oninput="return phoneCheck(this)"
                                            required>
                                        <span class="invalid-feedback">เบอร์โทรศัพท์ไม่ถูกต้อง</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="text-center">
                                {{-- <button type="button" class="btn btn-outline-danger" onclick="step('prev', this)"
                                    data-prevstep="1"><i class="fas fa-angle-double-left"></i>
                                    ย้อนกลับ</button>
                                <button type="button" class="btn btn-outline-default" onclick="step('next', this)"
                                    data-nextstep="1">ถัดไป <i
                                        class="fas fa-angle-double-right"></i></button> --}}
                                <button id="submit" type="submit" class="btn btn-outline-default">
                                    <i class="fas fa-save"></i> เพิ่มเอเยนต์</button>        
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset id="step-2" data-step="2" disabled
            style="display:none;">
            <div class="row">
                <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 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 ($lottery as $key => $lotteryValue)
                                <div class="form-row">
                                    <label class="col-sm-3 col-form-label text-center">{{ $lotteryValue->type }}</label>
                                    <div class="form-group col-sm-3">
                                        <input type="nubmer" class="form-control limit-helper" placeholder="ขั้นต่ำต่อไม้"
                                            value="{{ $userLimit ? $userLimit[$lotteryValue->type]['min'] : '' }}"
                                            name="min[{{ $key }}]" 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="{{ $userLimit ? $userLimit[$lotteryValue->type]['max'] : '' }}"
                                            name="max[{{ $key }}]" 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="สูงสุดต่อหมายเลข"
                                            value="{{ $userLimit ? $userLimit[$lotteryValue->type]['max_per_number'] : '' }}"
                                            name="max_per_number[{{ $key }}]" title="กรุณาระบุข้อมูลให้ครบถ้วน" min="0"
                                            data-helper_name="max_per_number" required>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col text-left">
                                    <button type="button" class="btn btn-outline-danger"
                                        data-prevstep-notuse="2" onclick="step('prev', this)"><i
                                            class="fas fa-angle-double-left"></i> ย้อนกลับ</button>
                                </div>
                                <div class="col text-right">
                                    <button type="button" class="btn btn-outline-default"
                                        data-nextstep-notuse="2"
                                        onclick="step('next', this)">ถัดไป <i
                                            class="fas fa-angle-double-right"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset id="step-3" data-step="3" disabled
            style="display:none;">
            <div class="row">
                <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 ($lottery as $key => $lotteryValue)
                                        @php
                                        $maxLineA = $userCommission ?
                                        $userCommission['a'][$lotteryValue->type]['discount']:100;
                                        @endphp
                                        <div class="form-row my-3">
                                            <label
                                                class="col-sm-4 col-form-label text-center">{{ $lotteryValue->type }}</label>
                                            <div class="form-group col-sm-4">
                                                <select class="form-control" name="percent[a][{{ $key }}]"
                                                    title="กรุณาเลือกส่วนลด" required>
                                                    <option disabled="" value="" {{ (Auth::user()->isAdmin() ? 'selected':'') }}>ส่วนลด / เงินรางวัล</option>
                                                    @if ($userCommission && $maxLineA == 0)
                                                        <option {{ (Auth::user()->isAdmin() ? '':'seelcted') }}>{{ $maxLineA }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineA; $i++)
                                                            <option {{ (Auth::user()->isAdmin() ? '':($i == $maxLineA ? 'selected' : '')) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <input type="text" min="1" class="form-control"
                                                    placeholder="กรุณาระบุเงินรางวัล"
                                                    value="{{ $userCommission ? $userCommission['a'][$lotteryValue->type]['payment'] : '' }}"
                                                    name="payment_line[a][{{ $key }}]" title="กรุณาระบุเงินรางวัล" required>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="tab-pane fade" id="line_b" role="tabpanel">
                                    @foreach ($lottery as $key => $lotteryValue)
                                        @php
                                        $maxLineB = $userCommission ?
                                        $userCommission['b'][$lotteryValue->type]['discount']:100;
                                        @endphp
                                        <div class="row my-3">
                                            <label
                                                class="col-sm-4 col-form-label text-center">{{ $lotteryValue->type }}</label>
                                            <div class="form-group col-sm-4">
                                                <select class="form-control" name="percent[b][{{ $key }}]"
                                                    title="กรุณาเลือกส่วนลด" required>
                                                    <option disabled="" value="" {{ (Auth::user()->isAdmin() ? 'seelcted':'') }}>ส่วนลด / เงินรางวัล</option>
                                                    @if ($userCommission && $maxLineB == 0)
                                                        <option {{ (Auth::user()->isAdmin() ? '':'seelcted') }}>{{ $maxLineB }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineB; $i++)
                                                            <option {{ (Auth::user()->isAdmin() ? '':($i == $maxLineB ? 'selected' : '')) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <input type="text" min="1" class="form-control"
                                                    placeholder="กรุณาระบุเงินรางวัล"
                                                    value="{{ $userCommission ? $userCommission['b'][$lotteryValue->type]['payment'] : '' }}"
                                                    name="payment_line[b][{{ $key }}]" title="กรุณาระบุเงินรางวัล" required>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="tab-pane fade" id="line_c" role="tabpanel">
                                    @foreach ($lottery as $key => $lotteryValue)
                                        @php
                                        $maxLineC = $userCommission ?
                                        $userCommission['c'][$lotteryValue->type]['discount']:100;
                                        @endphp
                                        <div class="row my-3">
                                            <label
                                                class="col-sm-4 col-form-label text-center">{{ $lotteryValue->type }}</label>
                                            <div class="form-group col-sm-4">
                                                <select class="form-control" name="percent[c][{{ $key }}]"
                                                    title="กรุณาเลือกส่วนลด" required>
                                                    <option disabled="" value="" {{ (Auth::user()->isAdmin() ? 'seelcted':'') }}>ส่วนลด / เงินรางวัล</option>
                                                    @if ($userCommission && $maxLineC == 0)
                                                        <option {{ (Auth::user()->isAdmin() ? '':'seelcted') }}>{{ $maxLineC }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineC; $i++)
                                                            <option {{ (Auth::user()->isAdmin() ? '':($i == $maxLineC ? 'selected' : '')) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <input type="text" min="1" class="form-control"
                                                    placeholder="กรุณาระบุเงินรางวัล"
                                                    value="{{ $userCommission ? $userCommission['c'][$lotteryValue->type]['payment'] : '' }}"
                                                    name="payment_line[c][{{ $key }}]" title="กรุณาระบุเงินรางวัล" required>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col text-left">
                                    <button type="button" class="btn btn-outline-danger"
                                        data-prevstep-notuse="3" onclick="step('prev', this)">
                                        <i class="fas fa-angle-double-left"></i> ย้อนกลับ</button>
                                </div>
                                <div class="col text-right">
                                    <button type="button" class="btn btn-outline-default"
                                        data-nextstep-notuse="3" onclick="step('finish', this)">
                                        ถัดไป <i class="fas fa-angle-double-right"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset id="step-4" data-step="4" disabled
            style="display:none;">
            <div class="row">
                <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">
                            @php
                            $userPosition = Auth::user()->position;
                            @endphp
                            <div class="row">
                                <label class="col-sm-4 col-form-label text-center">ประเภทหวย</label>
                                <label class="col-sm-4 col-form-label text-center adv_hh">{{ positionText($userPosition) }} ถือสู้ (%)</label>
                                <label class="col-sm-4 col-form-label text-center" user_hold="">{{ positionText(($userPosition+1)) }} ถือสู้ (%)</label>
                            </div>
                            @foreach ($lottery as $key => $lotteryValue)
                                @php
                                $usagePerent = $userPercent ? $userPercent[$lotteryValue->type][$userPosition]:100;
                                @endphp
                                <div class="row my-3">
                                    <label class="col-sm-4 col-form-label text-center">{{ $lotteryValue->type }}</label>
                                    <div class="form-group col-sm-4">
                                        <select class="form-control advisor_select" name="advisor_holdhelp[{{ $key }}]"
                                            data-max_percent="{{ $usagePerent }}">
                                            <option selected="" disabled="" value="">ผู้แนะนำถือสู้</option>
                                            @for ($i = 0; $i <= $usagePerent; $i++)
                                                <option>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <select class="form-control user_select" name="user_holdhelp[{{ $key }}]"
                                            data-max_percent="{{ $usagePerent }}" readonly>
                                            <option selected="" disabled="" value="">ผู้ใช้ถือสู้</option>
                                            @for ($i = 0; $i <= $usagePerent; $i++)
                                                <option>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="card-footer row">
                            <div class="col text-left">
                                <button type="button" class="btn btn-outline-danger" data-prevstep-notuse="4" onclick="step('prev', this)">
                                    <i class="fas fa-angle-double-left"></i> ย้อนกลับ</button>
                            </div>
                            <div class="col text-right">
                                <button id="submit" type="submit" class="btn btn-outline-default">
                                    <i class="fas fa-save"></i> เพิ่มเอเยนต์</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </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">
        const agentForm = document.forms['agent-form'];

        async function phoneCheck (el) {
            el.value = el.value.replace(/[^0-9]+/g, '');
            if (el.value.length !== 10) {
                el.classList.add('is-invalid');
            } else {
                el.classList.remove('is-invalid');
            }

            return await checkPhoneNumberAvailable(el);
        }

        async function checkPhoneNumberAvailable (el) {
            const phoneNumber = el.value;
            if (el.value.length < 10) return console.log(phoneNumber);
            tryCatchSwal(async () => {
                const result = await fetchJson(`{{ route('agent.checkAvailablePhoneNumber') }}/${phoneNumber}`);
                if (!result) return false;
                if (result.available) return false;
                el.classList.add('is-invalid');
                swal('เบอร์โทรศัพท์ซ้ำ', 'ขออภัย มีผู้ใช้งานเบอร์โทรศัพท์นี้แล้ว โปรดใช้เบอร์อื่น',
                    'error');
                return false;
            });
        }

        async function step (direction, btn) {
            try {
                const next = direction === 'next' || direction === 'finish';
                const currentFieldset = btn.closest('fieldset');
                const currentStep = +currentFieldset.dataset.step;
                const targetStep = !isNaN(+direction) ? +direction : currentStep + (next ? +1 : -1);
                const targetFieldset = document.querySelector('#step-' + targetStep);
                const fieldsetElements = [].slice.call(currentFieldset.elements);
                const fieldsetInvalid = fieldsetElements.filter(el => el.className.includes('is-invalid')).length
                const form = btn.form;

                // if (next && !form.reportValidity()) {
                //     return false;
                // }
                if (next && fieldsetInvalid) {
                    return swal({
                        title: 'เดี๋ยวก่อน',
                        text: 'มีข้อมูลบางส่วนยังไม่ถูกต้อง โปรดตรวจสอบอีกครั้ง',
                        icon: 'warning'
                    });
                }
                
                for (const fieldset of form.querySelectorAll('fieldset')) {
                    fieldset.disabled = direction === 'finish' ? false : fieldset.disabled;
                }

                currentFieldset.disabled = direction !== 'finish' ? true : false;
                targetFieldset.disabled = false;
                
                return await fadeOut(currentFieldset)
                    .then(() => fadeIn(targetFieldset))
                    .then(() => true);
            } catch (err) {
                return swal('ขออภัย', 'พบข้อบกพร่อง โปรดตรวจสอบ', 'error');
            }
        }

        agentForm.addEventListener('submit', e => {
            e.preventDefault();
            tryCatchSwal(async () => {
                switchSubmitBtnState(agentForm);
                const confirm = await swal({
                    title: 'ยืนยันเพิ่มเอเยนต์',
                    text: 'หากคุณได้ตรวจสอบข้อมูลทั้งหมดถูกต้องแล้ว โปรดยืนยันเพื่อดำเนินการต่อ',
                    icon: 'info',
                    buttons: {
                        cancel: 'ยกเลิก',
                        confirm: {
                            text: 'ยืนยัน',
                            closeModal: false
                        }
                    }
                });
                if (!confirm) return;
                for await (const input of document.querySelectorAll('input[name^="user_holdhelp"]')) {
                    input.disabled = false;
                }
                const formData = new FormData(agentForm);
                const result = await fetchJson('{{ route('manage.store') }}', 'POST', formData);
                if (!result) return false;
                const setting = await swal({
                    title: 'เพิ่มเอเยนต์เรียบร้อย',
                    text: '',
                    icon: 'success',
                    buttons: ['กลับ', 'ตั้งค่าหวย'],
                });

                location.href = setting ? result.route : `{{ route('manage.index') }}`;
            }, () => {
                switchSubmitBtnState(agentForm);
                for (const input of document.querySelectorAll('input[name^="user_holdhelp"]')) {
                    input.disabled = true;
                }
            });
        });

        $(document).ready(function() {

            /**
             * 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) {
                        // $('select[name="advisor"]').find('option').not(':first').remove();
                        // $.each(response.username, function(ind, val) {
                        //     var option = "<option value='" + val.id + "'>" + val.username +
                        //         "</option>";
                        //     $('select[name="advisor"]').append(option);
                        // });
                        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]++;
                }
            });

        });

        // $('#agent-form').validate({
        //   errorElement: false,
        //   errorClass: 'text-danger',
        //   focusInvalid: false,
        //   rules: {
        //     position: {
        //       required: true
        //     },
        //     advisor: {
        //       required: true
        //     }
        //   },
        //   messages: {
        //     position: {
        //       required: "กรุณาเลือกระดับสมาชิก",
        //     },
        //     body: {
        //       advisor: "Please Enter Body",
        //       maxlength: "Your last body maxlength should be 250 characters long."
        //     },
        //   }
        // });

    </script>
@endsection