@extends('layouts.admin')
@section('page-title', 'پروفایل مشترک')

@section('content')
    <div class="p-4 md:p-8 max-w-5xl mx-auto">

        <div class="bg-gradient-to-r from-sky-500 to-cyan-600 rounded-2xl p-6 text-white shadow-lg relative overflow-hidden">
            <div class="absolute inset-0 bg-white/5 backdrop-blur-sm"></div>
            <div class="relative z-10 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="w-14 h-14 bg-white/20 backdrop-blur rounded-full flex items-center justify-center">
                        <i class="fas fa-building text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold">
                            {{ $customer->company_name ?? $customer->full_name }}
                        </h1>
                        <p class="text-xs opacity-90 mt-1">
{{--                            {{ $customer->bill_id }}--}}
                            شناسه قبض: {{ $customer->bill_id }}

                        </p>
                    </div>
                </div>
                <a href="{{ route('admin.customers.index') }}"
                   class="text-white/80 hover:text-white transition text-xs flex items-center gap-1">
                    <i class="fas fa-arrow-left"></i>
                    بازگشت
                </a>
            </div>
            <div class="mt-4 flex gap-3 flex-wrap">
            <span class="px-3 py-1 rounded-full text-xs font-medium bg-white/25 backdrop-blur border border-white/30">
                {{ $customer->type === 'legal' ? 'حقوقی' : 'حقیقی' }}
            </span>
                <span class="px-3 py-1 rounded-full text-xs font-medium {{ $customer->is_active ? 'bg-emerald-400/40 border-emerald-300' : 'bg-red-400/40 border-red-300' }} backdrop-blur border">
                {{ $customer->is_active ? 'فعال' : 'غیرفعال' }}
            </span>
            </div>
        </div>

        <div class="mt-6 bg-white rounded-2xl shadow-md overflow-hidden">
            <div class="flex border-b border-gray-100 overflow-x-auto">
                <a href="#info" class="flex-1 py-4 text-center text-sm font-medium text-cyan-600 border-b-2 border-cyan-600">
                    اطلاعات مشترک
                </a>
                <a href="#subscription" class="flex-1 py-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700">
                    انشعاب
                </a>
                <a href="#agent" class="flex-1 py-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700">
                    نماینده
                </a>
                <a href="#guarantees" class="flex-1 py-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700">
                    تضامین
                </a>
            </div>

            <div class="p-6 space-y-10">

                <div id="info">
                    <div class="bg-gray-50/70 rounded-xl p-5 border border-gray-200/50">
                        <div class="flex items-center gap-2 mb-4">
                            <i class="fas fa-id-card text-cyan-600 text-lg"></i>
                            <h3 class="text-sm font-bold text-gray-800">اطلاعات مشترک</h3>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">نام کامل</span>
                                <span class="font-medium">{{ $customer->company_name ?? $customer->full_name }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">شناسه ملی</span>
                                <span dir="ltr" class="font-mono">{{ $customer->national_id }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">شماره همراه</span>
                                <span dir="ltr" class="font-mono">{{ $customer->phone }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">شماره ثبت</span>
                                <span dir="ltr" class="font-mono">{{ $customer->registration_number }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">استان</span>
                                <span dir="ltr" class="font-mono">{{ $customer->province }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">شهر</span>
                                <span dir="ltr" class="font-mono">{{ $customer->city }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">آدرس روزنامه رسمی</span>
                                <span dir="ltr" class="font-mono">{{ $customer->newspaper_address }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">ایمیل</span>
                                <span class="text-blue-600 text-xs">{{ $customer->email ?? '—' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="subscription">
                    <div class="bg-emerald-50/50 rounded-xl p-5 border border-emerald-200/50">
                        <div class="flex items-center gap-2 mb-4">
                            <i class="fas fa-plug text-emerald-600 text-lg"></i>
                            <h3 class="text-sm font-bold text-gray-800">اطلاعات انشعاب</h3>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">شماره کنتور</span>
                                <span class="font-mono">{{ $customer->subscription?->meter_number ?? '—' }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">ضریب کنتور</span>
                                <span class="font-mono">{{ $customer->subscription?->meter_factor ?? '—' }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">قدرت قراردادی</span>
                                <span class="font-bold text-emerald-700">
                                {{ $customer->subscription?->contract_power ? number_format($customer->subscription->contract_power) . ' کیلووات' : '—' }}
                            </span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">سطح ولتاژ</span>
                                <span>{{ $customer->subscription?->voltageLevel?->name ?? '—' }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">مالک شبکه</span>
                                <span>{{ $customer->subscription?->networkOwner?->name ?? '—' }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">تعرفه</span>
                                <span class="font-mono text-purple-700">
                                {{ $customer->subscription?->tariffCode?->full_code ?? '—' }}
                            </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="agent">
                    <div class="bg-indigo-50/50 rounded-xl p-5 border border-indigo-200/50">
                        <div class="flex items-center gap-2 mb-4">
                            <i class="fas fa-user-check text-indigo-600 text-lg"></i>
                            <h3 class="text-sm font-bold text-gray-800">اطلاعات نماینده</h3>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">نام و نام خانوادگی</span>
{{--                                <span class="font-medium">{{ ($customer->agent->first_name . ' ' . $customer->agent->last_name) ?? '—' }}</span>--}}
                                <span class="font-medium">
    {{ $customer->agent ? ($customer->agent->first_name . ' ' . $customer->agent->last_name) : '—' }}
</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">کد ملی</span>
                                <span dir="ltr" class="font-mono">{{ $customer->agent?->national_id ?? '—' }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">شماره همراه</span>
                                <span dir="ltr" class="font-mono">{{ $customer->agent?->phone_number ?? '—' }}</span>
                            </div>
                            <div class="flex justify-between bg-white rounded-lg px-4 py-3">
                                <span class="text-gray-500">سمت</span>
                                <span>{{ $customer->agent?->job_position ?? '—' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="guarantees">
                    <div class="bg-amber-50/50 rounded-xl p-5 border border-amber-200/50">
                        <div class="flex items-center gap-2 mb-4">
                            <i class="fas fa-shield-alt text-amber-600 text-lg"></i>
                            <h3 class="text-sm font-bold text-gray-800">تضامین</h3>
                        </div>
                        @if($customer->guarantees && $customer->guarantees->count() > 0)
                            <div class="space-y-3">
                                @foreach($customer->guarantees as $g)
                                    <div class="bg-white rounded-lg p-4 border border-amber-200">
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-600">نوع تضمین:</span>
                                            <span class="font-medium">{{ $g->type ?? 'نامشخص' }}</span>
                                        </div>
                                        <div class="flex justify-between text-sm mt-2">
                                            <span class="text-gray-600">مبلغ:</span>
                                            <span class="font-mono text-amber-700">{{ number_format($g->amount ?? 0) }} ریال</span>
                                        </div>
                                        <div class="flex justify-between text-sm mt-2">
                                            <span class="text-gray-600">وضعیت:</span>
                                            <span class="px-2 py-0.5 rounded text-xs {{ $g->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-gray-100 text-gray-600' }}">
                                        {{ $g->status === 'active' ? 'فعال' : 'منقضی' }}
                                    </span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-center text-gray-500 text-xs py-8">هیچ تضمینی ثبت نشده</p>
                        @endif
                    </div>
                </div>

                <div class="flex flex-wrap gap-3 justify-center pt-6">
                    <button onclick="alert('در حال توسعه')"
                            class="px-5 py-2.5 bg-cyan-600 text-white text-xs font-medium rounded-xl hover:bg-cyan-700 hover:shadow-md transform hover:-translate-y-0.5 transition">
                        ویرایش ادمین
                    </button>
                    <button onclick="alert('در حال توسعه')"
                            class="px-5 py-2.5 bg-rose-600 text-white text-xs font-medium rounded-xl hover:bg-rose-700 hover:shadow-md transform hover:-translate-y-0.5 transition">
                        غیرفعال کردن
                    </button>
                    <button onclick="alert('در حال توسعه')"
                            class="px-5 py-2.5 bg-indigo-600 text-white text-xs font-medium rounded-xl hover:bg-indigo-700 hover:shadow-md transform hover:-translate-y-0.5 transition">
                        ارسال پیام
                    </button>
                </div>

                <div class="text-center text-xs text-gray-500 mt-6">
                    <i class="fas fa-lock text-emerald-500 mr-1"></i>
                    صفحه مدیریت — دسترسی فقط برای ادمین
                </div>
            </div>
        </div>
    </div>

{{--    scroll to tab--}}
    <script>
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
                // change the color tab
                document.querySelectorAll('a[href^="#"]').forEach(a => {
                    a.classList.remove('text-cyan-600', 'border-cyan-600');
                    a.classList.add('text-gray-500');
                });
                this.classList.add('text-cyan-600', 'border-cyan-600');
                this.classList.remove('text-gray-500');
            });
        });
    </script>
@endsection