@extends('layouts.admin')
@section('title', 'Visitor Details')
@section('page-title', 'Visitor Details')
@section('page-subtitle', 'View visitor information')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-2xl font-bold text-[var(--text-primary)]">{{ $visitor->full_name }}</h2>
            <p class="text-[var(--text-secondary)]">Visitor since {{ $visitor->date_of_visit?->format('M d, Y') }}</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('admin.visitors.edit', $visitor->id) }}" class="btn-royal px-4 py-2 rounded-lg text-white">
                <i class="fas fa-edit mr-2"></i> Edit
            </a>
            <a href="{{ route('admin.visitors.index') }}" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="card-royal p-6">
            <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">Personal Information</h3>
            <div class="space-y-4">
                <div class="flex justify-between">
                    <span class="text-[var(--text-secondary)]">Status</span>
                    <span class="px-2 py-1 rounded-full text-xs font-medium
                        @if($visitor->status === 'converted') bg-green-100 text-green-700
                        @elseif($visitor->status === 'new') bg-blue-100 text-blue-700
                        @elseif($visitor->status === 'follow_up') bg-yellow-100 text-yellow-700
                        @else bg-gray-100 text-gray-700 @endif">
                        {{ ucfirst(str_replace('_', ' ', $visitor->status)) }}
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-[var(--text-secondary)]">Visit Type</span>
                    <span class="text-[var(--text-primary)]">{{ ucfirst(str_replace('_', ' ', $visitor->visit_type ?? 'first_time')) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-[var(--text-secondary)]">Gender</span>
                    <span class="text-[var(--text-primary)]">{{ ucfirst($visitor->gender ?? 'Not specified') }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-[var(--text-secondary)]">Date of Birth</span>
                    <span class="text-[var(--text-primary)]">{{ $visitor->date_of_birth?->format('M d, Y') ?? 'Not specified' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-[var(--text-secondary)]">Address</span>
                    <span class="text-[var(--text-primary)] text-right">{{ $visitor->address ?? 'Not specified' }}</span>
                </div>
            </div>
        </div>

        <div class="card-royal p-6">
            <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">Contact Information</h3>
            <div class="space-y-4">
                <div class="flex justify-between">
                    <span class="text-[var(--text-secondary)]">Email</span>
                    <span class="text-[var(--text-primary)]">{{ $visitor->email ?? 'Not provided' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-[var(--text-secondary)]">Phone</span>
                    <span class="text-[var(--text-primary)]">{{ $visitor->phone ?? 'Not provided' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-[var(--text-secondary)]">How did you hear about us?</span>
                    <span class="text-[var(--text-primary)]">{{ $visitor->how_heard_about_us ?? 'Not specified' }}</span>
                </div>
            </div>
        </div>

        @if($visitor->notes)
        <div class="card-royal p-6 md:col-span-2">
            <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">Notes</h3>
            <p class="text-[var(--text-secondary)]">{{ $visitor->notes }}</p>
        </div>
        @endif

        @if($visitor->status !== 'converted')
        <div class="card-royal p-6 md:col-span-2">
            <div class="flex gap-3">
                <a href="{{ route('admin.visitors.convert', $visitor->id) }}" class="btn-royal px-4 py-2 rounded-lg text-white">
                    <i class="fas fa-user-plus mr-2"></i> Convert to Member
                </a>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection