@extends('master')
@section('content')
<main class="p-6 m-auto flex-1">
        <div class="max-w-7xl space-y-6 ">
            <div class="p-4 bg-white shadow sm:rounded-lg w-full">
                <section>
                    <header>
                        <div class="flex flex-row gap-2">
                            <h2 class="text-lg font-medium text-gray-900">
                                {{ __('Profile Information') }}
                            </h2>
                            <a class="px-4 py-2 bg-main-dark text-main-light text-xs hover:bg-main-light hover:text-main-dark text-left rounded-lg" href="{{ route('profile.edit') }}">Profile Settings</a>
                        </div>

                        <p class="mt-1 text-sm text-gray-600">
                            {{ __('View your profile information.') }}
                        </p>
                    </header>
                </section>

                <div class="grid grid-cols-1 md:grid-cols-1 gap-6 w-full mt-6">
                    <div>
                        <x-input-label for="image" :value="__('Profile Image')" />
                        <img src="{{ $user->image ? asset('storage/profile/images/' . $user->image) : asset('storage/profile/images/default.jpg') }}"
                            onerror="this.onerror=null;this.src='{{ asset('storage/profile/images/default.jpg') }}';"
                            alt=""
                            class="rounded-full w-32 h-32 border-gray-300 mb-2 border-2 mt-2">
                    </div>
                    <div>
                        <x-input-label for="first_name" :value="__('First Name')" />
                        <p>{{ $user->first_name }}</p>
                    </div>
                    <div>
                        <x-input-label for="middle_name" :value="__('Middle Name')" />
                        <p>{{ $user->middle_name }}</p>
                    </div>
                    <div>
                        <x-input-label for="last_name" :value="__('Last Name')" />
                        <p>{{ $user->last_name }}</p>
                    </div>
                    <div>
                        <x-input-label for="suffix" :value="__('Suffix')" />
                        <p>{{ $user->suffix }}</p>
                    </div>
                    <div>
                        <x-input-label for="email" :value="__('Email')" />
                        <p>{{ $user->email }}</p>
                    </div>
                </div>
            </div>

            @if ($user->role !== 'admin')

                <div class="p-4 bg-white shadow sm:rounded-lg w-full">
                    <section>
                        <header>
                            <h2 class="text-lg font-medium text-gray-900">
                                {{ __('Resident Data') }}
                            </h2>
                            <p class="mt-1 text-sm text-gray-600">
                                {{ __('View your resident data.') }}
                            </p>
                        </header>
                    </section>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full mt-6">
                        <div>
                            <x-input-label for="birthday" :value="__('Birthday')" />
                            <p>{{ $user->residentData->birthday ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="age" :value="__('Age')" />
                            <p>{{ $user->residentData->age ?? 'Not provided' }}</p>
                        </div>
                        <div class="w-full px-1">
                            <x-input-label for="height" :value="__('Height (in cm)')" />
                            <p>{{ $user->residentData->height ?? 'Not provided' }}</p>
                        </div>
                        <div class="w-full px-1">
                            <x-input-label for="weight" :value="__('Weight (in kg)')" />
                            <p>{{ $user->residentData->weight ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="sex" :value="__('Sex')" />
                            <p>{{ $user->residentData->sex ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="status" :value="__('Status')" />
                            <p>{{ $user->residentData->status ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="contact_no" :value="__('Contact No.')" />
                            <p>{{ $user->residentData->contact_no ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="telephone_no" :value="__('Telephone No.')" />
                            <p>{{ $user->residentData->telephone_no ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="family_role" :value="__('Family Role')" />
                            <p>{{ $user->residentData->family_role ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="occupation" :value="__('Occupation')" />
                            <p>{{ $user->residentData->occupation ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="income" :value="__('Income')" />
                            <p>{{ $user->residentData->income ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="religion" :value="__('Religion')" />
                            <p>{{ $user->residentData->religion ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="house_no" :value="__('House no.')" />
                            <p>{{ $user->residentData->house_no ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="street" :value="__('Street')" />
                            <p>{{ $user->residentData->street ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="primary" :value="__('Primary')" />
                            <p>{{ $user->residentData->primary ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="secondary" :value="__('Secondary')" />
                            <p>{{ $user->residentData->secondary ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <x-input-label for="tertiary" :value="__('Tertiary')" />
                            <p>{{ $user->residentData->tertiary ?? 'Not provided' }}</p>
                        </div>
                    </div>
                </div>
                @endif
        </div>
</main>
@endsection