@extends('user.layouts.app')
@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/in.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/one-order.css') }}">
@endsection
@section('content')
    <div class="content-wrapper no-style">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-8">
                <div class="congrats-card">
                    <div class="card-header">
                        <x-lucide-check-circle class="success-icon" width="24" height="24" />
                        <span>تهانينا! تمت العملية بنجاح</span>
                    </div>

                    <div class="card-body">
                        <div class="detail-item">
                            <span class="detail-label"> الوقت والتاريخ :</span>
                            <span class="detail-value created_at">{{ $order->created_at }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">رقم الفيش:</span>
                            <span class="detail-value order_number">#{{ $order->order_number }}</span>
                        </div>

                        <div class="detail-item">
                            <span class="detail-label">اسم اللعبة:</span>
                            <span class="detail-value">{{ $order->gameName }}</span>
                        </div>

                        <div class="detail-item">
                            <span class="detail-label">الكمية:</span>
                            <span class="detail-value">{{ $order->count ?? '-' }}</span>
                        </div>

                        <div class="detail-item">
                            <span class="detail-label">اسم المنتج:</span>
                            <span class="detail-value">{{ $order->productName ?? '-' }}</span>
                        </div>

                        @if (is_array(value: $order->gamer_data) || is_object($order->gamer_data))
                            @foreach ($order->gamer_data as $key => $value)
                                <div class="detail-item">
                                    <span class="detail-label"> {{ $key ?? ' ' }} </span>
                                    <span class="detail-value">{{ $value ?? ' ' }}</span>
                                </div>
                            @endforeach
                        @elseif(is_string($order->gamer_data) && !empty($order->gamer_data))
                            @php
                                $gamerDataArray = json_decode($order->gamer_data, true);
                            @endphp
                            @if (is_array($gamerDataArray))
                                @foreach ($gamerDataArray as $key => $value)
                                    <div class="detail-item">
                                        <span class="detail-label"> {{ $key ?? ' ' }} </span>
                                        <span class="detail-value">{{ $value ?? ' ' }}</span>
                                    </div>
                                @endforeach
                            @else
                                <div class="detail-item">
                                    <span class="detail-label">بيانات اللاعب:</span>
                                    <span class="detail-value">{{ $order->gamer_data }}</span>
                                </div>
                            @endif
                        @endif

                        <div class="detail-item">
                            <span class="detail-label">الرصيد قبل:</span>
                            <span class="detail-value">{{ $order->balance_before }}</span>
                        </div>

                        <div class="detail-item">
                            <span class="detail-label">السعر:</span>
                            <span class="detail-value">{{ $order->price }}
                            </span>
                        </div>

                        <div class="detail-item">
                            <span class="detail-label">الرصيد بعد:</span>
                            <span class="detail-value">{{ $order->balance_after }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">الحالة:</span>
                            <span class="detail-value">
                                <span class="badge {{ $order->statusBadgeClass }}">
                                    @svg('lucide-' . $order->statusIconClass, ['width' => '16', 'height' => '16']) {{ $order->status }}</span>
                            </span>
                        </div>

                        @if (isset($order->notes) && count($order->notes) > 0)
                            <div class="detail-item">
                                <div class="order-notes__container">
                                    <h5 class="order-notes__header">
                                        <x-lucide-message-square class="me-2" width="20" height="20" />
                                        ملاحظات الطلب
                                    </h5>
                                    <ul class="order-notes__list">
                                        @foreach ($order->notes as $note)
                                            <li class="order-notes__item">
                                                <span class="order-notes__text">
                                                    {{ $note }}
                                                </span>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                        @if (isset($order->codes) && count($order->codes) > 0)
                            <div class="detail-item">
                                <div class="recharge-codes__container">
                                    <h5 class="recharge-codes__header">
                                        <x-lucide-key class="me-2" width="20" height="20" />
                                        أكواد الشحن
                                    </h5>
                                    <ul class="recharge-codes__list">
                                        @foreach ($order->codes as $code)
                                            <li class="copyable-container recharge_codes__item" data-tooltip-dir="rtl"
                                                data-copy-value="{{ $code }}" data-copy-message="تم نسخ الكود!"
                                                tabindex="0" role="button" aria-label="انقر لنسخ كود الشحن">
                                                <span class="recharge_codes__text">
                                                    {{ $code }}
                                                </span>
                                                <x-lucide-clipboard class="recharge_codes__icon" width="16" height="16" />
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                        @if (!empty($order->isAwaitingResponse) && $order->responseRequest)
                            <div class="detail-item">
                                <div class="order-response-request__container" style="background: #f8f0ff; border: 2px solid #6f42c1; border-radius: 12px; padding: 20px; margin-bottom: 15px;">
                                    <h5 style="color: #6f42c1; margin-bottom: 15px;">
                                        <x-lucide-message-circle class="me-2" width="20" height="20" />
                                        مطلوب ردك على هذا الطلب
                                    </h5>

                                    <div style="background: #fff; border-radius: 8px; padding: 15px; margin-bottom: 15px; border-right: 4px solid #6f42c1;">
                                        <p style="font-weight: 600; color: #333; margin-bottom: 5px;">ملاحظة الإدارة:</p>
                                        <p style="color: #555; margin-bottom: 5px;">{{ $order->responseRequest->admin_note }}</p>
                                        <small style="color: #999;">{{ $order->responseRequest->created_at }}</small>
                                    </div>

                                    <form id="replyForm">
                                        @csrf
                                        <div style="margin-bottom: 12px;">
                                            <label for="client_reply" style="font-weight: 600; color: #333; display: block; margin-bottom: 6px;">ردك <span style="color: red;">*</span></label>
                                            <textarea name="reply" id="client_reply" rows="4"
                                                style="width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px; resize: vertical;"
                                                placeholder="اكتب ردك هنا..." required></textarea>
                                        </div>
                                        <div id="replyError" style="color: red; margin-bottom: 10px; display: none;"></div>
                                        <div id="replySuccess" style="color: #28a745; margin-bottom: 10px; display: none;"></div>
                                        <button type="submit" id="replyBtn"
                                            style="background: #6f42c1; color: #fff; border: none; border-radius: 8px; padding: 10px 24px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;">
                                            <x-lucide-send width="16" height="16" />
                                            <span>إرسال الرد</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endif

                        <div class="detail-item">
                            <div class="order-appeal__container">
                                <h5 class="order-appeal__header">
                                    <x-lucide-shield-alert class="me-2" width="20" height="20" />
                                    طلب الطعن على الطلب
                                </h5>

                                @if ($order->appeal)
                                    @php
                                        $statusClassMap = [
                                            \App\Models\OrderAppeal::STATUS_PENDING => 'pending',
                                            \App\Models\OrderAppeal::STATUS_ACCEPTED => 'approved',
                                            \App\Models\OrderAppeal::STATUS_REJECTED => 'rejected',
                                        ];
                                        $appealStatusKey = $statusClassMap[$order->appeal->status] ?? 'pending';
                                    @endphp
                                    <div class="appeal-status-card {{ $appealStatusKey }}">
                                        <div class="appeal-meta">
                                            <span class="appeal-status-chip appeal-status-chip--{{ $appealStatusKey }}">
                                                {{ $order->appeal->status_label }}
                                            </span>
                                            <span class="appeal-meta__date">
                                                تاريخ الإرسال: {{ $order->appeal->created_at }}
                                            </span>
                                        </div>

                                        <div class="appeal-section">
                                            <h6>وصف المشكلة</h6>
                                            <p>{{ $order->appeal->user_note }}</p>
                                        </div>

                                        @if ($order->appeal->image_path || $order->appeal->video_url)
                                            <div class="appeal-section">
                                                <h6>المرفقات</h6>
                                                <div class="appeal-attachments">
                                                    @if ($order->appeal->image_path)
                                                        <a href="{{ asset('images/orderAppeals/' . $order->appeal->image_path) }}"
                                                            target="_blank" class="appeal-attachment-link">
                                                            <x-lucide-image width="16" height="16" /> عرض الصورة
                                                        </a>
                                                    @endif
                                                    @if ($order->appeal->video_url)
                                                        <a href="{{ $order->appeal->video_url }}" target="_blank"
                                                            rel="noopener" class="appeal-attachment-link">
                                                            <x-lucide-play width="16" height="16" /> مشاهدة الفيديو
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif

                                        @if ($appealStatusKey === 'pending')
                                            <div class="appeal-message appeal-message--pending">
                                                <x-lucide-hourglass width="16" height="16" />
                                                <span>تم استلام طلب الطعن وجاري مراجعته من قبل فريق الدعم.</span>
                                            </div>
                                        @else
                                            <div class="appeal-section">
                                                <h6>رد الإدارة</h6>
                                                <p>{{ $order->appeal->admin_note ?? 'لا يوجد رد مسجل' }}</p>
                                                <span class="appeal-meta__date">تاريخ المراجعة:
                                                    {{ $order->appeal->reviewed_at ?? '—' }}</span>
                                            </div>
                                        @endif
                                    </div>
                                @elseif($order->canAppeal)
                                    <form method="POST" action="{{ route('order.appeals.store', $order->id) }}"
                                        class="appeal-form" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="order_id" value="{{ $order->id }}">
                                        <div class="input-group">
                                            <label for="user_note">وصف المشكلة <span
                                                    class="appeal-required">*</span></label>
                                            <div class="input-wrapper">
                                                <textarea name="user_note" id="user_note" rows="4" placeholder="اكتب تفاصيل المشكلة التي تواجهها" required>{{ old('user_note') }}</textarea>
                                            </div>
                                            @error('user_note')
                                                <span class="appeal-error">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="appeal-form__grid">
                                            <div class="input-group file-upload">
                                                <span class="file-field-label">إرفاق صورة (اختياري)</span>
                                                <label class="input-wrapper" for="appeal_image">
                                                    <input type="file" name="image" id="appeal_image"
                                                        class="file-input" accept="image/*">
                                                    <span class="file-prefix">
                                                        <x-lucide-image width="16" height="16" />
                                                        <span>اختر صورة</span>
                                                    </span>
                                                    <span class="file-name" id="appeal_image_name">لم يتم اختيار
                                                        ملف</span>
                                                </label>
                                                <div class="image-preview" id="appeal_image_preview">
                                                    <img id="appeal_image_img" src=""
                                                        alt="معاينة الصورة المرفقة">
                                                    <div class="image-preview-overlay">
                                                        <div class="preview-text">معاينة الصورة</div>
                                                    </div>
                                                    <button type="button" class="remove-image"
                                                        onclick="removeImage('appeal_image')">×</button>
                                                </div>
                                                @error('image')
                                                    <span class="appeal-error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            {{-- TODO: remove display none --}}
                                            <div class="input-group" style="display: none !important;">
                                                <label for="video_url">رابط فيديو توضيحي (اختياري)</label>
                                                <div class="input-wrapper">
                                                    <input type="url" name="video_url" id="video_url"
                                                        placeholder="https://example.com/video"
                                                        value="{{ old('video_url') }}">
                                                </div>
                                                @error('video_url')
                                                    <span class="appeal-error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="appeal-form__footer">
                                            <small class="appeal-form__hint">يمكنك إرسال طعن واحد فقط لكل طلب
                                                مكتمل.</small>
                                            <button type="submit" class="appeal-submit-btn">
                                                <x-lucide-send width="16" height="16" />
                                                <span>إرسال الطعن</span>
                                            </button>
                                        </div>
                                    </form>
                                @else
                                    <div class="appeal-message appeal-message--disabled">
                                        <x-lucide-info width="16" height="16" />
                                        <span>لا يمكن إرسال طعن لهذا الطلب حالياً. يجب أن تكون حالة الطلب مكتملة.</span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <div class="order-action-buttons">
                            <a href="{{ url('/') }}" class="btn btn-custom-primary">
                                <x-lucide-house width="16" height="16" /> الرئيسية
                            </a>
                            <a href="javascript:history.back()" class="btn btn-custom-primary">
                                <x-lucide-arrow-left width="16" height="16" /> الرجوع للخلف
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@if (!empty($order->isAwaitingResponse) && $order->responseRequest)
@section('js')
    <script>
        document.getElementById('replyForm').addEventListener('submit', function(e) {
            e.preventDefault();

            var replyText = document.getElementById('client_reply').value.trim();
            var errorDiv = document.getElementById('replyError');
            var successDiv = document.getElementById('replySuccess');
            var btn = document.getElementById('replyBtn');

            errorDiv.style.display = 'none';
            successDiv.style.display = 'none';

            if (!replyText) {
                errorDiv.textContent = 'الرد مطلوب';
                errorDiv.style.display = 'block';
                return;
            }

            btn.disabled = true;
            btn.innerHTML = `{!! svg("lucide-hourglass", ["width" => 16, "height" => 16])->toHtml() !!} <span>جاري الإرسال...</span>`;

            fetch("{{ route('order.reply', $order->id) }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ reply: replyText })
            })
            .then(function(response) { return response.json(); })
            .then(function(data) {
                if (data.status) {
                    successDiv.textContent = data.message || 'تم إرسال الرد بنجاح';
                    successDiv.style.display = 'block';
                    setTimeout(function() { location.reload(); }, 1500);
                } else {
                    errorDiv.textContent = data.message || 'حدث خطأ أثناء إرسال الرد';
                    errorDiv.style.display = 'block';
                    btn.disabled = false;
                    btn.innerHTML = `{!! svg("lucide-send", ["width" => 16, "height" => 16])->toHtml() !!} <span>إرسال الرد</span>`;
                }
            })
            .catch(function() {
                errorDiv.textContent = 'حدث خطأ في الاتصال، حاول مرة أخرى';
                errorDiv.style.display = 'block';
                btn.disabled = false;
                btn.innerHTML = `{!! svg("lucide-send", ["width" => 16, "height" => 16])->toHtml() !!} <span>إرسال الرد</span>`;
            });
        });
    </script>
@endsection
@endif