@extends('layouts.app')

@section('title', 'POS Invoice')
<style>
@media print {
    @page {
        size: 80mm auto; /* or 58mm for smaller printers */
        margin: 0;
    }

    html, body {
        width: 80mm;
        margin: 0;
        padding: 0;
        font-size: 11px;
        background: white;
    }

    body * {
        visibility: hidden;
    }

    #invoice, #invoice * {
        visibility: visible;
    }

    #invoice {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .print\:hidden {
        display: none !important;
    }
}
</style>

@section('content')
<div class="flex justify-center">
    <div class="bg-white p-4 rounded shadow max-w-sm w-full" id="invoice">
        <!-- Header -->
        <div class="text-center text-xs mb-2">
            <h2 class="font-bold text-sm uppercase">Your Store Name</h2>
            <p>123 Main Street, City</p>
            <p>Phone: 0123-456-789</p>
            <p>Invoice #: {{ $sale->id }}</p>
            <p>Date: {{ \Carbon\Carbon::parse($sale->sale_datetime)->format('d M Y, h:i A') }}</p>
        </div>

        <hr class="my-2">

        <!-- Items Table -->
        <table class="w-full text-xs">
            <thead>
                <tr>
                    <th class="text-left">Item</th>
                    <th class="text-right">Qty</th>
                    <th class="text-right">Price</th>
                    <th class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($sale->items as $item)
                    <tr>
                        <td>{{ $item->product->name }}</td>
                        <td class="text-right">{{ $item->quantity }}</td>
                        <td class="text-right">{{ number_format($item->unit_price, 2) }}</td>
                        <td class="text-right">{{ number_format($item->quantity * $item->unit_price, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <hr class="my-2">

        @php
            $subtotal = $sale->items->sum(fn($i) => $i->unit_price * $i->quantity);
            $tax = $subtotal * 0.05;
            $total = $subtotal + $tax;
        @endphp

        <!-- Totals -->
        <div class="text-xs text-right space-y-1">
            <p>Subtotal: {{ number_format($subtotal, 2) }} TK</p>
            <p>Tax (5%): {{ number_format($tax, 2) }} TK</p>
            <p class="font-bold text-sm">Total: {{ number_format($total, 2) }} TK</p>
            <p>Payment: <span class="capitalize">{{ $sale->payment_method }}</span></p>
        </div>

        <hr class="my-2">

        <!-- Barcode -->
        <div class="flex justify-center my-2">
            <img src="https://barcode.tec-it.com/barcode.ashx?data={{ $sale->id }}&code=Code128&dpi=150&width=300&height=60"
                alt="Barcode" class="w-full h-auto max-w-[150px]">
        </div>


        <!-- Footer Info -->
        <div class="text-center text-[10px] mt-2">
            <p>Thank you for shopping with us!</p>
            <p>Keep this receipt for returns within 7 days.</p>
            <p>All prices include VAT where applicable.</p>
        </div>

        <div class="text-center mt-3 print:hidden">
            <button onclick="printInvoice()" class="bg-blue-600 text-white px-4 py-1 rounded text-xs hover:bg-blue-700">
                Print Invoice
            </button>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
    function printInvoice() {
        window.print();
    }
</script>
@endpush