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

    <!-- 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 active">
                            <div class="step-number">4</div>
                            <div class="step-title">Document Upload</div>
                        </div>
                        <div class="step">
                            <div class="step-number">5</div>
                            <div class="step-title">Review</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Document Upload Form -->
    <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>Upload Required Documents
            </h6>
        </div>
        <div class="card-body">
            @if($application->offlineFormDocument && $application->supportingDocuments)
                <!-- Show existing documents -->
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    Documents have been uploaded successfully. You can view or replace them below.
                </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 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>
                                @if($application->offlineFormDocument->has_barcode)
                                    <p><strong>Barcode:</strong> <span class="badge badge-success">Added</span></p>
                                @endif
                                <div class="mt-3">
                                    <a href="{{ route('applicant.document-upload.download', [$application, 'offline_form']) }}" 
                                       class="btn btn-sm btn-outline-primary" target="_blank">
                                        <i class="fas fa-download me-1"></i>Download
                                    </a>
                                </div>
                            </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-pdf me-2"></i>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>
                                @if($application->supportingDocuments->has_barcode)
                                    <p><strong>Barcode:</strong> <span class="badge badge-success">Added</span></p>
                                @endif
                                <div class="mt-3">
                                    <a href="{{ route('applicant.document-upload.download', [$application, 'supporting_documents']) }}" 
                                       class="btn btn-sm btn-outline-primary" target="_blank">
                                        <i class="fas fa-download me-1"></i>Download
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-between">
                    <a href="{{ route('applicant.document-upload.edit', $application) }}" class="btn btn-warning">
                        <i class="fas fa-edit me-2"></i>Replace Documents
                    </a>
                    <a href="{{ route('applicant.applications.step', [$application, 'review']) }}" class="btn btn-primary">
                        <i class="fas fa-arrow-right me-2"></i>Next: Review Application
                    </a>
                </div>
            @else
                <!-- Show upload form -->
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Please upload the required documents to continue with your application.
                </div>
                
                <form action="{{ route('applicant.document-upload.store', $application) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-file-pdf me-2"></i>Upload Offline Filled Form
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <label for="offline_form" class="form-label">
                                        Select PDF File <span class="text-danger">*</span>
                                    </label>
                                    <input type="file" name="offline_form" id="offline_form" 
                                           class="form-control @error('offline_form') is-invalid @enderror" 
                                           accept=".pdf" required>
                                    @error('offline_form')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Upload your completed offline application form in PDF format. Maximum file size: 25MB.
                                    </div>
                                    
                                    <div class="mt-3" id="offline_form_info" style="display: none;">
                                        <div class="alert alert-info">
                                            <strong>File Information:</strong>
                                            <div id="offline_form_details"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6 mb-4">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-file-pdf me-2"></i>Upload Supporting Documents
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <label for="supporting_documents" class="form-label">
                                        Select PDF File <span class="text-danger">*</span>
                                    </label>
                                    <input type="file" name="supporting_documents" id="supporting_documents" 
                                           class="form-control @error('supporting_documents') is-invalid @enderror" 
                                           accept=".pdf" required>
                                    @error('supporting_documents')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Upload all supporting documents combined in a single PDF file. Maximum file size: 25MB.
                                    </div>
                                    
                                    <div class="mt-3" id="supporting_documents_info" style="display: none;">
                                        <div class="alert alert-info">
                                            <strong>File Information:</strong>
                                            <div id="supporting_documents_details"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle me-2"></i>Important Notes:</h6>
                        <ul class="mb-0">
                            <li>Only PDF files are allowed</li>
                            <li>Maximum file size is 25MB per document</li>
                            <li>A 2D barcode will be automatically added to the first page of each document</li>
                            <li>The system will count and display the total number of pages in each document</li>
                            <li>Ensure all documents are clear and readable</li>
                        </ul>
                    </div>
                    
                    <div class="d-flex justify-content-end">
                        <a href="{{ route('applicant.applications.step', [$application, 'fee-payment']) }}" class="btn btn-secondary me-2">
                            <i class="fas fa-arrow-left me-1"></i>Previous
                        </a>
                        <button type="submit" class="btn btn-primary" id="upload_btn">
                            <i class="fas fa-upload me-1"></i>Upload Documents
                        </button>
                    </div>
                </form>
            @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;
}

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

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

.file-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.file-upload-area:hover {
    border-color: #667eea;
    background-color: #f8f9fc;
}

.file-upload-area.dragover {
    border-color: #667eea;
    background-color: #e3f2fd;
}
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // File input change handlers
    const offlineFormInput = document.getElementById('offline_form');
    const supportingDocsInput = document.getElementById('supporting_documents');
    
    if (offlineFormInput) {
        offlineFormInput.addEventListener('change', function() {
            handleFileSelection(this, 'offline_form');
        });
    }
    
    if (supportingDocsInput) {
        supportingDocsInput.addEventListener('change', function() {
            handleFileSelection(this, 'supporting_documents');
        });
    }
    
    function handleFileSelection(input, type) {
        const file = input.files[0];
        const infoDiv = document.getElementById(type + '_info');
        const detailsDiv = document.getElementById(type + '_details');
        
        if (file) {
            // Validate file type
            if (file.type !== 'application/pdf') {
                alert('Please select a PDF file only.');
                input.value = '';
                infoDiv.style.display = 'none';
                return;
            }
            
            // Validate file size (25MB = 25 * 1024 * 1024 bytes)
            const maxSize = 25 * 1024 * 1024;
            if (file.size > maxSize) {
                alert('File size must be less than 25MB.');
                input.value = '';
                infoDiv.style.display = 'none';
                return;
            }
            
            // Display file information
            const fileSize = formatFileSize(file.size);
            detailsDiv.innerHTML = `
                <p class="mb-1"><strong>Name:</strong> ${file.name}</p>
                <p class="mb-1"><strong>Size:</strong> ${fileSize}</p>
                <p class="mb-0"><strong>Type:</strong> PDF Document</p>
            `;
            infoDiv.style.display = 'block';
        } else {
            infoDiv.style.display = 'none';
        }
    }
    
    function formatFileSize(bytes) {
        const units = ['B', 'KB', 'MB', 'GB'];
        let size = bytes;
        let unitIndex = 0;
        
        while (size >= 1024 && unitIndex < units.length - 1) {
            size /= 1024;
            unitIndex++;
        }
        
        return size.toFixed(2) + ' ' + units[unitIndex];
    }
    
    // Form submission handler
    const form = document.querySelector('form');
    const uploadBtn = document.getElementById('upload_btn');
    
    if (form && uploadBtn) {
        form.addEventListener('submit', function() {
            uploadBtn.disabled = true;
            uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Uploading...';
        });
    }
});
</script>
@endpush