@extends('layouts.app')

@section('title', 'Báo cáo số dư cổng')

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Báo cáo số dư') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.index') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Báo cáo số dư') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
        <hr>
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">Báo cáo số dư cổng</h4>
            <a href="{{ route('app.gate.index') }}" class="btn btn-outline-secondary">← Quản lí cổng</a>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="d-flex gap-2 align-items-end mb-3">
                    <div>
                        <label class="form-label mb-1">Ngày</label>
                        <input type="date" class="form-control" id="gbdDay" value="{{ $day }}">
                    </div>
                    <button class="btn btn-primary" id="gbdReload">Tải dữ liệu</button>
                    <div class="ms-auto text-muted" id="gbdStatus"></div>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered table-sm align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Gate</th>
                                <th class="text-end">Số dư đầu ngày</th>
                                <th class="text-end">IN</th>
                                <th class="text-end">OUT</th>
                                <th class="text-end">Rút số dư</th>
                                <th class="text-end">Số dư tính ra</th>
                                <th class="text-end">Số dư thực tế bên cổng</th>
                                <th class="text-end">Chênh lệch</th>
                                <th>Note</th>
                                <th style="width:120px;">Thao tác</th>
                            </tr>
                        </thead>
                        <tbody id="gbdTbody">
                            <tr>
                                <td colspan="10" class="text-center text-muted">Đang tải...</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr class="table-light">
                                <td colspan="10" class="text-center fw-bold">
                                    Số dư đầu ngày + IN − OUT − Rút số dư = Số dư cuối
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        {{-- Offcanvas --}}
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasGateEdit" style="width: 520px;">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Sửa số dư cổng</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>
            <div class="offcanvas-body">
                <input type="hidden" id="editGateName">
                <div class="mb-2">
                    <label class="form-label">Cổng</label>
                    <input type="text" class="form-control" id="editGateText" disabled>
                </div>

                <div class="row mb-2">
                    <div class="col-6">
                        <label class="form-label">IN trong ngày</label>
                        <input type="text" class="form-control text-end" id="editIn" disabled>
                    </div>
                    <div class="col-6">
                        <label class="form-label">OUT trong ngày</label>
                        <input type="text" class="form-control text-end" id="editOut" disabled>
                    </div>
                </div>

                <div class="mb-2">
                    <label class="form-label">Số dư đầu ngày</label>
                    <input type="text" class="form-control text-end" id="editOpening" placeholder="0">
                    <div class="form-text">Để trống = giữ số hệ thống mang sang từ hôm trước. Nhập số âm được.</div>
                </div>

                <div class="mb-2">
                    <label class="form-label">Rút số dư bên cổng</label>
                    <input type="text" class="form-control text-end" id="editWithdraw" placeholder="0">
                    <div class="form-text">Dương = rút tiền khỏi cổng. Âm = nạp thêm tiền vào cổng.</div>
                </div>

                <div class="mb-2">
                    <label class="form-label">Số dư thực tế bên cổng</label>
                    <input type="text" class="form-control text-end" id="editActual" placeholder="N/A">
                    <div class="form-text">Để trống nếu chưa đối chiếu được.</div>
                </div>

                <div class="mb-2">
                    <label class="form-label">Note</label>
                    <input type="text" class="form-control" id="editNote" placeholder="Ghi chú">
                </div>

                <div class="alert alert-light">
                    <div><b>Số dư hệ thống tính:</b> <span id="editExpected">0</span></div>
                    <div><b>Chênh lệch:</b> <span id="editDiff">N/A</span></div>
                    <div class="small text-muted mt-1">Đầu ngày + IN − OUT − Rút số dư</div>
                </div>

                <button class="btn btn-success w-100" id="btnSaveGate">Lưu</button>
            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <script>
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

        const dayInput = document.getElementById('gbdDay');
        const btnReload = document.getElementById('gbdReload');
        const tbody = document.getElementById('gbdTbody');
        const statusEl = document.getElementById('gbdStatus');

        const offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasGateEdit'));

        const editGateName = document.getElementById('editGateName');
        const editGateText = document.getElementById('editGateText');
        const editOpening = document.getElementById('editOpening');
        const editWithdraw = document.getElementById('editWithdraw');
        const editActual = document.getElementById('editActual');
        const editNote = document.getElementById('editNote');
        const editExpected = document.getElementById('editExpected');
        const editDiff = document.getElementById('editDiff');
        const editIn = document.getElementById('editIn');
        const editOut = document.getElementById('editOut');
        const btnSaveGate = document.getElementById('btnSaveGate');

        let cacheRows = {}; // gate_name => row

        function fmt(n) {
            if (n === null || n === undefined) return 'N/A';
            return Number(n).toLocaleString('vi-VN');
        }

        // Giữ lại dấu '-' vì số dư cổng có thể âm.
        function onlyDigits(s) {
            const raw = String(s ?? '').trim();
            const neg = raw.startsWith('-');
            const digits = raw.replace(/[^0-9]/g, '');
            if (digits === '') return '';
            return (neg ? '-' : '') + digits;
        }

        function toNum(s) {
            const v = onlyDigits(s);
            return v === '' || v === '-' ? 0 : Number(v);
        }

        // Tính lại "Số dư hệ thống tính" ngay khi kế toán gõ, chưa cần bấm Lưu.
        function recalcPreview() {
            const gate = editGateName.value;
            const r = cacheRows[gate];
            if (!r) return;

            const opening = editOpening.value.trim() === '' ? Number(r.opening_balance) : toNum(editOpening
                .value);
            const expected = opening + Number(r.in_amount) - Number(r.out_amount) - toNum(editWithdraw.value);

            editExpected.textContent = fmt(expected);
            editExpected.className = expected < 0 ? 'text-danger' : '';

            if (editActual.value.trim() === '') {
                editDiff.textContent = 'N/A';
                editDiff.className = '';
            } else {
                const diff = toNum(editActual.value) - expected;
                editDiff.textContent = fmt(diff);
                editDiff.className = diff === 0 ? 'text-success' : 'text-danger';
            }
        }

        [editOpening, editWithdraw, editActual].forEach(el => el.addEventListener('input', recalcPreview));

        function setStatus(t) {
            statusEl.textContent = t || '';
        }

        async function loadData() {
            const day = dayInput.value;
            setStatus('Đang tải...');
            tbody.innerHTML = `<tr><td colspan="10" class="text-center text-muted">Đang tải...</td></tr>`;

            const url = `{{ route('app.gates.balanceDaily.data') }}?day=${encodeURIComponent(day)}&only_has_data=1`;

            const res = await fetch(url, {
                headers: {
                    'Accept': 'application/json'
                }
            });
            const json = await res.json();

            if (!json.success) {
                tbody.innerHTML = `<tr><td colspan="10" class="text-center text-danger">Load lỗi</td></tr>`;
                setStatus('');
                return;
            }

            cacheRows = {};
            (json.data || []).forEach(r => cacheRows[r.gate_name] = r);

            const rows = json.data || [];
            if (!rows.length) {
                tbody.innerHTML = `<tr><td colspan="10" class="text-center text-muted">Không có dữ liệu</td></tr>`;
                setStatus('');
                return;
            }

            tbody.innerHTML = rows.map(r => {
                const diffText = (r.diff === null ? '' : fmt(r.diff));
                const diffClass = (r.diff === null ? '' : (r.diff === 0 ? 'text-success' : 'text-danger'));
                const negClass = (n) => (Number(n) < 0 ? 'text-danger' : '');
                const openingBadge = r.opening_manual ?
                    ' <span class="badge bg-info" title="Kế toán nhập tay">tay</span>' : '';
                return `
                         <tr>
                           <td><b>${r.gate_name}</b></td>
                           <td class="text-end ${negClass(r.opening_balance)}">${fmt(r.opening_balance)}${openingBadge}</td>
                           <td class="text-end">${fmt(r.in_amount)}</td>
                           <td class="text-end">${fmt(r.out_amount)}</td>
                           <td class="text-end">${fmt(r.withdraw_amount)}</td>
                           <td class="text-end ${negClass(r.expected_closing)}"><b>${fmt(r.expected_closing)}</b></td>
                           <td class="text-end">${r.actual_closing === null ? '' : fmt(r.actual_closing)}</td>
                           <td class="text-end ${diffClass}">${diffText}</td>
                           <td>${(r.note || '').replace(/</g,'&lt;')}</td>
                           <td class="text-center">
                             <button class="btn btn-sm btn-primary gbd-edit" data-gate="${r.gate_name}">Sửa</button>
                           </td>
                         </tr>
                       `;
            }).join('');

            setStatus(`Đã tải: ${json.day}`);
        }

        btnReload.addEventListener('click', loadData);
        document.addEventListener('DOMContentLoaded', loadData);

        // open offcanvas edit
        tbody.addEventListener('click', (e) => {
            const btn = e.target.closest('.gbd-edit');
            if (!btn) return;

            const gate = btn.getAttribute('data-gate');
            const r = cacheRows[gate];
            if (!r) return;

            editGateName.value = gate;
            editGateText.value = gate;
            editIn.value = fmt(r.in_amount);
            editOut.value = fmt(r.out_amount);
            editOpening.value = fmt(r.opening_balance);
            editWithdraw.value = fmt(r.withdraw_amount);
            editActual.value = (r.actual_closing === null ? '' : fmt(r.actual_closing));
            editNote.value = r.note || '';

            recalcPreview();
            offcanvas.show();
        });

        btnSaveGate.addEventListener('click', async () => {
            const payload = {
                day: dayInput.value,
                gate_name: editGateName.value,
                // rỗng => backend giữ nguyên số dư đầu ngày đang có
                opening_balance: editOpening.value.trim() === '' ? '' : onlyDigits(editOpening.value),
                withdraw_amount: editWithdraw.value.trim() === '' ? '0' : onlyDigits(editWithdraw.value),
                // rỗng => chưa đối chiếu, backend set null
                actual_closing: editActual.value.trim() === '' ? '' : onlyDigits(editActual.value),
                note: editNote.value || ''
            };

            btnSaveGate.disabled = true;
            btnSaveGate.textContent = 'Đang lưu...';

            try {
                const res = await fetch(`{{ route('app.gates.balanceDaily.update') }}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify(payload)
                });
                const json = await res.json();

                if (!json.success) {
                    alert(json.message || 'Lưu lỗi');
                    return;
                }

                offcanvas.hide();
                await loadData();

            } catch (e) {
                alert('Lưu lỗi, vui lòng thử lại');
            } finally {
                btnSaveGate.disabled = false;
                btnSaveGate.textContent = 'Lưu';
            }
        });
    </script>
@endsection