@extends('layouts.applicant.applicant')

@section('title', 'Add Experience')

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

    <!-- Add Experience Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-plus me-2"></i>Experience Details
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('applicant.experience-step.store', $application) }}" method="POST" enctype="multipart/form-data" id="experienceForm">
                @csrf
                
                <div class="row">
                    <!-- Experience Type -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="experience_type" class="form-label">Experience Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('experience_type') is-invalid @enderror" 
                                    id="experience_type" name="experience_type" required>
                                <option value="">Select Experience Type</option>
                                <option value="teaching" {{ old('experience_type') === 'teaching' ? 'selected' : '' }}>
                                    Teaching Experience
                                </option>
                                <option value="research" {{ old('experience_type') === 'research' ? 'selected' : '' }}>
                                    Research Experience
                                </option>
                                <option value="industrial" {{ old('experience_type') === 'industrial' ? 'selected' : '' }}>
                                    Industry Experience
                                </option>
                            </select>
                            @error('experience_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Position/Designation -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="position_designation" class="form-label">Position/Designation <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('position_designation') is-invalid @enderror" 
                                   id="position_designation" name="position_designation" 
                                   value="{{ old('position_designation') }}" 
                                   placeholder="e.g., Assistant Professor, Research Associate" required>
                            @error('position_designation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <!-- Institution/Organization Name -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="institution_industry_name" class="form-label">Name of Institution/Organization <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('institution_industry_name') is-invalid @enderror" 
                                   id="institution_industry_name" name="institution_industry_name" 
                                   value="{{ old('institution_industry_name') }}" 
                                   placeholder="e.g., ABC University, XYZ Company" required>
                            @error('institution_industry_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Department -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="department" class="form-label">Department/Division</label>
                            <input type="text" class="form-control @error('department') is-invalid @enderror" 
                                   id="department" name="department" 
                                   value="{{ old('department') }}" 
                                   placeholder="e.g., Computer Science, R&D">
                            @error('department')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <!-- From Date -->
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="from_date" class="form-label">From Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('from_date') is-invalid @enderror" 
                                   id="from_date" name="from_date" 
                                   value="{{ old('from_date') }}" 
                                   max="{{ date('Y-m-d') }}" required>
                            @error('from_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- To Date -->
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="to_date" class="form-label">To Date</label>
                            <input type="date" class="form-control @error('to_date') is-invalid @enderror" 
                                   id="to_date" name="to_date" 
                                   value="{{ old('to_date') }}" 
                                   max="{{ date('Y-m-d') }}">
                            @error('to_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Current Position -->
                    <div class="col-md-4">
                        <div class="mb-3">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" id="is_current" name="is_current" 
                                       value="1" {{ old('is_current') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_current">
                                    Currently working here
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Duration Display -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <div class="alert alert-info" id="durationDisplay" style="display: none;">
                                <i class="fas fa-clock me-2"></i>
                                <strong>Duration:</strong> <span id="durationText"></span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Pay Information -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="pay_scale" class="form-label">Pay Scale</label>
                            <input type="text" class="form-control @error('pay_scale') is-invalid @enderror" 
                                   id="pay_scale" name="pay_scale" 
                                   value="{{ old('pay_scale') }}" 
                                   placeholder="e.g., PB-3">
                            @error('pay_scale')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="grade_pay" class="form-label">Grade Pay</label>
                            <input type="text" class="form-control @error('grade_pay') is-invalid @enderror" 
                                   id="grade_pay" name="grade_pay" 
                                   value="{{ old('grade_pay') }}" 
                                   placeholder="e.g., 8000">
                            @error('grade_pay')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="pay_level" class="form-label">Pay Level</label>
                            <input type="text" class="form-control @error('pay_level') is-invalid @enderror" 
                                   id="pay_level" name="pay_level" 
                                   value="{{ old('pay_level') }}" 
                                   placeholder="e.g., Level 12">
                            @error('pay_level')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="pay_amount" class="form-label">Basic Pay (₹)</label>
                            <input type="number" class="form-control @error('pay_amount') is-invalid @enderror" 
                                   id="pay_amount" name="pay_amount" 
                                   value="{{ old('pay_amount') }}" 
                                   placeholder="e.g., 50000" min="0" step="0.01">
                            @error('pay_amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Employment Type -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="employment_type" class="form-label">Employment Type</label>
                            <select class="form-select @error('employment_type') is-invalid @enderror" 
                                    id="employment_type" name="employment_type">
                                <option value="">Select Employment Type</option>
                                <option value="full_time" {{ old('employment_type') === 'full_time' ? 'selected' : '' }}>Full Time</option>
                                <option value="part_time" {{ old('employment_type') === 'part_time' ? 'selected' : '' }}>Part Time</option>
                                <option value="contract" {{ old('employment_type') === 'contract' ? 'selected' : '' }}>Contract</option>
                                <option value="visiting" {{ old('employment_type') === 'visiting' ? 'selected' : '' }}>Visiting</option>
                                <option value="guest" {{ old('employment_type') === 'guest' ? 'selected' : '' }}>Guest</option>
                                <option value="temporary" {{ old('employment_type') === 'temporary' ? 'selected' : '' }}>Temporary</option>
                            </select>
                            @error('employment_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Experience Proof -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="document" class="form-label">Experience Proof (File Upload)</label>
                            <input type="file" class="form-control @error('document') is-invalid @enderror" 
                                   id="document" name="document" 
                                   accept=".pdf,.jpg,.jpeg,.png">
                            <div class="form-text">Upload experience certificate, appointment letter, or relieving letter (PDF, JPG, PNG - Max 5MB)</div>
                            @error('document')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Description -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label for="description" class="form-label">Job Description/Responsibilities</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="4" 
                                      placeholder="Brief description of your role and responsibilities">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <!-- Form Actions -->
                <div class="d-flex justify-content-between">
                    <a href="{{ route('applicant.experience-step.index', $application) }}" class="btn btn-secondary">
                        <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 Experience
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const fromDateInput = document.getElementById('from_date');
    const toDateInput = document.getElementById('to_date');
    const isCurrentCheckbox = document.getElementById('is_current');
    const durationDisplay = document.getElementById('durationDisplay');
    const durationText = document.getElementById('durationText');
    
    // Handle current position checkbox
    isCurrentCheckbox.addEventListener('change', function() {
        if (this.checked) {
            toDateInput.value = '';
            toDateInput.disabled = true;
            toDateInput.required = false;
        } else {
            toDateInput.disabled = false;
            toDateInput.required = true;
        }
        calculateDuration();
    });
    
    // Calculate duration when dates change
    fromDateInput.addEventListener('change', calculateDuration);
    toDateInput.addEventListener('change', calculateDuration);
    
    function calculateDuration() {
        const fromDate = fromDateInput.value;
        const toDate = isCurrentCheckbox.checked ? new Date().toISOString().split('T')[0] : toDateInput.value;
        
        if (fromDate && toDate) {
            const from = new Date(fromDate);
            const to = new Date(toDate);
            
            if (to >= from) {
                const diffTime = Math.abs(to - from);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                const years = Math.floor(diffDays / 365);
                const months = Math.floor((diffDays % 365) / 30);
                
                let duration = '';
                if (years > 0) {
                    duration += years + ' year' + (years > 1 ? 's' : '');
                }
                if (months > 0) {
                    if (duration) duration += ' ';
                    duration += months + ' month' + (months > 1 ? 's' : '');
                }
                if (!duration) {
                    duration = 'Less than a month';
                }
                
                durationText.textContent = duration;
                durationDisplay.style.display = 'block';
            } else {
                durationDisplay.style.display = 'none';
            }
        } else {
            durationDisplay.style.display = 'none';
        }
    }
    
    // Set min date for to_date based on from_date
    fromDateInput.addEventListener('change', function() {
        toDateInput.min = this.value;
    });
    
    // Initialize on page load
    if (isCurrentCheckbox.checked) {
        toDateInput.disabled = true;
        toDateInput.required = false;
    }
    
    calculateDuration();
});
</script>
@endsection