@extends('layouts.app')

@section('title', $contact->full_name)

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="bg-slate-800 text-white p-6 flex items-center justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="w-16 h-16 rounded-full bg-slate-600 flex items-center justify-center text-2xl font-bold">
                    {{ mb_substr($contact->first_name, 0, 1) }}{{ mb_substr($contact->last_name, 0, 1) }}
                </div>
                <div>
                    <h1 class="text-xl font-bold">{{ $contact->full_name }}</h1>
                    <p class="text-slate-300 text-sm">{{ $contact->position ?? '—' }}</p>
                    @if($contact->organization)
                        <p class="text-slate-400 text-xs mt-1">{{ $contact->organization->name }}</p>
                    @endif
                </div>
            </div>
            <div class="flex gap-2 text-sm">
                <a href="{{ route('contacts.edit', $contact) }}" class="bg-slate-600 px-3 py-1.5 rounded hover:bg-slate-500">ویرایش</a>
            </div>
        </div>

        <div class="border-b flex">
            <button type="button" class="tab-btn px-6 py-3 text-sm font-medium border-b-2 border-blue-600 text-blue-600" data-tab="info">اطلاعات تماس</button>
            <button type="button" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 border-b-2 border-transparent" data-tab="related">مرتبط‌ها</button>
        </div>

        <div class="p-6">
            <div id="tab-info" class="tab-content space-y-3 text-sm">
                <div class="flex justify-between py-2 border-b"><span class="text-gray-500">تلفن</span><span class="select-all font-mono">{{ $contact->phone ?? '—' }}</span></div>
                <div class="flex justify-between py-2 border-b"><span class="text-gray-500">موبایل</span><span class="select-all font-mono">{{ $contact->mobile ?? '—' }}</span></div>
                <div class="flex justify-between py-2 border-b"><span class="text-gray-500">ایمیل</span><span class="select-all">{{ $contact->email ?? '—' }}</span></div>
                @if($contact->notes)
                <div class="pt-2"><span class="text-gray-500 block mb-1">یادداشت عادی</span><p class="text-gray-700">{{ $contact->notes }}</p></div>
                @endif
            </div>

            <div id="tab-related" class="tab-content hidden space-y-4 text-sm">
                @if($canSeeConfidential)
                <div class="bg-amber-50 border border-amber-200 rounded p-4">
                    <h3 class="font-semibold text-amber-800 mb-3">🔒 یادداشت‌های محرمانه</h3>
                    @forelse($contact->confidentialNotes as $note)
                        <div class="mb-3 pb-3 border-b border-amber-100 last:border-0">
                            <p class="text-gray-800 whitespace-pre-wrap">{{ $note->body }}</p>
                            <p class="text-xs text-gray-500 mt-1">{{ $note->user?->name }} — {{ $note->created_at?->format('Y/m/d H:i') }}</p>
                        </div>
                    @empty
                        <p class="text-gray-500 mb-3">یادداشت محرمانه‌ای ثبت نشده.</p>
                    @endforelse

                    <form method="POST" action="{{ route('contacts.confidential-notes.store', $contact) }}" class="mt-3 pt-3 border-t border-amber-200">
                        @csrf
                        <textarea name="body" rows="2" required placeholder="یادداشت محرمانه جدید..."
                                  class="w-full border border-amber-300 rounded px-3 py-2 text-sm mb-2 bg-white"></textarea>
                        <button type="submit" class="bg-amber-600 text-white px-4 py-1.5 rounded text-sm">ثبت یادداشت محرمانه</button>
                    </form>
                </div>
                @endif

                <div>
                    <h3 class="font-semibold mb-2">پرونده‌های مرتبط (فعال)</h3>
                    @forelse($relatedCases as $c)
                        <div class="flex justify-between py-2 border-b">
                            <a href="{{ route('cases.show', $c) }}" class="text-blue-600 hover:underline">{{ $c->case_number }} — {{ $c->title }}</a>
                            <span class="text-xs text-gray-500">{{ $c->status_label }}</span>
                        </div>
                    @empty
                        <p class="text-gray-500">پرونده فعالی یافت نشد.</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="bg-gray-50 px-6 py-3 flex justify-between items-center">
            <a href="{{ route('contacts.index') }}" class="text-sm text-blue-600">بازگشت به فهرست</a>
            @role('admin')
            <form method="POST" action="{{ route('contacts.destroy', $contact) }}" onsubmit="return confirm('مخاطب حذف شود؟')">
                @csrf
                @method('DELETE')
                <button type="submit" class="text-sm text-red-600">حذف مخاطب</button>
            </form>
            @endrole
        </div>
    </div>
</div>

<script>
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.tab-btn').forEach(b => {
            b.classList.remove('border-blue-600', 'text-blue-600');
            b.classList.add('text-gray-500', 'border-transparent');
        });
        btn.classList.add('border-blue-600', 'text-blue-600');
        btn.classList.remove('text-gray-500', 'border-transparent');
        document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
        document.getElementById('tab-' + btn.dataset.tab).classList.remove('hidden');
    });
});
</script>
@include('partials.custom_fields_display')
@endsection