@extends('layouts.applicant')

@section('title', isset($qualification) ? 'Edit Education Qualification' : 'Add Education Qualification')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-1">{{ isset($qualification) ? 'Edit' : 'Add' }} Education Qualification</h1>
                    <p class="text-muted mb-0">Application #{{ $application->application_number }}</p>
                </div>
                <a href="{{ route('applicant.education-qualifications.index', $application) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Qualifications
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form action="{{ isset($qualification) ? route('applicant.education-qualifications.update', [$application, $qualification]) : route('applicant.education-qualifications.store', $application) }}" 
                          method="POST" enctype="multipart/form-data">
                        @csrf
                        @if(isset($qualification))
                            @method('PUT')
                        @endif

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="order">Order <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('order') is-invalid @enderror" 
                                           id="order" name="order" min="1"
                                           value="{{ old('order', $qualification->order ?? '') }}" required>
                                    <small class="form-text text-muted">Order of qualification (1 for highest, 2 for second highest, etc.)</small>
                                    @error('order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="degree_level">Degree Level <span class="text-danger">*</span></label>
                                    <select class="form-control @error('degree_level') is-invalid @enderror" 
                                            id="degree_level" name="degree_level" required>
                                        <option value="">Select Level</option>
                                        <option value="phd" {{ old('degree_level', $qualification->degree_level ?? '') === 'phd' ? 'selected' : '' }}>Ph.D</option>
                                        <option value="postgraduate" {{ old('degree_level', $qualification->degree_level ?? '') === 'postgraduate' ? 'selected' : '' }}>Post Graduate</option>
                                        <option value="graduate" {{ old('degree_level', $qualification->degree_level ?? '') === 'graduate' ? 'selected' : '' }}>Graduate</option>
                                        <option value="diploma" {{ old('degree_level', $qualification->degree_level ?? '') === 'diploma' ? 'selected' : '' }}>Diploma</option>
                                        <option value="12th" {{ old('degree_level', $qualification->degree_level ?? '') === '12th' ? 'selected' : '' }}>12th Standard</option>
                                        <option value="10th" {{ old('degree_level', $qualification->degree_level ?? '') === '10th' ? 'selected' : '' }}>10th Standard</option>
                                    </select>
                                    @error('degree_level')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="degree_name">Degree Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('degree_name') is-invalid @enderror" 
                                           id="degree_name" name="degree_name" 
                                           value="{{ old('degree_name', $qualification->degree_name ?? '') }}" required>
                                    @error('degree_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="specialization">Specialization/Subject</label>
                                    <input type="text" class="form-control @error('specialization') is-invalid @enderror" 
                                           id="specialization" name="specialization" 
                                           value="{{ old('specialization', $qualification->specialization ?? '') }}">
                                    @error('specialization')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="institution_name">Institution Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('institution_name') is-invalid @enderror" 
                                           id="institution_name" name="institution_name" 
                                           value="{{ old('institution_name', $qualification->institution_name ?? '') }}" required>
                                    @error('institution_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="university_board">University/Board <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('university_board') is-invalid @enderror" 
                                           id="university_board" name="university_board" 
                                           value="{{ old('university_board', $qualification->university_board ?? '') }}" required>
                                    @error('university_board')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="passing_year">Passing Year <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('passing_year') is-invalid @enderror" 
                                           id="passing_year" name="passing_year" 
                                           min="1950" max="{{ date('Y') + 5 }}"
                                           value="{{ old('passing_year', $qualification->passing_year ?? '') }}" required>
                                    @error('passing_year')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="grade_type">Grade Type <span class="text-danger">*</span></label>
                                    <select class="form-control @error('grade_type') is-invalid @enderror" 
                                            id="grade_type" name="grade_type" required onchange="toggleGradeFields()">
                                        <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>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group" id="percentage_field" style="display: none;">
                                    <label for="percentage">Percentage</label>
                                    <input type="number" class="form-control @error('percentage') is-invalid @enderror" 
                                           id="percentage" name="percentage" step="0.01" min="0" max="100"
                                           value="{{ old('percentage', $qualification->percentage ?? '') }}">
                                    @error('percentage')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group" id="cgpa_field" style="display: none;">
                                    <label for="cgpa">CGPA</label>
                                    <input type="number" class="form-control @error('cgpa') is-invalid @enderror" 
                                           id="cgpa" name="cgpa" step="0.01" min="0" max="10"
                                           value="{{ old('cgpa', $qualification->cgpa ?? '') }}">
                                    @error('cgpa')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group" id="grade_field" style="display: none;">
                                    <label for="grade">Grade</label>
                                    <input type="text" class="form-control @error('grade') is-invalid @enderror" 
                                           id="grade" name="grade" 
                                           value="{{ old('grade', $qualification->grade ?? '') }}">
                                    @error('grade')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="certificate">Upload Certificate</label>
                                    <input type="file" class="form-control-file @error('certificate') is-invalid @enderror" 
                                           id="certificate" name="certificate" accept=".pdf,.jpg,.jpeg,.png">
                                    <small class="form-text text-muted">Upload certificate (PDF, JPG, PNG, max 5MB)</small>
                                    @if(isset($qualification) && $qualification->certificate_path)
                                    <div class="mt-2">
                                        <a href="{{ Storage::url($qualification->certificate_path) }}" target="_blank" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> View Current Certificate
                                        </a>
                                    </div>
                                    @endif
                                    @error('certificate')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="marksheet">Upload Marksheet</label>
                                    <input type="file" class="form-control-file @error('marksheet') is-invalid @enderror" 
                                           id="marksheet" name="marksheet" accept=".pdf,.jpg,.jpeg,.png">
                                    <small class="form-text text-muted">Upload marksheet (PDF, JPG, PNG, max 5MB)</small>
                                                                        @if(isset($qualification) && $qualification->marksheet_path)
                                    <div class="mt-2">
                                        <a href="{{ Storage::url($qualification->marksheet_path) }}" target="_blank" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> View Current Marksheet
                                        </a>
                                    </div>
                                    @endif
                                    @error('marksheet')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr>
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> {{ isset($qualification) ? 'Update' : 'Save' }} Qualification
                                </button>
                                <a href="{{ route('applicant.education-qualifications.index', $application) }}" class="btn btn-secondary ml-2">
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function toggleGradeFields() {
    const gradeType = document.getElementById('grade_type').value;
    const percentageField = document.getElementById('percentage_field');
    const cgpaField = document.getElementById('cgpa_field');
    const gradeField = document.getElementById('grade_field');
    
    // Hide all fields first
    percentageField.style.display = 'none';
    cgpaField.style.display = 'none';
    gradeField.style.display = 'none';
    
    // Show relevant field
    if (gradeType === 'percentage') {
        percentageField.style.display = 'block';
    } else if (gradeType === 'cgpa') {
        cgpaField.style.display = 'block';
    } else if (gradeType === 'grade') {
        gradeField.style.display = 'block';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleGradeFields();
});
</script>
@endpush