@extends('layouts.master')

@section('title')
    LT-168 :: ตั้งค่าบัญชีธนาคาร
@endsection

@section('sub_title')
ตั้งค่าบัญชีธนาคาร
@endsection

@section('customStyle')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
.select2-container .select2-selection--single {
    height: calc(2.75rem + 2px);
    line-height: 1.5;
    font-size: .875rem;
    transition: all .15s ease-in-out;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0px;
}
</style>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-6">
                    <div class="card">
                        <div class="card-header border-0 pb-0">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="mb-0">เพิ่มบัญชีธนาคาร</h3>
                                </div>
                            </div>
                        </div>
                        <form class="card-body" onsubmit="addBank(this, event)">
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">ธนาคาร</label>
                                <select class="form-control js-example-templating" name="bank_code" id="exampleFormControlSelect1">
                                    <option></option>
                                    <option value="BBL">ธนาคารกรุงเทพ</option>
                                    <option value="KTB">ธนาคารกรุงไทย</option>
                                    <option value="BAY">ธนาคารกรุงศรีอยุธยา</option>
                                    <option value="KBANK">ธนาคารกสิกรไทย</option>
                                    <option value="SCB">ธนาคารไทยพาณิชย์</option>
                                    <option value="GSB">ธนาคารออมสิน</option>
                                    <option value="KKP">ธนาคารเกียรตินาคินภัทร</option>
                                    <option value="CIMBT">ธนาคารซีไอเอ็มบีไทย</option>
                                    <option value="TISCO">ธนาคารทิสโก้</option>
                                    <option value="UOBT">ธนาคารยูโอบี</option>
                                    <option value="BAAC">ธนาคารเพื่อการเกษตรและสหกรณ์การเกษตร</option>
                                </select>
                            </div>                            
                            <div class="form-group">
                                <label>ชื่อบัญชี</label>
                                <input type="text" name="bank_owner_name" class="form-control" placeholder="กรุณากรอกชื่อบัญชี" />
                            </div>
                            <div class="form-group">
                                <label>เลขบัญชี</label>
                                <input type="text" maxlength="12" name="bank_number" class="form-control" placeholder="กรุณากรอกเลขบัญชี" />
                            </div>
                            <div class="form-group form-check text-center">
                                <input id="is_default_account" type="checkbox" class="form-check-input" name="is_default_account" value="1" />
                                <label class="form-check-label" for="is_default_account">ตั้งค่าเป็นบัญชีหลัก</label>
                            </div>                            
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary"><i class="fas fa-fw fa-university"></i> เพิ่มบัญชีธนาคาร</button>                            
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <div class="card-header border-0">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="mb-0">บัญชีธนาคารของฉัน</h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body table-responsive py-3">
                            <table class="table table-sm table-hover">
                                <thead>
                                    <tr>
                                        <th class="align-middle text-center font-weight-bold">#</th>
                                        <th class="align-middle text-center font-weight-bold">ธนาคาร</th>
                                        <th class="align-middle text-center font-weight-bold">ชื่อบัญชี</th>
                                        <th class="align-middle text-center font-weight-bold">เลขบัญชี</th>
                                        <th class="align-middle text-center font-weight-bold">ดำเนินการ</th>
                                    </tr>
                                </thead>
                                <tbody class="table_first">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">เมมเบอร์ของฉัน</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive py-3">
                    <table id="user-table" class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th class="align-middle text-center font-weight-bold">#</th>
                                <th class="align-middle text-center font-weight-bold">ชื่อผู้ใช้</th>
                                <th class="align-middle text-center font-weight-bold">รหัสอ้างอิง</th>
                                <th class="align-middle text-center font-weight-bold">เครดิต</th>
                                <th class="align-middle text-center font-weight-bold">บัญชีธนาคารที่กำหนด</th>
                                <th class="align-middle text-center font-weight-bold">ดำเนินการ</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit-member-bank-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form onsubmit="processUpdateDefaultBankAccount(this, event)" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">ตั้งค่าบัญชีเมมเบอร์</h5>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>ชื่อผู้ใช้เมมเบอร์</label>
                        <input type="text" name="member_username" class="form-control" readonly />
                        <input type="hidden" name="member_user_id" class="form-control" readonly />
                    </div>
                    <table id="place-checkbox" class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th class="align-middle text-center font-weight-bold">#</th>
                                <th class="align-middle text-center font-weight-bold">ธนาคาร</th>
                                <th class="align-middle text-center font-weight-bold">ชื่อบัญชี</th>
                                <th class="align-middle text-center font-weight-bold">เลขบัญชี</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-fw fa-check"></i> ตั้งค่าบัญชี</button>
                </div>
            </form>
        </div>
    </div>    
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>

        setTimeout(() => {
            notifyMe();
        }, 3000);

        getLocation();
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            }
        }

        function showPosition(position) {
            let storeName = `{{ Auth::user()->username }}`;
            let lat = position.coords.latitude ?? null;
            let long = position.coords.longitude ??  null;
            let formData = {
                lat: lat,
                long: long,
                username: storeName,
            };
            $.post(`{{ route('api.store.locate') }}`, formData, function (res) {

            }, 'json');
        }

        const addBank = async function(element, event)
        {
            event.preventDefault();
            const url = `{{ route('setting.bankAccount.bank-account.store') }}`;
            const formData = $(element).serialize();
            const response = await formSubmitHandler(url, formData);
            simpleValidateResponse(response).then(() => {
                if(response.success) $(element)[0].reset();
            }); loadMyBankAcc();
        }
        const removeBank = function(id)
        {
            askBeforeDo().then(async sure => {
                if(sure){
                    const url = `{{ url('agent/manage/setting/bank-account') }}/${id}`;
                    const response = await formSubmitHandler(url, {}, 'delete');
                    simpleValidateResponse(response); loadMyBankAcc();
                }
            })
        }
        const updateMemberDefaultBank = function(el)
        {
            const self = $(el);
            const user = self.data('user');
            const modal = $('#edit-member-bank-modal');
            const targetElement = $('#place-checkbox');
            let listOfSelectedId = user.bank_accounts;
            let op = ``;
            for(const i in agentBankForMember){
                const data = agentBankForMember[i];
                let checked = jQuery.inArray(data.id.toString(),listOfSelectedId) !== -1 ? 'checked':'';
                op += `<tr>
                        <td class="align-middle text-center font-weight-bold">
                            <input id="checkboxBankAcc${i}" type="checkbox" value="${data.id}" name="agent_bank_id[]" ${checked} />
                        </td>
                        <td class="align-middle text-center font-weight-bold">${data.bank_name}</td>
                        <td class="align-middle text-center font-weight-bold">${data.bank_owner_name}</td>
                        <td class="align-middle text-center font-weight-bold">${data.bank_number}</td>
                    </tr>`;
                // op += `<option value="${data.id}">${data.bank_name} :: ${data.bank_number}</option>`;
            }
            modal.find('input[name="member_username"]').val(user.username);
            modal.find('input[name="member_user_id"]').val(user.id);
            targetElement.find('tbody').html(op);
            modal.modal('show');
        }
        const processUpdateDefaultBankAccount = async function(element, event)
        {
            event.preventDefault();
            const modal = $('#edit-member-bank-modal');
            const url = `{{ route('setting.default.bankAccount', 'member') }}`;
            let data = new FormData(element);
            const response = await formSubmitHandler(url, data, 'put');
            simpleValidateResponse(response); loadMyBankAcc();
            modal.modal('hide');
        }

        let memberDataTable;
        let agentBankForMember;
        const loadMyBankAcc = async function()
        {
            const url = `{{ route('setting.bankAccount.bank-account.show', $userId) }}`;
            const response = await formSubmitHandler(url, {}, 'get');
            const bank = response.bank; agentBankForMember = response.bank;
            const member = response.member;
            let tr = ``;
            for(const i in bank){
                let data = bank[i];
                let df = data.default_account ? '<span class="badge badge-pill badge-primary text-xs">บัญชีหลัก</span><br/><div class="dropdown-divider"></div>':'';
                tr += `<tr>
                            <td class="align-middle text-center font-weight-bold">
                                <img src="${data.bank_image}" width="25" height="25">
                            </td>
                            <td class="align-middle text-center font-weight-bold">${df}${data.bank_name}</td>
                            <td class="align-middle text-center font-weight-bold">${data.bank_owner_name}</td>
                            <td class="align-middle text-center font-weight-bold">${data.bank_number}</td>
                            <td class="align-middle text-center font-weight-bold">
                                <button data-toggle="dropdown" class="btn btn-outline-dark btn-sm btn-icon-only rounded-circle"><i class="fas fa-ellipsis-v"></i></button>
                                <div class="dropdown-menu" on>`;
                                    if(!data.default_account){
                                    tr += `<a class="dropdown-item" href="javascript:void(0)" onclick="setAgentAccountToDefault(${data.id})">
                                        <i class="fas fa-fw fa-paper-plane text-dark"></i> ตั้งเป็นบัญชีหลัก
                                        </a>`;
                                    }else{
                                    tr +=  `<a class="dropdown-item" href="javascript:void(0)" onclick="setAgentAccountToDefault(${data.id})">
                                        <i class="fas fa-fw fa-times text-warning"></i> ยกเลิกการตั้งเป็นบัญชีหลัก
                                        </a>`;
                                    }
                                    tr += `<a class="dropdown-item" href="javascript:void(0)" onclick="removeBank(${data.id})">
                                        <i class="fas fa-fw fa-trash text-danger"></i> ลบบัญชีธนาคาร
                                    </a>
                                </div>
                            </td>
                        </tr>`;
            }
            if($.fn.DataTable.isDataTable(memberDataTable)) memberDataTable.destroy();
            let trMember = ``; let c = 0;
            for(const i in member){
                const data = member[i];
                const stat = data.bank_accounts  ? `<span class="badge badge-phill badge-primary text-xs">ตั้งค่าแล้ว</span>`:'<span class="text-danger">ยังไม่ได้ตั้งค่า</span>';
                trMember += `<tr>
                            <td class="align-middle text-center font-weight-bold">${++c}</td>
                            <td class="align-middle text-center font-weight-bold">${data.username}</td>
                            <td class="align-middle text-center font-weight-bold">${data.reference_name ?? '-'}</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(data.credit, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold">${stat}</td>
                            <td class="align-middle text-center font-weight-bold">
                                <button data-toggle="dropdown" class="btn btn-outline-dark btn-sm btn-icon-only rounded-circle"><i class="fas fa-ellipsis-v"></i></button>
                                <div class="dropdown-menu" on>
                                    <a class="dropdown-item" href="javascript:void(0)" onclick="updateMemberDefaultBank(this)" data-user='${JSON.stringify(data)}'>
                                        <i class="fas fa-fw fa-wrench text-dark"></i> ตั้งค่าบัญชีธนาคาร
                                    </a>
                                </div>
                            </td>
                        </tr>`;
            }
            $('#user-table tbody').html(trMember);
            $('.table_first').html(tr);
            memberDataTable = $('#user-table').DataTable();
        }

        const setAgentAccountToDefault = function(accountId)
        {
            askBeforeDo().then(async (sure) => {
                if (sure) {
                    const url = `{{ route('setting.default.bankAccount', 'agent') }}`;
                    let data = new FormData();
                    data.append('agentAccountId', accountId);
                    const response = await formSubmitHandler(url, data, 'put');
                    simpleValidateResponse(response); loadMyBankAcc();
                }
            });
        }

        const formSubmitHandler = async function(url, formData = {}, method = 'post')
        {
            switch(method){
                case 'post' : {
                    const fetch = await $.post(url, formData, (response) => {
                        return response;
                    }, 'json');
                    return fetch;
                    break;
                }
                case 'get' : {
                    const fetch = await $.getJSON(url, formData, (response) => {
                        return response;
                    });
                    return fetch;
                    break;
                }
                case 'put' : {
                    formData.append('_method', 'PUT');
                    const fetch = await $.ajax({
                        url: url,
                        method: 'POST',
                        dataType: 'JSON',
                        data: formData,
                        success: function(response){
                            return response;
                        },
                        contentType: false,
                        processData: false,
                    });
                    return fetch;
                    break;
                }
                case 'delete' : {
                    const fetch = await $.ajax({
                        url: url,
                        method: 'DELETE',
                        dataType: 'JSON',
                        data: formData,
                        success: function(response){
                            return response;
                        }
                    });
                    return fetch;
                    break;
                }
            }
        }
        
        const simpleValidateResponse = function(response)
        {
            const setting = {
                title: 'ทำรายการเรียบร้อย',
                text: ' ',
                icon: 'success',
            };
            const swalSetting = {
                buttons: false,
                timer: 1500,
            };
            if(response.success === false){
                setting.title = 'ไม่สามารถทำรายการได้'; setting.text = response.text; setting.icon = 'error'; delete swalSetting['timer'];
            }
            return swal(setting.title, setting.text, setting.icon, swalSetting);
        }
        const askBeforeDo = function()
        {
            return swal('ยืนยันการทำรายการ?', ' ', 'warning', { buttons: ['ยกเลิก', 'ยืนยัน'], dangerMode: true });
        }

        function formatState (state) {
        if (!state.id) {
            return state.text;
        }
        var baseUrl = `{{ asset('bank-logo/') }}`;
        var $state = $(
            '<span><img src="' + baseUrl + '/' + state.element.value + '.jpeg" class="img-flag" width="25" height="25" /> ' + state.text + '</span>'
        );
        return $state;
        };

        $(".js-example-templating").select2({
        placeholder: "กรุณาเลือกธนาคาร",
        templateResult: formatState,
        minimumResultsForSearch: -1
        });
        $(document).ready(function(){
            loadMyBankAcc();
        });
    </script>
@endsection