@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">
                    تفاصيل {{ $complaint->type === 'complaint' ? 'الشكوى' : 'الاقتراح' }} #{{ $complaint->id }}
                </h4>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('admin.complaints.index') }}" class="btn btn-secondary">
                <x-lucide-arrow-right width="20" height="20" /> العودة للقائمة
            </a>
            @php
                $allowedTransitions = \App\Models\Complaint::ALLOWED_TRANSITIONS[$complaint->status] ?? [];
            @endphp
            @if(in_array('under_review', $allowedTransitions) && can_admin('complaints_respond'))
                <button type="button" class="btn btn-primary js-change-status" data-id="{{ $complaint->id }}" data-status="under_review">
                    <x-lucide-search width="20" height="20" /> بدء المراجعة
                </button>
            @endif
            @if(in_array('resolved', $allowedTransitions) && can_admin('complaints_respond'))
                <button type="button" class="btn btn-success js-change-status" data-id="{{ $complaint->id }}" data-status="resolved">
                    <x-lucide-check-circle width="20" height="20" /> تم الحل
                </button>
            @endif
            @if(in_array('rejected', $allowedTransitions) && can_admin('complaints_respond'))
                <button type="button" class="btn btn-danger js-change-status" data-id="{{ $complaint->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> {{ $complaint->user?->name ?? 'غير متوفر' }}</p>
                    <p><strong>البريد:</strong> {{ $complaint->user?->email ?? 'غير متوفر' }}</p>
                    <p><strong>رقم المستخدم:</strong> {{ $complaint->user?->id ?? '—' }}</p>
                </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>
                        @if($complaint->type === 'complaint')
                            <span class="badge bg-danger">شكوى</span>
                        @else
                            <span class="badge bg-info">اقتراح</span>
                        @endif
                    </p>
                    <p><strong>الحالة:</strong>
                        @switch($complaint->status)
                            @case('pending')
                                <span class="badge bg-warning">معلّقة</span>
                                @break
                            @case('under_review')
                                <span class="badge bg-primary">قيد المراجعة</span>
                                @break
                            @case('resolved')
                                <span class="badge bg-success">تم الحل</span>
                                @break
                            @case('rejected')
                                <span class="badge bg-danger">مرفوضة</span>
                                @break
                            @default
                                <span class="badge bg-secondary">غير محدد</span>
                        @endswitch
                    </p>
                    <p><strong>تاريخ الإرسال:</strong> {{ optional($complaint->created_at)->format('Y/m/d H:i') }}</p>
                    @if($complaint->admin)
                        <p><strong>تمت المعالجة بواسطة:</strong> {{ $complaint->admin->name }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">تفاصيل {{ $complaint->type === 'complaint' ? 'الشكوى' : 'الاقتراح' }}</h5>
                </div>
                <div class="card-body">
                    <p><strong>الموضوع:</strong> {{ $complaint->subject }}</p>
                    <hr>
                    <p><strong>التفاصيل:</strong></p>
                    <p class="text-muted">{{ $complaint->message }}</p>

                    @if($complaint->image)
                        <hr>
                        <strong>المرفقات:</strong>
                        <div class="d-flex gap-3 flex-wrap mt-2">
                            <a href="{{ url('admin/media/complaints/' . $complaint->id . '/image') }}" class="btn btn-outline-primary" target="_blank">
                                <x-lucide-image width="20" height="20" /> عرض الصورة المرفقة
                            </a>
                        </div>
                    @endif

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

    {{-- نموذج الرد --}}
    @if(can_admin('complaints_respond'))
        <div class="row mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">الرد على {{ $complaint->type === 'complaint' ? 'الشكوى' : 'الاقتراح' }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="adminResponse">نص الرد</label>
                            <textarea class="form-control" id="adminResponse" rows="4" placeholder="اكتب ردك هنا...">{{ $complaint->admin_response }}</textarea>
                        </div>
                        <button type="button" class="btn btn-primary mt-3" id="submitResponse">
                            <x-lucide-reply width="20" height="20" /> إرسال الرد
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('js')
    @include('vue')
    <script>
        $(function() {
            // تغيير الحالة
            $('.js-change-status').on('click', function() {
                const id = $(this).data('id');
                const status = $(this).data('status');
                const statusLabels = {
                    'under_review': 'بدء المراجعة',
                    'resolved': 'تم الحل',
                    'rejected': 'رفض'
                };

                Swal.fire({
                    title: 'تأكيد تغيير الحالة',
                    text: 'هل تريد تغيير الحالة إلى: ' + (statusLabels[status] || status) + '؟',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'تأكيد',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.complaints.changeStatus') }}",
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: id,
                                status: status
                            },
                            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 });
                            }
                        });
                    }
                });
            });

            // إرسال الرد
            $('#submitResponse').on('click', function() {
                const response = $('#adminResponse').val().trim();
                if (!response) {
                    showToast({ icon: 'warning', title: 'الرد مطلوب' });
                    return;
                }

                $.ajax({
                    url: "{{ route('admin.complaints.respond') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: {{ $complaint->id }},
                        admin_response: response
                    },
                    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 });
                    }
                });
            });
        });
    </script>
@endsection