@extends('layouts.master')

@section('title')
    LT-168 :: ตั้งค่าอัตราส่วน {{ lotteryName($country) }}
@endsection

@section('sub_title')
    ตั้งค่าอัตราส่วน :: <span class="badge bg-primary text-sm"><span class="font-weight-light">สาขา:</span> {{ $store->store_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

        <fieldset id="step-{{ $lotteryRound ? 2 : 1 }}" data-step="{{ $lotteryRound ? 2 : 1 }}" {!! $lotteryRound ? 'style="display: none;" disabled' : null !!}>
            <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-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 = $agentCommission ? $agentCommission['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 {{ ($store->owner->isAdmin() ? 'selected' : null) }}>ส่วนลด / เงินรางวัล</option>
                                                    @if ($agentCommission && $maxLineA == 0)
                                                        <option {{ ($store->owner->isAdmin() ? '' : 'selected') }}>{{ $maxLineA }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineA; $i++)
                                                            <option {{ ($store->owner->isAdmin() ? '' : ($i == $maxLineA ? 'selected' : null)) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            @if ($mainLottery->type)
                                                <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="{{ $agentCommission ? $agentCommission['a'][$item['type']]['payment'] : null }}"
                                                        max="{{ $agentCommission ? $agentCommission['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 = $agentCommission ? $agentCommission['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 {{ ($store->owner->isAdmin() ? 'selected' : null) }}>ส่วนลด / เงินรางวัล</option>
                                                    @if ($agentCommission && $maxLineB == 0)
                                                        <option {{ ($store->owner->isAdmin() ? '' : 'selected') }}>{{ $maxLineB }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineB; $i++)
                                                            <option {{ ($store->owner->isAdmin() ? '' : ($i == $maxLineB ? 'selected' : null)) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            @if ($mainLottery->type)
                                                <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="{{ $agentCommission ? $agentCommission['b'][$item['type']]['payment'] : null }}"
                                                        max="{{ $agentCommission ? $agentCommission['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 = $agentCommission ? $agentCommission['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 {{ ($store->owner->isAdmin() ? 'selected' : null) }}>ส่วนลด / เงินรางวัล</option>
                                                    @if ($agentCommission && $maxLineC == 0)
                                                        <option {{ ($store->owner->isAdmin() ? '' : 'selected') }}>{{ $maxLineC }}</option>
                                                    @else
                                                        @for ($i = 0; $i <= $maxLineC; $i++)
                                                            <option {{ ($store->owner->isAdmin() ? '' : ($i == $maxLineC ? 'selected' : null)) }}>{{ $i }}
                                                            </option>
                                                        @endfor
                                                    @endif
                                                </select>
                                            </div>
                                            @if ($mainLottery->type)
                                                <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="{{ $agentCommission ? $agentCommission['c'][$item['type']]['payment'] : null }}"
                                                        max="{{ $agentCommission ? $agentCommission['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-auto mr-auto">
                                    @if ($lotteryRound)
                                        <button type="button" class="btn btn-outline-danger"
                                        onclick="step('prev', this)">
                                        <i class="fas fa-angle-double-left"></i> ย้อนกลับ</button>
                                    @endif
                                </div>
                                @if ($mainLottery->type)
                                    <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>
                                @else
                                    <div class="col-auto">
                                        <button id="submit" type="submit" class="btn btn-outline-default">
                                            <i class="fas fa-save"></i> ตั้งค่า</button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        {{-- LotteryCommission --}}
        @if ($mainLottery->type)
            <fieldset id="step-{{ $lotteryRound ? 3 : 2 }}" data-step="{{ $lotteryRound ? 3 : 2 }}" 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="{{ $ownerLotteryCommission['a'][$item['result_type']] ?? null }}"
                                                        name="lottery_commission[a][{{ $item['result_type'] }}]" title="กรุณาระบุเงินรางวัล"
                                                        max="{{ $ownerLotteryCommission['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="{{ $ownerLotteryCommission['b'][$item['result_type']] ?? null }}"
                                                        name="lottery_commission[b][{{ $item['result_type'] }}]" title="กรุณาระบุเงินรางวัล"
                                                        max="{{ $ownerLotteryCommission['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="{{ $ownerLotteryCommission['c'][$item['result_type']] ?? null }}"
                                                        name="lottery_commission[c][{{ $item['result_type'] }}]" title="กรุณาระบุเงินรางวัล"
                                                        max="{{ $ownerLotteryCommission['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>
                                    <div class="col-auto">
                                        <button id="submit" type="submit" class="btn btn-outline-default">
                                            <i class="fas fa-save"></i> ตั้งค่า</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        @endif
    
    </form>
@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.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;

                const formData = new FormData(settingForm);
                formData.append('lottery_round_id', document.querySelector('[name="lottery_round_id"]')?.value || '');
                const result = await fetchJson('{{ route('storeLotterySetting.store', [$store, $country]) }}', 'POST', formData);
                if (!result) return false;
                const setting = await swal({
                    title: 'ตั้งค่าเรียบร้อย',
                    text: '',
                    icon: 'success',
                    button: 'กลับ',
                });

                location.href = `{{ route('storeLotterySetting.index', $store) }}`;
            }, () => switchSubmitBtnState(settingForm));
        });

        $(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() { // เลือกช่อง ผู้แนะนำถือสู้
                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>
@endsection