@extends('layouts.appUi')

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

@section('header')
<div class="appHeader">
    <div class="left">
        <a href="{{ route('appUi.index') }}" class="headerButton">
            <ion-icon name="chevron-back-outline" role="img" class="md hydrated" aria-label="chevron back outline"></ion-icon>
        </a>
    </div>
    <div class="pageTitle">ตั้งค่าบัญชีธนาคาร</div>
    {{-- @if (Auth::user()->fullname_validate) --}}
    <div class="right">
        <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#bankAccountActionSheet" class="headerButton">
            <ion-icon name="add-circle"></ion-icon>
        </a>
    </div>
    {{-- @endif --}}
</div>
@endsection

@section('content')

@if (count($bankAccount) === 0 && !Auth::user()->fullname_validate)
<div class="section mt-2">
    <div class="section-title text-danger text-center">
        กรุณา ตรวจสอบ ชื่อ และ นามสกุล ให้ถูกต้อง ก่อน "ทำการเพิ่มบัญชีธนาคาร"  หากยืนยันแล้วจะไม่สามารถแก้ไขข้อมูลสำคัญนี้ได้อีก ต้องติดต่อเจ้าหน้าที่ LT-168 โดยตรงเท่านั้น
    </div>
    <form onsubmit="updateMemberFullnameHandler(event, this)">
    <div class="card mt-2">
        <div class="card-body">

                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="user_full_name">ชื่อ - นามสกุล</label>
                        <input type="text" class="form-control" id="user_full_name" placeholder="ชื่อ - นามสกุล" name="user_full_name" value="{{ Auth::user()->name }}">
                        <i class="clear-input">
                            <ion-icon name="close-circle"></ion-icon>
                        </i>
                    </div>
                </div>
                
            </div>
        </div>
        <button type="submit" class="btn btn-block btn-lg btn-primary mt-3">ยืนยัน ชื่อ - นามสกุล</button>
    </form>
</div>
@endif

<ul id="bank-account-content" class="listview image-listview inset mt-2">
    @foreach ($bankAccount as $bank)
    <li>
        <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#actionSheetInset" class="item" onclick="showSelectDialog(this)" data-bank-id="{{ $bank->id }}">
            <img src="{{ bankImg($bank->bank_code) }}" alt="image" class="image">
            <div class="in">
                <div>
                    <header>{{ bankName($bank->bank_code) }}</header>
                    {{ $bank->bank_number }}
                    <footer>{{ $bank->bank_owner_name }}</footer>
                </div>
            </div>
        </a>
    </li>
    @endforeach
</ul>
<div class="text-center mt-1 {{ (!Auth::user()->fullname_validate ? 'd-none':null) }}">
    <small class="text-danger">*หมายเหตุ: กรุณาใช้บัญชีที่มีชื่อบัญชี ตรงกันเท่านั้น มิเช่นนั้นทางเว็บไซต์จะไม่รับผิดชอบต่อความเสียหายที่เกิดขึ้น</small>
</div>
@endsection

@section('modal')
<div class="modal fade action-sheet" id="bankAccountActionSheet" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">เพิ่มบัญชีธนาคาร</h5>
            </div>
            <div class="modal-body">
                <div class="action-sheet-content">
                    <form id="depositForm" onsubmit="addBankAccountHandler(event, this)">
                        <div class="form-group basic mt-1">
                            <div class="input-wrapper">
                                <label class="label" for="bank_name">ชื่อธนาคาร</label>
                                <select class="form-control custom-select" name="bank_name" id="bank_name" required>
                                    <option disabled selected value="">กรุณาระบุธนาคาร</option>
                                    <option value="ธนาคารกรุงเทพ">ธนาคารกรุงเทพ</option>
                                    <option value="ธนาคารกรุงไทย">ธนาคารกรุงไทย</option>	
                                    <option value="ธนาคารกรุงศรีอยุธยา">ธนาคารกรุงศรีอยุธยา</option>
                                    <option value="ธนาคารทหารไทย">ธนาคารทหารไทย</option>
                                    <option value="ธนาคารกสิกรไทย">ธนาคารกสิกรไทย</option>
                                    <option value="ธนาคารไทยพาณิชย์">ธนาคารไทยพาณิชย์</option>
                                    <option value="ธนาคารยูโอบี">ธนาคารยูโอบี</option>
                                    <option value="ธนาคารออมสิน">ธนาคารออมสิน</option>
                                    <option value="ธนาคารสแตนดาร์ดชาร์เตอร์">ธนาคารสแตนดาร์ดชาร์เตอร์</option>
                                </select>
                            </div>
                        </div>

                        {{-- <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label" for="bankOwnerName">ชื่อบัญชี</label>
                                <input type="text" class="form-control" id="bankOwnerName" placeholder="กรุณาระบุชื่อบัญชี"
                                value="{{ Auth::user()->name }}" readonly>
                            </div>
                        </div> --}}

                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label" for="bankNumber">เลขบัญชี</label>
                                <input type="text" class="form-control" id="bankNumber" name="bank_number" placeholder="กรุณาระบุเลขบัญชี"
                                value="" minlength="10" maxlength="12" oninput="inputNumberOnly(this)" required>
                            </div>
                        </div>
                    
                        <div class="form-group basic">
                            <button type="submit" class="btn btn-primary btn-block btn-lg">เพิ่มบัญชีธนาคาร</button>
                        </div>
                    </form>                    
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade action-sheet inset" id="actionSheetInset" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">แก้ไขบัญชีธนาคาร</h5>
            </div>
            <div class="modal-body">
                <ul class="action-button-list">
                    {{-- <li>
                        <a href="#" class="btn btn-list manageBank" data-bs-dismiss="modal">
                            <span>
                                <ion-icon name="create-outline"></ion-icon>
                                แก้ไข
                            </span>
                        </a>                        
                    </li> --}}
                    <li>
                        <a href="javascript:;" class="btn btn-list manageBank" onclick="removeBankAccPrompt(this)" data-bs-dismiss="modal">
                            <span>
                                <ion-icon name="trash-outline"></ion-icon>
                                ลบบัญชี
                            </span>
                        </a>                        
                    </li>
                    <li class="action-divider"></li>
                    <li>
                        <a href="#" class="btn btn-list text-danger" data-bs-dismiss="modal">
                            <span>
                                <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
                                ปิดหน้าต่าง
                            </span>
                        </a>                        
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="modal fade dialogbox" id="bankAccountDialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-icon text-warning">
                <ion-icon name="hourglass-outline"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title"></h5>
            </div>
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade dialogbox" id="removeBankAccountDialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="pt-3 text-center">
                <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w48 rounded mb-1">
            </div>
            <div class="modal-header pt-2">
                <h5 class="modal-title">ลบบัญชีธนาคาร</h5>
            </div>
            <div class="modal-body">
                ยืนยันการทำรายการ?
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn btn-text-secondary" data-bs-dismiss="modal">ยกเลิก</a>
                    <a href="javascript:;" class="btn btn-text-primary processRemoveBank" data-bs-dismiss="modal" onclick="processRemoveBank(this)">ยืนยัน</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
@endsection
@section('bottomNav')
@endsection

@section('script')
    <script>
        const loadBankListView = function()
        {
            const url = `{{ url()->current() }}`;
            const target = $('#bank-account-content');
            $.get(url, {}, res => {
                const mainEl = $(res).find('#bank-account-content').html();
                target.html(mainEl);
            });
        }
        const addBankAccountHandler = function(e, el)
        {
            e.preventDefault();
            const self = $(el);
            const url = `{{ route('bank-account.store') }}`;
            const dialog = $('#bankAccountDialog');
            let dialogData = dialogConfig('เพิ่มบัญชีธนาคารเรียบร้อย', ' ', 'text-success', '<ion-icon name="checkmark-circle"></ion-icon>');
            self.closest('.modal').modal('hide');
            $.post(url, self.serialize(), res => {
                if(res.success){
                    loadBankListView();
                    self[0].reset();
                }else{
                    dialogData = dialogConfig('ไม่สามารถเพิ่มบัญชีได้', res.text, 'text-danger', '<ion-icon name="close-circle"></ion-icon>');
                }
                setDialog(dialog, dialogData);
                dialog.modal('show');
            }, 'json');
        }

        const showSelectDialog = function(el){
            const self = $(el);
            const bankId = self.data('bank-id');
            const imgSrc = self.find('img').attr('src');
            const target = $('#actionSheetInset');
            const removeBankEl = target.find('.manageBank');
            removeBankEl.attr('data-bank-id', bankId);
            removeBankEl.attr('data-img', imgSrc);
        }

        const removeBankAccPrompt = function(el)
        {
            const self = $(el);
            const target = $('#removeBankAccountDialog');
            target.find('img').attr('src', self.data('img'));
            target.find('.processRemoveBank').attr('data-bank-id', self.data('bank-id'));
            target.modal('show');
        }

        const processRemoveBank = function(el)
        {
            const self = $(el);
            const url = `{{ route('bank-account.index') }}/${self.data('bank-id')}`;

            const dialog = $('#bankAccountDialog');
            let dialogData = dialogConfig('ลบบัญชีเรียบร้อย', ' ', 'text-success', '<ion-icon name="checkmark-circle"></ion-icon>');
            $.ajax({
                url: url, method: 'delete', dataType: 'json', data: {},
                success: res => {
                    if(!res.success){
                        dialogData = dialogConfig('ไม่สามารถทำรายการได้', res.text, 'text-danger', '<ion-icon name="close-circle"></ion-icon>');
                    }
                    setDialog(dialog, dialogData); loadBankListView(); dialog.modal('show');
                }
            });
        }

        function updateMemberFullnameHandler(e, el)
        {
            e.preventDefault();
            let dialog = Dialog.alert({
                    title: 'ยืนยันชื่อ - นามสกุล',
                    text: 'กรุณาตรวจสอบความถูกต้องอีกครั้ง',
                    type: 'success',
                    buttons: ['ยกเลิก', 'ยืนยัน'],
                });     

            dialog.then((sure) => {
                if (sure) {
                    const dialog = $('#bankAccountDialog');
                    let dialogData = dialogConfig('อัพเดทชื่อ - นามสกุลเรียบร้อย', ' ', 'text-success', '<ion-icon name="checkmark-circle"></ion-icon>');
                    $.post(`{{ route('appUi.setting.bankAccount.updateMemberFullName') }}`, $(el).serialize(), function(res){
                        if(!res.success){
                            dialogData = dialogConfig('ไม่สามารถอัพเดทชื่อ - นามสกุลได้', res.text, 'text-danger', '<ion-icon name="close-circle"></ion-icon>');
                        }
                        setDialog(dialog, dialogData);
                        dialog.modal('show');
                        setTimeout(() => {
                            location.reload();
                        }, 1500);
                    });
                }
            });
        }
    </script>
@endsection