@props([
    'modalId' => 'transactionModal',
    'functionName' => 'viewTransaction',
    'title' => __('trans.student.wallet.receipt'),
    'idLabel' => __('trans.id'),
    'nameLabel' => __('trans.student.name'),
    'amountLabel' => __('trans.student.wallet.amount'),
    'typeLabel' => __('trans.student.wallet.type'),
    'creditLabel' => __('trans.student.wallet.credit'),
    'debitLabel' => __('trans.student.wallet.debit'),
    'descriptionLabel' => __('trans.student.wallet.description'),
    'adminLabel' => __('trans.student.wallet.admin'),
    'dateLabel' => __('trans.created_at'),
    'noDescriptionLabel' => __('trans.student.wallet.no_description'),
])

<!-- Transaction Modal -->
<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ $title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="{{ $modalId }}Content">
                <!-- Content will be injected by JS -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('trans.cancel') }}</button>
                <button type="button" class="btn btn-primary" onclick="printReceipt{{ $modalId }}()">{{ __('طباعة') }}</button>
            </div>
        </div>
    </div>
</div>

@push('css')
<style>
    #{{ $modalId }}Content {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        font-family: 'Courier New', Courier, monospace;
    }
    .receipt-print-container {
        width: 80mm;
        padding: 10px;
        direction: rtl;
        font-family: Arial, sans-serif;
    }
</style>
@endpush

@push('js')
<script>
function {{ $functionName }}(id, personName, amount, type, description, adminName, date, status = 'completed', reference = null) {
    let creditLabel = '{{ $creditLabel }}';
    let debitLabel = '{{ $debitLabel }}';
    let typeText = type == 'credit' ? creditLabel : debitLabel;
    let typeClass = type == 'credit' ? 'text-success' : 'text-danger';
    let noDesc = '{{ $noDescriptionLabel }}';
    let desc = (description && description !== 'null' && description !== '') ? description : noDesc;
    
    let statusLabels = {
        'pending': '{{ __('trans.pending') }}',
        'completed': '{{ __('trans.completed') }}',
        'cancelled': '{{ __('trans.cancelled') }}'
    };
    let statusColors = {
        'pending': '#ffc107',
        'completed': '#28a745',
        'cancelled': '#dc3545'
    };
    let statusLabel = statusLabels[status] || status;
    let statusColor = statusColors[status] || '#6c757d';
    let statusTextColor = status === 'pending' ? '#000' : '#fff';

    let html = `
        <div class="receipt-print-container">
            <div class="text-center mb-4">
                <h4 style="margin-bottom: 5px; text-align: center;">{{ setting('site_name') }}</h4>
                <p style="margin-top: 0; text-align: center;">{{ $title }}</p>
                <hr>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span><strong>{{ $idLabel }}:</strong></span>
                <span>#${id}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span><strong>{{ $nameLabel }}:</strong></span>
                <span>${personName}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span><strong>{{ $amountLabel }}:</strong></span>
                <span class="${typeClass}" style="font-weight: bold;">${amount}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span><strong>{{ $typeLabel }}:</strong></span>
                <span class="badge ${type == 'credit' ? 'bg-success' : 'bg-danger'}" style="padding: 4px 8px; border-radius: 4px; color: #fff; background-color: ${type == 'credit' ? '#28a745' : '#dc3545'}">${typeText}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span><strong>{{ __('trans.status') }}:</strong></span>
                <span class="badge" style="padding: 4px 8px; border-radius: 4px; color: ${statusTextColor}; background-color: ${statusColor}">${statusLabel}</span>
            </div>
            ${reference ? `
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span><strong>المصدر:</strong></span>
                <span class="text-muted small">${reference}</span>
            </div>
            ` : ''}
            <div style="margin-bottom: 8px;">
                <strong>{{ $descriptionLabel }}:</strong>
                <div style="padding: 8px; background-color: #f8f9fa; border-radius: 4px; margin-top: 4px;">${desc}</div>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span><strong>{{ $adminLabel }}:</strong></span>
                <span>${adminName}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span><strong>{{ $dateLabel }}:</strong></span>
                <span>${date}</span>
            </div>
            <div class="text-center mt-4" style="text-align: center;">
                <hr>
                <small style="display: block; margin-top: 5px;">{{ date('Y-m-d H:i:s') }}</small>
            </div>
        </div>
    `;
    $('#{{ $modalId }}Content').html(html);
    $('#{{ $modalId }}').modal('show');
}

function printReceipt{{ $modalId }}() {
    const content = document.getElementById('{{ $modalId }}Content').innerHTML;
    const printWindow = window.open('', '_blank', 'width=600,height=600');
    
    printWindow.document.write(`
        <html>
            <head>
                <title>{{ $title }}</title>
                <style>
                    body { direction: rtl; font-family: Arial, sans-serif; margin: 0; padding: 0; }
                    .receipt-print-container { width: 80mm; padding: 5mm; margin: 0 auto; }
                    .text-center { text-align: center; }
                    .mb-4 { margin-bottom: 1.5rem; }
                    .mt-4 { margin-top: 1.5rem; }
                    .text-success { color: #28a745; }
                    .text-danger { color: #dc3545; }
                    hr { border: 0; border-top: 1px solid #eee; margin: 10px 0; }
                    @page { margin: 0; }
                </style>
            </head>
            <body>
                ${content}
                <script>
                    window.onload = function() {
                        window.print();
                        window.close();
                    };
                <\/script>
            </body>
        </html>
    `);
    printWindow.document.close();
}
</script>
@endpush