\<div>
    <!-- Export Button -->
    <div class="card mb-3 bg-white shadow" style="height: 10vh;">
        <div class="col-12 d-flex justify-content-end align-items-center pe-3" style="height: 100%;">
            <button class="btn btn-success p-2 pt-1 pb-1" wire:click="exportData" wire:loading.attr="disabled" wire:loading.class="disabled" wire:target="exportData">
                <span wire:loading.remove>Export <i class='fas fa-file-excel' style='font-size:16px;color:white'></i></span>
                <span wire:loading><i class="fa fa-spinner fa-spin"></i></span>
            </button>
        </div>
    </div>

    <!-- Table Container -->
    <div class="card mb-3 bg-white shadow" style="height: 48vh;">
        <div class="table-responsive p-0 pb-1" style="height: 47vh !important; overflow: auto;">
            <table class="table table-bordered" style="padding: 0; background: white; margin: 0;" id="example">
                <!-- Table Headings -->
 <thead>
        <tr style="background-color:#4a4e48;color:white;">
            <td style="border: 1px solid; width:15%;" colspan="11">عناية العملاء</td>
            <td style="border: 1px solid; width:10%;" colspan="2">الادارة المسؤولة</td>
            <td style="border: 1px solid; width:15%;" colspan="7">إدارة قسم الشكاوى</td>
        </tr>
    </thead>
    <thead>
        <tr style="background-color:#4a4e48; color:white;">
            <td>رقم المعاملة</td>
            <td>اسم العميل</td>
            <td>رقم حساب العميل</td>
            <td>رقم جوال العميل</td>
            <td>تاريخ انشاء المعاملة</td>
            <td>تصنيف المعاملة</td>
            <td>نوع المنتج</td>
            <td>فئة المنتج</td>
            <td>تفاصيل تذكرة العميل</td>
            <td>القناة المستلمة للمعاملة</td>
            <td>رقم بطاقة الأحوال/ الإقامة</td>
            <td>السبب الجذري للمعاملة</td>
            <td>تعليقات القسم</td>
            <td>الرد النهائي للعميل</td>
            <td>وقت وتاريخ تغيير الحالة</td>
            <td>تم استلام المعاملة من الموظف</td>
            <td>القسم</td>
            <td>التصعيد</td>
            <td>تاريخ الحل المتوقع للمعاملة</td>
            <td>حالة المعاملة</td>
        </tr>
    </thead>
                    <tbody style="background: white; font-size: 10px;">
                    @forelse($reportData as $ticket)
                            <tr>
                                <td>{{ $ticket->id }}</td>
                                <td>{{ $ticket->customer_name ?? '-' }}</td>
<td></td>                                
<td>{{ $ticket->channel ?? '-' }}</td>
                                <td>{{ $ticket->created_at }}</td>
                                <td>{{ $ticket->complaint_description ?? '-' }}</td>
                                <td style="@if($ticket->days_open == 9) background-color: yellow; @elseif($ticket->days_open >= 10) background-color: red; @endif">
                                    {{ $ticket->days_open }}
                                </td>
                                <td>{{ $ticket->status }}</td>
                            </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-muted text-center">There is no data found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <!-- Pagination Links -->
   
</div>