@extends('layouts.applicant.applicant')

@section('title', 'Add Education Qualification')

@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"><a href="{{ route('applicant.education-qualification.index', $application) }}">Education Qualifications</a></li>
    <li class="breadcrumb-item active">Add Qualification</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">Add Education Qualification</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.education-qualification.index', $application) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to List
            </a>
        </div>
    </div>

    <!-- Education Qualification Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-graduation-cap me-2"></i>Education Qualification Details
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('applicant.education-qualification.store', $application) }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="row mb-4">
                    <div class="col-md-6 mb-3">
                        <label for="degree_level" class="form-label">Degree Level <span class="text-danger">*</span></label>
                        <select name="degree_level" id="degree_level" class="form-control @error('degree_level') is-invalid @enderror" required>
                            <option value="">Select Degree Level</option>
                            <option value="10th" {{ old('degree_level') == '10th' ? 'selected' : '' }}>10th</option>
                            <option value="12th" {{ old('degree_level') == '12th' ? 'selected' : '' }}>12th</option>
                            <option value="Diploma" {{ old('degree_level') == 'Diploma' ? 'selected' : '' }}>Diploma</option>
                            <option value="Bachelor" {{ old('degree_level') == 'Bachelor' ? 'selected' : '' }}>Bachelor</option>
                            <option value="Master" {{ old('degree_level') == 'Master' ? 'selected' : '' }}>Master</option>
                            <option value="PhD" {{ old('degree_level') == 'PhD' ? 'selected' : '' }}>PhD</option>
                            <option value="Post-Doc" {{ old('degree_level') == 'Post-Doc' ? 'selected' : '' }}>Post-Doc</option>
                        </select>
                        @error('degree_level')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="degree_name" class="form-label">Degree Name <span class="text-danger">*</span></label>
                        <input type="text" name="degree_name" id="degree_name" 
                               class="form-control @error('degree_name') is-invalid @enderror" 
                               value="{{ old('degree_name') }}" 
                               placeholder="e.g., B.Tech, M.Tech, PhD" required>
                        @error('degree_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="specialization" class="form-label">Specialization/Subject</label>
                        <input type="text" name="specialization" id="specialization" 
                               class="form-control @error('specialization') is-invalid @enderror" 
                               value="{{ old('specialization') }}" 
                               placeholder="e.g., Computer Science, Civil Engineering">
                        @error('specialization')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="institution_name" class="form-label">Institution Name <span class="text-danger">*</span></label>
                        <input type="text" name="institution_name" id="institution_name" 
                               class="form-control @error('institution_name') is-invalid @enderror" 
                               value="{{ old('institution_name') }}" 
                               placeholder="Name of School/College/University" required>
                        @error('institution_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="university_board" class="form-label">University/Board <span class="text-danger">*</span></label>
                        <input type="text" name="university_board" id="university_board" 
                               class="form-control @error('university_board') is-invalid @enderror" 
                               value="{{ old('university_board') }}" 
                               placeholder="University or Board name" required>
                        @error('university_board')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="passing_year" class="form-label">Year of Passing <span class="text-danger">*</span></label>
                        <input type="number" name="passing_year" id="passing_year" 
                               class="form-control @error('passing_year') is-invalid @enderror" 
                               value="{{ old('passing_year') }}" 
                               min="1950" max="{{ date('Y') }}" required>
                        @error('passing_year')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="grade_type" class="form-label">Grade Type <span class="text-danger">*</span></label>
                        <select name="grade_type" id="grade_type" class="form-control @error('grade_type') is-invalid @enderror" required>
                            <option value="">Select Type</option>
                            <option value="Percentage" {{ old('grade_type') == 'Percentage' ? 'selected' : '' }}>Percentage</option>
                            <option value="CGPA" {{ old('grade_type') == 'CGPA' ? 'selected' : '' }}>CGPA</option>
                            <option value="Grade" {{ old('grade_type') == 'Grade' ? 'selected' : '' }}>Grade</option>
                        </select>
                        @error('grade_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="grade_percentage" class="form-label">Grade/Percentage <span class="text-danger">*</span></label>
                        <input type="text" name="grade_percentage" id="grade_percentage" 
                               class="form-control @error('grade_percentage') is-invalid @enderror" 
                               value="{{ old('grade_percentage') }}" 
                               placeholder="e.g., 85.5, 8.5, A+" required>
                        @error('grade_percentage')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="order" class="form-label">Order <span class="text-danger">*</span></label>
                        <input type="number" name="order" id="order" 
                               class="form-control @error('order') is-invalid @enderror" 
                               value="{{ old('order', $application->educationQualifications->count() + 1) }}" 
                               min="1" required>
                        @error('order')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Display order (1 = first)</div>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="certificate" class="form-label">Certificate <span class="text-danger">*</span></label>
                        <input type="file" name="certificate" id="certificate" 
                               class="form-control @error('certificate') is-invalid @enderror" 
                               accept=".pdf,.jpg,.jpeg,.png" required>
                        @error('certificate')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Upload certificate (PDF, JPG, PNG). Max: 2MB. <strong>Required.</strong></div>
                        
                        <!-- File Upload Preview -->
                        <div id="certificate-preview" class="mt-2" style="display: none;">
                            <div class="alert alert-info py-2">
                                <i class="fas fa-file me-2"></i>
                                <span id="certificate-filename"></span>
                                <small class="d-block mt-1">
                                    <i class="fas fa-info-circle me-1"></i>File selected. Click "Save Qualification" to upload.
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="d-flex justify-content-end">
                    <a href="{{ route('applicant.education-qualification.index', $application) }}" class="btn btn-secondary me-2">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Save Qualification
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

.form-label {
    font-weight: 600;
    color: #5a5c69;
}
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // File upload preview
    const certificateInput = document.getElementById('certificate');
    const certificatePreview = document.getElementById('certificate-preview');
    const certificateFilename = document.getElementById('certificate-filename');
    
    if (certificateInput) {
        certificateInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            
            if (file) {
                // Check file size (2MB = 2 * 1024 * 1024 bytes)
                if (file.size > 2 * 1024 * 1024) {
                    alert('File size must be less than 2MB');
                    this.value = '';
                    certificatePreview.style.display = 'none';
                    return;
                }
                
                // Check file type
                const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
                if (!allowedTypes.includes(file.type)) {
                    alert('Please select a PDF, JPG, JPEG, or PNG file');
                    this.value = '';
                    certificatePreview.style.display = 'none';
                    return;
                }
                
                // Show preview
                certificateFilename.textContent = file.name + ' (' + formatFileSize(file.size) + ')';
                certificatePreview.style.display = 'block';
            } else {
                certificatePreview.style.display = 'none';
            }
        });
    }
    
    // Format file size
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
});
</script>
@endpush