@extends('layouts.applicant.applicant')

@section('title', 'Edit 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">Edit 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">Edit 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>Edit Education Qualification Details
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('applicant.education-qualification.update', [$application, $qualification]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <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', $qualification->degree_level) == '10th' ? 'selected' : '' }}>10th</option>
                            <option value="12th" {{ old('degree_level', $qualification->degree_level) == '12th' ? 'selected' : '' }}>12th</option>
                            <option value="Diploma" {{ old('degree_level', $qualification->degree_level) == 'Diploma' ? 'selected' : '' }}>Diploma</option>
                            <option value="Bachelor" {{ old('degree_level', $qualification->degree_level) == 'Bachelor' ? 'selected' : '' }}>Bachelor</option>
                            <option value="Master" {{ old('degree_level', $qualification->degree_level) == 'Master' ? 'selected' : '' }}>Master</option>
                            <option value="PhD" {{ old('degree_level', $qualification->degree_level) == 'PhD' ? 'selected' : '' }}>PhD</option>
                            <option value="Post-Doc" {{ old('degree_level', $qualification->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', $qualification->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', $qualification->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', $qualification->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', $qualification->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', $qualification->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', $qualification->grade_type) == 'Percentage' ? 'selected' : '' }}>Percentage</option>
                            <option value="CGPA" {{ old('grade_type', $qualification->grade_type) == 'CGPA' ? 'selected' : '' }}>CGPA</option>
                            <option value="Grade" {{ old('grade_type', $qualification->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', $qualification->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', $qualification->order) }}" 
                               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</label>
                        @if($qualification->certificate)
                            <div class="mb-2">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge bg-success">
                                        <i class="fas fa-check me-1"></i>Certificate Uploaded
                                    </span>
                                    <a href="{{ asset('storage/' . $qualification->certificate) }}" target="_blank" class="btn btn-sm btn-outline-info">
                                        <i class="fas fa-eye me-1"></i>View Current
                                    </a>
                                </div>
                                <small class="text-muted d-block mt-1">
                                    File: {{ basename($qualification->certificate) }}
                                </small>
                            </div>
                        @else
                            <div class="mb-2">
                                <span class="badge bg-warning">
                                    <i class="fas fa-exclamation-triangle me-1"></i>No Certificate Uploaded
                                </span>
                            </div>
                        @endif
                        <input type="file" name="certificate" id="certificate" 
                               class="form-control @error('certificate') is-invalid @enderror" 
                               accept=".pdf,.jpg,.jpeg,.png">
                        @error('certificate')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Upload new certificate to replace current one (PDF, JPG, PNG). Max: 2MB</div>
                        
                        <!-- File Upload Preview -->
                        <div id="certificate-preview" class="mt-2" style="display: none;">
                            <div class="alert alert-warning 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-exclamation-triangle me-1"></i>New file selected. This will replace the current certificate.
                                </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>Update 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;
}

.gap-2 {
    gap: 0.5rem;
}
</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