@extends('layouts.applicant.applicant')

@section('title', 'Document Upload')

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

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

    <!-- Document Upload Section -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-file-upload me-2"></i>Document Upload
            </h6>
        </div>
        <div class="card-body">
            @if($application->hasRequiredDocuments())
                <!-- Show existing documents -->
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    Documents have been uploaded 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>
                
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card border-success">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-file-pdf me-2"></i>Offline Application Form
                                </h6>
                            </div>
                            <div class="card-body">
                                @if($application->offlineFormDocument)
                                    <div class="mb-2">
                                        <strong>File Name:</strong> {{ $application->offlineFormDocument->original_filename }}
                                    </div>
                                    <div class="mb-2">
                                        <strong>File Size:</strong> {{ number_format($application->offlineFormDocument->file_size / 1024, 2) }} KB
                                    </div>
                                    <div class="mb-2">
                                        <strong>Pages:</strong> {{ $application->offlineFormDocument->total_pages }}
                                    </div>
                                    <div class="mb-2">
                                        <strong>Uploaded:</strong> {{ $application->offlineFormDocument->created_at->format('M d, Y h:i A') }}
                                    </div>
                                    @if($application->offlineFormDocument->has_barcode)
                                        <div class="mb-2">
                                            <span class="badge badge-info">
                                                <i class="fas fa-qrcode me-1"></i>Barcode Added
                                            </span>
                                        </div>
                                    @endif
                                    
                                    <div class="mt-3">
                                        <a href="{{ route('applicant.document-upload.download', [$application, 'offline_form']) }}" 
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-download me-1"></i>Download
                                        </a>
                                    </div>
                                @else
                                    <p class="text-muted">No offline form uploaded</p>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-4">
                        <div class="card border-success">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-file-archive me-2"></i>Supporting Documents
                                </h6>
                            </div>
                            <div class="card-body">
                                @if($application->supportingDocuments)
                                    <div class="mb-2">
                                        <strong>File Name:</strong> {{ $application->supportingDocuments->original_filename }}
                                    </div>
                                    <div class="mb-2">
                                        <strong>File Size:</strong> {{ number_format($application->supportingDocuments->file_size / 1024, 2) }} KB
                                    </div>
                                    <div class="mb-2">
                                        <strong>Pages:</strong> {{ $application->supportingDocuments->total_pages }}
                                    </div>
                                    <div class="mb-2">
                                        <strong>Uploaded:</strong> {{ $application->supportingDocuments->created_at->format('M d, Y h:i A') }}
                                    </div>
                                    @if($application->supportingDocuments->has_barcode)
                                        <div class="mb-2">
                                            <span class="badge badge-info">
                                                <i class="fas fa-qrcode me-1"></i>Barcode Added
                                            </span>
                                        </div>
                                    @endif
                                    
                                    <div class="mt-3">
                                        <a href="{{ route('applicant.document-upload.download', [$application, 'supporting_documents']) }}" 
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-download me-1"></i>Download
                                        </a>
                                    </div>
                                @else
                                    <p class="text-muted">No supporting documents uploaded</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-between">
                    @if($application->isEditable())
                        <a href="{{ route('applicant.document-upload.edit', $application) }}" class="btn btn-warning">
                            <i class="fas fa-edit me-2"></i>Replace Documents
                        </a>
                    @else
                        <span class="text-muted">
                            <i class="fas fa-lock me-1"></i>Application finalized - editing disabled
                        </span>
                    @endif
                    
                    @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>
            @else
                <!-- Show message to upload documents -->
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Please upload the required documents to continue with the application process.
                </div>
                
                <!-- Prerequisites Check -->
                @if(!$application->feePayment && !$application->isFeeExempted())
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Fee Payment Required:</strong> Please complete your fee payment before uploading documents.
                        <div class="mt-2">
                            <a href="{{ route('applicant.applications.step', [$application, 'fee-payment']) }}" class="btn btn-sm btn-warning">
                                <i class="fas fa-credit-card me-1"></i>Complete Fee Payment
                            </a>
                        </div>
                    </div>
                @else
                    <!-- Document Upload Instructions -->
                    <div class="card border-info mb-4">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 text-primary">
                                <i class="fas fa-info-circle me-2"></i>Document Upload Requirements
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-primary">
                                        <i class="fas fa-file-pdf me-1"></i>Offline Application Form
                                    </h6>
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-check text-success me-1"></i>Filled and signed application form</li>
                                        <li><i class="fas fa-check text-success me-1"></i>PDF format only</li>
                                        <li><i class="fas fa-check text-success me-1"></i>Maximum size: 25MB</li>
                                        <li><i class="fas fa-check text-success me-1"></i>Clear and readable scan</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-primary">
                                        <i class="fas fa-file-archive me-1"></i>Supporting Documents
                                    </h6>
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-check text-success me-1"></i>All certificates and marksheets</li>
                                        <li><i class="fas fa-check text-success me-1"></i>Experience certificates</li>
                                        <li><i class="fas fa-check text-success me-1"></i>PDF format only</li>
                                        <li><i class="fas fa-check text-success me-1"></i>Maximum size: 25MB</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center py-5">
                        <i class="fas fa-cloud-upload-alt fa-4x text-muted mb-3"></i>
                        <h5 class="text-muted">Document Upload Required</h5>
                        <p class="text-muted mb-4">
                            You need to upload the required documents before proceeding to the next step.
                        </p>
                        @if($application->isEditable())
                            <a href="{{ route('applicant.document-upload.index', $application) }}" class="btn btn-primary">
                                <i class="fas fa-upload me-2"></i>Upload Documents
                            </a>
                        @else
                            <span class="text-muted">
                                <i class="fas fa-lock me-1"></i>Application finalized - upload not allowed
                            </span>
                        @endif
                    </div>
                @endif
            @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;
}

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