{{-- Transactions Modal CSS --}}
<style>
    /* Modal Styles */
    .modal-xl {
        max-width: 95%;
    }

    .modal-body {
        max-height: 80vh;
        overflow-y: auto;
    }

    #transactionsModal table {
        font-size: 0.875rem;
        min-width: 100%;
        width: 100%;
    }

    #transactionsModal th,
    #transactionsModal td {
        text-align: right;
        direction: rtl;
        word-wrap: break-word;
        white-space: pre-wrap;
        vertical-align: top;
        padding: 8px;
    }

    .table-container {
        overflow-x: auto;
        width: 100%;
    }

    .badge-credit {
        background-color: #28a745 !important;
        color: white;
    }

    .badge-debit {
        background-color: #dc3545 !important;
        color: white;
    }

    .summary-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 25px;
    }

    .summary-item {
        text-align: center;
        padding: 10px;
    }

    .summary-number {
        font-size: 1.8rem;
        font-weight: bold;
        display: block;
    }

    .summary-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    /* RTL Modal Header */
    .modal-header {
        direction: rtl;
        text-align: right;
    }

    .modal-title {
        margin-right: auto;
        margin-left: 0;
    }
</style>

{{-- Transactions Modal HTML --}}
<div class="modal fade" id="transactionsModal" tabindex="-1" role="dialog" aria-labelledby="transactionsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="transactionsModalLabel">تفاصيل المعاملات المالية للطلب</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Order Summary Section -->
                <div class="summary-card">
                    <div class="row" id="orderSummary">
                        <!-- Order details will be populated here -->
                    </div>
                </div>

                <!-- Transactions Summary -->
                <div class="row mb-4" id="transactionsSummary">
                    <!-- Summary will be populated here -->
                </div>

                <!-- Transactions Table -->
                <div class="table-container">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped text-md-nowrap">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-right">ID</th>
                                    <th class="text-right">UUID</th>
                                    <th class="text-right">المستخدم</th>
                                    <th class="text-right">البائع</th>
                                    <th class="text-right">النوع</th>
                                    <th class="text-right">العملة</th>
                                    <th class="text-right">الرصيد قبل</th>
                                    <th class="text-right">الرصيد بعد</th>
                                    <th class="text-right">المبلغ</th>
                                    <th class="text-right">السعر النهائي</th>
                                    <th class="text-right">الإجمالي</th>
                                    <th class="text-right">تاريخ الإنشاء</th>
                                </tr>
                            </thead>
                            <tbody id="transactionsTableBody">
                                <!-- Transactions will be populated here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <x-lucide-x width="20" height="20" /> إغلاق
                </button>
            </div>
        </div>
    </div>
</div>