@extends('layouts.admin')

@section('title', '收支表文件')

@push('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('documents.index') }}">文件處理</a></li>
    <li class="breadcrumb-item active" aria-current="page">收支表文件</li>
@endpush

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

@section('content')
<div class="page-header">
    <h1><i class="bi bi-cash-stack me-3"></i>會計收支表文件</h1>
    <p class="mb-0 mt-2 opacity-75">
        {{ $entity->project }} · {{ $entity->item }} ·
        {{ $entity->year }} 年 {{ $entity->month }} 月 ·
        {{ $entity->typeLabel() }} {{ number_format($entity->amount, 2) }}{{ $entity->currency === 'CNY' ? ' ¥' : ' $' }}
    </p>
</div>

<div class="mb-3 d-flex gap-2">
    <a href="{{ $backUrl }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> 返回會計收支表
    </a>
    <a href="{{ route('documents.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-folder2-open"></i> 文件處理首頁
    </a>
</div>

<div class="document-manager">
    <div class="doc-category-card {{ $documents->isNotEmpty() ? 'has-files' : '' }}">
        <div class="doc-category-header">
            <div class="doc-category-title">
                <span class="doc-category-index">{{ $entity->year }}-{{ sprintf('%02d', $entity->month) }}</span>
                <span>{{ $entity->item }}</span>
            </div>
            <span class="doc-status-badge {{ $documents->isNotEmpty() ? 'uploaded' : 'pending' }}">
                @if($documents->isNotEmpty())
                    <i class="bi bi-check-circle-fill me-1"></i>已上載 {{ $documents->count() }} 份
                @else
                    <i class="bi bi-dash-circle me-1"></i>未上載
                @endif
            </span>
        </div>

        @if($documents->isNotEmpty())
            <ul class="doc-file-list">
                @foreach($documents as $doc)
                    <li class="doc-file-item">
                        <div class="doc-file-info">
                            <i class="bi bi-file-earmark-pdf text-danger"></i>
                            <div>
                                <button type="button"
                                        class="doc-file-name doc-preview-btn"
                                        data-preview-url="{{ route('documents.previewUrl', $doc) }}"
                                        data-preview-title="{{ $doc->original_filename }}">
                                    {{ $doc->original_filename }}
                                </button>
                                <div class="doc-file-meta">
                                    {{ $doc->created_at?->format('Y-m-d H:i') }}
                                    @if($doc->uploader)
                                        · {{ $doc->uploader->name }}
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="doc-file-actions">
                            <button type="button"
                                    class="btn btn-sm btn-outline-primary doc-preview-btn"
                                    title="預覽 PDF"
                                    data-preview-url="{{ route('documents.previewUrl', $doc) }}"
                                    data-preview-title="{{ $doc->original_filename }}">
                                <i class="bi bi-eye"></i>
                            </button>
                            @can('delete', $doc)
                                <form action="{{ route('documents.destroy', $doc) }}" method="POST" onsubmit="return confirm('確定要刪除此文件嗎？');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="刪除">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            @endcan
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif

        <form action="{{ route('documents.transactions.upload', $entity) }}" method="POST" enctype="multipart/form-data" class="doc-upload-form">
            @csrf
            <div class="doc-upload-row">
                <input type="file" name="files[]" class="form-control form-control-sm"
                       accept="application/pdf,.pdf,image/jpeg,image/png,image/*" multiple required>
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class="bi bi-upload me-1"></i>上載
                </button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="docPreviewModal" tabindex="-1" aria-labelledby="docPreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="docPreviewModalLabel">PDF 預覽</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
            </div>
            <div class="doc-preview-toolbar px-3 py-2 border-bottom bg-light">
                <div class="doc-preview-zoom">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" id="docPreviewZoomOut" title="縮小">
                            <i class="bi bi-dash-lg"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary doc-preview-zoom-level" id="docPreviewZoomFit" title="適應寬度">
                            <span id="docPreviewZoomLevel">100%</span>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="docPreviewZoomIn" title="放大">
                            <i class="bi bi-plus-lg"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-body p-0 doc-preview-body">
                <div id="docPreviewLoading" class="doc-preview-loading">
                    <div class="spinner-border text-light" role="status"></div>
                    <span class="ms-2">載入中...</span>
                </div>
                <div id="docPreviewError" class="doc-preview-error d-none"></div>
                <div id="docPreviewCanvasWrap" class="doc-preview-canvas-wrap d-none">
                    <div class="doc-preview-page-wrap">
                        <canvas id="docPreviewCanvas"></canvas>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="docPreviewPrev" disabled>
                        <i class="bi bi-chevron-left"></i> 上一頁
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="docPreviewNext" disabled>
                        下一頁 <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
                <span id="docPreviewPageInfo" class="text-muted small">-</span>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof pdfjsLib === 'undefined' || typeof bootstrap === 'undefined') return;
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    const modalEl = document.getElementById('docPreviewModal');
    const titleEl = document.getElementById('docPreviewModalLabel');
    const loadingEl = document.getElementById('docPreviewLoading');
    const errorEl = document.getElementById('docPreviewError');
    const canvasWrapEl = document.getElementById('docPreviewCanvasWrap');
    const canvasEl = document.getElementById('docPreviewCanvas');
    const prevBtn = document.getElementById('docPreviewPrev');
    const nextBtn = document.getElementById('docPreviewNext');
    const pageInfoEl = document.getElementById('docPreviewPageInfo');
    const zoomInBtn = document.getElementById('docPreviewZoomIn');
    const zoomOutBtn = document.getElementById('docPreviewZoomOut');
    const zoomFitBtn = document.getElementById('docPreviewZoomFit');
    const zoomLevelEl = document.getElementById('docPreviewZoomLevel');
    if (!modalEl || !canvasEl) return;

    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    let pdfDoc = null, pageNum = 1, rendering = false, scaleMode = 'fit', manualScale = 1, currentScale = 1;

    function showLoading() { loadingEl.classList.remove('d-none'); errorEl.classList.add('d-none'); canvasWrapEl.classList.add('d-none'); }
    function showError(msg) { loadingEl.classList.add('d-none'); canvasWrapEl.classList.add('d-none'); errorEl.classList.remove('d-none'); errorEl.textContent = msg; }
    function showCanvas() { loadingEl.classList.add('d-none'); errorEl.classList.add('d-none'); canvasWrapEl.classList.remove('d-none'); }
    function getFitScale(page) {
        const base = page.getViewport({ scale: 1 });
        const w = canvasWrapEl.clientWidth > 0 ? canvasWrapEl.clientWidth - 32 : 900;
        return Math.min(Math.max(w / base.width, 0.5), 4);
    }
    function updateControls() {
        const total = pdfDoc ? pdfDoc.numPages : 0;
        pageInfoEl.textContent = total ? (pageNum + ' / ' + total) : '-';
        prevBtn.disabled = !pdfDoc || pageNum <= 1;
        nextBtn.disabled = !pdfDoc || pageNum >= total;
        zoomInBtn.disabled = zoomOutBtn.disabled = zoomFitBtn.disabled = !pdfDoc;
    }
    async function renderPage(num) {
        if (!pdfDoc || rendering) return;
        rendering = true; pageNum = num;
        try {
            const page = await pdfDoc.getPage(pageNum);
            const scale = scaleMode === 'fit' ? getFitScale(page) : manualScale;
            currentScale = scale;
            const viewport = page.getViewport({ scale });
            canvasEl.width = viewport.width; canvasEl.height = viewport.height;
            await page.render({ canvasContext: canvasEl.getContext('2d'), viewport }).promise;
            showCanvas(); updateControls();
            zoomLevelEl.textContent = Math.round(scale * 100) + '%';
        } catch (e) { showError('無法顯示 PDF 頁面'); }
        finally { rendering = false; }
    }
    async function openPreview(url, title) {
        titleEl.textContent = title || 'PDF 預覽';
        pdfDoc = null; pageNum = 1; scaleMode = 'fit'; manualScale = 1;
        showLoading(); updateControls(); modal.show();
        try {
            const response = await fetch(url, { credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!response.ok) throw new Error('HTTP ' + response.status);
            pdfDoc = await pdfjsLib.getDocument({ data: await response.arrayBuffer() }).promise;
            await renderPage(1);
        } catch (e) { showError('無法載入 PDF，請重新整理頁面後再試。'); }
    }
    document.addEventListener('click', async function (event) {
        const button = event.target.closest('.doc-preview-btn');
        if (!button) return;
        event.preventDefault();
        try {
            const response = await fetch(button.dataset.previewUrl, { credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!response.ok) throw new Error('HTTP ' + response.status);
            const data = await response.json();
            openPreview(data.url, button.dataset.previewTitle);
        } catch (e) { alert('無法開啟預覽，請重新整理頁面後再試。'); }
    });
    prevBtn.addEventListener('click', function () { if (pdfDoc && pageNum > 1) renderPage(pageNum - 1); });
    nextBtn.addEventListener('click', function () { if (pdfDoc && pageNum < pdfDoc.numPages) renderPage(pageNum + 1); });
    zoomInBtn.addEventListener('click', async function () {
        if (!pdfDoc) return;
        const page = await pdfDoc.getPage(pageNum);
        manualScale = Math.min((scaleMode === 'fit' ? getFitScale(page) : manualScale) * 1.25, 4);
        scaleMode = 'manual'; renderPage(pageNum);
    });
    zoomOutBtn.addEventListener('click', async function () {
        if (!pdfDoc) return;
        const page = await pdfDoc.getPage(pageNum);
        manualScale = Math.max((scaleMode === 'fit' ? getFitScale(page) : manualScale) / 1.25, 0.5);
        scaleMode = 'manual'; renderPage(pageNum);
    });
    zoomFitBtn.addEventListener('click', function () { scaleMode = 'fit'; renderPage(pageNum); });
    modalEl.addEventListener('hidden.bs.modal', function () {
        pdfDoc = null; canvasEl.width = 0; canvasEl.height = 0; showLoading();
    });
});
</script>
@endpush