@extends('layouts.master')

@section('title')
    LT-99 :: ตั้งค่าอัตราส่วน {{ lotteryName($country) }}
@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">
        @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

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

        {{-- AgentCommission --}}
        <fieldset id="step-{{ $lotteryRound ? 3 : 2 }}" data-step="{{ $lotteryRound ? 3 : 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">ส่วนลด {{ isLotteryType($country) ? '' : '/ เงินรางวัล' }}</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-1" 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 ($lotteryType as $key => $item)
                                        @php
                                        $maxLineA = $uplineCommission ? $uplineCommission['a'][$item['type']]['discount'] : 100;
                                        @endphp
                                        <div class="form-row my-3">
                                            <label
                                                class="col-sm col-form-label text-center">{{ $item['type'] }}</label>
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <select class="form-control" data-line="a" name="percent[a][{{ $item['type'] }}]"
                                                    title="กรุณาเลือกส่วนลด" required>
                                                    <option disabled="" value="" {{ (($user->upline && $user->upline->isAdmin()) || $user->isAdmin() ? 'selected' : '') }}>ส่วนลด</option>
                                                    @if ($uplineCommission && $maxLineA == 0)
                                                        <option {{ ($user->upline && $user->upline->isAdmin() ? '' : 'selected') }}>{{ $maxLineA }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineA; $i++)
                                                            <option {{ $user->isAdmin() ? '' : ($user->upline && $user->upline->isAdmin() ? '' : ($i == $maxLineA ? 'selected' : '')) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            @if ($ltType)
                                                <input type="hidden" name="payment_line[a][{{ $item['type'] }}]">
                                            @else
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <input type="number" step="0.01" min="0" class="form-control"
                                                    placeholder="กรุณาระบุเงินรางวัล" data-line="a"
                                                    value="{{ $uplineCommission ? $uplineCommission['a'][$item['type']]['payment'] : null }}"
                                                    min="0" max="{{ $uplineCommission ? $uplineCommission['a'][$item['type']]['payment'] : null}}"
                                                    name="payment_line[a][{{ $item['type'] }}]" title="กรุณาระบุเงินรางวัล" required>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                                <div class="tab-pane fade" id="line_b" role="tabpanel">
                                    @foreach ($lotteryType as $key => $item)
                                        @php
                                        $maxLineB = $uplineCommission ? $uplineCommission['b'][$item['type']]['discount'] : 100;
                                        @endphp
                                        <div class="form-row my-3">
                                            <label
                                                class="col-sm col-form-label text-center">{{ $item['type'] }}</label>
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <select class="form-control" data-line="b" name="percent[b][{{ $item['type'] }}]"
                                                    title="กรุณาเลือกส่วนลด" required>
                                                    <option disabled="" value="" {{ (($user->upline && $user->upline->isAdmin()) || $user->isAdmin() ? 'selected' : '') }}>ส่วนลด</option>
                                                    @if ($uplineCommission && $maxLineB == 0)
                                                        <option {{ ($user->upline && $user->upline->isAdmin() ? '' : 'selected') }}>{{ $maxLineB }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineB; $i++)
                                                            <option {{ $user->isAdmin() ? '' : ($user->upline && $user->upline->isAdmin() ? '' : ($i == $maxLineB ? 'selected' : '')) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            @if ($ltType)
                                                <input type="hidden" name="payment_line[b][{{ $item['type'] }}]">
                                            @else
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <input type="number" step="0.01" min="0" class="form-control"
                                                    placeholder="กรุณาระบุเงินรางวัล" data-line="b"
                                                    value="{{ $uplineCommission ? $uplineCommission['b'][$item['type']]['payment'] : '' }}"
                                                    min="0" max="{{ $uplineCommission ? $uplineCommission['b'][$item['type']]['payment'] : null}}"
                                                    name="payment_line[b][{{ $item['type'] }}]" title="กรุณาระบุเงินรางวัล" required>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                                <div class="tab-pane fade" id="line_c" role="tabpanel">
                                    @foreach ($lotteryType as $key => $item)
                                        @php
                                        $maxLineC = $uplineCommission ? $uplineCommission['c'][$item['type']]['discount'] : 100;
                                        @endphp
                                        <div class="form-row my-3">
                                            <label
                                                class="col-sm col-form-label text-center">{{ $item['type'] }}</label>
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <select class="form-control" data-line="c" name="percent[c][{{ $item['type'] }}]"
                                                    title="กรุณาเลือกส่วนลด" required>
                                                    <option disabled="" value="" {{ (($user->upline && $user->upline->isAdmin()) || $user->isAdmin() ? 'selected' : '') }}>ส่วนลด</option>
                                                    @if ($uplineCommission && $maxLineC == 0)
                                                        <option {{ ($user->upline && $user->upline->isAdmin() ? '' : 'selected') }}>{{ $maxLineC }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineC; $i++)
                                                            <option {{ $user->isAdmin() ? '' : ($user->upline && $user->upline->isAdmin() ? '' : ($i == $maxLineC ? 'selected' : '')) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            @if ($ltType)
                                                <input type="hidden" name="payment_line[c][{{ $item['type'] }}]">
                                            @else
                                            <div class="mb-3 mb-sm-0 col-sm">
                                                <input type="number" step="0.01" min="0" class="form-control"
                                                    placeholder="กรุณาระบุเงินรางวัล" data-line="c"
                                                    value="{{ $uplineCommission ? $uplineCommission['c'][$item['type']]['payment'] : '' }}"
                                                    min="0" max="{{ $uplineCommission ? $uplineCommission['c'][$item['type']]['payment'] : null}}"
                                                    name="payment_line[c][{{ $item['type'] }}]" title="กรุณาระบุเงินรางวัล" required>
                                                </div>
                                            @endif
                                        </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" onclick="step('prev', this)">
                                        <i class="fas fa-angle-double-left"></i> ย้อนกลับ</button>
                                </div>
                                @if ($user->isAdmin() && !$ltType)
                                    <div class="col text-right">
                                        <button onclick="step('finish', this); this.form.submit.click()" type="button" class="btn btn-outline-default">
                                            <i class="fas fa-save"></i> ตั้งค่า</button>
                                    </div>
                                @else
                                    <div class="col text-right">
                                        <button type="button" class="btn btn-outline-default" onclick="step('finish', this)">
                                            ถัดไป <i class="fas fa-angle-double-right"></i></button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        {{-- LotteryCommission --}}
        @if ($ltType)
            <fieldset id="step-{{ $lotteryRound ? 4 : 3 }}" data-step="{{ $lotteryRound ? 4 : 3 }}" disabled="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="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 ($lotteryResultFormat as $key => $item)
                                            <div class="form-row my-3">
                                                <label class="col-sm-6 col-form-label text-center">{{ $item['result_type'] }}</label>
                                                <div class="mb-3 mb-sm-0 col-sm-6">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        placeholder="กรุณาระบุเงินรางวัล"
                                                        value="{{ $uplineLotteryCommission['a'][$item['result_type']] ?? null }}"
                                                        name="lottery_commission[a][{{ $item['result_type'] }}]" title="กรุณาระบุเงินรางวัล"
                                                        max="{{ $uplineLotteryCommission['a'][$item['result_type']] ?? null }}" required>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

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

                                    <div class="tab-pane fade" id="payment_line_c" role="tabpanel">
                                        @foreach ($lotteryResultFormat as $key => $item)
                                            <div class="form-row my-3">
                                                <label class="col-sm-6 col-form-label text-center">{{ $item['result_type'] }}</label>
                                                <div class="mb-3 mb-sm-0 col-sm-6">
                                                    <input type="number" step="0.01" min="0" class="form-control"
                                                        placeholder="กรุณาระบุเงินรางวัล"
                                                        value="{{ $uplineLotteryCommission['c'][$item['result_type']] ?? null }}"
                                                        name="lottery_commission[c][{{ $item['result_type'] }}]" title="กรุณาระบุเงินรางวัล"
                                                        max="{{ $uplineLotteryCommission['c'][$item['result_type']] ?? null }}" 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" onclick="step('prev', this)">
                                            <i class="fas fa-angle-double-left"></i> ย้อนกลับ</button>
                                    </div>
                                    @if ($user->isAdmin())
                                        <div class="col text-right">
                                            <button onclick="step('finish', this); this.form.submit.click()" type="button" class="btn btn-outline-default">
                                                <i class="fas fa-save"></i> ตั้งค่า</button>
                                        </div>
                                    @else
                                        <div class="col text-right">
                                            <button type="button" class="btn btn-outline-default" onclick="step('finish', this)">
                                                ถัดไป <i class="fas fa-angle-double-right"></i></button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        @endif

        {{-- AgentPercent --}}
        <fieldset id="step-{{ $lotteryRound ? ($ltType ? 5 : 4) : ($ltType ? 4 : 3) }}"
            data-step="{{ $lotteryRound ? ($ltType ? 5 : 4) : ($ltType ? 4 : 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">
                            @php $userPosition = $user->upline ? $user->upline->position : $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 ($lotteryType as $key => $item)
                                @php $usagePerent = $uplinePercent ? $uplinePercent[$item['type']][$userPosition] : 100; @endphp
                                <div class="row my-3">
                                    <label class="col-sm-4 col-form-label text-center">{{ $item['type'] }}</label>
                                    <div class="mb-3 mb-sm-0 col-sm-4">
                                        <select class="form-control advisor_select" name="advisor_holdhelp[{{ $item['type'] }}]"
                                            data-max_percent="{{ $user->isAdmin() ? 100 : $usagePerent }}">
                                            <option selected="" disabled="" value="">ผู้แนะนำถือสู้</option>
                                            @for ($i = ($user->isAdmin() ? 100 : 0); $i <= ($user->isAdmin() ? 100 : $usagePerent); $i++)
                                                <option {{ $user->isAdmin() ? 'selected' : '' }}>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="mb-3 mb-sm-0 col-sm-4">
                                        <select class="form-control user_select" name="user_holdhelp[{{ $item['type'] }}]"
                                            data-max_percent="{{ $user->isAdmin() ? 0 : $usagePerent }}" readonly>
                                            <option selected="" disabled="" value="">ผู้ใช้ถือสู้</option>
                                            @for ($i = 0; $i <= ($user->isAdmin() ? 0 : $usagePerent); $i++)
                                                <option {{ $user->isAdmin() ? 'selected' : '' }}>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="card-footer row no-gutters">
                            <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">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="settingAgentLine" value="1" id="setAllAgentLine" />
                                    <label class="form-check-label" for="setAllAgentLine">
                                        ตั้งค่าทั้งสายงาน
                                    </label>
                                </div>
                                <button id="submit" type="submit" class="btn btn-outline-default">
                                    <i class="fas fa-save"></i> ตั้งค่า</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
    @include('admin.agent.setting.components.createSettingModal')
@endsection

@section('scripts')
    <script type="text/javascript">
        const settingForm = document.forms['setting-form'];

        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.checkValidity()) {
                    for (const input of settingForm.elements) {
                        if (!input.max) continue;
                        if (input.value <= input.max) continue;
                        const line = input.dataset.line;
                        const target = `line_${line}`;
                        const targetLink = document.querySelector(`a[href="#${target}"]`);
                        if (targetLink.className.includes('active show')) break;
                        targetLink.click();
                        await sleep(300);
                    }
                }
                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');
            }
        }

        settingForm.addEventListener('submit', e => {
            e.preventDefault();
            tryCatchSwal(async () => {
                switchSubmitBtnState(settingForm);
                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;
                }
                let formData = new FormData(settingForm);
                formData = appendEditAllAgentLineForm(formData);
                const result = await fetchJson('{{ route('lotterySetting.store', [$user->id, $country]) }}', 'POST', formData);
                if (!result) return false;
                const setting = await swal({
                    title: 'ตั้งค่าเรียบร้อย',
                    text: '',
                    icon: 'success',
                    button: 'กลับ',
                });

                location.href = `{{ route('lotterySetting.index', $user->id) }}`;
            }, () => {
                switchSubmitBtnState(settingForm);
                for (const input of document.querySelectorAll('input[name^="user_holdhelp"]')) {
                    input.disabled = true;
                }
            });
        });

        function appendEditAllAgentLineForm(formData)
        {
            const target = document.getElementById('edit-all-agent-line-form');
            const agentLineFormData = new FormData(target);

            for (const pair of agentLineFormData.entries()) {
                let key = pair[0];
                let value = pair[1];
                formData.append(key, value);
            }

            return formData;
        }

        $(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');
                console.log('demo');
                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() { // เลือกช่อง ผู้แนะนำถือสู้
                console.log('OK');
                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]++;
            //         });
            //     }
            // });

            for (const el of document.querySelectorAll('select[name^="percent"]')) {
                el.onchange = e => {
                    if (is_abc[el.dataset.line] > 0) return;
                    for (const element of document.querySelectorAll(`select[name^="percent[${el.dataset.line}]"]`)) {
                        element.value = el.value;
                    }
                    is_abc[el.dataset.line]++;
                }
            }

            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]++;
            //     }
            // });

            for (const el of document.querySelectorAll('[name^="payment_line"]')) {
                el.onchange = e => {
                    if (is_abc_2[el.dataset.line] > 0) return;
                    for (const element of document.querySelectorAll(`[name^="payment_line[${el.dataset.line}]"]`)) {
                        element.value = el.value;
                    }
                    is_abc_2[el.dataset.line]++;
                }
            }


        });

        // $('#setting-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>
    <script src="{{ asset('js/create-setting.js') }}"></script>
@endsection