@extends('layouts.master')

@section('title')
    LT-99 :: จัดการเครดิตของเอเยนต์
@endsection

@section('sub_title')
    จัดการเครดิตของเอเยนต์
@endsection

@section('content')
    <style>
        .agent-not-found,
        .position-not-found {
            display: none;
        }
    </style>
    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-header border-0">
                    <div class="form-row align-items-center">
                        <div class="col-auto mb-3 mb-sm-0 pr-sm-4 pr-md-5">
                            <h3 class="mb-0">รายชื่อสมาชิก Agent</h3>
                            @if (!is_null($credit) && !Auth::user()->isAdmin())
                                <small class="mb-0 font-weight-light text-muted">เครดิตคงเหลือ: <span user-credit>{{ number_format($credit) }}</span></small>
                            @endif
                        </div>
                        <div class="col-sm mb-3 mb-sm-0 text-right">
                            <input id="search" class="form-control" name="search" placeholder="ค้นหา" oninput="filterAgent(this)">
                        </div>
                        <div class="col-sm-auto text-right">
                            <select class="form-control" name="position" onchange="filterAgentPosition(this)">
                                <option value="" disabled="" selected="">ระดับสมาชิก</option>
                                <option value="">ทั้งหมด</option>
                                <option value="SP">Super</option>
                                <option value="SE">Senior</option>
                                <option value="MS">Master</option>
                                <option value="AG">Agent</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="agent-table" class="table table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th class="align-middle text-center">#</th>
                                <th class="align-middle text-center">ชื่อผู้ใช้</th>
                                <th class="align-middle text-center">ชื่อ - นามสกุล</th>
                                <th class="align-middle text-center">เครดิต</th>
                                <th class="align-middle text-center">เครดิตตั้งต้น</th>
                                <th class="align-middle text-center">รวม</th>
                                <th class="align-middle text-center">จัดการเครดิต</th>
                                <th class="align-middle text-center">ประวัติ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i = 0; @endphp
                            @if ($users->count())
                                @foreach ($users as $key => $user)
                                    <tr>
                                        <td class="align-middle text-center">{{ ++$i }}</td>
                                        <td class="align-middle text-center text-danger">{{ $user->username }}</td>
                                        <td class="align-middle text-center">{{ $user->name }}</td>
                                        <td class="align-middle text-center text-primary">
                                            <span class="credit">{{ number_format($user->wallet()->where('is_credit', 1)->sum('amount'), 2) }}</span> THB</td>
                                        <td class="align-middle text-center text-warning">
                                            <span class="cash">{{ number_format($user->wallet()->where('is_credit', 0)->sum('amount'), 2) }}</span> THB</td>
                                        <td class="align-middle text-center text-success">
                                            <span class="all">{{ number_format($user->wallet()->sum('amount'), 2) }}</span> THB</td>
                                        <td class="align-middle text-center">
                                            <button type="button" manage-credit data-agent-credit="{{ $user->wallet->where('is_credit', 1)->sum('amount') }}" data-superior-credit="{{ $credit ?? false }}" data-method="+" data-user-id="{{ $user->id }}" class="btn btn-success btn-sm"><i class="fas fa-plus"></i></button>
                                            <button type="button" manage-credit data-agent-credit="{{ $user->wallet->where('is_credit', 1)->sum('amount') }}" data-superior-credit="{{ $credit ?? false }}" data-method="-" data-user-id="{{ $user->id }}" class="btn btn-danger btn-sm"><i class="fas fa-minus"></i></button>
                                        </td>
                                        <td class="align-middle text-center">
                                            <button type="button" data-toggle="modal" data-target="#history-dialog" data-href="{{ route('agent.creditHistory', $user->id) }}" data-user-id="{{ $user->id }}" class="btn btn-secondary btn-sm" wallet-history><i class="fas fa-history"></i> ประวัติการทำรายการ</button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td class="text-center text-muted py-4" colspan="8">
                                        <h3 class="font-weight-light text-center text-muted">ไม่พบข้อมูล</h3>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="history-dialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">ประวัติ</h5>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body p-0"></div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const searchInput = document.getElementById('search');
        const historyDialog = document.getElementById('history-dialog');
        const historyModal = new bootstrap.Modal(historyDialog);
        let currentRow;

        let filterAgentTimer;

        const filterAgent = input => {
            clearTimeout(filterAgentTimer);
            filterAgentTimer = setTimeout(() => {
                const table = document.getElementById('agent-table');
                const tbody = table.querySelector('tbody');
                for (const el of tbody.querySelectorAll('tr')) {
                    const found = el.textContent.trim().includes(input.value);
                    const tr = el.closest('tr');
                    if (!input.value) {
                        tr.classList.remove('agent-found', 'agent-not-found');
                        continue;;
                    }

                    if (found) {
                        tr.classList.add('agent-found')
                        tr.classList.remove('agent-not-found');
                    } else {
                        tr.classList.add('agent-not-found');
                        tr.classList.remove('agent-found')
                    }
                }
            }, 500);
        }

        const filterAgentPosition = select => {
            const table = document.getElementById('agent-table');
            const tbody = table.querySelector('tbody');
            for (const el of tbody.querySelectorAll('td:nth-child(2)')) {
                const found = el.textContent.trim().includes(select.value);
                const tr = el.closest('tr');
                if (!select.value) {
                    tr.classList.remove('position-found', 'position-not-found');
                    continue;;
                }

                if (found) {
                    tr.classList.add('position-found')
                    tr.classList.remove('position-not-found');
                } else {
                    tr.classList.add('position-not-found');
                    tr.classList.remove('position-found')
                }
            }
        }

        document.addEventListener('DOMContentLoaded', () => {

            if (params.get('username')) {
                searchInput.value = params.get('username');
                searchInput.oninput();
            }

            const manageCreditBtns = document.querySelectorAll('[manage-credit]');
            for (const btn of manageCreditBtns) {
                btn.addEventListener('click', async e => {
                    e.preventDefault();
                    currentRow = btn.closest('tr');
                    const userId = btn.dataset.userId;
                    const agentCredit = +btn.dataset.agentCredit;
                    const superiorCredit = JSON.parse(btn.dataset.superiorCredit || 'false');
                    const username = btn.closest('tr').querySelector('td:nth-child(2)').innerText;
                    const method = btn.dataset.method;
                    const add = method === '+';
                    const form = document.createElement('form');
                    form.innerHTML =
                        `@csrf<div class="form-group">
                        ${add ? `<label>รูปแบบการปรับยอด</label><br>
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="customRadioInline1" name="credit" value="true" class="custom-control-input" required>
                                <label class="custom-control-label" for="customRadioInline1">เครดิตลอย</label>
                            </div>
<!--                            <div class="custom-control custom-radio custom-control-inline">-->
<!--                                <input type="radio" id="customRadioInline2" name="credit" value="false" class="custom-control-input">-->
<!--                                <label class="custom-control-label" for="customRadioInline2">เงินสด</label>-->
<!--                            </div>-->
                        </div>` : `<input type="hidden" name="credit" value="true">`}
                        <div class="form-group">
                            <label for="amount">จำนวน</label>
                            <input type="number" min="1" class="form-control" id="amount" name="amount" placeholder="กรุณาระบุจำนวน" required>
                        </div>
                        <input type="hidden" name="user_id" value="${userId}">
                        <input type="hidden" name="add" value="${add}">`;

                    const creditSwal = async () => {
                        const confirm = await swal({
                            title: `${add ? 'เพิ่ม' : 'ลด'}เครดิตเอเยนต์ ${username}`,
                            text: `ระบุจำนวนเครดิตที่ต้องการ${add ? 'เพิ่ม' : 'ลด'}`,
                            icon: add ? 'info' : 'warning',
                            content: form,
                            dangerMode: add ? false : true,
                            buttons: {
                                cancel: 'ยกเลิก',
                                confirm: {
                                    text: 'ยืนยัน',
                                    closeModal: false,
                                },
                            },
                        });
                        const amount = +form.elements['amount'].value;
                        if (!confirm) return false;
                        if (form.checkValidity() === false) {
                            return creditSwal() && form.reportValidity() && swal.stopLoading();
                        }
                        if (superiorCredit === false || method === '-') return true;
                        if (method === '-' && amount > agentCredit) {
                            return false;
                            const addAmount = Intl.NumberFormat('th-TH').format(amount);
                            const remain = Intl.NumberFormat('th-TH').format(agentCredit);
                            return await swal('เครดิตเอเยนต์ติดลบ', `เอเยนต์นี้มีเครดิตลอยไม่ถึง ${addAmount} (เครดิตคงเหลือ: ${remain}) หากดำเนินการลดเครดิต ยอดคงเหลืออาจติดลบ คุณยืนยันที่จะดำเนินการหรือไม่`, 'warning', {
                                button: ['ยกเลิก', 'ยืนยัน'],
                                dangerMode: true,
                            });
                        }
                        if (amount > superiorCredit) {
                            const addAmount = Intl.NumberFormat('th-TH').format(amount);
                            const remain = Intl.NumberFormat('th-TH').format(superiorCredit);
                            await swal('เครดิตไม่เพียงพอ', `คุณมีเครดิตไม่ถึง ${addAmount} (เครดิตคงเหลือ: ${remain})`, 'error');
                            return creditSwal();
                        }
                        return true;
                    };
                    if (!await creditSwal()) return;

                    const formData = new FormData(form);

                    tryCatchSwal(async () => {
                        const result = await fetchJson(`{{ route('credit.store') }}`,'POST', formData);
                        if (!result) return;
                        currentRow.querySelector('.credit').innerText = result.credit;
                        currentRow.querySelector('.cash').innerText = result.cash;
                        currentRow.querySelector('.all').innerText = result.all;
                        btn.dataset.superiorCredit = result.superiorCredit;
                        btn.dataset.agentCredit = result.credit;
                        const $userCredit = document.querySelector('[user-credit]');
                        if ($userCredit) {
                            $userCredit.innerText = Intl.NumberFormat('th-TH').format(result.superiorCredit);
                        }
                        return swal('สำเร็จ', `${add ? 'เพิ่ม' : 'ลด'}เครดิตของเอเยนต์ ${username} เรียบร้อย`, 'success');
                    }, () => fadeOut(loader));
                });
            }

            const creditHistoryBtns = document.querySelectorAll('[wallet-history]');
            for (const btn of creditHistoryBtns) {
                btn.addEventListener('click', async () => {
                    currentRow = btn.closest('tr');
                    const userId = btn.dataset.userId;
                    const historyDiv = await load(`/agent/manage/${userId}/credit/history`, '#history-card');
                    historyDiv.className = 'card shadow-none';
                    const modalBody = historyDialog.querySelector('.modal-body');
                    modalBody.innerHTML = '';
                    modalBody.appendChild(historyDiv);
                });
            }

        });

    </script>
@endsection