@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($order))
                <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>
                @endif
            </div>
        </div>
    </div>
    
    <div class="section-title">DEBIT 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 Debit:</div>
            <div>{{ number_format($amount, 2) }}</div>
        </div>
        <div class="total-row">
            <div>Wallet Balance After Debit:</div>
            <div>{{ number_format($balance_after, 2) }}</div>
        </div>
    </div>
    
    @if(isset($order))
    <div style="margin-top: 20px;">
        <div class="section-title">ORDER PAYMENT</div>
        <p>This debit note confirms that credits have been deducted from your wallet as payment for Order #{{ $order['id'] }}.</p>
        <div class="total-row">
            <div>Order Total:</div>
            <div>{{ number_format($order['total'], 2) }}</div>
        </div>
    </div>
    @endif
    
    <div style="margin-top: 40px;">
        <div style="font-weight: bold; font-size: 14px; text-align: center; color: #dc3545; border: 1px solid #dc3545; padding: 5px; width: 250px; margin: 0 auto;">
            CREDITS DEDUCTED FROM WALLET
        </div>
        
        <p style="margin-top: 20px;">This debit note confirms that the above amount has been deducted from your wallet balance.
        @if($is_complementary)
        These were complementary credits with usage restrictions.
        @endif
        </p>
    </div>
@endsection