@extends('layouts.applicant.applicant')

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

    <!-- Edit 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-edit me-2"></i>{{ ucfirst($experience->experience_type) }} Experience Details
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('applicant.experience.update', [$application, $experience]) }}" method="POST" enctype="multipart/form-data" id="experienceForm">
                @csrf
                @method('PUT')
                <input type="hidden" name="experience_type" value="{{ $experience->experience_type }}">
                
                <div class="row">
                    <!-- 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', $experience->position_designation) }}" 
                                   placeholder="e.g., Assistant Professor, Research Associate" required>
                            @error('position_designation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- 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', $experience->institution_industry_name) }}" 
                                   placeholder="e.g., ABC University, XYZ Company" required>
                            @error('institution_industry_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <!-- 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', $experience->department) }}" 
                                   placeholder="e.g., Computer Science, R&D">
                            @error('department')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Location -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="location" class="form-label">Location</label>
                            <input type="text" class="form-control @error('location') is-invalid @enderror" 
                                   id="location" name="location" 
                                   value="{{ old('location', $experience->location) }}" 
                                   placeholder="City, State, Country">
                            @error('location')
                                <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', $experience->from_date ? $experience->from_date->format('Y-m-d') : '') }}" 
                                   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', $experience->to_date ? $experience->to_date->format('Y-m-d') : '') }}" 
                                   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', $experience->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">
                                <i class="fas fa-clock me-2"></i>
                                <strong>Current Duration:</strong> {{ $experience->getFormattedDuration() }}
                            </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', $experience->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', $experience->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', $experience->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', $experience->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', $experience->employment_type) === 'full_time' ? 'selected' : '' }}>Full Time</option>
                                <option value="part_time" {{ old('employment_type', $experience->employment_type) === 'part_time' ? 'selected' : '' }}>Part Time</option>
                                <option value="contract" {{ old('employment_type', $experience->employment_type) === 'contract' ? 'selected' : '' }}>Contract</option>
                                <option value="visiting" {{ old('employment_type', $experience->employment_type) === 'visiting' ? 'selected' : '' }}>Visiting</option>
                                <option value="guest" {{ old('employment_type', $experience->employment_type) === 'guest' ? 'selected' : '' }}>Guest</option>
                                <option value="temporary" {{ old('employment_type', $experience->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) 
                                @if(!$experience->document_path)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>
                            <input type="file" class="form-control @error('document') is-invalid @enderror" 
                                   id="document" name="document" 
                                   accept=".pdf,.jpg,.jpeg,.png" 
                                   @if(!$experience->document_path) required @endif>
                            <div class="form-text">
                                Upload experience certificate, appointment letter, or relieving letter (PDF, JPG, PNG - Max 5MB)
                                @if(!$experience->document_path)
                                    <strong class="text-danger"> - Required</strong>
                                @endif
                                @if($experience->document_path)
                                    <br><strong>Current file:</strong> 
                                    <a href="{{ route('applicant.experience.download-document', [$application, $experience]) }}" target="_blank">
                                        {{ $experience->getDocumentName() }}
                                    </a>
                                    <br><small class="text-muted">Upload a new file to replace the current one (optional)</small>
                                @endif
                            </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', $experience->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.applications.step', [$application, 'experience']) }}" 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>Update 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 = durationDisplay.querySelector('span') || durationDisplay;
    
    // 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';
                }
                
                durationDisplay.innerHTML = '<i class="fas fa-clock me-2"></i><strong>Updated Duration:</strong> ' + duration;
                durationDisplay.style.display = 'block';
            }
        }
    }
    
    // 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;
    }
});
</script>
@endsection