@php
    $cs = $customerService;
    $hosting = $cs->hostingAccount;
@endphp

<x-layouts.customer :title="$cs->service?->name ?? 'تفاصيل الخدمة'">
    <x-slot name="pageTitle">{{ $cs->service?->name }}</x-slot>
    <x-slot name="pageSubtitle">رقم الخدمة: <span class="font-mono">{{ $cs->service_number }}</span></x-slot>
    <x-slot name="pageActions">
        <x-status-badge :status="$cs->status" />
        <a href="{{ route('customer.tickets.create', ['customer_service_id' => $cs->id]) }}" class="btn btn-outline btn-sm">+ تذكرة دعم</a>
    </x-slot>

    <div class="grid lg:grid-cols-[1.4fr_1fr] gap-5">
        {{-- Main column --}}
        <div class="space-y-5">
            {{-- Service overview --}}
            <div class="card card-padded">
                <h3 class="font-bold text-navy-900 mb-3">تفاصيل الخدمة</h3>
                <dl class="grid sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
                    <div><dt class="text-navy-500">الباقة</dt><dd class="font-semibold text-navy-900">{{ $cs->plan?->name ?? '—' }}</dd></div>
                    <div><dt class="text-navy-500">دورة الفوترة</dt><dd class="font-semibold text-navy-900">{{ $cs->billing_cycle ?? '—' }}</dd></div>
                    <div><dt class="text-navy-500">السعر المدفوع</dt><dd class="font-semibold text-navy-900">{{ number_format((float) $cs->price_paid, 2) }} ر.س</dd></div>
                    <div><dt class="text-navy-500">السيرفر</dt><dd class="font-semibold text-navy-900">{{ $cs->serverNode?->name ?? '—' }}</dd></div>
                    <div><dt class="text-navy-500">تاريخ التفعيل</dt><dd class="text-navy-900">{{ $cs->activated_at?->translatedFormat('d M Y') ?? '—' }}</dd></div>
                    <div><dt class="text-navy-500">تاريخ الانتهاء</dt><dd class="text-navy-900">{{ $cs->expires_at?->translatedFormat('d M Y') ?? '—' }}</dd></div>
                </dl>
            </div>

            {{-- Hosting account info (if any) --}}
            @if($hosting)
                <div class="card card-padded">
                    <h3 class="font-bold text-navy-900 mb-3">معلومات الاستضافة</h3>
                    <dl class="grid sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
                        <div><dt class="text-navy-500">النطاق الرئيسي</dt><dd class="font-mono text-navy-900">{{ $hosting->primary_domain ?? '—' }}</dd></div>
                        <div><dt class="text-navy-500">عنوان IP</dt><dd class="font-mono text-navy-900">{{ $hosting->ip_address ?? '—' }}</dd></div>
                        <div><dt class="text-navy-500">اسم الباقة</dt><dd class="text-navy-900">{{ $hosting->package_name ?? '—' }}</dd></div>
                        <div><dt class="text-navy-500">اسم مستخدم cPanel</dt><dd class="font-mono text-navy-900">{{ $hosting->cpanel_username ?? '—' }}</dd></div>
                    </dl>

                    @if($hosting->disk_quota_mb)
                        @php
                            $diskUsed = (int) $hosting->current_disk_used_mb;
                            $diskTotal = max(1, (int) $hosting->disk_quota_mb);
                            $diskPct = min(100, round(($diskUsed / $diskTotal) * 100));
                            $bwUsed = (int) $hosting->current_bandwidth_used_mb;
                            $bwTotal = max(1, (int) $hosting->bandwidth_quota_mb);
                            $bwPct = min(100, round(($bwUsed / $bwTotal) * 100));
                        @endphp
                        <div class="grid sm:grid-cols-2 gap-4 mt-5 pt-4 border-t border-border/60">
                            <div>
                                <div class="flex items-center justify-between text-xs text-navy-500 mb-1.5">
                                    <span>المساحة المستخدمة</span>
                                    <span class="font-bold text-navy-700">{{ $diskUsed }} / {{ $diskTotal }} MB</span>
                                </div>
                                <div class="h-2 bg-muted rounded-full overflow-hidden">
                                    <div class="h-full bg-brand-500" style="width: {{ $diskPct }}%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex items-center justify-between text-xs text-navy-500 mb-1.5">
                                    <span>الباندويدث</span>
                                    <span class="font-bold text-navy-700">{{ $bwUsed }} / {{ $bwTotal }} MB</span>
                                </div>
                                <div class="h-2 bg-muted rounded-full overflow-hidden">
                                    <div class="h-full bg-navy-700" style="width: {{ $bwPct }}%"></div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            @endif

            {{-- Credentials --}}
            <div class="card card-padded">
                <div class="flex items-start justify-between gap-3 mb-3">
                    <div>
                        <h3 class="font-bold text-navy-900">بيانات الدخول الآمنة</h3>
                        <p class="text-xs text-navy-500 mt-1">⚠️ كلمات المرور تظهر لمدة 10 ثوانٍ فقط، ويتم تسجيل كل عملية كشف.</p>
                    </div>
                </div>

                @if($cs->credentials->isEmpty())
                    <div class="empty-state">
                        <p class="text-navy-600">لا توجد بيانات اعتماد متاحة بعد. سيتم إرسال البيانات هنا فور تسليم الخدمة.</p>
                    </div>
                @else
                    <div class="space-y-3">
                        @foreach($cs->credentials as $cred)
                            <x-secure-credential-field :credential="$cred"
                                :revealUrl="route('customer.services.credential.reveal', [$cs, $cred])" />
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="space-y-5">
            {{-- Delivery notes --}}
            <div class="card card-padded">
                <h3 class="font-bold text-navy-900 mb-3">ملاحظات التسليم</h3>
                @if($cs->deliveryNotes->isEmpty())
                    <p class="text-navy-500 text-sm">لا توجد ملاحظات تسليم بعد.</p>
                @else
                    <ul class="space-y-3">
                        @foreach($cs->deliveryNotes as $note)
                            <li class="border-s-2 border-brand-500 ps-3">
                                <p class="text-xs text-navy-500">{{ $note->delivered_at?->translatedFormat('d M Y H:i') }}</p>
                                <p class="text-sm text-navy-800 mt-1">{{ $note->customer_facing_notes ?? '—' }}</p>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>

            {{-- Linked tickets --}}
            <div class="card card-padded">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-bold text-navy-900">التذاكر المرتبطة</h3>
                </div>
                @if($cs->tickets->isEmpty())
                    <p class="text-navy-500 text-sm">لا توجد تذاكر.</p>
                @else
                    <ul class="space-y-2">
                        @foreach($cs->tickets as $tk)
                            <li class="p-3 rounded-xl bg-muted/40 flex items-center justify-between gap-3">
                                <div class="min-w-0">
                                    <p class="font-mono text-xs font-bold text-brand-700">{{ $tk->ticket_number }}</p>
                                    <p class="text-sm text-navy-800 truncate">{{ $tk->subject }}</p>
                                </div>
                                <a href="{{ route('customer.tickets.show', $tk) }}" class="btn btn-ghost btn-sm">←</a>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
</x-layouts.customer>