@extends('layouts.applicant.applicant')

@section('title', 'Personal Information')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.index') }}">My Applications</a></li>
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.show', $application) }}">{{ $application->application_number }}</a></li>
    <li class="breadcrumb-item active">Personal Information</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Personal Information</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.step', [$application, 'personal-information']) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Step
            </a>
        </div>
    </div>

    @if($personalInfo)
        <!-- Personal Information Display -->
        <div class="card shadow">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-user me-2"></i>Personal Information Details
                </h6>
                <a href="{{ route('applicant.personal-information.edit', $application) }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-edit me-1"></i>Edit Information
                </a>
            </div>
            <div class="card-body">
                <!-- Basic Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Basic Information</h5>
                    </div>
                    
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold" style="width: 40%;">Full Name:</td>
                                <td>{{ $personalInfo->title }} {{ $personalInfo->first_name }} {{ $personalInfo->middle_name }} {{ $personalInfo->last_name }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Date of Birth:</td>
                                <td>{{ $personalInfo->date_of_birth->format('F d, Y') }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Gender:</td>
                                <td>{{ $personalInfo->gender }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Category:</td>
                                <td><span class="badge badge-secondary">{{ $personalInfo->category }}</span></td>
                            </tr>
                        </table>
                    </div>
                    
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold" style="width: 40%;">Marital Status:</td>
                                <td>{{ $personalInfo->marital_status }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Nationality:</td>
                                <td>{{ $personalInfo->nationality }}</td>
                            </tr>
                            @if($personalInfo->aadhar_number)
                            <tr>
                                <td class="fw-bold">Aadhar Number:</td>
                                <td>{{ $personalInfo->aadhar_number }}</td>
                            </tr>
                            @endif
                            @if($personalInfo->pan_number)
                            <tr>
                                <td class="fw-bold">PAN Number:</td>
                                <td>{{ $personalInfo->pan_number }}</td>
                            </tr>
                            @endif
                        </table>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Contact Information</h5>
                    </div>
                    
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold" style="width: 40%;">Email Address:</td>
                                <td>{{ $personalInfo->email }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Phone Number:</td>
                                <td>{{ $personalInfo->phone }}</td>
                            </tr>
                            @if($personalInfo->alternate_phone)
                            <tr>
                                <td class="fw-bold">Alternate Phone:</td>
                                <td>{{ $personalInfo->alternate_phone }}</td>
                            </tr>
                            @endif
                        </table>
                    </div>
                </div>

                <!-- Address Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Address Information</h5>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-secondary">Permanent Address</h6>
                        <p class="mb-3">{{ $personalInfo->permanent_address }}</p>
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="text-secondary">Current Address</h6>
                        <p class="mb-1">{{ $personalInfo->current_address }}</p>
                        <p class="mb-1">{{ $personalInfo->city }}, {{ $personalInfo->state }} - {{ $personalInfo->pincode }}</p>
                        <p class="mb-3">{{ $personalInfo->country }}</p>
                    </div>
                </div>

                <!-- Uploaded Documents -->
                @if($personalInfo->photo || $personalInfo->signature)
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Uploaded Documents</h5>
                    </div>
                    
                    @if($personalInfo->photo)
                    <div class="col-md-6 mb-3">
                        <h6 class="text-secondary">Photograph</h6>
                        <img src="{{ Storage::url($personalInfo->photo) }}" alt="Photograph" class="img-thumbnail" style="max-width: 200px;">
                    </div>
                    @endif
                    
                    @if($personalInfo->signature)
                    <div class="col-md-6 mb-3">
                        <h6 class="text-secondary">Signature</h6>
                        <img src="{{ Storage::url($personalInfo->signature) }}" alt="Signature" class="img-thumbnail" style="max-width: 250px;">
                    </div>
                    @endif
                </div>
                @endif

                <!-- Action Buttons -->
                <div class="d-flex justify-content-between">
                    <a href="{{ route('applicant.applications.step', [$application, 'personal-information']) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Step
                    </a>
                    <a href="{{ route('applicant.personal-information.edit', $application) }}" class="btn btn-primary">
                        <i class="fas fa-edit me-1"></i>Edit Information
                    </a>
                </div>
            </div>
        </div>
    @else
        <!-- No Personal Information -->
        <div class="card shadow">
            <div class="card-body text-center py-5">
                <i class="fas fa-user-plus fa-4x text-muted mb-4"></i>
                <h4 class="text-muted mb-3">No Personal Information Found</h4>
                <p class="text-muted mb-4">
                    You haven't added your personal information yet. Please add your personal details to continue with the application.
                </p>
                <a href="{{ route('applicant.personal-information.create', $application) }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Add Personal Information
                </a>
            </div>
        </div>
    @endif
</div>

<style>
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.table td {
    padding: 0.5rem;
    border: none;
    vertical-align: top;
}

.border-bottom {
    border-bottom: 2px solid #e3e6f0 !important;
}

.img-thumbnail {
    border: 2px solid #dee2e6;
    border-radius: 8px;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}
</style>
@endsection