@extends('documents.layout')

@section('content')
    <div class="row">
        <div class="col">
            <div class="section-title">CUSTOMER INFORMATION</div>
            <div class="info-group">
                <div class="info-label">Name:</div>
                <div class="info-value">{{ $customer['name'] }}</div>
                <div class="info-label">Email:</div>
                <div class="info-value">{{ $customer['email'] }}</div>
            </div>
        </div>
        <div class="col">
            <div class="section-title">ORDER INFORMATION</div>
            <div class="info-group">
                <div class="info-label">Order ID:</div>
                <div class="info-value">#{{ $order['id'] }}</div>
                <div class="info-label">Order Date:</div>
                <div class="info-value">{{ $order['date'] }}</div>
                <div class="info-label">Payment Date:</div>
                <div class="info-value">{{ $order['paid_date'] }}</div>
            </div>
        </div>
    </div>
    
    <div class="section-title">ORDER ITEMS</div>
    <table>
        <thead>
            <tr>
                <th>Description</th>
                <th class="text-right">Price</th>
                <th class="text-right">Discount</th>
                <th class="text-right">Total</th>
            </tr>
        </thead>
        <tbody>
            @foreach($items as $item)
            <tr>
                <td>{{ $item['description'] }}</td>
                <td class="text-right">{{ number_format($item['price'], 2) }}</td>
                <td class="text-right">{{ number_format($item['discount'], 2) }}</td>
                <td class="text-right">{{ number_format($item['total'], 2) }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    
    <div class="totals">
        <div class="total-row">
            <div>Subtotal:</div>
            <div>{{ number_format($order['subtotal'], 2) }}</div>
        </div>
        <div class="total-row">
            <div>Discount:</div>
            <div>{{ number_format($order['discount'], 2) }}</div>
        </div>
        <div class="total-row grand-total">
            <div>Total:</div>
            <div>{{ number_format($order['total'], 2) }}</div>
        </div>
    </div>
    
    <div class="section-title" style="margin-top: 30px;">PAYMENT DETAILS</div>
    <table>
        <thead>
            <tr>
                <th>Payment Method</th>
                <th>Reference</th>
                <th class="text-right">Amount</th>
            </tr>
        </thead>
        <tbody>
            @foreach($payments as $payment)
            <tr>
                <td>{{ $payment['method'] }}</td>
                <td>{{ $payment['reference'] ?? '-' }}</td>
                <td class="text-right">{{ number_format($payment['amount'], 2) }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    
    <div style="margin-top: 40px;">
        <p style="font-weight: bold; font-size: 14px; text-align: center; color: #28a745; border: 1px solid #28a745; padding: 5px; width: 200px; margin: 0 auto;">
            PAID IN FULL
        </p>
        <p style="margin-top: 20px;">Thank you for your business with Zuppi Pet Services. This receipt confirms your payment for the services listed above.</p>
    </div>
@endsection