{{-- Operations Table Component --}}
<div class="operations-table-container mb-4" style="display: none;" id="operations-table-{{ $orderId }}">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <x-lucide-settings width="20" height="20" /> تفاصيل العمليات للطلب رقم {{ $orderId }}
                <button type="button" class="btn btn-sm btn-secondary float-left"
                    onclick="hideOperationsTable({{ $orderId }})">
                    <x-lucide-x width="20" height="20" /> إغلاق
                </button>
            </h5>
        </div>
        <div class="card-body">
            @if (isset($error))
                <div class="alert alert-danger">
                    <x-lucide-alert-triangle width="20" height="20" /> {{ $error }}
                </div>
            @elseif(isset($message))
                <div class="alert alert-info">
                    <x-lucide-info width="20" height="20" /> {{ $message }}
                </div>
            @else
                <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>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($operations as $operation)
                                <tr>
                                    <td data-label="ID">{{ $operation->id }}</td>
                                    <td data-label="UUID">
                                        @if ($operation->uuid)
                                            <small class="uuid-text">{{ $operation->uuid }}</small>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td data-label="اللعبة">
                                        {{ $operation->game ? $operation->game->name : 'غير متوفر' }}</td>
                                    <td data-label="الموقع الخارجي">
                                        {{ $operation->externalSite ? $operation->externalSite->name : 'غير متوفر' }}
                                    </td>
                                    <td data-label="المنتج">
                                        {{ $operation->product ? $operation->product->name : 'غير متوفر' }}</td>
                                    <td data-label="الحالة">
                                        <span class="badge badge-{{ $operation->getStatusBadgeClass() }}">
                                            {{ $operation->statusvalue() }}
                                        </span>
                                    </td>
                                    <td data-label="الكود">
                                        @if ($operation->chargeCode)
                                            <div class="charge-code-container">
                                                <small>{{ $operation->chargeCode }}</small>
                                                @if ($operation->externalSite)
                                                    <br><span
                                                        class="text-muted">{{ $operation->externalSite->name }}</span>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td data-label="ملاحظات" class="notes-column"
                                        style="max-width: 200px; min-width: 150px; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;">
                                        @if ($operation->notes)
                                            <div class="notes-content"
                                                style="word-break: break-word; overflow-wrap: break-word; white-space: normal;">
                                                @php
                                                    try {
                                                        $notesData = is_array($operation->notes)
                                                            ? $operation->notes
                                                            : json_decode($operation->notes, true);
                                                        if (is_array($notesData)) {
                                                            if (isset($notesData['msg'])) {
                                                                echo $notesData['msg'];
                                                            } elseif (isset($notesData['0'])) {
                                                                echo $notesData['0'];
                                                            } else {
                                                                echo json_encode(
                                                                    $notesData,
                                                                    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE,
                                                                );
                                                            }
                                                        } else {
                                                            echo $operation->notes;
                                                        }
                                                    } catch (Exception $e) {
                                                        echo $operation->notes;
                                                    }
                                                @endphp
                                            </div>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td data-label="تاريخ الإنشاء">
                                        <small>{{ $operation->created_at->format('Y/m/d H:i:s') }}</small>
                                    </td>
                                    <td data-label="تاريخ التحديث">
                                        <small>{{ $operation->updated_at->format('Y/m/d H:i:s') }}</small>
                                    </td>
                                    <td data-label="الإجراءات" class="actions">
                                        <button type="button" data-id="{{ $operation->id }}"
                                            class="resend-operation btn btn-warning btn-xs" title="إعادة الإرسال">
                                            <x-lucide-redo-2 width="20" height="20" />
                                        </button>
                                        <button type="button" data-id="{{ $operation->id }}"
                                            class="delete-operation btn btn-danger btn-xs" title="حذف العملية">
                                            <x-lucide-trash-2 width="20" height="20" />
                                        </button>
                                        @if ($operation->chargeCode && $operation->product && $operation->product->storage_id)
                                            <button type="button" data-id="{{ $operation->id }}"
                                                class="refund-codes-operation btn btn-success btn-xs"
                                                title="استرداد رمز الشحن">
                                                <x-lucide-undo-2 width="20" height="20" />
                                            </button>
                                        @endif
                                        @if ($operation->product && $operation->product->storage_id)
                                            <button type="button" data-id="{{ $operation->id }}"
                                                data-product-id="{{ $operation->product->id }}"
                                                class="change-code-operation btn btn-primary btn-xs" title="تبديل كود">
                                                <x-lucide-arrow-left-right width="20" height="20" />
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if ($operations->count() > 0)
                    <div class="mt-3 text-center">
                        <small class="text-info">
                            <strong>المجموع:</strong> {{ $operations->count() }} عملية
                        </small>
                    </div>
                @endif
            @endif
        </div>
    </div>
</div>

<style>
    .operations-table-container {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        animation: slideDown 0.3s ease-in-out;
        overflow-x: hidden;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .operations-table-container .table-responsive {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .operations-table-container .table {
        font-size: 0.875rem;
        width: 100%;
        margin-bottom: 0;
    }

    .operations-table-container th,
    .operations-table-container td {
        text-align: right;
        direction: rtl;
        word-wrap: break-word;
        vertical-align: top;
        padding: 8px;
        white-space: nowrap;
    }

    .operations-table-container th {
        min-width: 80px;
    }

    .operations-table-container .notes-column {
        direction: auto;
        unicode-bidi: plaintext;
        text-align: start;
        max-width: 200px !important;
        min-width: 150px;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .operations-table-container .notes-content {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }

    .operations-table-container .charge-code-container {
        font-size: 0.85em;
    }

    .operations-table-container .btn-xs {
        padding: 2px 6px;
        font-size: 10px;
    }

    .operations-table-container .card-header {
        direction: rtl;
        background-color: #f8f9fa;
    }

    .operations-table-container .uuid-text {
        font-size: 0.75rem;
        word-break: break-all;
    }

    /* Mobile responsive styles - vertical layout */
    @media (max-width: 768px) {
        .operations-table-container .table-responsive {
            border: 0;
        }

        .operations-table-container .table,
        .operations-table-container .table thead,
        .operations-table-container .table tbody,
        .operations-table-container .table th,
        .operations-table-container .table td,
        .operations-table-container .table tr {
            display: block;
        }

        .operations-table-container .table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .operations-table-container .table tr {
            border: 1px solid #ccc;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            background-color: #fff;
        }

        .operations-table-container .table td {
            border: none;
            padding: 10px 5px;
            text-align: right !important;
            position: relative;
            padding-right: 40% !important;
            min-height: 30px;
        }

        .operations-table-container .uuid-text {
            font-size: 0.65rem !important;
            word-break: break-all;
            line-height: 1.2;
        }

        .operations-table-container .table td:before {
            content: attr(data-label);
            position: absolute;
            right: 6px;
            width: 35%;
            padding-right: 10px;
            white-space: nowrap;
            font-weight: bold;
            color: #333;
        }
    }
</style>