@extends('applicant.applications.step-layout')

@section('title', 'Documents Upload')
@section('step-title', 'Document Upload')
@section('step-description', 'Upload all required documents and certificates')

@section('step-content')
<form id="step-form" method="POST" action="{{ route('applicant.applications.update-step', [$application->id, 'documents']) }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-file-upload"></i>
            Required Documents
        </h3>
        
        <div class="info-box">
            <i class="fas fa-info-circle"></i>
            <p>Please upload clear, legible copies of all required documents. Accepted formats: PDF, JPG, PNG. Maximum file size: 5MB per document.</p>
        </div>
        
        <!-- Identity Documents -->
        <div class="document-category">
            <h4 class="category-title">
                <i class="fas fa-id-card"></i>
                Identity Documents
            </h4>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="identity_proof" class="form-label">
                        Identity Proof <span class="required">*</span>
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-id-card"></i>
                            <span>Upload Identity Proof</span>
                            <small>Aadhaar/PAN/Passport/Driving License (PDF, JPG, PNG - Max: 5MB)</small>
                        </div>
                        <input type="file" name="identity_proof" id="identity_proof" accept=".pdf,.jpg,.jpeg,.png" required>
                    </div>
                    @if(isset($formData['identity_proof']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Identity proof uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('identity_proof')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="address_proof" class="form-label">
                        Address Proof
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-home"></i>
                            <span>Upload Address Proof</span>
                            <small>Utility Bill/Bank Statement/Aadhaar (PDF, JPG, PNG - Max: 5MB)</small>
                        </div>
                        <input type="file" name="address_proof" id="address_proof" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                    @if(isset($formData['address_proof']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Address proof uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('address_proof')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
        </div>
        
        <!-- Educational Documents -->
        <div class="document-category">
            <h4 class="category-title">
                <i class="fas fa-graduation-cap"></i>
                Educational Documents
            </h4>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="tenth_certificate" class="form-label">
                        10th Certificate <span class="required">*</span>
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-certificate"></i>
                            <span>Upload 10th Certificate</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="tenth_certificate" id="tenth_certificate" accept=".pdf,.jpg,.jpeg,.png" required>
                    </div>
                    @if(isset($formData['tenth_certificate']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>10th certificate uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('tenth_certificate')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="twelfth_certificate" class="form-label">
                        12th Certificate <span class="required">*</span>
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-certificate"></i>
                            <span>Upload 12th Certificate</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="twelfth_certificate" id="twelfth_certificate" accept=".pdf,.jpg,.jpeg,.png" required>
                    </div>
                    @if(isset($formData['twelfth_certificate']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>12th certificate uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('twelfth_certificate')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="bachelor_certificate" class="form-label">
                        Bachelor's Degree Certificate <span class="required">*</span>
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-scroll"></i>
                            <span>Upload Bachelor's Certificate</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="bachelor_certificate" id="bachelor_certificate" accept=".pdf,.jpg,.jpeg,.png" required>
                    </div>
                    @if(isset($formData['bachelor_certificate']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Bachelor's certificate uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('bachelor_certificate')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="bachelor_marksheet" class="form-label">
                        Bachelor's Marksheet <span class="required">*</span>
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-list-alt"></i>
                            <span>Upload Bachelor's Marksheet</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="bachelor_marksheet" id="bachelor_marksheet" accept=".pdf,.jpg,.jpeg,.png" required>
                    </div>
                    @if(isset($formData['bachelor_marksheet']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Bachelor's marksheet uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('bachelor_marksheet')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="master_certificate" class="form-label">
                        Master's Degree Certificate
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-scroll"></i>
                            <span>Upload Master's Certificate</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="master_certificate" id="master_certificate" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                    @if(isset($formData['master_certificate']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Master's certificate uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('master_certificate')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="master_marksheet" class="form-label">
                        Master's Marksheet
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-list-alt"></i>
                            <span>Upload Master's Marksheet</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="master_marksheet" id="master_marksheet" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                    @if(isset($formData['master_marksheet']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Master's marksheet uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('master_marksheet')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="phd_certificate" class="form-label">
                        PhD Certificate
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-user-graduate"></i>
                            <span>Upload PhD Certificate</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="phd_certificate" id="phd_certificate" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                    @if(isset($formData['phd_certificate']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>PhD certificate uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('phd_certificate')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="phd_thesis" class="form-label">
                        PhD Thesis (Abstract/Summary)
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-book"></i>
                            <span>Upload PhD Thesis</span>
                            <small>PDF only (Max: 10MB)</small>
                        </div>
                        <input type="file" name="phd_thesis" id="phd_thesis" accept=".pdf">
                    </div>
                    @if(isset($formData['phd_thesis']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>PhD thesis uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('phd_thesis')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
        </div>
        
        <!-- Professional Documents -->
        <div class="document-category">
            <h4 class="category-title">
                <i class="fas fa-briefcase"></i>
                Professional Documents
            </h4>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="resume" class="form-label">
                        Resume/CV <span class="required">*</span>
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-file-pdf"></i>
                            <span>Upload Resume/CV</span>
                            <small>PDF only (Max: 5MB)</small>
                        </div>
                        <input type="file" name="resume" id="resume" accept=".pdf" required>
                    </div>
                    @if(isset($formData['resume']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Resume uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('resume')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="experience_certificates" class="form-label">
                        Experience Certificates
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-certificate"></i>
                            <span>Upload Experience Certificates</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="experience_certificates" id="experience_certificates" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                    @if(isset($formData['experience_certificates']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Experience certificates uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('experience_certificates')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
        </div>
        
        <!-- Additional Documents -->
        <div class="document-category">
            <h4 class="category-title">
                <i class="fas fa-plus-circle"></i>
                Additional Documents
            </h4>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="research_publications" class="form-label">
                        Research Publications
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-book-open"></i>
                            <span>Upload Publications</span>
                            <small>PDF only (Max: 10MB)</small>
                        </div>
                        <input type="file" name="research_publications" id="research_publications" accept=".pdf">
                    </div>
                    @if(isset($formData['research_publications']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Publications uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('research_publications')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="other_documents" class="form-label">
                        Other Supporting Documents
                    </label>
                    <div class="file-upload">
                        <div class="file-upload-content">
                            <i class="fas fa-paperclip"></i>
                            <span>Upload Other Documents</span>
                            <small>PDF, JPG, PNG (Max: 5MB)</small>
                        </div>
                        <input type="file" name="other_documents" id="other_documents" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                    @if(isset($formData['other_documents']))
                        <div class="uploaded-file">
                            <div class="uploaded-file-info">
                                <i class="fas fa-check-circle"></i>
                                <span>Other documents uploaded</span>
                            </div>
                        </div>
                    @endif
                    @error('other_documents')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
        </div>
    </div>
</form>

@php
    $currentStep = 'documents';
    $previousStep = 'references';
    $nextStep = 'declaration';
@endphp
@endsection

@push('styles')
<style>
.document-category {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.category-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.category-title i {
    margin-right: 0.5rem;
    color: #667eea;
}

.file-upload {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
}

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

.file-upload.dragover {
    border-color: #667eea;
    background: #eff6ff;
}

.file-upload input[type="file"] {
    display: none;
}

.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.file-upload-content i {
    font-size: 2rem;
    color: #9ca3af;
}

.file-upload-content span {
    font-weight: 600;
    color: #374151;
}

.file-upload-content small {
    color: #6b7280;
    font-size: 0.75rem;
}

.uploaded-file {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uploaded-file-info {
    display: flex;
    align-items: center;
}

.uploaded-file-info i {
    color: #16a34a;
    margin-right: 8px;
}

.info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
}

.info-box i {
    color: #3b82f6;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.info-box p {
    margin: 0;
    color: #1e40af;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .document-category {
        padding: 1rem;
    }
    
    .file-upload {
        padding: 1rem;
    }
    
    .file-upload-content i {
        font-size: 1.5rem;
    }
}
</style>
@endpush

@push('scripts')
<script>
// File upload handling is already included in the step-layout
</script>
@endpush