@extends('admin.layouts.master')

@section('title', 'تفاصيل الطلب #' . $order->id)

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">تفاصيل الطلب #{{ $order->id }}</h3>
                    <div class="card-tools">
                        <!-- Action Buttons -->
                        <div class="btn-group mr-2" role="group">
                            @if(in_array($order->status, ['pending', 'processing']))
                                @if(can_admin('orders_accept'))
                                    <button type="button" class="btn btn-success btn-sm" id="acceptOrderBtn" data-order-id="{{ $order->id }}">
                                        <x-lucide-check-circle width="20" height="20" /> قبول الطلب
                                    </button>
                                @endif
                                @if(can_admin('orders_reject'))
                                    <button type="button" class="btn btn-danger btn-sm ml-1" id="rejectOrderBtn" data-order-id="{{ $order->id }}">
                                        <x-lucide-alert-triangle width="20" height="20" /> رفض الطلب
                                    </button>
                                @endif
                                @if(can_admin('orders_resend') && $order->status === 'processing')
                                    <button type="button" class="btn btn-warning btn-sm ml-1" id="resendOrderBtn" data-order-id="{{ $order->id }}">
                                        <x-lucide-redo-2 width="20" height="20" /> إعادة إرسال
                                    </button>
                                @endif
                            @elseif($order->status === 'completed')
                                @if(can_admin('orders_reject_after_accept'))
                                    <button type="button" class="btn btn-danger btn-sm" id="rejectAfterAcceptBtn" data-order-id="{{ $order->id }}">
                                        <x-lucide-x-circle width="20" height="20" /> رفض بعد القبول
                                    </button>
                                @endif
                            @elseif($order->status === 'cancelled')
                                @if(can_admin('orders_accept_after_reject'))
                                    <button type="button" class="btn btn-success btn-sm" id="acceptAfterRejectBtn" data-order-id="{{ $order->id }}">
                                        <x-lucide-check-circle width="20" height="20" /> قبول بعد الرفض
                                    </button>
                                @endif
                            @endif
                        </div>
                        <a href="{{ route('admin.orders.index') }}" class="btn btn-secondary btn-sm">
                            <x-lucide-arrow-left width="20" height="20" /> العودة للقائمة
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Order Overview -->
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <h4 class="text-primary">معلومات الطلب الأساسية</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td><strong>رقم الطلب:</strong></td>
                                            <td>{{ $order->order_number ?? $order->id }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>UUID:</strong></td>
                                            <td><small class="text-muted">{{ $order->uuid }}</small></td>
                                        </tr>
                                        <tr>
                                            <td><strong>المستخدم:</strong></td>
                                            <td>
                                                @if($order->user)
                                                    <a href="#" class="text-primary">{{ $order->user->name }}</a>
                                                    <br><small class="text-muted">{{ $order->user->email }}</small>
                                                @else
                                                    <span class="text-danger">غير متوفر</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>اللعبة:</strong></td>
                                            <td>{{ $order->game->name ?? 'غير متوفر' }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>المنتج:</strong></td>
                                            <td>{{ $order->product->name ?? 'غير متوفر' }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td><strong>السعر:</strong></td>
                                            <td>
                                                <span class="badge badge-success p-2">
                                                    {{ formatAmountWithCurrency($order->price, $order->user->currency ?? null) }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>الكمية:</strong></td>
                                            <td>{{ $order->count ?? 1 }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>الحالة:</strong></td>
                                            <td>
                                                <span class="badge {{ $order->getStatusBadgeClass() }} p-2">
                                                    @svg('lucide-' . $order->getStatusIconClass(), ['width' => 16, 'height' => 16])
                                                    {{ $order->statusvalue() }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>طريقة الدفع:</strong></td>
                                            <td>{{ $order->method ?? 'غير محدد' }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>تاريخ الإنشاء:</strong></td>
                                            <td>{{ $order->created_at->format('Y/m/d H:i:s') }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>آخر تحديث:</strong></td>
                                            <td>{{ $order->updated_at->format('Y/m/d H:i:s') }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h4 class="text-info">إحصائيات سريعة</h4>
                            <div class="row">
                                <div class="col-6">
                                    <div class="info-box bg-info">
                                        <span class="info-box-icon"><x-lucide-settings width="20" height="20" /></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">العمليات</span>
                                            <span class="info-box-number">{{ $statistics['operations_count'] }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="info-box bg-success">
                                        <span class="info-box-icon"><x-lucide-arrow-left-right width="20" height="20" /></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">المعاملات</span>
                                            <span class="info-box-number">{{ $statistics['transactions_count'] }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="info-box bg-warning">
                                        <span class="info-box-icon"><x-lucide-sticky-note width="20" height="20" /></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">الملاحظات</span>
                                            <span class="info-box-number">{{ $statistics['notes_count'] }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="info-box bg-secondary">
                                        <span class="info-box-icon"><x-lucide-code width="20" height="20" /></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">الأكواد</span>
                                            <span class="info-box-number">{{ $statistics['codes_count'] }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Player Data Section -->
                    @if($order->gamer_data && !empty($order->gamer_data))
                        <div class="row mb-4">
                            <div class="col-12">
                                <h4 class="text-primary">بيانات اللاعب</h4>
                                <div class="card card-outline card-primary">
                                    <div class="card-body">
                                        <div class="row">
                                            @php
                                                $gamerData = is_array($order->gamer_data) ? $order->gamer_data : json_decode($order->gamer_data, true);
                                            @endphp
                                            @if(is_array($gamerData))
                                                @foreach($gamerData as $key => $value)
                                                    <div class="col-md-4 mb-2">
                                                        <strong>{{ $key }}:</strong>
                                                        <span class="badge badge-light">{{ $value }}</span>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="col-12">
                                                    <span class="text-danger">بيانات اللاعب غير صحيحة</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Payment Information -->
                    @if($order->payment)
                        <div class="row mb-4">
                            <div class="col-12">
                                <h4 class="text-primary">معلومات الدفع</h4>
                                <div class="card card-outline card-success">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <strong>رقم الدفعة:</strong>
                                                <span class="badge badge-info">{{ $order->payment->payment_number ?? 'غير متوفر' }}</span>
                                            </div>
                                            <div class="col-md-3">
                                                <strong>المبلغ:</strong>
                                                <span class="badge badge-success">{{ $order->payment->amount ?? 'غير متوفر' }}</span>
                                            </div>
                                            <div class="col-md-3">
                                                <strong>نوع الدفع:</strong>
                                                <span class="badge badge-primary">{{ $order->payment->payment_type ?? 'غير متوفر' }}</span>
                                            </div>
                                            <div class="col-md-3">
                                                <strong>تاريخ الدفع:</strong>
                                                <span class="badge badge-secondary">{{ $order->payment->created_at ? $order->payment->created_at->format('Y/m/d H:i:s') : 'غير متوفر' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Tabbed Content -->
                    <div class="card card-primary card-tabs">
                        <div class="card-header p-0 pt-1">
                            <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="operations-tab" data-toggle="pill" href="#operations" role="tab" aria-controls="operations" aria-selected="true">
                                        <x-lucide-settings width="20" height="20" /> العمليات ({{ $statistics['operations_count'] }})
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="transactions-tab" data-toggle="pill" href="#transactions" role="tab" aria-controls="transactions" aria-selected="false">
                                        <x-lucide-arrow-left-right width="20" height="20" /> المعاملات ({{ $statistics['transactions_count'] }})
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="notes-tab" data-toggle="pill" href="#notes" role="tab" aria-controls="notes" aria-selected="false">
                                        <x-lucide-sticky-note width="20" height="20" /> الملاحظات ({{ $statistics['notes_count'] }})
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="codes-tab" data-toggle="pill" href="#codes" role="tab" aria-controls="codes" aria-selected="false">
                                        <x-lucide-code width="20" height="20" /> الأكواد ({{ $statistics['codes_count'] }})
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="custom-tabs-one-tabContent">
                                <!-- Operations Tab -->
                                <div class="tab-pane fade show active" id="operations" role="tabpanel" aria-labelledby="operations-tab">
                                    @if($order->operations->count() > 0)
                                        <!-- Operations Summary -->
                                        @if($statistics['operations_by_status']->count() > 0)
                                            <div class="row mb-3">
                                                <div class="col-12">
                                                    <h5>ملخص العمليات حسب الحالة</h5>
                                                    <div class="row">
                                                        @foreach($statistics['operations_by_status'] as $status => $count)
                                                            @php
                                                                $badgeClass = match($status) {
                                                                    'pending' => 'badge-warning',
                                                                    'completed' => 'badge-success',
                                                                    'failed' => 'badge-danger',
                                                                    'cancelled' => 'badge-secondary',
                                                                    'error' => 'badge-dark',
                                                                    default => 'badge-info'
                                                                };
                                                                $statusText = match($status) {
                                                                    'pending' => 'معلق',
                                                                    'completed' => 'مكتمل',
                                                                    'failed' => 'فاشل',
                                                                    'cancelled' => 'ملغي',
                                                                    'error' => 'خطأ',
                                                                    default => $status
                                                                };
                                                            @endphp
                                                            <div class="col-md-2">
                                                                <span class="badge {{ $badgeClass }} p-2">{{ $statusText }}: {{ $count }}</span>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>UUID</th>
                                                        <th>اللعبة</th>
                                                        <th>المستخدم الخارجي</th>
                                                        <th>المنتج</th>
                                                        <th>الحالة</th>
                                                        <th>كود الشحن</th>
                                                        <th>ملاحظات</th>
                                                        <th>تاريخ الإنشاء</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($order->operations as $operation)
                                                        <tr>
                                                            <td>{{ $operation->id }}</td>
                                                            <td><small class="text-muted">{{ $operation->uuid ?? 'غير متوفر' }}</small></td>
                                                            <td>{{ $operation->game ? $operation->game->name : 'غير متوفر' }}</td>
                                                            <td>{{ $operation->externalSite ? $operation->externalSite->name : 'غير متوفر' }}</td>
                                                            <td>{{ $operation->product ? $operation->product->name : 'غير متوفر' }}</td>
                                                            <td>
                                                                <span class="badge {{ $operation->getStatusBadgeClass() }}">
                                                                    {{ $operation->statusvalue() }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                @if($operation->chargeCode)
                                                                    <code class="bg-light p-1">{{ $operation->chargeCode }}</code>
                                                                @else
                                                                    <span class="text-muted">غير متوفر</span>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                @if($operation->notes)
                                                                    <small class="text-muted">{{ \Illuminate\Support\Str::limit($operation->notes, 50) }}</small>
                                                                @else
                                                                    <span class="text-muted">-</span>
                                                                @endif
                                                            </td>
                                                            <td><small>{{ $operation->created_at->format('Y/m/d H:i:s') }}</small></td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="alert alert-info text-center">
                                            <x-lucide-info width="20" height="20" /> لا توجد عمليات مرتبطة بهذا الطلب
                                        </div>
                                    @endif
                                </div>

                                <!-- Transactions Tab -->
                                <div class="tab-pane fade" id="transactions" role="tabpanel" aria-labelledby="transactions-tab">
                                    @if($order->transactions->count() > 0)
                                        <!-- Transactions Summary -->
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <div class="info-box bg-success">
                                                    <span class="info-box-icon"><x-lucide-plus width="20" height="20" /></span>
                                                    <div class="info-box-content">
                                                        <span class="info-box-text">إجمالي الإيداع</span>
                                                        <span class="info-box-number">{{ number_format($statistics['transactions_summary']['total_credit'], 2) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="info-box bg-warning">
                                                    <span class="info-box-icon"><x-lucide-minus width="20" height="20" /></span>
                                                    <div class="info-box-content">
                                                        <span class="info-box-text">إجمالي السحب</span>
                                                        <span class="info-box-number">{{ number_format(abs($statistics['transactions_summary']['total_debit']), 2) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="info-box bg-info">
                                                    <span class="info-box-icon"><x-lucide-scale width="20" height="20" /></span>
                                                    <div class="info-box-content">
                                                        <span class="info-box-text">الصافي</span>
                                                        <span class="info-box-number">{{ number_format($statistics['transactions_summary']['total_credit'] + $statistics['transactions_summary']['total_debit'], 2) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>UUID</th>
                                                        <th>المستخدم</th>
                                                        <th>البائع</th>
                                                        <th>النوع</th>
                                                        <th>العملة</th>
                                                        <th>الرصيد قبل</th>
                                                        <th>المبلغ</th>
                                                        <th>الرصيد بعد</th>
                                                        <th>تاريخ الإنشاء</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($order->transactions as $transaction)
                                                        <tr>
                                                            <td>{{ $transaction->id }}</td>
                                                            <td><small class="text-muted">{{ $transaction->uuid }}</small></td>
                                                            <td>{{ $transaction->user ? $transaction->user->name : 'غير متوفر' }}</td>
                                                            <td></td>
                                                            <td>
                                                                <span class="badge badge-{{ $transaction->isCredit() ? 'success' : 'warning' }}">
                                                                    {{ $transaction->type_in_arabic ?? $transaction->type }}
                                                                </span>
                                                            </td>
                                                            <td>{{ $transaction->currency ? $transaction->currency->name : 'غير محدد' }}</td>
                                                            <td>{{ rtrim(rtrim(number_format($transaction->balance_before, 10, '.', ''), '0'), '.') }}</td>
                                                            <td>
                                                                <span class="badge badge-{{ $transaction->amount > 0 ? 'success' : 'danger' }}">
                                                                    {{ rtrim(rtrim(number_format($transaction->amount, 10, '.', ''), '0'), '.') }}
                                                                </span>
                                                            </td>
                                                            <td>{{ rtrim(rtrim(number_format($transaction->balance_after, 10, '.', ''), '0'), '.') }}</td>
                                                            <td><small>{{ $transaction->created_at->format('Y/m/d H:i:s') }}</small></td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="alert alert-info text-center">
                                            <x-lucide-info width="20" height="20" /> لا توجد معاملات مالية مرتبطة بهذا الطلب
                                        </div>
                                    @endif
                                </div>

                                <!-- Notes Tab -->
                                <div class="tab-pane fade" id="notes" role="tabpanel" aria-labelledby="notes-tab">
                                    @if($order->notes->count() > 0)
                                        <div class="timeline">
                                            @foreach($order->notes as $note)
                                                <div class="time-label">
                                                    <span class="bg-{{ $note->type === 'system' ? 'info' : ($note->type === 'user' ? 'success' : 'warning') }}">
                                                        {{ $note->created_at->format('Y/m/d H:i:s') }}
                                                    </span>
                                                </div>
                                                <div>
                                                    @if($note->is_important)
                                                        <x-lucide-alert-triangle width="20" height="20" class="bg-warning" />
                                                    @elseif($note->type === 'system')
                                                        <x-lucide-settings width="20" height="20" class="bg-info" />
                                                    @else
                                                        <x-lucide-user width="20" height="20" class="bg-success" />
                                                    @endif
                                                    <div class="timeline-item">
                                                        <span class="time">
                                                            @if($note->is_important)
                                                                <x-lucide-star width="20" height="20" class="text-warning" />
                                                            @endif
                                                            <span class="badge badge-{{ $note->type === 'system' ? 'info' : ($note->type === 'user' ? 'success' : 'warning') }}">
                                                                {{ $note->type === 'system' ? 'نظام' : ($note->type === 'user' ? 'مستخدم' : 'مختلط') }}
                                                            </span>
                                                        </span>
                                                           <button type="button"
                                                                class="btn btn-sm btn-outline-primary ml-2 edit-note-btn"
                                                                data-note-id="{{ $note->id }}"
                                                                data-note-text="{{ e($note->note) }}"
                                                                data-note-type="{{ $note->type }}">
                                                                <x-lucide-pencil width="20" height="20" />
                                                            </button>
                                                        <h3 class="timeline-header">
                                                            {{ $note->title ?? 'ملاحظة' }}
                                                        </h3>
                                                        <div class="timeline-body">
                                                            {{ $note->note }}
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                           <!-- Edit Note Modal -->
                                        <div class="modal fade" id="editNoteModal" tabindex="-1" role="dialog"
                                            aria-labelledby="editNoteModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="editNoteModalLabel">تعديل الملاحظة
                                                        </h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <form id="editNoteForm" method="POST" action="">
                                                        @csrf
                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <label for="editNoteText">نص الملاحظة</label>
                                                                <textarea required class="form-control" name="note" id="editNoteText" rows="4"></textarea>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="editNoteType">نوع الملاحظة</label>
                                                                <select name="type" id="editNoteType"
                                                                    class="form-control" required>
                                                                    <option value="both">عام</option>
                                                                    <option value="system">نظام</option>
                                                                    <option value="user">مستخدم</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">إلغاء</button>
                                                            <button type="submit" class="btn btn-primary">حفظ</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="alert alert-info text-center">
                                            <x-lucide-info width="20" height="20" /> لا توجد ملاحظات مرتبطة بهذا الطلب
                                        </div>
                                    @endif
                                </div>

                                <!-- Codes Tab -->
                                <div class="tab-pane fade" id="codes" role="tabpanel" aria-labelledby="codes-tab">
                                    @if($order->orderCodes->count() > 0)
                                        <div class="row">
                                            @foreach($order->orderCodes as $code)
                                                <div class="col-md-6 mb-3">
                                                    <div class="card card-outline card-{{ $code->type === 'internal' ? 'success' : 'primary' }}">
                                                        <div class="card-header">
                                                            <h5 class="card-title">
                                                                @if($code->type === 'internal')
                                                                    <x-lucide-server width="20" height="20" />
                                                                @else
                                                                    <x-lucide-external-link width="20" height="20" />
                                                                @endif
                                                                {{ $code->type === 'internal' ? 'كود داخلي' : 'كود خارجي' }}
                                                            </h5>
                                                        </div>
                                                              <button type="button" class="btn btn-sm btn-outline-primary float-left edit-code-btn" data-code-id="{{ $code->id }}" data-code-text="{{ e($code->code) }}" data-code-type="{{ $code->type }}">
                                                                    <x-lucide-pencil width="20" height="20" />
                                                                </button>
                                                        <div class="card-body">
                                                            <div class="form-group">
                                                                <label>الكود:</label>
                                                                <div class="input-group">
                                                                    <input type="text" class="form-control" value="{{ $code->code }}" readonly>
                                                                    <div class="input-group-append">
                                                                        <button class="btn btn-outline-secondary copy-btn" type="button" data-copy="{{ $code->code }}">
                                                                            <x-lucide-copy width="20" height="20" />
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <small class="text-muted">
                                                                تم الإنشاء: {{ $code->created_at->format('Y/m/d H:i:s') }}
                                                            </small>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                          <!-- Edit Code Modal -->
                                        <div class="modal fade" id="editCodeModal" tabindex="-1" role="dialog" aria-labelledby="editCodeModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="editCodeModalLabel">تعديل الكود</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <form id="editCodeForm" method="POST" action="">
                                                        @csrf
                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <label for="editCodeText">الكود</label>
                                                                <input type="text" class="form-control" name="code" id="editCodeText" required />
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="editCodeType">نوع الكود</label>
                                                                <select name="type" id="editCodeType" class="form-control" required>
                                                                    <option value="internal">داخلي</option>
                                                                    <option value="external">خارجي</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                                                            <button type="submit" class="btn btn-primary">حفظ</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="alert alert-info text-center">
                                            <x-lucide-info width="20" height="20" /> لا توجد أكواد مرتبطة بهذا الطلب
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-info" onclick="showTransactionDetails({{ $order->id }})">
                                    <x-lucide-arrow-left-right width="20" height="20" /> تفاصيل المعاملات
                                </button>
                                <button type="button" class="btn btn-primary" onclick="showOperationDetails({{ $order->id }})">
                                    <x-lucide-settings width="20" height="20" /> تفاصيل العمليات
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script>
    // $(document).ready(function() {
    //     // Copy button functionality
    //     $('.copy-btn').click(function() {
    //         const textToCopy = $(this).data('copy');
    //         navigator.clipboard.writeText(textToCopy).then(function() {
    //             // Success feedback
    //             const btn = event.target.closest('.copy-btn');
    //             const originalHtml = btn.innerHTML;
    //             btn.innerHTML = `{!! svg("lucide-check", ["width" => 20, "height" => 20])->toHtml() !!}`;
    //             btn.classList.add('btn-success');
                
    //             setTimeout(function() {
    //                 btn.innerHTML = originalHtml;
    //                 btn.classList.remove('btn-success');
    //             }, 2000);
    //         });
    //     });
    // });
   $(document).ready(function() {
            // Copy button functionality
            $('.copy-btn').click(function() {
                const textToCopy = $(this).data('copy');
                navigator.clipboard.writeText(textToCopy).then(function() {
                    // Success feedback
                    const btn = event.target.closest('.copy-btn');
                    const originalHtml = btn.innerHTML;
                    btn.innerHTML = `{!! svg("lucide-check", ["width" => 20, "height" => 20])->toHtml() !!}`;
                    btn.classList.add('btn-success');

                    setTimeout(function() {
                        btn.innerHTML = originalHtml;
                        btn.classList.remove('btn-success');
                    }, 2000);
                });
            });

            // Accept Order Button
            $('#acceptOrderBtn').on('click', function() {
                const orderId = $(this).data('order-id');
                
                Swal.fire({
                    title: 'تأكيد قبول الطلب',
                    text: 'هل أنت متأكد من قبول هذا الطلب؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، قبول',
                    cancelButtonText: 'إلغاء',
                    html: `
                        <div class="mb-3">
                            <label for="swal-code" class="form-label">الكود (اختياري)</label>
                            <input type="text" id="swal-code" class="form-control" placeholder="أدخل الكود...">
                        </div>
                        <div class="mb-3">
                            <label for="swal-note" class="form-label">ملاحظة (اختيارية)</label>
                            <textarea id="swal-note" class="form-control" placeholder="ملاحظة..." rows="3"></textarea>
                        </div>
                    `,
                    focusConfirm: false,
                    preConfirm: () => {
                        return {
                            code: document.getElementById('swal-code').value,
                            note: document.getElementById('swal-note').value
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.orders.accepted') }}",
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: orderId,
                                code: result.value.code || null,
                                note: result.value.note || ''
                            },
                            success: function(response) {
                                if (response.err === false) {
                                    Swal.fire('تم!', response.message, 'success').then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                let message = 'حدث خطأ أثناء معالجة الطلب';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire('خطأ!', message, 'error');
                            }
                        });
                    }
                });
            });

            // Reject Order Button
            $('#rejectOrderBtn').on('click', function() {
                const orderId = $(this).data('order-id');
                
                Swal.fire({
                    title: 'تأكيد رفض الطلب',
                    text: 'هل أنت متأكد من رفض هذا الطلب؟ سيتم إرجاع المبلغ للمستخدم.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، رفض',
                    cancelButtonText: 'إلغاء',
                    html: `
                        <div class="mb-3">
                            <label for="swal-reject-note" class="form-label">سبب الرفض (اختياري)</label>
                            <textarea id="swal-reject-note" class="form-control" placeholder="سبب الرفض..." rows="3"></textarea>
                        </div>
                    `,
                    focusConfirm: false,
                    preConfirm: () => {
                        return {
                            note: document.getElementById('swal-reject-note').value
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.orders.reject') }}",
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: orderId,
                                note: result.value.note || ''
                            },
                            success: function(response) {
                                if (response.err === false) {
                                    Swal.fire('تم!', response.message, 'success').then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                let message = 'حدث خطأ أثناء معالجة الطلب';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire('خطأ!', message, 'error');
                            }
                        });
                    }
                });
            });

            // Accept After Reject Button
            $('#acceptAfterRejectBtn').on('click', function() {
                const orderId = $(this).data('order-id');
                
                Swal.fire({
                    title: 'تأكيد قبول الطلب بعد الرفض',
                    text: 'هل أنت متأكد من قبول هذا الطلب؟ سيتم خصم المبلغ من المستخدم مرة أخرى.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، قبول',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.orders.acceptedafter') }}",
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: orderId
                            },
                            success: function(response) {
                                if (response.err === false) {
                                    Swal.fire('تم!', response.message, 'success').then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                let message = 'حدث خطأ أثناء معالجة الطلب';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire('خطأ!', message, 'error');
                            }
                        });
                    }
                });
            });

            // Reject After Accept Button
            $('#rejectAfterAcceptBtn').on('click', function() {
                const orderId = $(this).data('order-id');
                
                Swal.fire({
                    title: 'تأكيد رفض الطلب بعد القبول',
                    text: 'هل أنت متأكد من رفض هذا الطلب؟ سيتم إرجاع المبلغ للمستخدم.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، رفض',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.orders.rejectedafter') }}",
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: orderId
                            },
                            success: function(response) {
                                if (response.err === false) {
                                    Swal.fire('تم!', response.message, 'success').then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                let message = 'حدث خطأ أثناء معالجة الطلب';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire('خطأ!', message, 'error');
                            }
                        });
                    }
                });
            });

            // Resend Order Button
            $('#resendOrderBtn').on('click', function() {
                const orderId = $(this).data('order-id');
                
                Swal.fire({
                    title: 'تأكيد إعادة إرسال الطلب',
                    text: 'هل أنت متأكد من إعادة إرسال هذا الطلب؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ffc107',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، إعادة إرسال',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.orders.resend') }}",
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: orderId
                            },
                            success: function(response) {
                                if (response.err === false) {
                                    Swal.fire('تم!', response.message, 'success').then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                let message = 'حدث خطأ أثناء معالجة الطلب';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire('خطأ!', message, 'error');
                            }
                        });
                    }
                });
            });

            // Edit note button click
            $('.edit-note-btn').on('click', function() {
                const noteId = $(this).data('note-id');
                const noteText = $(this).data('note-text');
                const noteType = $(this).data('note-type');
                $('#editNoteText').val(noteText);
                $('#editNoteType').val(noteType);
                // Set form action
                const action = "{{ route('admin.orders.notes.update', ['note' => 'NOTE_ID']) }}".replace(
                    'NOTE_ID', noteId);
                $('#editNoteForm').attr('action', action).data('note-id', noteId);
                $('#editNoteModal').modal('show');
            });

            // Submit edit note (AJAX)
            $('#editNoteForm').on('submit', function(e) {
                e.preventDefault();
                const form = $(this);
                const action = form.attr('action');
                const formData = form.serialize();
                $.post(action, formData)
                    .done(function(resp) {
                        if (!resp.err) {
                            // Option 1: reload
                            location.reload();
                        } else {
                            alert(resp.message || 'فشل التحديث');
                        }
                    })
                    .fail(function(xhr) {
                        alert(xhr.responseJSON?.message || 'حدث خطأ أثناء التحديث');
                    });
            });

            // Edit code button
            $('.edit-code-btn').on('click', function() {
                const codeId = $(this).data('code-id');
                const codeText = $(this).data('code-text');
                const codeType = $(this).data('code-type');
                $('#editCodeText').val(codeText);
                $('#editCodeType').val(codeType);
                const action = "{{ route('admin.orderCodes.update', ['orderCode' => 'CODE_ID']) }}".replace('CODE_ID', codeId);
                $('#editCodeForm').attr('action', action).data('code-id', codeId);
                $('#editCodeModal').modal('show');
            });

            // Submit edit code (AJAX)
            $('#editCodeForm').on('submit', function(e) {
                e.preventDefault();
                const form = $(this);
                const action = form.attr('action');
                const formData = form.serialize();
                $.post(action, formData)
                    .done(function(resp) {
                        if (!resp.err) {
                            location.reload();
                        } else {
                            alert(resp.message || 'فشل التحديث');
                        }
                    })
                    .fail(function(xhr) {
                        alert(xhr.responseJSON?.message || 'حدث خطأ أثناء التحديث');
                    });
            });
        });
    // Order status change functions (placeholder)
    function changeOrderStatus(status, orderId) {
        // Implementation would go here
        console.log('Changing order', orderId, 'to status', status);
    }

    function showTransactionDetails(orderId) {
        // Implementation would go here
        console.log('Showing transaction details for order', orderId);
    }

    function showOperationDetails(orderId) {
        // Implementation would go here
        console.log('Showing operation details for order', orderId);
    }

    function resendOrder(orderId) {
        // Implementation would go here
        console.log('Resending order', orderId);
    }
</script>
@endsection

@section('styles')
<style>
    .info-box {
        min-height: 80px;
    }
    
    .info-box-content {
        padding: 5px 10px;
    }
    
    .info-box-number {
        font-size: 1.2rem;
    }
    
    .timeline {
        margin: 0;
    }
    
    .copy-btn:hover {
        background-color: #007bff;
        color: white;
    }
    
    .tab-content {
        padding-top: 20px;
    }
    
    .card-outline {
        border-width: 2px;
    }
    
    .badge {
        font-size: 0.85em;
    }
    
    .table th {
        background-color: #343a40;
        color: white;
        font-weight: 600;
    }
    
    .table-responsive {
        border-radius: 5px;
    }
</style>
@endsection