@extends('layouts.master')

@section('title')
    LT-168 :: จัดการเมมเบอร์
@endsection

@section('sub_title')
    จัดการเมมเบอร์
@endsection

@section('customStyle')
    <style>
        .table-responsive {
            overflow-y: visible !important;
        }
        @media (max-width: 767px) {
            .table-responsive .dropdown-menu {
                position: static !important;
            }
        }
        @media (min-width: 768px) {
            .table-responsive {
                overflow: inherit;
            }
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <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 class="col text-right">
                                <li class="text-success"> ออนไลน์ {{ $onlineCount }} คน</li>
                                <li class="text-muted"> ออฟไลน์ {{ $offlineCount }} คน</li>
                        </div> --}}
                    </div>
                </div>
                <div class="table-responsive pb-2">
                    <table id="memberTable" class="table table-hover table-sm py-3">
                        <thead class="thead-light">
                            <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>
                                <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>
                            @php
                                $i = 0;
                            @endphp
                            @foreach ($members as $member)
                                <tr>
                                    <td class="align-middle text-center font-weight-bold">{{ ++$i }}</td>
                                    <td class="align-middle text-center font-weight-bold">
                                        <span class="badge badge-primary text-sm" onclick="showMemberSummary({{ $member->id }})">{{ $member->username }}</span><br/>
                                        <small>{{ $member->reference_name }}</small>
                                    </td>
                                    <td class="align-middle text-center font-weight-bold">
                                        @if ($member->isOnline())
                                            <li class="text-success">ออนไลน์</li>
                                        @else
                                        <li class="text-muted">ออฟไลน์</li>
                                        @endif
                                    </td>
                                    <td class="align-middle text-center font-weight-bold">{{ $member->name }}</td>
                                    <td class="align-middle text-center font-weight-bold">{{ $member->phone }}</td>
                                    <td class="align-middle text-center font-weight-bold">
                                        <div class="d-flex justify-content-end align-items-center">
                                            <div class="p-2 bd-highlight">{{ number_format(remainBalance($member), 2) }}</div>
                                            <div class="p-2 bd-highlight">
                                                <button id="reset-number-limit" onclick="creditManage({{ $member->id }}, this)" data-reset-type="number" class="btn btn-sm btn-primary">
                                                    ปรับเครดิต
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="align-middle text-center font-weight-bold">
                                        {{ THdatetime($member->created_at) }}<br/>
                                        <small>IP ADDRESS: <b class="text-primary">
                                            {{ $member->activity()->latest()->first()->ip_address ?? '-' }}
                                        </b></small>
                                    </td>
                                    <td class="align-middle text-center font-weight-bold">
                                        <span class="status badge badge-{{ $member->status === 1 ? 'success' : 'danger'}} text-sm">{{ $member->status === 1 ? 'ปกติ' : 'ระงับ' }}</span>
                                    </td>
                                    <td class="align-middle text-center font-weight-bold dropdown d-block">
                                        <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>
                                            {{-- <li class="dropdown-item"></li> --}}
                                            <a class="dropdown-item" href="javascript:void(0);" class="mr-2" data-user-id="{{ $member->id }}" onclick="walletHistory(this)">
                                                <i class="fas fa-fw fa-history text-info"></i> ประวัติบัญชี
                                            </a>
                                            <a class="dropdown-item" href="{{ route('member.limit.show', $member->memberLimit()->whereCountry(session('lottery'))->first()->id ?? 0) }}" class="mr-2">
                                                <i class="fas fa-fw fa-greater-than-equal text-warning"></i> ขั้นต่ำต่อไม้
                                            </a>
                                            <a class="dropdown-item" href="{{ route('member.commission.show', $member->memberCommission()->whereCountry(session('lottery'))->latest()->first()->id ?? 0) }}" class="mr-2">
                                                <i class="fas fa-fw fa-percentage text-warning"></i> ส่วนลด / เงินรางวัล
                                            </a>
                                            <a class="dropdown-item" href="javascript:void(0)" onclick="editMember(this)"
                                            data-member-username="{{ $member->username }}"
                                            data-member-fullname="{{ $member->name }}"
                                            data-member-phone="{{ $member->phone }}"
                                            data-member-id="{{ $member->id }}">
                                                <i class="fas fa-fw fa-key text-default"></i> แก้ไขข้อมูล / รหัสผ่าน
                                            </a>
                                            <a class="dropdown-item" href="{{ route('agent.member.bank-account.edit', $member->id) }}">
                                                <i class="fas fa-university text-default"></i> บัญชีธนาคาร
                                            </a>
                                            <a class="dropdown-item" href="javascript:;"
                                            onclick="showActivity(this)"
                                            data-item='{!! json_encode($member->activity) !!}'>
                                            <i class="fas fa-history"></i> ประวัติการใช้งาน
                                            </a>
                                            @if ($member->status === 1)
                                                <a class="dropdown-item" href="javascript:void(0)" data-user-id="{{ $member->id }}" onclick="blockUser(true, this)" title="ระงับ">
                                                    <i class="fas fa-fw fa-lock text-danger"></i> ระงับบัญชี
                                                </a>
                                            @else
                                                <a class="dropdown-item" href="javascript:void(0)" data-user-id="{{ $member->id }}" onclick="blockUser(false, this)" title="ปลดล็อก">
                                                    <i class="fas fa-fw fa-unlock text-success"></i> ปลดล็อกบัญชี
                                                </a>
                                            @endif
                                            <div class="dropdown-divider"></div>
                                            {{-- <a class="dropdown-item" href="javascipt:;" onclick="removeMember(event, this)" data-member-id="{{ $member->id }}">
                                                <i class="fas fa-fw fa-trash text-danger"></i> ลบ
                                            </a> --}}
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="changePasswordModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form id="changePasswordForm" class="modal-content bg-secondary">
                @method('PUT')
                <div class="modal-header">
                    <h3 class="modal-title">แก้ไขข้อมูล / รหัสผ่าน</h3>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>ชื่อผู้ใช้</label>
                        <input type="text" class="form-control" name="member_username" readonly="true" value="" />
                    </div>

                    <div class="form-group">
                        <label>ชื่อ - นามสกุล (นามแฝง)</label>
                        <input type="text" class="form-control" name="member_fullname" value="" />
                    </div>

                    <div class="form-group">
                        <label>หมายเลขโทรศัพท์</label>
                        <input type="text" class="form-control" name="member_phone" value="" />
                    </div>
    
                    <div class="form-group">
                        <label>รหัสผ่านใหม่</label>
                        <input type="text" class="form-control" name="member_new_password" placeholder="กรุณากรอกรหัสผ่านใหม่" />
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button class="btn btn-default" type="submit"><i class="fas fa-save mr-1"></i> แก้ไขรหัสผ่าน</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="creditManageModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form id="creditManageForm" class="modal-content bg-secondary" onsubmit="creditManageSubmit(event, this)">
                <div class="modal-header">
                    <h3 class="modal-title">จัดการเครดิต</h3>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>เมมเบอร์</label>
                        <input type="text" class="form-control" name="memberUsername" readonly="true" value="" />
                        <input type="hidden" class="form-control" name="memberId" value="" />
                    </div>

                    <div class="row">
                        <div class="col justify-content-center form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="creditType" value="1" />
                            <label class="form-check-label" for="inlineRadio1">เพิ่มเครดิต</label>
                        </div>
                        <div class="col justify-content-center form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="creditType" value="0" />
                            <label class="form-check-label" for="inlineRadio2">ลดเครดิต</label>
                        </div>                 
                    </div><br/>
    
                    <div class="form-group">
                        <label>ยอดปรับ</label>
                        <input type="text" class="form-control" name="amount" placeholder="กรุณากรอกยอดปรับ" />
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button class="btn btn-default" type="submit"><i class="fas fa-save mr-1"></i> ปรับเครดิต</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="walletHistoryModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content bg-secondary">
                <div class="modal-header">
                    <h5 class="modal-title">ประวัติบัญชี</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <table class="modal-body table table-hover">
                    <thead>
                        <tr>
                            <th class="align-middle text-center font-weight-bold">ID</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>
                            <th class="align-middle text-center font-weight-bold">รายละเอียด / หมายเหตุ</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>    
    <div class="modal fade" id="activityModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ประวัติการใช้งาน</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-sm table-hover no-dt">
                        <thead>
                            <tr>
                                <th class="align-middle text-center font-weight-bold">วันที่</th>
                                <th class="align-middle text-center font-weight-bold">IP Address</th>
                                <th class="align-middle text-center font-weight-bold">กิจกรรม</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let walletHistoryDatatable;
        const walletHistory = async function (element) 
        {
            const self = $(element);
            const modal = $('#walletHistoryModal');

            const table = modal.find('table');
            if($.fn.DataTable.isDataTable(walletHistoryDatatable)) walletHistoryDatatable.destroy();

            const userId = self.data('user-id');
            const formData = new FormData();
            formData.append('userId', userId);
            const fetched = await fetchApi(`{{ route('member.wallet.history') }}`, 'POST', formData);
            const result = await fetched.json();
            
            let tr = ``;
            for (const i in result) {
                let rowIndex = parseInt(i)+1;
                let datas = result[i];
                let tableClass = (datas.type == 0 && +datas.amount > 0 ? 'table-success':'table-danger');
                tr += `<tr class="${tableClass}">
                            <td class="align-middle text-center font-weight-bold">${rowIndex}</td>
                            <td class="align-middle text-center font-weight-bold">${datas.dateThai}</td>
                            <td class="align-middle text-center font-weight-bold">
                                ${$.number(datas.default_balance ?? 0, 2)} THB
                            </td>
                            <td class="align-middle text-center font-weight-bold">${$.number(datas.amount, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold">
                                ${$.number(datas.current_balance ?? 0, 2)} THB
                            </td>
                            <td class="align-middle text-center font-weight-bold">${(datas.action_user == null ? '-':datas.action_user.username)}</td>
                            <td class="align-middle text-center font-weight-bold">${datas.detail}</td>
                        </tr>`;
            }
            modal.find('tbody').html(tr);
            walletHistoryDatatable = table.DataTable();
            modal.find('#DataTables_Table_1_wrapper').addClass('py-3');
            modal.modal('show');
        }
        
        function blockUser(block, btn) {
            return tryCatchSwal(async () => {
                const userId = btn.dataset.userId;
                const blockText = `${block ? 'ระงับ' : 'ปลดล็อก'}บัญชี`;
                const status = block ? 0 : 1;
                const confirm = await swal({
                    title: blockText,
                    text: `โปรดยืนยันเพื่อดำเนินการ${blockText}เมมเบอร์นี้`,
                    icon: block ? 'warning' : 'info',
                    dangerMode: block,
                    buttons: {
                        cancel: 'ยกเลิก',
                        confirm: {
                            text: 'ยืนยัน',
                            closeModal: false,
                        }
                    }
                });
                if (!confirm) return;

                const formData = new FormData();
                formData.append('user_id', userId);
                formData.append('status', status);
                formData.append('_method', 'PUT');
                const result = await fetchJson(`{{ route('member.block-unblock') }}`, 'POST', formData);
                if (!result) return false;

                const tr = btn.closest('tr');
                const statusBadge = tr.querySelector('span.status');
                statusBadge.className = `status badge badge-${block ? 'danger' : 'success'} text-sm`;
                statusBadge.textContent = block ? 'ระงับ' : 'ปกติ';

                btn.onclick = () => blockUser(!block, btn);
                btn.title = block ? 'ปลดล็อกบัญชี' : 'ระงับบัญชี';
                btn.innerHTML = block ? '<i class="fas fa-fw fa-unlock text-success"></i> ปลดล็อกบัญชี' : '<i class="fas fa-fw fa-lock text-danger"></i> ระงับบัญชี';
                return swal('สำเร็จ', `ดำเนินการ${blockText}เมมเบอร์เรียบร้อย`, 'success');
            });
        }

        function showMemberSummary(userId) {
            let url = `{{ route('report.member.index') }}/${userId}/summary`;
            window.open(url,'popup','width=750,height=600');
            return;
        }

        function creditManage(params, el) {
            const modal = $('#creditManageModal');
            const username = $(el).closest('tr').find('td:eq(1)').text().trim();
            $('input[name="memberUsername"]').val(username);
            $('input[name="memberId"]').val(params);
            modal.modal('show');
        }

        function creditManageSubmit(event, element) {
            event.preventDefault();
            const self = $(element);
            const formData = self.serialize();
            const url = `{{ route('report.member.creditManage') }}`;
            $.post(url, formData, (res) => {
                if(res.success){
                    swal('ปรับเครดิตเรียบร้อย', ' ', 'success').then(() => {
                        location.reload();
                    });
                } else {
                    swal('ไม่สามารถทำรายการได้', res.text, 'error');
                }
            }, 'json');
        }

        $('.dropdown').on('show.bs.dropdown hide.bs.dropdown', e => {
            $(e.target).closest('.col-sm-12').toggleClass('table-responsive');
            e.target.scrollIntoViewIfNeeded();
        });

        function editMember(element)
        {
            const self = $(element);
            const modal = $('#changePasswordModal');
            modal.find('input[name="member_username"]').val(self.data('member-username'));
            modal.find('input[name="member_fullname"]').val(self.data('member-fullname'));
            modal.find('input[name="member_phone"]').val(self.data('member-phone'));
            modal.modal('show');

            modal.find('form').on('submit', async function (e) {
                e.preventDefault();
                const formData = new FormData($(this)[0]);
                const fetched = await fetchApi(`{{ route('member.index') }}/${self.data('member-id')}`, 'post', formData);
                const result = await fetched.json();
                fetchedResultHandler(result);
            });
        }

        // $(function(){
        //     const dataTable = $('table').DataTable();

        //     $(document).on('click', '[resetPassword]', function(){
        //         const username = $(this).closest('tr').find('td:eq(1)').text().trim();
        //         const modal = $('#changePasswordModal');

        //         modal.find('input[name="agentUsername"]').val(username);
        //         modal.modal('show');
        //     });

        //     const changePasswordForm = $('#changePasswordForm');
        //     changePasswordForm.on('submit', function(e){
        //         e.preventDefault();
        //         const formData = $(this).serialize();
        //         $.post(`{{ route('member.index') }}`, formData, function(data){
        //             if(data.success){
        //                 swalSuccess('แก้ไขรหัสผ่านเรียบร้อย');
        //             }else{
        //                 swalError(data.text);
        //             }
        //         });
        //     });
        // });

        function removeMember(e, el)
        {
            e.preventDefault();
            const self = $(el);
            const userId = self.data('member-id');
            const url = `{{ route('member.index') }}/${userId}`;
            swal('ยืนยันการลบเมมเบอร์', 'กรุณายินยันการทำรายการ', 'info', { buttons: ['ยกเลิก', 'ยืนยัน'] }).then(async function (sure) {
                if (sure) {
                    const fetched = await fetchApi(url, 'DELETE', {});
                    const result = await fetched.json();
                    fetchedResultHandler(result);
                }
            });

        }

        function showActivity(el)
        {
            const datas = $(el).data('item');
            const target = $('#activityModal');
            let tr = ``;
            for (const k in datas) {
                let data = datas[k];
                tr += `<tr>
                                    <td class="align-middle text-center font-weight-bold">${data.activity_time}</td>
                                    <td class="align-middle text-center font-weight-bold">${data.ip_address ?? '-'}</td>
                                    <td class="align-middle text-center font-weight-bold text-success">เข้าสู่ระบบ</td>
                                </tr>`;
            }
            target.find('tbody').html(tr);
            target.modal('show');
        }

        $('#memberTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('member.index.serverside') }}",
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, className: "align-middle text-center font-weight-bold" },
                // {data: 'id', name: 'id'},
                {
                    data: 'username-display', name: 'username', filter: 'username', className: "align-middle text-center font-weight-bold"
                },
                {data: 'online-status', name: 'online-status', className: "align-middle text-center font-weight-bold"},
                {data: 'name', name: 'name', className: "align-middle text-center font-weight-bold"},
                {data: 'phone', name: 'phone', className: "align-middle text-center font-weight-bold"},
                {data: 'credit-action', name: 'credit-action', className: "align-middle text-center font-weight-bold"},
                {data: 'registered-data-display', name: 'registered-data-display', className: "align-middle text-center font-weight-bold"},
                {data: 'status-display', name: 'status-display', className: "align-middle text-center font-weight-bold"},
                {data: 'action', name: 'action', orderable: false, searchable: false, className: "align-middle text-center font-weight-bold dropdown d-block"},
            ]
        });
    </script>
@endsection