@extends('layouts.applicant.applicant')

@section('title', 'Application Verification')

@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">Verification</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">Application Verification</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.step', [$application, 'document-upload']) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Previous Step
            </a>
        </div>
    </div>

    <!-- Progress Indicator -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="progress-steps">
                        <div class="step completed">
                            <div class="step-number">1</div>
                            <div class="step-title">Personal Information</div>
                        </div>
                        <div class="step completed">
                            <div class="step-number">2</div>
                            <div class="step-title">Education Qualification</div>
                        </div>
                        <div class="step completed">
                            <div class="step-number">3</div>
                            <div class="step-title">Fee Payment</div>
                        </div>
                        <div class="step completed">
                            <div class="step-number">4</div>
                            <div class="step-title">Document Upload</div>
                        </div>
                        <div class="step active">
                            <div class="step-number">5</div>
                            <div class="step-title">Verification</div>
                        </div>
                        <div class="step">
                            <div class="step-number">6</div>
                            <div class="step-title">Review</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Application Summary -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-clipboard-check me-2"></i>Application Summary for Verification
            </h6>
        </div>
        <div class="card-body">
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Please review all your information carefully before generating the final application summary PDF.
            </div>

            <!-- Personal Information Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="text-primary border-bottom pb-2">
                        <i class="fas fa-user me-2"></i>Personal Information
                    </h5>
                </div>
                <div class="col-md-6">
                    <table class="table table-borderless table-sm">
                        <tr>
                            <td class="fw-bold">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">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->current_city }}, {{ $application->personalInformation->current_state }} - {{ $application->personalInformation->current_pincode }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Education Qualifications Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="text-primary border-bottom pb-2">
                        <i class="fas fa-graduation-cap me-2"></i>Education Qualifications
                    </h5>
                </div>
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>Degree</th>
                                    <th>Institution</th>
                                    <th>University</th>
                                    <th>Year</th>
                                    <th>Percentage/CGPA</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($application->educationQualifications as $education)
                                <tr>
                                    <td class="fw-bold">{{ $education->degree }}</td>
                                    <td>{{ $education->institution }}</td>
                                    <td>{{ $education->university }}</td>
                                    <td>{{ $education->year_of_completion }}</td>
                                    <td>
                                        @if($education->percentage)
                                            {{ $education->percentage }}%
                                        @elseif($education->cgpa)
                                            {{ $education->cgpa }} CGPA
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Fee Payment Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="text-primary border-bottom pb-2">
                        <i class="fas fa-credit-card me-2"></i>Fee Payment Details
                    </h5>
                </div>
                <div class="col-md-6">
                    @if($application->feePayment->is_fee_exempted)
                        <div class="alert alert-success">
                            <i class="fas fa-gift me-2"></i>
                            <strong>Fee Exempted</strong><br>
                            Category: {{ $application->feePayment->exemption_category }}<br>
                            Reason: {{ $application->feePayment->exemption_reason }}
                        </div>
                    @else
                        <table class="table table-borderless table-sm">
                            <tr>
                                <td class="fw-bold">Amount Paid:</td>
                                <td>₹{{ number_format($application->feePayment->amount, 2) }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Payment Date:</td>
                                <td>{{ $application->feePayment->payment_date->format('F d, Y') }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Reference Number:</td>
                                <td class="font-monospace">{{ $application->feePayment->sbi_collect_reference_number }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Status:</td>
                                <td><span class="badge badge-{{ $application->feePayment->status_color }}">{{ ucfirst($application->feePayment->payment_status) }}</span></td>
                            </tr>
                        </table>
                    @endif
                </div>
            </div>

            <!-- Documents Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="text-primary border-bottom pb-2">
                        <i class="fas fa-file-pdf me-2"></i>Uploaded Documents
                    </h5>
                </div>
                <div class="col-md-6">
                    <div class="card border-success">
                        <div class="card-header bg-success text-white">
                            <h6 class="mb-0">Offline Filled Form</h6>
                        </div>
                        <div class="card-body">
                            <p><strong>File:</strong> {{ $application->offlineFormDocument->original_filename }}</p>
                            <p><strong>Size:</strong> {{ $application->offlineFormDocument->formatted_file_size }}</p>
                            <p><strong>Pages:</strong> {{ $application->offlineFormDocument->total_pages }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-success">
                        <div class="card-header bg-success text-white">
                            <h6 class="mb-0">Supporting Documents</h6>
                        </div>
                        <div class="card-body">
                            <p><strong>File:</strong> {{ $application->supportingDocuments->original_filename }}</p>
                            <p><strong>Size:</strong> {{ $application->supportingDocuments->formatted_file_size }}</p>
                            <p><strong>Pages:</strong> {{ $application->supportingDocuments->total_pages }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Position Applied For -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="text-primary border-bottom pb-2">
                        <i class="fas fa-briefcase me-2"></i>Position Applied For
                    </h5>
                </div>
                <div class="col-md-6">
                    <table class="table table-borderless table-sm">
                        <tr>
                            <td class="fw-bold">Advertisement Number:</td>
                            <td>{{ $application->advertisement->advertisement_number ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Position:</td>
                            <td>{{ $application->advertisement->title }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Department:</td>
                            <td>{{ $application->advertisement->department->name ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Application Date:</td>
                            <td>{{ $application->created_at->format('F d, Y') }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Generate PDF Button -->
            <div class="text-center mt-4">
                <div class="alert alert-warning">
                    <h6><i class="fas fa-exclamation-triangle me-2"></i>Important Notice</h6>
                    <p class="mb-0">
                        Once you generate the application summary PDF, you will proceed to the undertaking step. 
                        Please ensure all information is correct before proceeding.
                    </p>
                </div>
                
                <form action="{{ route('applicant.application-verification.generate-pdf', $application) }}" method="POST" 
                      onsubmit="return confirm('Are you sure all the information is correct? This will generate the final application summary.')">
                    @csrf
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-file-pdf me-2"></i>Generate Application Summary PDF
                    </button>
                </form>
            </div>
        </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.completed .step-number {
    background: #1cc88a;
    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;
}

.step.completed .step-title {
    color: #1cc88a;
    font-weight: 600;
}

.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;
    vertical-align: top;
}

.table td:first-child {
    width: 30%;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.font-monospace {
    font-family: 'Courier New', monospace;
}
</style>
@endsection