@extends('layouts.master')

@section('title')
    LT-168 :: แก้ไขตั้งค่าอัตราส่วนของร้านค้า
@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" action="{{ route('storeLotterySetting.update', [$store, $country]) }}">
        @csrf
        <div class="row">
            <div class="col-md-10 mx-auto">
                @if (isLotteryType($country))
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="mb-0">แก้ไขตั้งค่าอัตราส่วน</h3>
                                </div>
                                <div class="col text-right">
                                    <button type="submit" class="btn btn-outline-default">
                                        <i class="fas fa-save"></i> บันทึกรายการ
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
    
                            <ul class="nav nav-pills nav-fill row" id="tabs-text" role="tablist">
                                <li class="px-1 text-center col-sm mb-2 mb-sm-0">
                                    <a class="nav-link mb-sm-3 mb-md-0 active show" data-toggle="tab" href="#commission-setting" role="tab" aria-controls="commission-setting" aria-selected="true">ไลน์ส่วนลด</a>
                                </li>
                                <li class="px-1 text-center col-sm mb-2 mb-sm-0">
                                    <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#lottery-commission-setting" role="tab" aria-controls="lottery-commission-setting" aria-selected="false">อัตราจ่ายเงินรางวัล</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                @endif
                
                <div class="tab-content" id="settings-content">
                    <div class="tab-pane fade active show" id="commission-setting" aria-expanded="true">
                        <div class="card">
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h3 class="mb-0">แก้ไขตั้งค่าอัตราส่วนลด / เงินรางวัล</h3>
                                    </div>
                                    @if (! isLotteryType($country))
                                        <div class="col text-right">
                                            <button type="submit" class="btn btn-outline-default">
                                                <i class="fas fa-save"></i> บันทึกรายการ
                                            </button>
                                        </div>
                                    @endif
                                </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 ($editStoreCommission['a'] as $type => $lotteryValue)
                                            <div class="row my-3">
                                                <label class="col-sm col-form-label text-center">{{ $type }}</label>
                                                <div class="form-group col-sm">
                                                    <select class="form-control" name="percent[a][{{ $type }}]"
                                                        title="กรุณาเลือกส่วนลด" required>
                                                        @for ($i = 0; $i <= ($editStoreCommission ? $editStoreCommission['a'][$type]['discount']:100); $i++)
                                                            <option {{ ($i == $lotteryValue['discount'] ? 'selected' : '') }}>{{ $i }}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                                @if (isLotteryType($country))
                                                    <input type="hidden" name="payment_line[a][{{ $type }}]">
                                                @else
                                                    <div class="form-group col-sm-4">
                                                        <input type="number" step="0.01" min="1" class="form-control"
                                                            placeholder="กรุณาระบุเงินรางวัล" value="{{ $lotteryValue['payment'] }}"
                                                            name="payment_line[a][{{ $type }}]" title="กรุณาระบุเงินรางวัล" required
                                                            @if (!$store->owner->isAdmin()) max="{{ $ownerCommission['a'][$type]['payment'] }}" @endif>
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="tab-pane fade" id="line_b" role="tabpanel">
                                        @foreach ($editStoreCommission['b'] as $type => $lotteryValue)
                                            <div class="row my-3">
                                                <label class="col-sm col-form-label text-center">{{ $type }}</label>
                                                <div class="form-group col-sm">
                                                    <select class="form-control" name="percent[b][{{ $type }}]"
                                                        title="กรุณาเลือกส่วนลด" required>
                                                        @for ($i = 0; $i <= ($editStoreCommission ? $editStoreCommission['b'][$type]['discount']:100); $i++)
                                                            <option {{ ($i == $lotteryValue['discount'] ? 'selected' : '') }}>{{ $i }}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                                @if (isLotteryType($country))
                                                    <input type="hidden" name="payment_line[b][{{ $type }}]">
                                                @else
                                                    <div class="form-group col-sm-4">
                                                        <input type="number" step="0.01" min="1" class="form-control"
                                                            placeholder="กรุณาระบุเงินรางวัล" value="{{ $lotteryValue['payment'] }}"
                                                            name="payment_line[b][{{ $type }}]" title="กรุณาระบุเงินรางวัล" required
                                                            @if (!$store->owner->isAdmin()) max="{{ $ownerCommission['b'][$type]['payment'] }}" @endif>
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="tab-pane fade" id="line_c" role="tabpanel">
                                        @foreach ($editStoreCommission['c'] as $type => $lotteryValue)
                                            <div class="row my-3">
                                                <label class="col-sm col-form-label text-center">{{ $type }}</label>
                                                <div class="form-group col-sm">
                                                    <select class="form-control" name="percent[c][{{ $type }}]"
                                                        title="กรุณาเลือกส่วนลด" required>
                                                        @for ($i = 0; $i <= ($editStoreCommission ? $editStoreCommission['c'][$type]['discount']:100); $i++)
                                                            <option {{ ($i == $lotteryValue['discount'] ? 'selected' : '') }}>{{ $i }}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                                @if (isLotteryType($country))
                                                    <input type="hidden" name="payment_line[c][{{ $type }}]">
                                                @else
                                                    <div class="form-group col-sm-4">
                                                        <input type="number" step="0.01" min="1" class="form-control"
                                                            placeholder="กรุณาระบุเงินรางวัล" value="{{ $lotteryValue['payment'] }}"
                                                            name="payment_line[c][{{ $type }}]" title="กรุณาระบุเงินรางวัล" required
                                                            @if (!$store->owner->isAdmin()) max="{{ $ownerCommission['c'][$type]['payment'] }}" @endif>
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

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

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

            var agentForm = $('#setting-form');
            var updateUrl = agentForm.attr('action');

            /**
             * Agent Form Validate
             */

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

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

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

                    }
                });
            });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        });

    </script>
@endsection