@extends('layouts.app')

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

@section('content')
    <div class="container">
        <div class="row">
            <!-- Personal Information -->
            <div class="col-12 col-md-6 col-lg-7">
                <div class="card flex-fill flex-column">
                    <div class="card-header">
                        <h4>Personal Infomation</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">Name</div>
                            <div class="col">{{ $family->full_name ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Gender</div>
                            <div class="col">{{ $family->gender_text ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">DOB[AD]</div>
                            <div class="col">{{ $family->dob_en ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">DOB[BS]</div>
                            <div class="col">{{ $family->dob_np ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Father's Name</div>
                            <div class="col">{{ $family->father_name ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">District_en</div>
                            <div class="col">{{ $family->district_en ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Ward No_en</div>
                            <div class="col">{{ $family->wardno_en ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Address_en</div>
                            <div class="col">{{ $family->address_en ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Citizenship No</div>
                            <div class="col">{{ $family->citizenship_no ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Martial Status</div>
                            <div class="col">{{ $family->martial_status_text ?? 'N/A' }}</div>
                        </div>
                    </div>
                    <div class="card-header">
                        <h4>Contact Information</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">Email</div>
                            <div class="col">{{ $family->email ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Phone No</div>
                            <div class="col">{{ $family->phone_no ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Mobile No</div>
                            <div class="col">{{ $family->mobile_no ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Ofice Name</div>
                            <div class="col">{{ $family->office_name ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Office Phone</div>
                            <div class="col">{{ $family->office_phone ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Office Email</div>
                            <div class="col">{{ $family->office_email ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Office Address</div>
                            <div class="col">{{ $family->office_address ?? 'N/A' }}</div>
                        </div>
                    </div>
                    <div class="card-header">
                        <h4>Educations, Trainings and Involvements</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">Complete Education Level</div>
                            <div class="col">{{ $family->educationLevel->title ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Complete Subject</div>
                            <div class="col">{{ $family->educationSubject->title ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Complete Institute</div>
                            <div class="col">{{ $family->compEducationInstitute->title ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Complete Year</div>
                            <div class="col">{{ $family->edu_comp_year ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Current Level</div>
                            <div class="col">{{ $family->currentEducationLevel->title ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Current Institute</div>
                            <div class="col">{{ $family->currentEducationInstitute->title ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Current Institute Address</div>
                            <div class="col">{{ $family->edu_current_inst_address ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Trainings</div>
                            <div class="col">{{ $family->trainings ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Involvements</div>
                            <div class="col">{{ $family->involvements ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">Profession</div>
                            <div class="col">{{ $family->professionRelation->title ?? 'N/A' }}</div>
                        </div>
                    </div>
                    <div class="card-header">
                        <h4>Health Information</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                Blood Group
                            </div>
                            <div class="col">{{ $family->blood_group_text ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">
                                Health Problem 1
                            </div>
                            <div class="col">{{ $family->healthProblem1->title ?? 'N/A' }}</div>
                        </div>
                        <div class="row">
                            <div class="col">
                                Health Problem 2
                            </div>
                            <div class="col">{{ $family->healthProblem2->title ?? 'N/A' }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-5">
                <div class="d-flex flex-column flex-md-row justify-content-between gap-2">
                    <div class="card h-100 flex-column flex-fill">
                        <div class="card-header">
                            <h4>Photo</h4>
                        </div>
                        <div class="card-body m-auto">
                            <img class="image-fluid" src="{{ $family->image_url ?? asset('img/avatar/avatar-1.png') }}"
                                alt="" width="100%" height="130" style="object-fit: cover;">
                        </div>
                    </div>
                    <div class="card h-100">
                        <div class="card-header">
                            <h4>Status</h4>
                        </div>
                        <div class="card-body">
                            {{-- <div class="row">
                                <div class="col">Last Modified By:</div>
                                <div class="col">Rohan Bajracharya</div>
                            </div> --}}
                            <div class="row">
                                <div class="col">Last Modified Date:</div>
                                <div class="col">{{ $family->updated_at->format('Y-m-d') ?? 'N/A' }}</div>
                            </div>
                            <div class="row">
                                <div class="col">Created Date:</div>
                                <div class="col">{{ $family->created_at->format('Y-m-d') ?? 'N/A' }}</div>
                            </div>
                            <div class="row">
                                <div class="col">Status:</div>
                                <div class="col">{{ $family->status_text ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4>Family Members</h4>
                    </div>
                    <div class="card-body">
                        @foreach ($members as $member)
                            <div class="row">
                                <div class="col">
                                    <img src="{{ $member->image_url ?? asset('img/avatar/avatar-1.png') }}"
                                        alt="" height="60" width="60" class="image-fluid" style="object-fit: cover;">
                                </div>
                                <div class="col">
                                    <div class="row">
                                        <div class="col"><u><strong>Tamrakar-ID:</strong></u></div>
                                        <div class="col">{{ $member->tamrakar_id ?? 'M/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col"><u><strong>Name:</strong></u></div>
                                        <div class="col">{{ $member->full_name ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col"><u><strong>Father's Name:</strong></u></div>
                                        <div class="col">{{ $member->father_name ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="{{ route('admin.families.show', ['family' => $member->id]) }}"
                                        data-bs-toggle="tooltip" title="view" data-bs-placement="top"
                                        class="btn btn-sm btn-primary"><i class="fa fa-eye"></i></a>
                                </div>
                            </div>
                            <hr>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection