@extends('layouts.master')

@section('title')
    LT-168 :: จัดการเครดิตร้านค้า
@endsection

@section('sub_title')
    จัดการเครดิตร้านค้า
@endsection

@section('content')
    <style>
        .store-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">รายชื่อสาขา</h3>
                            @if ($ownerCredit)
                                <small class="mb-0 font-weight-light text-muted">เครดิตคงเหลือ: <span id="owner-credit">{{ number_format($ownerCredit) }}</span></small>
                            @endif
                        </div>
                        <div class="col-sm mb-3 mb-sm-0 text-right">
                            <input class="form-control" name="search" placeholder="ค้นหา" oninput="filterStore(this)">
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="store-table" class="table table-sm 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>
                            </tr>
                        </thead>
                        <tbody class="table_1">
                            @if ($stores)
                                @foreach ($stores as $key => $store)
                                    <tr>
                                        <td class="align-middle text-center">{{ ++$key }}</td>
                                        <td class="align-middle text-center text-danger">
                                            {{ str_pad($store->id, 5, 0, STR_PAD_LEFT) }}</td>
                                        <td class="align-middle text-center">{{ $store->store_name }}</td>
                                        <td class="align-middle text-center">{{ $store->owner->username }}</td>
                                        <td class="align-middle text-center text-success">
                                            <span class="credit">{{ number_format($store->wallet->sum('amount'), 2) }}</span> THB</td>
                                        <td class="align-middle text-center">
                                            <button type="button" manage-credit
                                                data-store-credit="{{ $store->wallet->sum('amount') }}"
                                                data-owner-credit="{{ $isAdmin ? $store->owner->wallet->sum('amount') : $ownerCredit }}" data-method="+" data-store-id="{{ $store->id }}"
                                                class="btn btn-success btn-sm"><i class="fas fa-plus"></i></button>
                                            <button type="button" manage-credit
                                                data-store-credit="{{ $store->wallet->sum('amount') }}"
                                                data-owner-credit="{{ $isAdmin ? $store->owner->wallet->sum('amount') : $ownerCredit }}" data-method="-" data-store-id="{{ $store->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-store-id="{{ $store->id }}" class="btn btn-secondary btn-sm"
                                                wallet-history><i class="fas fa-history"></i> ประวัติการทำรายการ</button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="7">
                                        <h3 class="py-4 text-center mb-0 text-muted font-weight-light">ไม่มีรายการ</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 historyDialog = document.getElementById('history-dialog');
        const historyModal = new bootstrap.Modal(historyDialog);
        let currentRow;

        let filterStoreTimer;

        const filterStore = input => {
            clearTimeout(filterStoreTimer);
            filterStoreTimer = setTimeout(() => {
                const table = document.getElementById('store-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('store-found', 'store-not-found');
                        continue;;
                    }

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

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

            const manageCreditBtns = document.querySelectorAll('[manage-credit]');
            for (const btn of manageCreditBtns) {
                btn.addEventListener('click', async e => {
                    e.preventDefault();
                    currentRow = btn.closest('tr');
                    const storeId = btn.dataset.storeId;
                    const storeCredit = +btn.dataset.storeCredit;
                    const ownerCredit = JSON.parse(btn.dataset.ownerCredit || 'false');
                    const storeName = btn.closest('tr').querySelector('td:nth-child(3)').innerText;
                    const method = btn.dataset.method;
                    const add = method === '+';
                    const form = document.createElement('form');
                    form.onsubmit = () => false;
                    form.innerHTML =
                        `@csrf
                        <div class="row">
                            <div class="col form-group">
                                <label>เครดิตร้าน</label>
                                <p class="mb-0 text-primary font-weight-800">${Intl.NumberFormat('th-TH').format(storeCredit)}</p>
                                <small class="font-weight-light d-block text-muted">บาท</small>
                            </div>
                            ${add ? `<div class="col form-group">
                                <label>เครดิตของ{{ $isAdmin ? 'เอเยนต์' : 'คุณ' }}</label>
                                <p class="mb-0 text-success font-weight-800">${Intl.NumberFormat('th-TH').format(ownerCredit)}</p>
                                <small class="font-weight-light d-block text-muted">บาท</small>
                            </div>` : ''}
                        </div>
                        <div class="form-group">
                            <label for="amount">ระบุจำนวนเครดิตที่ต้องการ${add ? 'เพิ่ม' : 'ลด'}</label>
                            <input type="number" min="1" class="form-control text-center" max="${add ? ownerCredit : storeCredit}" id="amount" name="amount" placeholder="กรุณาระบุจำนวน" required>
                        </div>
                        <input type="hidden" name="store_id" value="${storeId}">
                        <input type="hidden" name="add" value="${add}">`;

                    const creditSwal = async () => {
                        const confirm = await swal({
                            title: `${add ? 'เพิ่ม' : 'ลด'}เครดิตร้าน ${storeName}`,
                            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 (ownerCredit === false || method === '-') return true;
                        if (method === '-' && amount > storeCredit) {
                            const amount = Intl.NumberFormat('th-TH').format(amount);
                            const remain = Intl.NumberFormat('th-TH').format(storeCredit);
                            return swal({
                                title: 'เครดิตร้านติดลบ',
                                text: `ร้านนี้มีเครดิตลอยไม่ถึง ${amount} (เครดิตคงเหลือ: ${remain}) หากดำเนินการลดเครดิต ยอดคงเหลืออาจติดลบ คุณยืนยันที่จะดำเนินการหรือไม่`,
                                icon: 'warning',
                                button: ['ยกเลิก', 'ยืนยัน'],
                                dangerMode: true,
                            });
                        }
                        if (amount > ownerCredit) {
                            const amount = Intl.NumberFormat('th-TH').format(amount);
                            const remain = Intl.NumberFormat('th-TH').format(ownerCredit);
                            await swal({
                                title: 'เครดิตไม่เพียงพอ',
                                text: `คุณมีเครดิตไม่ถึง ${amount} (เครดิตคงเหลือ: ${remain})`,
                                icon: 'error',
                            });
                            return creditSwal();
                        }
                        return true;
                    };
                    if (!await creditSwal()) return;

                    const formData = new FormData(form);

                    tryCatchSwal(async () => {
                        const result = await fetchJson(`{{ route('storeCredit.store') }}`, 'POST', formData);
                        if (!result) return false;
                        currentRow.querySelector('.credit').innerText = result.credit;
                        for (const el of document.querySelectorAll(`[data-store-credit][data-store-id="${storeId}"]`)) {
                            el.dataset.ownerCredit = result.ownerCredit;
                            el.dataset.storeCredit = result.credit.replaceAll(',', '');
                        }
                        let ownerCreditText = document.getElementById('owner-credit')?.innerText;
                        if (ownerCreditText) {
                            ownerCreditText = Intl.NumberFormat('th-TH').format(result.ownerCredit);
                        }
                        return swal({
                            title: 'สำเร็จ',
                            text: `${add ? 'เพิ่ม' : 'ลด'}เครดิตของร้าน ${storeName} เรียบร้อย`,
                            icon: 'success',
                        });
                    });
                });
            }

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

        });

    </script>
@endsection