@extends('layouts.admin')

@section('title', '會計收支表')

@push('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('accounting.index') }}">收租管理</a></li>
    <li class="breadcrumb-item active" aria-current="page">會計收支表</li>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/accounting/statement.css') }}">
@endpush

@php
    $hasOtherText = $transactions->pluck('other_text')->filter()->isNotEmpty();
@endphp

@section('content')
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3">
    <div>
        <h1 class="mb-1"><i class="bi bi-cash-stack me-2"></i>會計收支表</h1>
        <div class="opacity-75">
            香港信義人力資源有限公司 · 外勞收支表
            @if($month)
                · {{ $year }} 年 {{ $month }} 月
            @else
                · {{ $year }} 年
            @endif
        </div>
    </div>
    <div class="d-flex flex-wrap gap-2 no-print">
        <a href="{{ route('statement_projects.index') }}" class="btn btn-light btn-sm">
            <i class="bi bi-collection"></i> 專案管理
        </a>
        <a href="{{ route('accounting.statement.pdf', array_filter(['year' => $year, 'month' => $month])) }}" class="btn btn-light btn-sm">
            <i class="bi bi-file-earmark-pdf text-danger"></i> 打印 PDF
        </a>
        <a href="{{ route('accounting.statement.excel', array_filter(['year' => $year, 'month' => $month])) }}" class="btn btn-light btn-sm">
            <i class="bi bi-file-earmark-excel text-success"></i> 匯出 Excel
        </a>
        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#zipModal">
            <i class="bi bi-file-earmark-zip"></i> 批量下載 ZIP
        </button>
    </div>
</div>

{{-- 批量下載 ZIP Modal --}}
<div class="modal fade" id="zipModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="zipForm" method="GET" action="{{ route('accounting.statement.zip') }}">
                <input type="hidden" name="year" value="{{ $year }}">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-file-earmark-zip me-2"></i>批量下載 ZIP（{{ $year }} 年）</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" id="zipAllMonths" checked>
                        <label class="form-check-label" for="zipAllMonths">全年（12 個月 + 全年彙總 PDF）</label>
                    </div>
                    <div id="zipMonthList" class="row g-1 ms-3">
                        @for($m = 1; $m <= 12; $m++)
                            <div class="col-4">
                                <div class="form-check">
                                    <input class="form-check-input zip-month" type="checkbox" name="months[]" value="{{ $m }}" id="zipM{{ $m }}" disabled>
                                    <label class="form-check-label" for="zipM{{ $m }}">{{ $m }} 月</label>
                                </div>
                            </div>
                        @endfor
                    </div>
                    <div class="form-text mt-3">
                        ZIP 內容：每個勾選月份一個資料夾（該月報表 PDF + 全部附件），全年模式另附全年彙總 PDF。
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-download"></i> 下載 ZIP</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- 年月篩選 --}}
<div class="card mb-3 no-print">
    <div class="card-body">
        <form method="GET" action="{{ route('accounting.statement.index') }}" class="row g-2 align-items-end">
            <div class="col-auto">
                <label class="form-label mb-0">年份</label>
                <select name="year" class="form-select" onchange="this.form.submit()">
                    @foreach($availableYears as $y)
                        <option value="{{ $y }}" @selected($year == $y)>{{ $y }} 年</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label mb-0">月份</label>
                <select name="month" class="form-select" onchange="this.form.submit()">
                    <option value="">全年</option>
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" @selected($month == $m)>{{ $m }} 月</option>
                    @endfor
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">顯示</button>
            </div>
            <div class="col-auto">
                @php
                    $prev = \Carbon\Carbon::create($year, $month ?: 1, 1)->subMonth();
                    $next = \Carbon\Carbon::create($year, $month ?: 12, 1)->addMonth();
                @endphp
                <a class="btn btn-outline-secondary" href="{{ route('accounting.statement.index', ['year' => $month === null ? $year - 1 : $prev->year, 'month' => $month === null ? null : $prev->month]) }}">
                    <i class="bi bi-chevron-left"></i> {{ $month === null ? '上一年' : '上月' }}
                </a>
                <a class="btn btn-outline-secondary" href="{{ route('accounting.statement.index', ['year' => $month === null ? $year + 1 : $next->year, 'month' => $month === null ? null : $next->month]) }}">
                    {{ $month === null ? '下一年' : '下月' }} <i class="bi bi-chevron-right"></i>
                </a>
            </div>
        </form>
    </div>
</div>

{{-- 摘要 --}}
<div class="row">
    <div class="col-md-3">
        <div class="summary-card">
            <div class="label">收入 HK$</div>
            <div class="value text-success">${{ number_format($totalIncome, 2) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card">
            <div class="label">支出 HK$</div>
            <div class="value text-danger">${{ number_format($totalExpense - $totalCnyExpense, 2) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card">
            <div class="label">支出 - 人民幣</div>
            <div class="value text-danger">¥{{ number_format($totalCnyExpense, 2) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card">
            <div class="label">結餘（收入 − 支出HK$）</div>
            <div class="value {{ ($totalIncome - ($totalExpense - $totalCnyExpense)) >= 0 ? 'text-primary' : 'text-danger' }}">${{ number_format($totalIncome - ($totalExpense - $totalCnyExpense), 2) }}</div>
        </div>
    </div>
</div>

{{-- 新增交易 --}}
<div class="section-card no-print">
    <div class="card-header new"><i class="bi bi-plus-circle me-2"></i>新增交易</div>
    <div class="card-body">
        <form action="{{ route('accounting.statement.store') }}" method="POST" enctype="multipart/form-data" class="row g-2 align-items-end">
            @csrf
            <div class="col-md-2">
                <label class="form-label">日期</label>
                <input type="date" name="transacted_on" class="form-control">
            </div>
            <div class="col-md-2">
                <label class="form-label">
                    專案
                    <a href="{{ route('statement_projects.index') }}" class="small ms-1" title="自訂專案清單"><i class="bi bi-gear"></i></a>
                </label>
                <input type="text" name="project" class="form-control" list="projectOptions" value="外勞收支" placeholder="外勞收支">
                <datalist id="projectOptions">
                    @foreach($projects as $p)
                        <option value="{{ $p }}"></option>
                    @endforeach
                </datalist>
            </div>
            <div class="col-md-2">
                <label class="form-label">類型</label>
                <select name="type" class="form-select" id="newType" required>
                    <option value="expense">支出</option>
                    <option value="income">收入</option>
                </select>
            </div>
            <div class="col-md-1">
                <label class="form-label">幣別</label>
                <select name="currency" class="form-select" required>
                    <option value="HKD">HK$</option>
                    <option value="CNY">人民幣</option>
                </select>
            </div>
            <div class="col-md-1">
                <label class="form-label">金額</label>
                <input type="number" name="amount" step="0.01" min="0" class="form-control" required>
            </div>
            <div class="col-md-1">
                <label class="form-label">年</label>
                <select name="year" class="form-select" required>
                    @foreach($availableYears as $y)
                        <option value="{{ $y }}" @selected($year == $y)>{{ $y }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-1">
                <label class="form-label">月</label>
                <select name="month" class="form-select" required>
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" @selected(($month ?: now()->month) == $m)>{{ $m }}</option>
                    @endfor
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">其它（自訂欄位）</label>
                <input type="text" name="other_text" class="form-control">
            </div>
            <div class="col-md-2">
                <label class="form-label">備注</label>
                <input type="text" name="note" class="form-control">
            </div>
            <div class="col-md-4">
                <label class="form-label">附件（PDF / 相片，可多選）</label>
                <input type="file" name="files[]" class="form-control" multiple accept="application/pdf,.pdf,image/jpeg,image/png">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100"><i class="bi bi-check-lg"></i> 新增</button>
            </div>
        </form>
    </div>
</div>

{{-- 年度概覽（全年模式） --}}
@if(! $month)
<div class="section-card no-print">
    <div class="card-header other"><i class="bi bi-calendar3 me-2"></i>{{ $year }} 年按月概覽</div>
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle text-nowrap">
            <thead class="table-light">
                <tr>
                    <th>月份</th>
                    <th>收入 HK$</th>
                    <th>支出 HK$</th>
                    <th>支出 - 人民幣</th>
                    <th>筆數</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach($monthlyTotals as $m => $data)
                    <tr class="{{ $data['count'] > 0 ? '' : 'text-muted' }}">
                        <td>{{ $m }} 月</td>
                        <td class="text-success">${{ number_format($data['income'], 2) }}</td>
                        <td class="text-danger">${{ number_format($data['expense'], 2) }}</td>
                        <td class="text-danger">¥{{ number_format($data['expense_cny'], 2) }}</td>
                        <td>{{ $data['count'] }}</td>
                        <td class="text-end">
                            <a href="{{ route('accounting.statement.index', ['year' => $year, 'month' => $m]) }}" class="btn btn-sm btn-outline-primary">查看</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- 交易明細 --}}
<div class="section-card">
    <div class="card-header detail">
        <div>
            <div class="fw-bold">香港信義人力資源有限公司</div>
            <div>外勞收支表 · 銀行：012-898-2-0494387 ·
                @if($month){{ $year }} 年 {{ $month }} 月@else{{ $year }} 年 全年@endif
                （{{ $transactions->count() }} 筆）
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle statement-table">
            <thead class="table-light">
                <tr>
                    <th style="width:110px">日期</th>
                    <th>專案</th>
                    <th style="width:130px">收入 HK$</th>
                    <th style="width:130px">支出 HK$</th>
                    <th style="width:140px">支出 - 人民幣</th>
                    @if($hasOtherText)
                        <th>其它（自訂欄位）</th>
                    @endif
                    <th>備注</th>
                    <th class="no-print" style="width:120px">文件</th>
                    <th class="no-print" style="width:170px">操作</th>
                </tr>
            </thead>
            <tbody>
                @forelse($transactions as $t)
                <tr>
                    <td>{{ $t->transacted_on?->format('Y-m-d') }}</td>
                    <td>
                        {{ $t->project }}
                        <span class="badge {{ $t->type === 'income' ? 'bg-success' : 'bg-danger' }} ms-1">{{ $t->typeLabel() }}</span>
                    </td>
                    <td class="text-success">
                        @if($t->type === 'income'){{ number_format($t->amount, 2) }}@endif
                    </td>
                    <td class="text-danger">
                        @if($t->type === 'expense' && $t->currency !== 'CNY'){{ number_format($t->amount, 2) }}@endif
                    </td>
                    <td class="text-danger">
                        @if($t->type === 'expense' && $t->currency === 'CNY')¥{{ number_format($t->amount, 2) }}@endif
                    </td>
                    @if($hasOtherText)
                        <td>{{ $t->other_text }}</td>
                    @endif
                    <td>{{ $t->note }}</td>
                    <td class="no-print">
                        @if($t->documents->isNotEmpty())
                            <a href="{{ route('documents.transactions.show', array_merge(['statement' => $t], $month ? ['month' => $month] : [])) }}"
                               class="btn btn-sm btn-outline-secondary" title="在文件管理查看">
                                <i class="bi bi-folder2-open"></i> {{ $t->documents->count() }} 份
                            </a>
                        @else
                            <span class="text-muted small">無</span>
                        @endif
                    </td>
                    <td class="no-print text-nowrap">
                        <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editModal-{{ $t->id }}">
                            <i class="bi bi-pencil"></i> 編輯
                        </button>
                        @if(auth()->user()->isAdmin())
                        <form action="{{ route('accounting.statement.destroy', $t) }}" method="POST" class="d-inline" onsubmit="return confirm('確定刪除此筆記錄及其全部文件？')">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                        </form>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="{{ $hasOtherText ? 9 : 8 }}" class="text-center text-muted py-4">
                    @if($month)
                        {{ $year }} 年 {{ $month }} 月尚無交易記錄。
                    @else
                        {{ $year }} 年尚無交易記錄。
                    @endif
                </td></tr>
                @endforelse
                @if($transactions->isNotEmpty())
                <tr class="table-light fw-bold">
                    <td colspan="2" class="text-end">總計</td>
                    <td class="text-success">${{ number_format($totalIncome, 2) }}</td>
                    <td class="text-danger">${{ number_format($totalExpense - $totalCnyExpense, 2) }}</td>
                    <td class="text-danger">¥{{ number_format($totalCnyExpense, 2) }}</td>
                    @if($hasOtherText)
                        <td></td>
                    @endif
                    <td colspan="{{ $hasOtherText ? 4 : 4 }}" class="no-print"></td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
</div>

{{-- 編輯 Modal --}}
@foreach($transactions as $t)
<div class="modal fade" id="editModal-{{ $t->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('accounting.statement.update', $t) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-pencil me-2"></i>編輯交易</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">日期</label>
                            <input type="date" name="transacted_on" class="form-control" value="{{ $t->transacted_on?->format('Y-m-d') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">專案</label>
                            <input type="text" name="project" class="form-control" list="projectOptionsEdit{{ $t->id }}" value="{{ $t->project }}">
                            <datalist id="projectOptionsEdit{{ $t->id }}">
                                @foreach($projects as $p)
                                    <option value="{{ $p }}"></option>
                                @endforeach
                            </datalist>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">類型</label>
                            <select name="type" class="form-select" required>
                                <option value="expense" @selected($t->type === 'expense')>支出</option>
                                <option value="income" @selected($t->type === 'income')>收入</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">幣別</label>
                            <select name="currency" class="form-select" required>
                                <option value="HKD" @selected($t->currency === 'HKD')>HK$</option>
                                <option value="CNY" @selected($t->currency === 'CNY')>人民幣</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">金額</label>
                            <input type="number" name="amount" step="0.01" min="0" class="form-control" value="{{ $t->amount }}" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">所屬年月</label>
                            <div class="d-flex gap-1">
                                <input type="number" name="year" class="form-control" value="{{ $t->year }}" min="2000" max="2100" required title="年">
                                <select name="month" class="form-select" required title="月">
                                    @for($m = 1; $m <= 12; $m++)
                                        <option value="{{ $m }}" @selected($t->month == $m)>{{ $m }} 月</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">其它（自訂欄位）</label>
                            <input type="text" name="other_text" class="form-control" value="{{ $t->other_text }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">備注</label>
                            <input type="text" name="note" class="form-control" value="{{ $t->note }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">現有文件</label>
                            @if($t->documents->isNotEmpty())
                                <ul class="list-group">
                                    @foreach($t->documents as $doc)
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-2">
                                            <span><i class="bi bi-file-earmark-pdf text-danger me-2"></i>{{ $doc->original_filename }}</span>
                                            <form action="{{ route('accounting.statement.files.destroy', ['statement' => $t, 'document' => $doc]) }}" method="POST"
                                                  onsubmit="return confirm('確定刪除此文件？')">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                            </form>
                                        </li>
                                    @endforeach
                                </ul>
                            @else
                                <div class="text-muted small">尚未上載文件</div>
                            @endif
                        </div>
                        <div class="col-12">
                            <label class="form-label">追加文件（PDF / 相片，可多選）</label>
                            <input type="file" name="files[]" class="form-control" multiple accept="application/pdf,.pdf,image/jpeg,image/png">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> 儲存</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach
@endsection

@push('scripts')
<script>
// 批量下載 ZIP：全年 / 自訂月份切換
document.addEventListener('DOMContentLoaded', function () {
    const allCheckbox = document.getElementById('zipAllMonths');
    const monthChecks = document.querySelectorAll('.zip-month');

    if (!allCheckbox) return;

    function syncMonths() {
        monthChecks.forEach(function (cb) {
            cb.disabled = allCheckbox.checked;
            if (allCheckbox.checked) cb.checked = false;
        });
    }

    allCheckbox.addEventListener('change', syncMonths);
    syncMonths();

    // 未勾任何月份時阻止送出
    document.getElementById('zipForm')?.addEventListener('submit', function (event) {
        if (!allCheckbox.checked) {
            const any = Array.from(monthChecks).some(function (cb) { return cb.checked; });
            if (!any) {
                event.preventDefault();
                alert('請選擇至少一個月份，或勾選「全年」。');
            }
        }
    });
});

// 相片自動轉 PDF（與文件管理一致的體驗）
document.querySelectorAll('form[enctype="multipart/form-data"]').forEach(function (form) {
    form.addEventListener('submit', async function (event) {
        const input = form.querySelector('input[type="file"]');
        if (!input || !input.files.length) return;

        const files = Array.from(input.files);
        if (files.every(function (f) { return f.type === 'application/pdf'; })) return;

        if (typeof window.jspdf === 'undefined') {
            event.preventDefault();
            alert('相片轉 PDF 元件未載入（需要網路連線），請改用 PDF 檔案上載。');
            return;
        }

        event.preventDefault();
        const submitBtn = form.querySelector('button[type="submit"]');
        submitBtn.disabled = true;

        const transfer = new DataTransfer();
        for (const file of files) {
            if (file.type === 'application/pdf') {
                transfer.items.add(file);
                continue;
            }
            try {
                const pdfBlob = await imageToPdfBlob(file);
                const baseName = (file.name || '相片').replace(/\.[^.]+$/, '') || '相片';
                transfer.items.add(new File([pdfBlob], baseName + '.pdf', { type: 'application/pdf' }));
            } catch (error) {
                submitBtn.disabled = false;
                alert('「' + file.name + '」轉換 PDF 失敗，請改用 JPEG/PNG 相片或 PDF 檔案。');
                return;
            }
        }
        input.files = transfer.files;
        form.submit();
    });
});

function imageToPdfBlob(file) {
    return new Promise(function (resolve, reject) {
        const { jsPDF } = window.jspdf || {};
        if (typeof jsPDF !== 'function') { reject(new Error('PDF 轉換元件未載入')); return; }

        const objectUrl = URL.createObjectURL(file);
        const img = new Image();
        img.onload = function () {
            URL.revokeObjectURL(objectUrl);
            try {
                const canvas = document.createElement('canvas');
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                const context = canvas.getContext('2d');
                context.fillStyle = '#ffffff';
                context.fillRect(0, 0, canvas.width, canvas.height);
                context.drawImage(img, 0, 0);

                const landscape = canvas.width > canvas.height;
                const pdf = new jsPDF({ orientation: landscape ? 'landscape' : 'portrait', unit: 'mm', format: 'a4' });
                const pageWidth = pdf.internal.pageSize.getWidth();
                const pageHeight = pdf.internal.pageSize.getHeight();
                const scale = Math.min(pageWidth / canvas.width, pageHeight / canvas.height);
                pdf.addImage(canvas.toDataURL('image/jpeg', 0.92), 'JPEG',
                    (pageWidth - canvas.width * scale) / 2,
                    (pageHeight - canvas.height * scale) / 2,
                    canvas.width * scale, canvas.height * scale);
                resolve(pdf.output('blob'));
            } catch (e) { reject(e); }
        };
        img.onerror = function () { URL.revokeObjectURL(objectUrl); reject(new Error('無法讀取此圖片格式')); };
        img.src = objectUrl;
    });
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
@endpush