@php
    $title = 'Client Profile Details';
    $header = 'Client Profile Details';
@endphp

@extends('admin.layouts.app')

@section('content')
    <div class="mt-6">
    <!-- Profile Hero Card -->
    <div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-5">
        <div class="bg-gradient-to-r from-blue-600 to-purple-600 px-5 py-5 flex flex-col md:flex-row items-center justify-between">
            <div class="flex items-center mb-4 md:mb-0">
                <div class="mr-4">
                    <img
                        src="{{ $profile->photo_url ?? 'https://placehold.co/200x200?text=No+Photo' }}"
                        alt="{{ $profile->name }}"
                        class="w-28 h-28 rounded-full border-4 border-white/80 object-cover object-center shadow-2xl bg-gray-200 cursor-pointer transition-all duration-200 hover:scale-105"
                        style="min-width: 112px; min-height: 112px;"
                        data-toggle="modal"
                        data-target="#profileImageModal"
                    >
                </div>
                <div>
                    <div class="text-2xl font-bold text-white mb-1">{{ $profile->name }}</div>
                    <div class="text-sm text-white/90 mb-2">
                        {{ $profile->profession ?: 'Profession not specified' }}
                        @if($profile->city)
                            · {{ $profile->city }}
                        @endif
                    </div>
                    <div class="flex flex-wrap gap-2 mt-2">
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/20 text-white border border-white/35">
                            <i class="fas fa-{{ strtolower($profile->gender) === 'female' ? 'venus' : (strtolower($profile->gender) === 'male' ? 'mars' : 'user') }} mr-1"></i>
                            {{ $profile->gender ?? 'N/A' }}
                        </span>
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/20 text-white border border-white/35">
                            <i class="fas fa-birthday-cake mr-1"></i>
                            {{ $profile->age ? $profile->age.' years' : 'Age N/A' }}
                        </span>
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/20 text-white border border-white/35">
                            <i class="fas fa-heart mr-1"></i>
                            {{ $profile->marital_status ?? 'Status N/A' }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-end gap-2">
                <div class="bg-gray-900/85 rounded-xl px-3 py-2 text-center text-white text-xs">
                    <span class="text-xs uppercase">Education</span>
                    <div class="font-bold text-base">{{ $profile->qualification ?? '—' }}</div>
                </div>
                <div class="bg-gray-900/85 rounded-xl px-3 py-2 text-center text-white text-xs">
                    <span class="text-xs uppercase">Income</span>
                    <div class="font-bold text-base">{{ $profile->income ?? '—' }}</div>
                </div>
                <div class="bg-gray-900/85 rounded-xl px-3 py-2 text-center text-white text-xs">
                    <span class="text-xs uppercase">Height</span>
                    <div class="font-bold text-base">{{ $profile->height ?? '—' }}</div>
                </div>
            </div>
        </div>
        <div class="px-5 py-4 flex justify-end items-center">
            <div class="flex gap-2">
                <a href="{{ route('admin.client-profiles.edit', $profile) }}" class="px-4 py-2 bg-primary text-white rounded-full text-sm font-medium hover:bg-primary-dark transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                    <i class="fas fa-pen mr-1"></i>Edit Profile
                </a>
                <a href="{{ route('admin.client-profiles.index') }}" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors">
                    Back to List
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <!-- Left Column -->
        <div class="lg:col-span-1 space-y-5">
            <!-- Basic Information -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-lg overflow-hidden">
                <div class="px-4 pt-3">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Basic Information</div>
                </div>
                <div class="px-4 pb-4 pt-2 space-y-3">
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Full Name</div>
                        <div class="text-sm font-medium text-gray-900">{{ $profile->name }}</div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">First / Last Name</div>
                        <div class="text-sm text-gray-600">
                            {{ $profile->first_name }} {{ $profile->last_name }}
                        </div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Gender</div>
                        <div class="text-sm font-medium text-gray-900">{{ $profile->gender ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Date of Birth</div>
                        <div class="text-sm font-medium text-gray-900">
                            {{ $profile->date_of_birth ? $profile->date_of_birth->format('d M Y') : '—' }}
                        </div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Marital Status</div>
                        <div class="text-sm font-medium text-gray-900">{{ $profile->marital_status ?? '—' }}</div>
                    </div>
                </div>
            </div>

            <!-- Religion & Background -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-lg overflow-hidden">
                <div class="px-4 pt-3">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Religion & Background</div>
                </div>
                <div class="px-4 pb-4 pt-2 space-y-3">
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Religion</div>
                        <div class="text-sm font-medium text-gray-900">{{ $profile->religion ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Sect</div>
                        <div class="text-sm font-medium text-gray-900">{{ $profile->sect ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Caste</div>
                        <div class="text-sm font-medium text-gray-900">{{ $profile->caste ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Ethnicity</div>
                        <div class="text-sm font-medium text-gray-900">{{ $profile->ethnicity ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Nationality</div>
                        <div class="text-sm font-medium text-gray-900">
                            {{ optional($profile->nationalityCountry)->name ?? '—' }}
                        </div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Family Background</div>
                        <div class="text-sm text-gray-600">
                            {{ $profile->family_background ?: 'No additional family background provided.' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="lg:col-span-2 space-y-5">
            <!-- Residence & Location -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-lg overflow-hidden">
                <div class="px-4 pt-3">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Residence & Location</div>
                </div>
                <div class="px-4 pb-4 pt-2">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Country of Residence</div>
                            <div class="text-sm font-medium text-gray-900">
                                {{ optional($profile->nationalityCountry)->name ?? '—' }}
                            </div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">City</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->city ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Size of House</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->house_size ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Residence Type</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->residence_type ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Home Ownership</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->home_ownership ?? '—' }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Address</div>
                        <div class="text-sm text-gray-600">{{ $profile->address ?? '—' }}</div>
                    </div>
                </div>
            </div>

            <!-- Education & Employment -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-lg overflow-hidden">
                <div class="px-4 pt-3">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Education & Employment</div>
                </div>
                <div class="px-4 pb-4 pt-2">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Education Level</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->qualification ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Institute</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->institute ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Employment Status</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->employment_status ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Profession</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->profession ?? ($profile->nature_of_job ?? '—') }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Monthly Income</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->income ?? '—' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Family Details -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-lg overflow-hidden">
                <div class="px-4 pt-3">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Family Details</div>
                </div>
                <div class="px-4 pb-4 pt-2">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Father's Occupation</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->father_occupation ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Mother's Occupation</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->mother_occupation ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Total Siblings</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->siblings_count ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Siblings Married</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->siblings_married_count ?? '—' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Partner Requirements -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-lg overflow-hidden">
                <div class="px-4 pt-3">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Partner Requirements</div>
                </div>
                <div class="px-4 pb-4 pt-2">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Age Range</div>
                            <div class="text-sm font-medium text-gray-900">
                                @if($profile->requirement_age_min || $profile->requirement_age_max)
                                    {{ $profile->requirement_age_min ?? '—' }} - {{ $profile->requirement_age_max ?? '—' }}
                                @else
                                    —
                                @endif
                            </div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Height</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->requirement_height ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Country</div>
                            <div class="text-sm font-medium text-gray-900">
                                {{ optional($profile->requirementCountry)->name ?? '—' }}
                            </div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">City</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->requirement_city ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Sect</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->requirement_sect ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Marital Status</div>
                            <div class="text-sm font-medium text-gray-900">{{ $profile->requirement_marital_status ?? '—' }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="text-xs uppercase tracking-wider text-gray-400 mb-1">Additional Notes</div>
                        <div class="text-sm text-gray-600">
                            {{ $profile->requirement_notes ?: 'No additional notes provided.' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Profile Image Modal -->
    <div class="modal fade" id="profileImageModal" tabindex="-1" role="dialog" aria-labelledby="profileImageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content bg-transparent border-0 shadow-none">
                <div class="modal-header border-0 p-0 justify-end">
                    <button type="button" class="close text-white opacity-90 hover:opacity-100 text-4xl font-light leading-none p-2" data-dismiss="modal" aria-label="Close" style="text-shadow: 0 2px 4px rgba(0,0,0,0.5); z-index: 10; position: relative;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-0 text-center">
                    <img
                        src="{{ $profile->photo_url ?? 'https://placehold.co/600x600?text=No+Photo' }}"
                        alt="{{ $profile->name }}"
                        class="max-w-full max-h-[85vh] rounded-xl shadow-2xl mx-auto block"
                    >
                </div>
            </div>
        </div>
    </div>

    <style>
        .profile-image-clickable:hover {
            opacity: 0.95;
        }
        #profileImageModal .modal-content {
            background: rgba(0, 0, 0, 0.85) !important;
        }
        #profileImageModal .modal-dialog {
            max-width: 90%;
            margin: 2rem auto;
        }
        #profileImageModal .close {
            color: #fff;
            opacity: 0.9;
            font-size: 2.5rem;
            font-weight: 300;
            line-height: 1;
            padding: 0.5rem;
        }
        #profileImageModal .close:hover {
            opacity: 1;
            color: #fff;
        }
        #profileImageModal img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 85vh;
            margin: 0 auto;
            display: block;
        }
        @media (max-width: 768px) {
            #profileImageModal .modal-dialog {
                max-width: 95%;
                margin: 1rem auto;
            }
            #profileImageModal img {
                max-height: 80vh;
            }
        }
    </style>
    </div>
@endsection