@extends('master')

@section('title')
    {{ $title }}    
@endsection

@section('content')
    <div class="container mx-auto p-6">
        <!-- Page Heading -->
        <h1 class="text-4xl font-bold text-center text-gray-800 mb-10">Application Details</h1>

        <!-- Card Container -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
                <!-- Application Details -->
                <div class="space-y-4">
                    <!-- Personal Information Section -->
                    <div>
                        <h2 class="text-xl font-bold text-gray-800">Personal Information</h2>
                        <table class="table-auto w-full text-gray-600">
                            <tr>
                                <th class="text-left py-2 px-4">ID</th>
                                <td class="py-2 px-4">{{ $application->id }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Season</th>
                                <td class="py-2 px-4">{{ $application->season }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Year</th>
                                <td class="py-2 px-4">{{ $application->year }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">First Name</th>
                                <td class="py-2 px-4">{{ $application->first_name }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Middle Name</th>
                                <td class="py-2 px-4">{{ $application->middle_name }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Last Name</th>
                                <td class="py-2 px-4">{{ $application->last_name }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Email</th>
                                <td class="py-2 px-4">{{ $application->email }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Date of Birth</th>
                                <td class="py-2 px-4">{{ $application->dob }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Gender</th>
                                <td class="py-2 px-4">{{ $application->gender == 1 ? 'Male' : ($application->gender == 2 ? 'Female' : 'Other') }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Contact Information Section -->
                    <div>
                        <h2 class="text-xl font-bold text-gray-800">Contact Information</h2>
                        <table class="table-auto w-full text-gray-600">
                            <tr>
                                <th class="text-left py-2 px-4">Contact</th>
                                <td class="py-2 px-4">{{ $application->contact }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Contact 1</th>
                                <td class="py-2 px-4">{{ $application->contact1 }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Telephone Number</th>
                                <td class="py-2 px-4">{{ $application->tel_no }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Address Information Section -->
                    <div>
                        <h2 class="text-xl font-bold text-gray-800">Address Information</h2>
                        <table class="table-auto w-full text-gray-600">
                            <tr>
                                <th class="text-left py-2 px-4">Ethnic Group</th>
                                <td class="py-2 px-4">{{ $application->ethic_group }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Marital Status</th>
                                <td class="py-2 px-4">{{ $application->marital_status == 1 ? 'Single' : ($application->marital_status == 2 ? 'Married' : 'Divorced') }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Religion</th>
                                <td class="py-2 px-4">{{ $application->religion }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Citizenship</th>
                                <td class="py-2 px-4">{{ $application->citizenship }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Country</th>
                                <td class="py-2 px-4">{{ $application->country }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Pradesh</th>
                                <td class="py-2 px-4">{{ $application->pradesh }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">District</th>
                                <td class="py-2 px-4">{{ $application->district }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Permanent Address Section -->
                    <div>
                        <h2 class="text-xl font-bold text-gray-800">Permanent Address</h2>
                        <table class="table-auto w-full text-gray-600">
                            <tr>
                                <th class="text-left py-2 px-4">Country</th>
                                <td class="py-2 px-4">{{ $application->p_country }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">District</th>
                                <td class="py-2 px-4">{{ $application->p_district }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Municipality/VDC</th>
                                <td class="py-2 px-4">{{ $application->p_mun_vdc }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Ward</th>
                                <td class="py-2 px-4">{{ $application->ward }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Locality</th>
                                <td class="py-2 px-4">{{ $application->locality }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Temporary Address Section -->
                    <div>
                        <h2 class="text-xl font-bold text-gray-800">Temporary Address</h2>
                        <table class="table-auto w-full text-gray-600">
                            <tr>
                                <th class="text-left py-2 px-4">Country</th>
                                <td class="py-2 px-4">{{ $application->t_country }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">District</th>
                                <td class="py-2 px-4">{{ $application->t_district }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Municipality/VDC</th>
                                <td class="py-2 px-4">{{ $application->t_mun_vdc }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Ward No</th>
                                <td class="py-2 px-4">{{ $application->t_ward_no }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Locality</th>
                                <td class="py-2 px-4">{{ $application->t_locality }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Telephone Number</th>
                                <td class="py-2 px-4">{{ $application->t_telno }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Parent/Guardian Information Section -->
                    <div>
                        <h2 class="text-xl font-bold text-gray-800">Parent/Guardian Information</h2>
                        <table class="table-auto w-full text-gray-600">
                            <tr>
                                <th class="text-left py-2 px-4">Father's Name</th>
                                <td class="py-2 px-4">{{ $application->father_name }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Father's Mobile</th>
                                <td class="py-2 px-4">{{ $application->father_mobile }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Mother's Name</th>
                                <td class="py-2 px-4">{{ $application->mother_name }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Mother's Mobile</th>
                                <td class="py-2 px-4">{{ $application->mother_mobile }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Guardian's Name</th>
                                <td class="py-2 px-4">{{ $application->guardian_name }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Guardian's Mobile</th>
                                <td class="py-2 px-4">{{ $application->g_mobile }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Occupation & Program Details Section -->
                    <div>
                        <h2 class="text-xl font-bold text-gray-800">Occupation & Program Details</h2>
                        <table class="table-auto w-full text-gray-600">
                            <tr>
                                <th class="text-left py-2 px-4">Occupation</th>
                                <td class="py-2 px-4">{{ $application->occupation }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">User ID</th>
                                <td class="py-2 px-4">{{ $application->user_id }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Application ID</th>
                                <td class="py-2 px-4">{{ $application->application_id }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Program</th>
                                <td class="py-2 px-4">{{ $application->program }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Photos Section -->
                    <div>
                        <h2 class="text-xl font-bold text-gray-800">Photos</h2>
                        <table class="table-auto w-full text-gray-600">
                            <tr>
                                <th class="text-left py-2 px-4">Citizenship Photo</th>
                                <td class="py-2 px-4">
                                    @if ($application->citizenship_photo)
                                        <img src="{{ asset('citizenshipPhoto/' . $application->citizenship_photo) }}" alt="citizenship photo" class="max-w-xs">
                                    @else
                                        No photo available
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="text-left py-2 px-4">Student Photo</th>
                                <td class="py-2 px-4">
                                    @if ($application->student_photo)
                                        <img src="{{ asset('studentPhoto/' . $application->student_photo) }}" alt="student photo" class="max-w-xs">
                                    @else
                                        No photo available
                                    @endif
                                </td>
                            </tr>
                        </table>
                    </div>

                    <!-- Back Button -->
                    <a href="{{ route('application_form.index') }}" class="btn btn-secondary mt-6">Back to List</a>
                </div>
            </div>
        </div>
    </div>
@endsection