@extends('layouts.applicant.applicant')

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

@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 active">Experience Summary</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">Experience Summary</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            @php
                $previousStep = $currentStep->getPreviousStep();
            @endphp
            @if($previousStep)
                <a href="{{ route('applicant.applications.step', [$application, $previousStep->slug]) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Previous Step
                </a>
            @endif
        </div>
    </div>

    <!-- Dynamic Progress Indicator -->
    @include('applicant.applications.partials.progress-indicator')

    <!-- Experience Summary Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-chart-line me-2"></i>Experience Summary & Existing Position Details
            </h6>
        </div>
        <div class="card-body">
            @php
                $experienceSummary = $application->experienceSummary;
            @endphp
            
            <form action="{{ route('applicant.applications.update-step', [$application, 'experience-summary']) }}" method="POST" id="experienceSummaryForm" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <!-- Skip Option -->
                <div class="alert alert-info">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="has_no_experience" name="has_no_experience" 
                               value="1" {{ old('has_no_experience', $experienceSummary?->has_no_experience ?? false) ? 'checked' : '' }}>
                        <label class="form-check-label" for="has_no_experience">
                            <strong>I have no experience</strong> - Check this box to skip this step
                        </label>
                    </div>
                </div>
                
                <div id="experienceContent" style="{{ old('has_no_experience', $experienceSummary?->has_no_experience ?? false) ? 'display: none;' : '' }}">
                    <!-- Existing Position Details -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0 text-primary">
                                <i class="fas fa-user-tie me-2"></i>Existing Position/Cadre Details
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="existing_position" class="form-label">Existing Position/Cadre</label>
                                        <input type="text" class="form-control @error('existing_position') is-invalid @enderror" 
                                               id="existing_position" name="existing_position" 
                                               value="{{ old('existing_position', $experienceSummary?->existing_position ?? '') }}" 
                                               placeholder="e.g., Assistant Professor, Lecturer">
                                        @error('existing_position')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="existing_pay_scale" class="form-label">Existing Pay Scale</label>
                                        <input type="text" class="form-control @error('existing_pay_scale') is-invalid @enderror" 
                                               id="existing_pay_scale" name="existing_pay_scale" 
                                               value="{{ old('existing_pay_scale', $experienceSummary?->existing_pay_scale ?? '') }}" 
                                               placeholder="e.g., PB-3, Level 12">
                                        @error('existing_pay_scale')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="date_of_joining_existing" class="form-label">Date of Joining Existing/Cadre</label>
                                        <input type="date" class="form-control @error('date_of_joining_existing') is-invalid @enderror" 
                                               id="date_of_joining_existing" name="date_of_joining_existing" 
                                               value="{{ old('date_of_joining_existing', $experienceSummary?->date_of_joining_existing?->format('Y-m-d') ?? '') }}" 
                                               max="{{ date('Y-m-d') }}">
                                        @error('date_of_joining_existing')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Experience Breakdown Table -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0 text-primary">
                                <i class="fas fa-table me-2"></i>Experience Breakdown (Years and Months)
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width: 50%;">Experience Category</th>
                                            <th style="width: 25%;">Years</th>
                                            <th style="width: 25%;">Months</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $categories = App\Models\ExperienceSummary::getExperienceCategories();
                                        @endphp
                                        @foreach($categories as $key => $label)
                                        <tr>
                                            <td class="fw-bold">{{ $label }}</td>
                                            <td>
                                                <input type="number" class="form-control @error($key . '_years') is-invalid @enderror" 
                                                       name="{{ $key }}_years" 
                                                       value="{{ old($key . '_years', $experienceSummary?->{$key . '_years'} ?? '') }}" 
                                                       min="0" max="50" placeholder="0">
                                                @error($key . '_years')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </td>
                                            <td>
                                                <input type="number" class="form-control @error($key . '_months') is-invalid @enderror" 
                                                       name="{{ $key }}_months" 
                                                       value="{{ old($key . '_months', $experienceSummary?->{$key . '_months'} ?? '') }}" 
                                                       min="0" max="11" placeholder="0">
                                                @error($key . '_months')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="alert alert-warning mt-3">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Note:</strong> This step is optional. You can fill any or all fields as applicable. 
                                If you have no relevant experience, please check the "I have no experience" option above.
                            </div>
                            
                            <!-- File Upload Section -->
                            <div class="card mt-4" id="fileUploadSection" style="display: none;">
                                <div class="card-header bg-warning">
                                    <h6 class="mb-0 text-dark">
                                        <i class="fas fa-upload me-2"></i>Proof of Experience Required
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Important:</strong> Since you have entered experience details, you must upload proof of experience.
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="proof_of_experience" class="form-label">
                                            <strong>Proof of Experience <span class="text-danger">*</span></strong>
                                        </label>
                                        <input type="file" class="form-control @error('proof_of_experience') is-invalid @enderror" 
                                               id="proof_of_experience" name="proof_of_experience" 
                                               accept=".pdf">
                                        <div class="form-text">
                                            <i class="fas fa-file-pdf me-1"></i>Accepted format: PDF only (Max size: 5MB)
                                        </div>
                                        @error('proof_of_experience')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    @if($experienceSummary && $experienceSummary->proof_of_experience_path)
                                        <div class="alert alert-success">
                                            <i class="fas fa-check-circle me-2"></i>
                                            <strong>Current File:</strong> 
                                            <a href="{{ asset('storage/' . $experienceSummary->proof_of_experience_path) }}" target="_blank" class="text-decoration-none">
                                                <i class="fas fa-download me-1"></i>View Uploaded Proof
                                            </a>
                                            <br><small class="text-muted">Upload a new file to replace the current one</small>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Form Actions -->
                <div class="d-flex justify-content-between mt-4">
                    <div>
                        @if($previousStep)
                            <a href="{{ route('applicant.applications.step', [$application, $previousStep->slug]) }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Previous: {{ $previousStep->name }}
                            </a>
                        @endif
                    </div>
                    
                    <div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Save & Continue
                        </button>
                        
                        @php
                            $nextStep = $currentStep->getNextStep();
                        @endphp
                        @if($nextStep)
                            <a href="{{ route('applicant.applications.step', [$application, $nextStep->slug]) }}" class="btn btn-outline-primary ms-2">
                                Skip to Next: {{ $nextStep->name }} <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const hasNoExperienceCheckbox = document.getElementById('has_no_experience');
    const experienceContent = document.getElementById('experienceContent');
    const fileUploadSection = document.getElementById('fileUploadSection');
    const proofOfExperienceInput = document.getElementById('proof_of_experience');
    
    // Handle "no experience" checkbox
    hasNoExperienceCheckbox.addEventListener('change', function() {
        if (this.checked) {
            experienceContent.style.display = 'none';
            fileUploadSection.style.display = 'none';
            proofOfExperienceInput.removeAttribute('required');
            // Clear all form fields when hiding
            const inputs = experienceContent.querySelectorAll('input');
            inputs.forEach(input => {
                if (input.type !== 'checkbox') {
                    input.value = '';
                }
            });
        } else {
            experienceContent.style.display = 'block';
            checkExperienceData();
        }
    });
    
    // Function to check if any experience data is entered
    function checkExperienceData() {
        const yearInputs = document.querySelectorAll('input[name$="_years"]');
        const monthInputs = document.querySelectorAll('input[name$="_months"]');
        const existingPositionInput = document.getElementById('existing_position');
        const existingPayScaleInput = document.getElementById('existing_pay_scale');
        const dateOfJoiningInput = document.getElementById('date_of_joining_existing');
        
        let hasExperienceData = false;
        
        // Check experience breakdown fields
        yearInputs.forEach(input => {
            if (input.value && parseInt(input.value) > 0) {
                hasExperienceData = true;
            }
        });
        
        monthInputs.forEach(input => {
            if (input.value && parseInt(input.value) > 0) {
                hasExperienceData = true;
            }
        });
        
        // Check existing position fields
        if (existingPositionInput.value.trim() || 
            existingPayScaleInput.value.trim() || 
            dateOfJoiningInput.value) {
            hasExperienceData = true;
        }
        
        // Show/hide file upload section based on experience data
        if (hasExperienceData) {
            fileUploadSection.style.display = 'block';
            proofOfExperienceInput.setAttribute('required', 'required');
        } else {
            fileUploadSection.style.display = 'none';
            proofOfExperienceInput.removeAttribute('required');
        }
    }
    
    // Auto-calculate total months when years change
    const yearInputs = document.querySelectorAll('input[name$="_years"]');
    const monthInputs = document.querySelectorAll('input[name$="_months"]');
    const existingPositionInput = document.getElementById('existing_position');
    const existingPayScaleInput = document.getElementById('existing_pay_scale');
    const dateOfJoiningInput = document.getElementById('date_of_joining_existing');
    
    // Add event listeners to all experience-related inputs
    [...yearInputs, ...monthInputs, existingPositionInput, existingPayScaleInput, dateOfJoiningInput].forEach(input => {
        input.addEventListener('input', checkExperienceData);
        input.addEventListener('change', checkExperienceData);
    });
    
    // Add validation to ensure months don't exceed 11
    monthInputs.forEach(input => {
        input.addEventListener('input', function() {
            if (parseInt(this.value) > 11) {
                this.value = 11;
            }
            checkExperienceData();
        });
    });
    
    // Add validation to ensure years don't exceed reasonable limits
    yearInputs.forEach(input => {
        input.addEventListener('input', function() {
            if (parseInt(this.value) > 50) {
                this.value = 50;
            }
            checkExperienceData();
        });
    });
    
    // Check on page load if there's existing data
    if (!hasNoExperienceCheckbox.checked) {
        checkExperienceData();
    }
    
    // Form validation before submit
    document.getElementById('experienceSummaryForm').addEventListener('submit', function(e) {
        if (!hasNoExperienceCheckbox.checked) {
            const hasData = checkExperienceDataForValidation();
            if (hasData && !proofOfExperienceInput.files.length && !document.querySelector('.alert-success')) {
                e.preventDefault();
                alert('Please upload proof of experience document as you have entered experience details.');
                proofOfExperienceInput.focus();
                return false;
            }
        }
    });
    
    function checkExperienceDataForValidation() {
        const yearInputs = document.querySelectorAll('input[name$="_years"]');
        const monthInputs = document.querySelectorAll('input[name$="_months"]');
        const existingPositionInput = document.getElementById('existing_position');
        const existingPayScaleInput = document.getElementById('existing_pay_scale');
        const dateOfJoiningInput = document.getElementById('date_of_joining_existing');
        
        let hasExperienceData = false;
        
        yearInputs.forEach(input => {
            if (input.value && parseInt(input.value) > 0) {
                hasExperienceData = true;
            }
        });
        
        monthInputs.forEach(input => {
            if (input.value && parseInt(input.value) > 0) {
                hasExperienceData = true;
            }
        });
        
        if (existingPositionInput.value.trim() || 
            existingPayScaleInput.value.trim() || 
            dateOfJoiningInput.value) {
            hasExperienceData = true;
        }
        
        return hasExperienceData;
    }
});
</script>

<style>
.table th {
    background-color: #f8f9fc;
    border-color: #e3e6f0;
    font-weight: 600;
    color: #5a5c69;
}

.table td {
    vertical-align: middle;
}

.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-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn-primary {
    background-color: #667eea;
    border-color: #667eea;
}

.btn-primary:hover {
    background-color: #5a67d8;
    border-color: #5a67d8;
}
</style>
@endsection