@extends('layouts.master')

@section('title')
    LT-99 :: แก้ไขข้อมูลเอเยนต์
@endsection

@section('sub_title')
    แก้ไขข้อมูลเอเยนต์
    @if (Auth::user()->isAdmin())
        <button type="button" class="btn btn-outline-danger btn-sm login-bypass" data-bypass-user-id="{{ $userId }}" onclick="loginBypass(event, {{ $userId }})">
            <i class="fas fa-sign-in-alt"></i>
            <span class="d-none d-sm-inline">เข้าสู่ระบบ</span>
        </button>  
    @endif
@endsection

@section('content')
    <form id="agent-form" action="{{ route('manage.update.simple', $userId) }}">
        @csrf
        <div class="tab-content">
            <div class="row justify-content-center tab-pane fade active show" id="mainA">

                <div id="step-1" 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">
                                    <button type="submit" class="btn btn-outline-default btn-sm">
                                        <i class="fas fa-save"></i> บันทึกรายการ
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>ชื่อผู้ใช้</label>
                                        <input class="form-control" type="text" name="username" title="กรุณาระบุชื่อผู้ใช้"
                                        placeholder="กรุณากรอกชื่อผู้ใช้" value="{{ $editUserData->username }}" readonly required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>รหัสผ่าน</label>
                                        <input class="form-control" type="text" name="password"
                                            placeholder="กรุณากรอกรหัสผ่าน">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>ชื่อ - นามสกุล</label>
                                        <input class="form-control" type="text" name="fullname" value="{{ $editUserData->name }}"
                                            title="กรุณาระบุชื่อ - นามสกุล" placeholder="กรุณากรอกรหัสผ่าน" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>เบอร์โทรศัพท์</label>
                                        <input class="form-control" type="text" name="phone" value="{{ $editUserData->phone }}" maxlength="10"
                                            placeholder="กรุณากรอกรหัสผ่าน" oninput="this.value = this.value.replace(/[^0-9]+/g, '');" required>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </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 = $('#agent-form');
            var updateUrl = agentForm.attr('action');

            /**
             * Agent Form Validate
             */
            agentForm.on('submit', function(e){
                e.preventDefault();
                var formData = $(this).serialize();
                swal('ยืนยันการแก้ไขข้อมูล?', ' ', 'warning', {
                    buttons: ['ยกเลิก', 'ยืนยัน'],
                })
                .then(function(sure){
                    if(sure){
                        $.ajax({
                            url: updateUrl,
                            method: 'put',
                            dataType: 'json',
                            data: formData,
                            success: function(response){
                                if(response.success){
                                    swal('แก้ไขข้อมูลเรียบร้อย', ' ', 'success', { buttons: false, timer: 1500, }).then(function(){
                                        window.location(`{{ route('manage.index') }}`);
                                    });
                                }
                            }
                        });
                    }
                });
            });

            /**
             * 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', $userId) }}`;
                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