@extends('layouts.applicant.applicant')

@section('title', 'Application Submitted Successfully')

@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">Submitted</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Success Header -->
    <div class="text-center mb-4">
        <div class="success-icon mb-3">
            <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
        </div>
        <h1 class="h2 text-success mb-2">Application Submitted Successfully!</h1>
        <p class="text-muted">Your application has been finalized and submitted for review.</p>
    </div>

    <!-- Application Details Card -->
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow border-success">
                <div class="card-header bg-success text-white text-center">
                    <h5 class="mb-0">
                        <i class="fas fa-clipboard-check me-2"></i>Application Confirmation
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Application Summary -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-primary">Application Details</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td class="fw-bold">Application Number:</td>
                                    <td class="text-primary fw-bold">{{ $application->application_number }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Applicant Name:</td>
                                    <td>{{ $application->personalInformation->first_name }} {{ $application->personalInformation->last_name }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Position Applied:</td>
                                    <td>{{ $application->advertisement->title }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Department:</td>
                                    <td>{{ $application->advertisement->department->name ?? 'N/A' }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-primary">Submission Details</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td class="fw-bold">Submitted Date:</td>
                                    <td>{{ $application->submitted_at->format('F d, Y') }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Submitted Time:</td>
                                    <td>{{ $application->submitted_at->format('h:i A') }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Status:</td>
                                    <td><span class="badge badge-success">SUBMITTED</span></td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Finalized:</td>
                                    <td><span class="badge badge-danger">LOCKED</span></td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Important Information -->
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle me-2"></i>Important Information</h6>
                        <ul class="mb-0">
                            <li><strong>Application Locked:</strong> Your application is now locked and cannot be edited.</li>
                            <li><strong>Reference Number:</strong> Please save your application number <strong>{{ $application->application_number }}</strong> for future reference.</li>
                            <li><strong>Communication:</strong> All further communication will be sent to your registered email address.</li>
                            <li><strong>Status Updates:</strong> You can check your application status anytime from your dashboard.</li>
                        </ul>
                    </div>

                    <!-- Download Links -->
                    <div class="text-center mb-4">
                        <h6 class="text-primary mb-3">Download Your Documents</h6>
                        <div class="d-grid gap-2 d-md-block">
                            <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.applications.download', $application) }}" 
                               class="btn btn-outline-primary" target="_blank">
                                <i class="fas fa-file-pdf me-2"></i>Download Complete Application
                            </a>
                        </div>
                    </div>

                    <!-- Next Steps -->
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white">
                            <h6 class="mb-0">What Happens Next?</h6>
                        </div>
                        <div class="card-body">
                            <div class="timeline">
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-success">
                                        <i class="fas fa-check text-white"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <h6 class="text-success">Application Submitted</h6>
                                        <p class="text-muted mb-0">Your application has been successfully submitted and is now in the system.</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-warning">
                                        <i class="fas fa-clock text-white"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <h6 class="text-warning">Under Review</h6>
                                        <p class="text-muted mb-0">Your application will be reviewed by the recruitment committee.</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-info">
                                        <i class="fas fa-envelope text-white"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <h6 class="text-info">Communication</h6>
                                        <p class="text-muted mb-0">You will be notified about the next steps via email and SMS.</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-primary">
                                        <i class="fas fa-users text-white"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <h6 class="text-primary">Selection Process</h6>
                                        <p class="text-muted mb-0">If shortlisted, you will be called for interview/test as per the selection process.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Information -->
                    <div class="alert alert-light mt-4">
                        <h6><i class="fas fa-phone me-2"></i>Need Help?</h6>
                        <p class="mb-0">
                            For any queries regarding your application, please contact the recruitment office or 
                            check the official website for updates.
                        </p>
                    </div>

                    <!-- Action Buttons -->
                    <div class="text-center mt-4">
                        <div class="d-grid gap-2 d-md-block">
                            <a href="{{ route('applicant.applications.index') }}" class="btn btn-success">
                                <i class="fas fa-list me-2"></i>View All Applications
                            </a>
                            <a href="{{ route('applicant.dashboard') }}" class="btn btn-outline-primary">
                                <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.success-icon {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.timeline-content {
    padding-left: 20px;
}

.timeline-content h6 {
    margin-bottom: 5px;
    font-weight: 600;
}

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

.table td {
    padding: 0.5rem;
    border: none;
}

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

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

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-hide success message after 5 seconds
    setTimeout(function() {
        const alerts = document.querySelectorAll('.alert-success');
        alerts.forEach(function(alert) {
            if (alert.classList.contains('alert-dismissible')) {
                alert.style.transition = 'opacity 0.5s';
                alert.style.opacity = '0';
                setTimeout(function() {
                    alert.remove();
                }, 500);
            }
        });
    }, 5000);
});
</script>
@endpush