@extends('layouts.admin')
@section('title', 'Sale Receipt')
@section('page-title', 'Sale Receipt')
@section('page-subtitle', $sale->reference)
@section('content')
<div class="max-w-md mx-auto">
    <div class="card p-6" id="receiptCard">
        <!-- Receipt Header -->
        <div class="text-center mb-6 border-b pb-4">
            <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2">
                <i class="fas fa-check text-white text-xl"></i>
            </div>
            <h2 class="text-2xl font-bold text-gray-800">CoopFinance NG</h2>
            <p class="text-gray-500 text-sm">Mini Mart - Sales Receipt</p>
            <p class="text-xs text-gray-400 mt-1">www.coopfinance.ng</p>
        </div>
        <!-- Reference & Date -->
        <div class="flex justify-between text-sm mb-4">
            <div><span class="text-gray-500">Receipt No:</span><p class="font-mono font-bold text-pink-700">{{ $sale->reference }}</p></div>
            <div class="text-right"><span class="text-gray-500">Date:</span><p>{{ \Carbon\Carbon::parse($sale->sale_date)->format('d M Y H:i') }}</p></div>
        </div>
        <div class="text-sm mb-4">
            <span class="text-gray-500">Customer:</span> <strong>{{ $sale->customer_name }}</strong><br>
            <span class="text-gray-500">Cashier:</span> <strong>{{ $sale->cashier_name }}</strong>
        </div>
        <!-- Items -->
        <table class="w-full text-sm mb-4">
            <thead>
                <tr class="border-b">
                    <th class="py-2 text-left">Item</th>
                    <th class="py-2 text-center">Qty</th>
                    <th class="py-2 text-right">Price</th>
                    <th class="py-2 text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sale->items as $item)
                <tr class="border-b border-dashed">
                    <td class="py-2">{{ $item->product_name }}</td>
                    <td class="py-2 text-center">{{ $item->quantity }}</td>
                    <td class="py-2 text-right">₦{{ number_format($item->unit_price) }}</td>
                    <td class="py-2 text-right font-medium">₦{{ number_format($item->subtotal) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <!-- Totals -->
        <div class="border-t pt-3 space-y-1 text-sm">
            <div class="flex justify-between font-bold text-lg">
                <span>TOTAL</span>
                <span class="text-green-700">₦{{ number_format($sale->total_amount) }}</span>
            </div>
            <div class="flex justify-between text-gray-500">
                <span>Payment Method</span>
                <span class="capitalize">{{ str_replace('_', ' ', $sale->payment_method) }}</span>
            </div>
            @if($sale->payment_method === 'cash')
            <div class="flex justify-between text-gray-500">
                <span>Amount Tendered</span>
                <span>₦{{ number_format($sale->amount_tendered) }}</span>
            </div>
            <div class="flex justify-between">
                <span class="font-medium">Change</span>
                <span class="font-bold text-blue-700">₦{{ number_format($sale->change_given) }}</span>
            </div>
            @endif
        </div>
        <!-- Footer -->
        <div class="text-center mt-6 pt-4 border-t text-xs text-gray-400">
            <p>Thank you for your purchase!</p>
            <p>Items sold are NOT refundable.</p>
            <p class="mt-2">Powered by CoopFinance NG</p>
        </div>
    </div>
    <div class="flex justify-center space-x-4 mt-4 no-print">
        <button onclick="window.print()" class="bg-blue-700 text-white px-6 py-2 rounded-lg hover:bg-blue-800">
            <i class="fas fa-print mr-2"></i>Print Receipt
        </button>
        <a href="{{ route('admin.pos.sell') }}" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700">
            <i class="fas fa-plus mr-2"></i>New Sale
        </a>
        <a href="{{ route('admin.pos.sales') }}" class="border border-gray-300 px-6 py-2 rounded-lg hover:bg-gray-50">
            Sales History
        </a>
    </div>
</div>
@endsection