{{-- File: resources/views/invoices/_receipt_view.blade.php (Diperbaiki: Icon & Padding) --}}

{{-- 
    Wrapper utama agar ada padding global di mobile-container
    dan juga id untuk html2canvas.
--}}
<div class="receipt-wrapper" id="receipt-to-capture">

    {{-- 1. HEADER RESI (Ikon, Judul, Total) --}}
    <div class="receipt-header">
        <div class="receipt-icon-success">
            {{-- MENGGUNAKAN SVG BAWAAN UNTUK MEMASTIKAN ICON MUNCUL --}}
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>
        </div>
        <h4>Pembayaran Berhasil</h4>
        <h2>IDR {{ number_format($invoice->total_amount, 0, ',', '.') }}</h2>
    </div>

    {{-- 2. DETAIL RESI (Info Transaksi) --}}
    <div class="receipt-body">
        <div class="receipt-detail-list">
            <div class="receipt-detail-item">
                <span>Pembayaran ke</span>
                <strong>PAMSIMAS {{ $invoice->user->profile->village ?? 'Desa Anda' }}</strong>
            </div>
            <div class="receipt-detail-item">
        <span>Pemakaian Air</span>
        <strong>{{ number_format($meterValue ?? 0, 0, ',', '.') }} M³</strong>
    </div>
            <div class="receipt-detail-item">
                <span>Jenis Transaksi</span>
                <strong>{{ Str::title(str_replace('_', ' ', $invoice->payment_method ?? 'N/A')) }}</strong>
            </div>
            
            @if($invoice->payment_code)
            <div class="receipt-detail-item">
                <span>Nomor Bayar / VA</span>
                <strong>{{ $invoice->payment_code }}</strong>
            </div>
            @endif

            <div class="receipt-detail-item">
                <span>Dibayar pada</span>
                <strong>{{ $invoice->paid_at->translatedFormat('d M Y, H:i') }} WIB</strong>
            </div>
            <div class="receipt-detail-item">
                <span>Transaction ID</span>
                <strong style="word-break: break-all;">{{ $invoice->transaction_id ?? 'N/A' }}</strong>
            </div>
        </div>
    </div>
</div> {{-- Akhir dari receipt-wrapper --}}


{{-- 3. FOOTER AKSI (Tombol tidak akan ikut ter-foto) --}}
<div class="receipt-footer">
    <button class="receipt-btn-icon" id="share-button">
        <i class="fas fa-share-alt"></i>
    </button>
    <button class="receipt-btn-icon" id="download-button">
        <i class="fas fa-download"></i>
    </button>
    <a href="{{ route('invoices.index') }}" class="receipt-btn-primary">
        Selesai
    </a>
</div>


@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
    // === SHARE GAMBAR ===
    const shareButton = document.getElementById('share-button');
    if (shareButton) {
        shareButton.addEventListener('click', async () => {
            const receiptElement = document.getElementById('receipt-to-capture');

            shareButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            shareButton.disabled = true;

            try {
                const canvas = await html2canvas(receiptElement, { 
                    scale: 2, 
                    useCORS: true,
                    backgroundColor: '#ffffff', 
                    scrollY: -window.scrollY
                });

                // Konversi canvas ke blob
                canvas.toBlob(async (blob) => {
                    const file = new File([blob], 'resi-pamsimas.png', { type: 'image/png' });

                    if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
                        try {
                            await navigator.share({
                                title: 'Bukti Pembayaran PAMSIMAS',
                                text: 'Pembayaran tagihan PAMSIMAS sebesar Rp {{ number_format($invoice->total_amount, 0, ',', '.') }} telah berhasil.',
                                files: [file]
                            });
                        } catch (err) {
                            console.error('Gagal membagikan:', err);
                        }
                    } else {
                        // Fallback: download gambar
                        const link = document.createElement('a');
                        link.href = canvas.toDataURL('image/png');
                        link.download = 'resi-pamsimas-{{ Str::slug($invoice->invoice_number) }}.png';
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        alert('Browser tidak mendukung share gambar. Gambar telah didownload.');
                    }

                    shareButton.innerHTML = '<i class="fas fa-share-alt"></i>';
                    shareButton.disabled = false;
                }, 'image/png');

            } catch (err) {
                console.error('Gagal membuat gambar:', err);
                alert('Maaf, gagal membagikan gambar.');
                shareButton.innerHTML = '<i class="fas fa-share-alt"></i>';
                shareButton.disabled = false;
            }
        });
    }

    // === DOWNLOAD GAMBAR ===
    const downloadButton = document.getElementById('download-button');
    if (downloadButton) {
        downloadButton.addEventListener('click', () => {
            const receiptElement = document.getElementById('receipt-to-capture');

            downloadButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            downloadButton.disabled = true;

            html2canvas(receiptElement, { 
                scale: 2, 
                useCORS: true,
                backgroundColor: '#ffffff', 
                scrollY: -window.scrollY
            }).then(canvas => {
                const link = document.createElement('a');
                link.href = canvas.toDataURL('image/png');
                link.download = 'resi-pamsimas-{{ Str::slug($invoice->invoice_number) }}.png';

                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                downloadButton.innerHTML = '<i class="fas fa-download"></i>';
                downloadButton.disabled = false;

            }).catch(err => {
                console.error('Gagal membuat gambar:', err);
                alert('Maaf, gagal mengunduh gambar.');
                downloadButton.innerHTML = '<i class="fas fa-download"></i>';
                downloadButton.disabled = false;
            });
        });
    }
</script>
@endpush