@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">TRANSACTION INFORMATION</div>
            <div class="info-group">
                <div class="info-label">Transaction ID:</div>
                <div class="info-value">#{{ $transaction_id }}</div>
                <div class="info-label">Transaction Date:</div>
                <div class="info-value">{{ $transaction_date }}</div>
                @if(isset($reference) && $reference)
                <div class="info-label">Reference:</div>
                <div class="info-value">{{ $reference }}</div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="section-title">CREDIT DETAILS</div>
    <table>
        <thead>
            <tr>
                <th>Description</th>
                <th class="text-right">Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    {{ $description }}
                    @if($is_complementary)
                    <br><span style="color: #6c757d; font-size: 11px;">(Complementary Credits)</span>
                    @endif
                </td>
                <td class="text-right">{{ number_format($amount, 2) }}</td>
            </tr>
        </tbody>
    </table>
    
    <div class="totals">
        <div class="total-row grand-total">
            <div>Total Credit:</div>
            <div>{{ number_format($amount, 2) }}</div>
        </div>
        <div class="total-row">
            <div>Wallet Balance After Credit:</div>
            <div>{{ number_format($balance_after, 2) }}</div>
        </div>
    </div>
    
    <div style="margin-top: 40px;">
        <div style="font-weight: bold; font-size: 14px; text-align: center; color: #28a745; border: 1px solid #28a745; padding: 5px; width: 250px; margin: 0 auto;">
            CREDITS ADDED TO WALLET
        </div>
        
        <p style="margin-top: 20px;">This credit note confirms that the above amount has been added to your wallet balance.
        @if($is_complementary)
        These are complementary credits that may have usage restrictions.
        @endif
        </p>
        
        <p>You can use your wallet credits to pay for services on our platform.</p>
    </div>
@endsection