@extends('layouts.app')

@section('title', 'My Profile')

@section('content')

@php
$user = auth()->user();
$profile = optional($user->userprofile);
@endphp

{{-- ── Page Header ────────────────────────────────────────────────── --}}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">My Profile</h1>
    <p class="text-sm text-gray-500 mt-1">Your personal information and membership details</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- ── Col 1: Avatar + Church ───────────────────────────────────── --}}
    <div class="lg:col-span-1 space-y-5">

        {{-- Avatar Card --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 flex flex-col items-center text-center">
            @if($profile->avatar)
            <img src="{{ $profile->AvatarPath }}"
                class="w-12 h-12 rounded-full object-cover ring-4 ring-indigo-100">
            @else
            <div class="w-12 h-12 rounded-full bg-indigo-100 ring-4 ring-indigo-200 flex items-center justify-center">
                <span class="text-5xl font-bold text-indigo-600">
                    {{ strtoupper(substr($profile->firstname ?? $user->name, 0, 1)) }}
                </span>
            </div>
            @endif

            <h2 class="mt-4 text-lg font-semibold text-gray-800">
                {{ $profile->firstname }} {{ $profile->lastname }}
            </h2>
            <p class="text-sm text-gray-500">{{ $user->email }}</p>

            <span class="mt-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                {{ $profile->status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600' }}">
                <span class="w-1.5 h-1.5 rounded-full mr-1.5
                    {{ $profile->status === 'active' ? 'bg-green-500' : 'bg-red-500' }}"></span>
                {{ ucfirst($profile->status ?? 'active') }}
            </span>

            @if($profile->membership_type)
            <span class="mt-2 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700">
                {{ ucfirst($profile->membership_type) }}
            </span>
            @endif
        </div>

        {{-- Church Card --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Church</h3>
            <div class="flex items-start space-x-3">
                <div class="mt-0.5 w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center flex-shrink-0">
                    <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                    </svg>
                </div>
                <div>
                    <p class="font-medium text-gray-800 capitalize">{{ optional($user->church)->name }}</p>
                    <p class="text-xs text-gray-500 mt-0.5">{!! optional($user->church)->fulladdress() !!}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <div class="flex justify-between items-center mb-2">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wide ">Id Card</h3>&nbsp; <a href="{{ url('/member/print/'.$user->name) }}"
                    class="text-xs font-semibold text-white bg-blue-500 px-3 py-1 rounded cursor-pointer">
                    Print
                </a>
            </div>
            <div class="flex items-start space-x-3">

                @include('member.idcard.idcard')

            </div>
        </div>

    </div>

    {{-- ── Col 2: Personal / Address / Membership ───────────────────── --}}
    <div class="lg:col-span-1 space-y-5">

        {{-- Personal Details --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-5">Personal Details</h3>
            <dl class="space-y-0 divide-y divide-gray-50">
                @php
                $fields = [
                ['label' => 'First Name', 'value' => $profile->firstname],
                ['label' => 'Last Name', 'value' => $profile->lastname],
                ['label' => 'Gender', 'value' => ucfirst($profile->gender ?? '')],
                ['label' => 'Date of Birth', 'value' => $profile->date_of_birth ? date('d M Y', strtotime($profile->date_of_birth)) : null],
                ['label' => 'Mobile', 'value' => $user->mobile_no],
                ['label' => 'Email', 'value' => $user->email],
                ['label' => 'Profession', 'value' => ucwords(str_replace('_', ' ', $profile->profession ?? ''))],
                ['label' => 'Marriage Status', 'value' => ucwords(str_replace('_', ' ', $profile->marriage_status ?? ''))],
                ];
                @endphp
                @foreach($fields as $field)
                <div class="flex items-center justify-between py-3">
                    <dt class="text-xs font-medium text-gray-400 w-1/2">{{ $field['label'] }}</dt>
                    <dd class="text-sm font-semibold text-gray-800 text-right w-1/2 truncate">{{ $field['value'] ?: '—' }}</dd>
                </div>
                @endforeach
            </dl>
        </div>

        {{-- Address --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-5">Address</h3>
            <dl class="space-y-0 divide-y divide-gray-50">
                @php
                $address = [
                ['label' => 'Street', 'value' => $profile->address],
                ['label' => 'City', 'value' => optional($profile->city)->name],
                ['label' => 'State', 'value' => optional($profile->state)->name],
                ['label' => 'Country', 'value' => optional($profile->country)->name],
                ['label' => 'Pincode', 'value' => $profile->pincode],
                ];
                @endphp
                @foreach($address as $row)
                <div class="flex items-center justify-between py-3">
                    <dt class="text-xs font-medium text-gray-400 w-1/2">{{ $row['label'] }}</dt>
                    <dd class="text-sm font-semibold text-gray-800 text-right w-1/2 truncate">{{ $row['value'] ?: '—' }}</dd>
                </div>
                @endforeach
            </dl>
        </div>

        {{-- Membership --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-5">Membership</h3>
            <dl class="space-y-0 divide-y divide-gray-50">
                @php
                $membership = [
                ['label' => 'Type', 'value' => ucfirst($profile->membership_type ?? '')],
                ['label' => 'Member Since', 'value' => $profile->membership_start_date ? date('d M Y', strtotime($profile->membership_start_date)) : null],
                ['label' => 'Was Baptized', 'value' => ucfirst($profile->was_baptized ?? '')],
                ];
                if ($profile->was_baptized === 'yes') {
                $membership[] = ['label' => 'Baptism Date', 'value' => $profile->baptism_date ? date('d M Y', strtotime($profile->baptism_date)) : null];
                }
                @endphp
                @foreach($membership as $row)
                <div class="flex items-center justify-between py-3">
                    <dt class="text-xs font-medium text-gray-400 w-1/2">{{ $row['label'] }}</dt>
                    <dd class="text-sm font-semibold text-gray-800 text-right w-1/2">{{ $row['value'] ?: '—' }}</dd>
                </div>
                @endforeach
            </dl>
        </div>

    </div>

    {{-- ── Col 3: Family Tree ────────────────────────────────────────── --}}
    <div class="lg:col-span-1">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 h-full">
            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-5">Family Tree</h3>
            <member-family-tree name="{{ $user->name }}"></member-family-tree>
        </div>
    </div>

</div>

@endsection