@extends('layouts.app')

@section('title', 'Struk Transaksi')

@section('content')
@php
    $isNarrowPaper = ($printerSettings['paper_size'] ?? '80mm') === '58mm';
    $receiptLogo = $printerLogo ?? $storeLogo ?? null;
@endphp
<div class="page">
    <div class="container">
        <!-- Receipt -->
        <div id="receipt" class="receipt {{ $isNarrowPaper ? 'receipt-58mm' : '' }}">
            <!-- Store Header -->
            <div class="text-center" style="margin-bottom: {{ $isNarrowPaper ? '8px' : '16px' }};">
                @if($printerSettings['show_logo'] && !empty($receiptLogo))
                <img src="{{ $receiptLogo }}" alt="Logo" class="logo mx-auto object-contain">
                @endif
                <h1 style="font-size: {{ $isNarrowPaper ? '15px' : '20px' }}; line-height: 1.2; margin: 0; font-weight: 700;">{{ $storeName ?? $transaction->branch->name }}</h1>
                <p style="font-size: {{ $isNarrowPaper ? '9px' : '12px' }}; line-height: 1.3; color: #475569; margin: 2px 0 0;">{{ $transaction->branch->address ?? '' }}</p>
                <p style="font-size: {{ $isNarrowPaper ? '9px' : '12px' }}; line-height: 1.3; color: #475569; margin: 2px 0 0;">Telp: {{ $transaction->branch->phone ?? '-' }}</p>
            </div>

            <!-- Transaction Info -->
            <div class="border-t border-b border-dashed border-gray-300" style="padding: {{ $isNarrowPaper ? '6px 0' : '12px 0' }}; margin-bottom: {{ $isNarrowPaper ? '8px' : '16px' }}; font-size: {{ $isNarrowPaper ? '10px' : '13px' }};">
                <div class="flex justify-between" style="margin-bottom: 3px;">
                    <span>No. Struk</span>
                    <span class="font-mono">{{ $transaction->invoice_number }}</span>
                </div>
                <div class="flex justify-between" style="margin-bottom: 3px;">
                    <span>Tanggal</span>
                    <span>{{ $transaction->created_at->format('d/m/Y H:i') }}</span>
                </div>
                <div class="flex justify-between" style="margin-bottom: 3px;">
                    <span>Kasir</span>
                    <span>{{ $transaction->user->name }}</span>
                </div>
                @if($transaction->customer_name)
                <div class="flex justify-between" style="margin-bottom: 3px;">
                    <span>Pelanggan</span>
                    <span>{{ $transaction->customer_name }}</span>
                </div>
                @endif
            </div>

            <!-- Items -->
            <div style="margin-bottom: {{ $isNarrowPaper ? '8px' : '16px' }};">
                <table class="w-full" style="font-size: {{ $isNarrowPaper ? '10px' : '13px' }};">
                    <thead>
                        <tr class="border-b">
                            <th class="text-left" style="padding: {{ $isNarrowPaper ? '4px 0' : '8px 0' }};">Item</th>
                            <th class="text-center">Qty</th>
                            <th class="text-right">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($transaction->details as $detail)
                        <tr>
                            <td style="padding: {{ $isNarrowPaper ? '5px 0' : '10px 0' }};">
                                <div style="margin-bottom: 3px;">{{ $detail->product_name }}</div>
                                <div style="font-size: {{ $isNarrowPaper ? '8px' : '11px' }}; color: #6b7280;">
                                    @if($transaction->type === 'pos')
                                    Rp {{ number_format($detail->price, 0, ',', '.') }}
                                    @else
                                    {{ $detail->product_sku ?? '-' }}
                                    @endif
                                </div>
                            </td>
                            <td class="text-center">{{ $detail->quantity }}</td>
                            <td class="text-right">Rp {{ number_format($detail->total, 0, ',', '.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Totals -->
            <div class="border-t border-dashed border-gray-300" style="padding-top: {{ $isNarrowPaper ? '6px' : '12px' }}; margin-bottom: {{ $isNarrowPaper ? '8px' : '16px' }}; font-size: {{ $isNarrowPaper ? '10px' : '13px' }};">
                @if($transaction->tax > 0)
                <div class="flex justify-between" style="margin-bottom: 3px;">
                    <span>Pajak ({{ $transaction->tax_rate }}%)</span>
                    <span>Rp {{ number_format($transaction->tax, 0, ',', '.') }}</span>
                </div>
                @endif
                <div class="flex justify-between font-bold" style="font-size: {{ $isNarrowPaper ? '13px' : '16px' }}; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e2e8f0;">
                    <span>Total Bayar</span>
                    <span>Rp {{ number_format($transaction->total, 0, ',', '.') }}</span>
                </div>
            </div>

            <!-- Footer -->
            @if($printerSettings['show_footer'])
            <div class="text-center border-t border-dashed border-gray-300" style="padding-top: {{ $isNarrowPaper ? '8px' : '16px' }};">
                <p style="font-size: {{ $isNarrowPaper ? '9px' : '12px' }}; margin: 0;">{{ $printerSettings['footer_text'] ?? 'Terima kasih!' }}</p>
                <p style="font-size: {{ $isNarrowPaper ? '8px' : '10px' }}; color: #6b7280; margin: 4px 0 0;">Barang yang sudah dibeli tidak dapat ditukar/dikembalikan</p>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="fixed inset-x-0 bottom-0 z-50 no-print border-t border-slate-200 bg-white/95 backdrop-blur-md px-4 py-3 shadow-[0_-8px_30px_rgba(15,23,42,0.08)]">
    <div class="mx-auto flex w-full max-w-3xl flex-col gap-3 sm:flex-row">
        <button type="button" onclick="shareReceiptPdf()" class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-3 px-6 rounded-xl transition-all inline-flex items-center justify-center gap-2 text-center">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12v6a2 2 0 002 2h12a2 2 0 002-2v-6"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v10m0 0l-4-4m4 4l4-4"></path>
            </svg>
            Bagikan ke WA (PDF)
        </button>
        <a href="{{ $backUrl ?? route('pos.index') }}" class="flex-1 bg-slate-600 hover:bg-slate-700 text-white font-semibold py-3 px-6 rounded-xl transition-all inline-flex items-center justify-center gap-2 text-center">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            {{ $backLabel ?? 'Kembali ke POS' }}
        </a>
    </div>
</div>

<script>
    const receiptPdfUrl = @json(route('pos.receipt.pdf', $transaction));
    const receiptFileName = @json('nota_digital_' . preg_replace('/[\\\\\/]+/', '-', $transaction->invoice_number ?? 'struk') . '.pdf');

    async function shareReceiptPdf() {
        const fallbackMessage = 'Browser tidak mendukung berbagi file PDF. PDF akan dibuka untuk diunduh.';

        try {
            const response = await fetch(receiptPdfUrl, { credentials: 'same-origin' });
            if (!response.ok) {
                throw new Error('Gagal mengambil PDF');
            }

            const blob = await response.blob();
            const file = new File([blob], receiptFileName, { type: 'application/pdf' });
            const shareData = {
                title: 'Nota Digital',
                text: 'Nota digital PDF untuk transaksi ini.',
                files: [file],
            };

            if (navigator.share && navigator.canShare && navigator.canShare(shareData)) {
                await navigator.share(shareData);
                return;
            }
        } catch (error) {
            console.error(error);
        }

        if (typeof showToast === 'function') {
            showToast('info', fallbackMessage);
        } else {
            alert(fallbackMessage);
        }

        window.open(receiptPdfUrl, '_blank', 'noopener,noreferrer');
    }
</script>

<style>
    :root {
        color-scheme: light;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: #f3f4f6;
        color: #0f172a;
    }

    .page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 16px 104px;
    }

    .container {
        width: 100%;
        max-width: {{ $isNarrowPaper ? '58mm' : '80mm' }};
    }

    .receipt {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
        padding: {{ $isNarrowPaper ? '10px' : '14px' }};
        width: 100%;
        max-width: {{ $isNarrowPaper ? '58mm' : '80mm' }};
    }

    .receipt.receipt-58mm {
        max-width: 58mm;
        margin: 0 auto;
    }

    .no-print {
        margin-top: 0;
    }

    .muted {
        color: #475569;
    }

    .small {
        font-size: 12px;
    }

    .logo {
        width: {{ $isNarrowPaper ? '36px' : '64px' }};
        height: {{ $isNarrowPaper ? '36px' : '64px' }};
        object-fit: contain;
        margin: 0 auto {{ $isNarrowPaper ? '4px' : '8px' }};
        display: block;
    }

    @media print {
        @page {
            margin: 0;
            size: {{ $printerSettings['paper_size'] }} auto;
        }

        body {
            background: #fff;
        }

        body * {
            visibility: hidden;
        }
        #receipt, #receipt * {
            visibility: visible;
        }
        #receipt {
            position: absolute;
            left: 0;
            top: 0;
            width: {{ $printerSettings['paper_size'] === '58mm' ? '58mm' : '80mm' }};
            box-shadow: none;
            border-radius: 0;
            padding: {{ $printerSettings['paper_size'] === '58mm' ? '6px' : '14px' }};
            transform: {{ $printerSettings['paper_size'] === '58mm' ? 'scale(0.85)' : 'none' }};
            transform-origin: top left;
        }
        .no-print {
            display: none !important;
        }

        .page {
            padding: 0;
        }
    }
</style>
@endsection