@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>

    <!-- Verification Content -->
    <div class="card shadow">
        <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 Verification
            </h6>
        </div>
        <div class="card-body">
            @if($application->summary_pdf_path && file_exists(public_path($application->summary_pdf_path)))
                <!-- PDF Generated - Show Undertaking Option -->
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    Application summary PDF has been generated successfully.
                </div>
                
                <div class="text-center py-4">
                    <i class="fas fa-file-pdf fa-4x text-success mb-3"></i>
                    <h5 class="text-success">Application Summary Ready</h5>
                    <p class="text-muted mb-4">
                        Your application summary PDF is ready for download. Please review it before proceeding to the final submission.
                    </p>
                    
                    <div class="d-grid gap-2 d-md-block mb-4">
                        <a href="{{ route('applicant.application-verification.download-pdf', $application) }}" 
                           class="btn btn-primary" target="_blank">
                            <i class="fas fa-download me-2"></i>Download Application Summary PDF
                        </a>
                        <a href="{{ route('applicant.application-verification.show', $application) }}" 
                           class="btn btn-outline-primary">
                            <i class="fas fa-eye me-2"></i>View Summary Details
                        </a>
                    </div>
                    
                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle me-2"></i>Next Step</h6>
                        <p class="mb-0">
                            After reviewing your application summary, you need to complete the undertaking and declaration 
                            to finalize your application submission.
                        </p>
                    </div>
                    
                    <a href="{{ route('applicant.application-verification.undertaking', $application) }}" 
                       class="btn btn-success btn-lg">
                        <i class="fas fa-arrow-right me-2"></i>Proceed to Undertaking & Final Submission
                    </a>
                </div>
            @else
                <!-- PDF Not Generated - Show Generation Option -->
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Please generate your application summary PDF to proceed with the verification process.
                </div>
                
                <div class="text-center py-4">
                    <i class="fas fa-clipboard-check fa-4x text-primary mb-3"></i>
                    <h5 class="text-primary">Ready for Verification</h5>
                    <p class="text-muted mb-4">
                        All required sections have been completed. You can now generate your application summary PDF 
                        for final verification and submission.
                    </p>
                    
                    <a href="{{ route('applicant.application-verification.index', $application) }}" 
                       class="btn btn-primary btn-lg">
                        <i class="fas fa-file-pdf me-2"></i>Generate Application Summary PDF
                    </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.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;
}

.btn {
    border-radius: 8px;
    font-weight: 500;
}
</style>
@endsection