@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.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Applications
            </a>
        </div>
    </div>

    <!-- Reset Notification -->
    @include('applicant.applications.partials.reset-notification')
    
    <!-- Dynamic Progress Indicator -->
    @include('applicant.applications.partials.progress-indicator')

    <!-- Personal Information Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-user me-2"></i>Personal Information
            </h6>
        </div>
        <div class="card-body">
                @if($application->personalInformation)
                    <!-- Show existing personal information -->
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>
                        Personal information has been saved successfully.
                        @if(!$application->isEditable())
                            <br><small class="text-muted"><i class="fas fa-lock me-1"></i>Application is finalized and cannot be edited.</small>
                        @endif
                    </div>
                    
                    <!-- Personal Information Summary -->
                    <div class="card border-success mb-4">
                        <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="fas fa-user me-2"></i>Personal Information Summary
                            </h6>
                            @if($application->isEditable())
                                <a href="{{ route('applicant.personal-information.edit', $application) }}" class="btn btn-sm btn-light">
                                    <i class="fas fa-edit me-1"></i>Edit
                                </a>
                            @endif
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="fw-bold" style="width: 40%;">Full Name:</td>
                                            <td>{{ $application->personalInformation->title }} {{ $application->personalInformation->first_name }} {{ $application->personalInformation->middle_name }} {{ $application->personalInformation->last_name }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Date of Birth:</td>
                                            <td>{{ $application->personalInformation->date_of_birth->format('F d, Y') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Gender:</td>
                                            <td>{{ $application->personalInformation->gender }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Category:</td>
                                            <td><span class="badge badge-secondary">{{ $application->personalInformation->category }}</span></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="fw-bold" style="width: 40%;">Email:</td>
                                            <td>{{ $application->personalInformation->email }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Phone:</td>
                                            <td>{{ $application->personalInformation->phone }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Current Address:</td>
                                            <td>{{ $application->personalInformation->current_address }}, {{ $application->personalInformation->city }}, {{ $application->personalInformation->state }} - {{ $application->personalInformation->pincode }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between mt-3">
                                <div>
                                    @php
                                        $previousStep = $currentStep->getPreviousStep();
                                    @endphp
                                    @if($previousStep)
                                        <a href="{{ route('applicant.applications.step', [$application, $previousStep->slug]) }}" class="btn btn-outline-secondary me-2">
                                            <i class="fas fa-arrow-left me-1"></i>Previous: {{ $previousStep->name }}
                                        </a>
                                    @endif
                                    
                                    @if($application->isEditable())
                                        <a href="{{ route('applicant.personal-information.edit', $application) }}" class="btn btn-outline-primary">
                                            <i class="fas fa-edit me-1"></i>Edit Information
                                        </a>
                                    @else
                                        <span class="text-muted">
                                            <i class="fas fa-lock me-1"></i>Application finalized - editing disabled
                                        </span>
                                    @endif
                                </div>
                                
                                <div>
                                    @php
                                        $nextStep = $currentStep->getNextStep();
                                    @endphp
                                    @if($nextStep)
                                        <a href="{{ route('applicant.applications.step', [$application, $nextStep->slug]) }}" class="btn btn-primary">
                                            <i class="fas fa-arrow-right me-2"></i>Next: {{ $nextStep->name }}
                                        </a>
                                    @else
                                        <a href="{{ route('applicant.applications.index') }}" class="btn btn-success">
                                            <i class="fas fa-check me-2"></i>Application Complete
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                <!-- Show message to complete personal information -->
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Please complete your personal information to continue with the application process.
                </div>
                
                <div class="text-center py-5">
                    <i class="fas fa-user fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">Personal Information Required</h5>
                    <p class="text-muted mb-4">
                        You need to provide your personal information before proceeding to the next step.
                    </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>
            @endif
        </div>
    </div>
</div>

<style>
.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e3e6f0;
    z-index: 1;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    background: white;
    padding: 0 15px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e3e6f0;
    color: #5a5c69;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
}

.step.active .step-number {
    background: #667eea;
    color: white;
}

.step-title {
    font-size: 0.875rem;
    color: #5a5c69;
    text-align: center;
    font-weight: 500;
}

.step.active .step-title {
    color: #667eea;
    font-weight: 600;
}

.form-label {
    font-weight: 600;
    color: #5a5c69;
    font-size: 0.875rem;
}

.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;
}

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