@extends('admin.layouts.master')

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">تفاصيل الطعن #{{ $appeal->id }}</h4>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('admin.order-appeals.index') }}" class="btn btn-secondary">
                <x-lucide-arrow-right width="20" height="20" /> العودة للقائمة
            </a>
            @if ($appeal->status === \App\Models\OrderAppeal::STATUS_PENDING)
                <button type="button" class="btn btn-success js-appeal-update" data-id="{{ $appeal->id }}"
                    data-status="accepted">
                    <x-lucide-check-circle width="20" height="20" /> قبول الطعن
                </button>
                <button type="button" class="btn btn-danger js-appeal-update" data-id="{{ $appeal->id }}"
                    data-status="rejected">
                    <x-lucide-x-circle width="20" height="20" /> رفض الطعن
                </button>
            @endif
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">معلومات الطلب</h5>
                </div>
                <div class="card-body">
                    <p><strong>رقم الطلب:</strong> #{{ $appeal->order?->order_number ?? $appeal->order_id }}</p>
                    <p><strong>اللعبة:</strong> {{ $appeal->order?->game?->name ?? 'غير محدد' }}</p>
                    <p><strong>المنتج:</strong> {{ $appeal->order?->Product?->name ?? 'غير محدد' }}</p>
                    <p><strong>الحالة الحالية:</strong>
                        <span class="badge badge-info">{{ $appeal->order?->statusvalue() ?? 'غير معروف' }}</span>
                    </p>
                    <a href="{{ route('admin.orders.show', $appeal->order_id) }}" class="btn btn-outline-primary btn-sm"
                        target="_blank">
                        عرض الطلب الأصلي
                    </a>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">بيانات المستخدم</h5>
                </div>
                <div class="card-body">
                    <p><strong>الاسم:</strong> {{ $appeal->user?->name ?? 'غير متوفر' }}</p>
                    <p><strong>البريد:</strong> {{ $appeal->user?->email ?? 'غير متوفر' }}</p>
                    <p><strong>رقم المستخدم:</strong> {{ $appeal->user?->id ?? '—' }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">تفاصيل الطعن</h5>
                    @include('admin.order-appeals.partials.status-badge', ['appeal' => $appeal])
                </div>
                <div class="card-body">
                    <p><strong>وصف المستخدم:</strong></p>
                    <p class="text-muted">{{ $appeal->user_note }}</p>

                    @if ($appeal->admin_note)
                        <hr>
                        <p><strong>رد الإدارة:</strong></p>
                        <p class="text-muted">{{ $appeal->admin_note }}</p>
                    @endif

                    <div class="mt-3">
                        <strong>المرفقات:</strong>
                        <div class="d-flex gap-3 flex-wrap mt-2">
                            @if ($appeal->image_path)
                                <a href="{{ asset('images/orderAppeals/' . $appeal->image_path) }}"
                                    class="btn btn-outline-primary" target="_blank">
                                    <x-lucide-image width="20" height="20" /> صورة الطعن
                                </a>
                            @endif
                            @if ($appeal->video_url)
                                <a href="{{ $appeal->video_url }}" class="btn btn-outline-secondary" target="_blank"
                                    rel="noopener">
                                    <x-lucide-video width="20" height="20" /> رابط الفيديو
                                </a>
                            @endif
                            @if (!$appeal->image_path && !$appeal->video_url)
                                <span class="text-muted">لا توجد مرفقات</span>
                            @endif
                        </div>
                    </div>

                    <div class="mt-3 text-muted">
                        <p>تاريخ الإرسال: {{ optional($appeal->created_at)->format('Y/m/d H:i') }}</p>
                        @if ($appeal->reviewed_at)
                            <p>تاريخ المراجعة: {{ optional($appeal->reviewed_at)->format('Y/m/d H:i') }}</p>
                        @endif
                        @if ($appeal->admin)
                            <p>تمت المراجعة بواسطة: {{ $appeal->admin->name }}</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('vue')
    <script>
        $(function() {
            const updateAppeal = (appealId, status, note = '') => {
                $.ajax({
                    url: "{{ url('admin/order-appeals') }}/" + appealId,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'PATCH',
                        status,
                        admin_note: note
                    },
                    success: function(response) {
                        showToast({
                            icon: 'success',
                            title: response.message || 'تم التحديث بنجاح'
                        });
                        setTimeout(() => window.location.reload(), 800);
                    },
                    error: function(xhr) {
                        const message = xhr.responseJSON?.message || 'حدث خطأ غير متوقع';
                        showToast({
                            icon: 'error',
                            title: message
                        });
                    }
                });
            };

            $('.js-appeal-update').on('click', function() {
                const appealId = $(this).data('id');
                const status = $(this).data('status');

                Swal.fire({
                    title: status === 'accepted' ? 'قبول الطعن' : 'رفض الطعن',
                    input: 'textarea',
                    inputLabel: 'ملاحظات الادارة (اختياري)',
                    inputPlaceholder: 'اكتب ملاحظة توضيحية للمستخدم',
                    showCancelButton: true,
                    confirmButtonText: 'تأكيد',
                    cancelButtonText: 'إلغاء',
                    preConfirm: (note) => ({
                        note
                    })
                }).then((result) => {
                    if (result.isConfirmed) {
                        updateAppeal(appealId, status, result.value?.note || '');
                    }
                });
            });
        });
    </script>
@endsection