@extends('layouts.app')

@section('title', 'View Family')

@push('styles')
    <style>
        .card {
            max-width: 450px;
            /* margin: 0 auto; */
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            text-align: left;
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            margin-top: 50px;
        }

        .card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
        }

        .card h4 {
            margin-bottom: 10px;
            font-size: 20px;
        }

        .card p {
            margin-bottom: 0;
            font-size: 16px;
        }
    </style>
@endpush
@section('content')
    <div class="container">
        <a href="{{ route('admin.families.index') }}" class="btn btn-outline-primary">Back</a>
        <div class="row">
            @forelse ($familyMembers as $member)
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="card">
                        <img src="{{$member->image_url ? $member->image_url : asset('img/avatar/avatar-1.png')}}" alt="Profile Picture">
                        <h4>{{$member->full_name}}</h4>
                        <p><strong>Tamrakar ID</strong> : {{$member->tamrakar_id}}</p>
                        <p><strong>Father's Name</strong> : {{$member->father_name ?? 'N/A'}}</p>
                        <p><strong>Address</strong> : {{$member->address_en ?? 'N/A'}}</p>
                        <p><strong>Gender</strong> : {{$member->gender_text ?? 'N/A'}}</p>
                        <p><strong>Blood Group</strong> : {{$member->blood_group_text ?? 'N/A'}}</p>
                        <p><strong>Phone</strong> : {{$member->phone_no ?? 'N/A'}}</p>
                        <p><strong>Mobile</strong> : {{$member->mobile_no ?? 'N/A'}}</p>
                        <p><strong>Email</strong> : {{$member->email ?? 'N/A'}}</p>
                        <p><strong>DOB [BS]</strong> : {{$member->dob_np ?? 'N/A'}}</p>
                        <p><strong>DOB [AD]</strong> : {{$member->dob_en ?? 'N/A'}}</p>
                        <p><strong>Education</strong>: {{$member->educationLevel->title ?? 'N/A'}}</p>
                    </div>
                </div>
            @empty
                <p>No Data Available.</p>
            @endforelse

        </div>
    </div>
@endsection