@extends('layouts.applicant.applicant')

@section('title', '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 active">Experience</li>
@endsection

@section('content')
@php
    // Define experiences variable at the top to avoid undefined variable errors
    $experiences = $application->experiences()->orderBy('from_date', 'desc')->get();
    $previousStep = $currentStep->getPreviousStep();
@endphp

<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">Professional Experience</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            @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')

    <!-- No Experience Option -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form action="{{ route('applicant.applications.update-step', [$application, 'experience']) }}" method="POST" id="noExperienceForm">
                @csrf
                @method('PUT')
                @php
                    $hasExperiences = $experiences->count() > 0;
                    $hasNoExperienceChecked = $application->form_data['experience']['has_no_experience'] ?? false;
                @endphp
                <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', $hasNoExperienceChecked) ? 'checked' : '' }}
                           {{ $hasExperiences ? 'disabled' : '' }}
                           onchange="toggleExperienceSection()">
                    <label class="form-check-label fw-bold {{ $hasExperiences ? 'text-muted' : 'text-primary' }}" for="has_no_experience">
                        <i class="fas fa-times-circle me-2"></i>I have no professional experience
                    </label>
                </div>
                @if($hasExperiences)
                    <small class="text-warning">
                        <i class="fas fa-info-circle me-1"></i>
                        This option is disabled because you have already added experience entries. Remove all experiences to enable this option.
                    </small>
                @else
                    <small class="text-muted">Check this box if you have no professional experience to add. This will allow you to proceed to the next step.</small>
                @endif
            </form>
        </div>
    </div>

    <!-- Experience Section -->
    <div class="card shadow" id="experienceSection" style="{{ old('has_no_experience', $application->form_data['experience']['has_no_experience'] ?? false) ? 'display: none;' : '' }}">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-briefcase me-2"></i>Professional Experience
            </h6>
        </div>
        <div class="card-body">
            @if($experiences->count() > 0)
                <!-- Show existing experiences -->
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ $experiences->count() }} experience(s) added successfully.
                    @if(!$application->isEditable())
                        <br><small class="text-muted"><i class="fas fa-lock me-1"></i>Application is finalized and cannot be edited.</small>
                    @endif
                </div>
                
                <!-- Experience Summary -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card border-primary">
                            <div class="card-body text-center">
                                <div class="h4 text-primary">{{ $experiences->where('experience_type', 'teaching')->count() }}</div>
                                <div class="small text-muted">Teaching Experience</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-success">
                            <div class="card-body text-center">
                                <div class="h4 text-success">{{ $experiences->where('experience_type', 'research')->count() }}</div>
                                <div class="small text-muted">Research Experience</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-info">
                            <div class="card-body text-center">
                                <div class="h4 text-info">{{ $experiences->where('experience_type', 'industrial')->count() }}</div>
                                <div class="small text-muted">Industry Experience</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Experience List -->
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>Type</th>
                                <th>Position</th>
                                <th>Institution/Organization</th>
                                <th>Duration</th>
                                <th>Experience</th>
                                <th>Document</th>
                                @if($application->isEditable())
                                    <th>Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($experiences as $experience)
                            <tr>
                                <td>
                                    @if($experience->experience_type)
                                        @php
                                            $badgeClasses = [
                                                'teaching' => 'bg-primary',
                                                'research' => 'bg-success', 
                                                'industrial' => 'bg-info',
                                                'existing_position' => 'bg-warning'
                                            ];
                                            $badgeClass = $badgeClasses[$experience->experience_type] ?? 'bg-secondary';
                                        @endphp
                                        <span class="badge {{ $badgeClass }} text-white">
                                            {{ $experience->getExperienceTypeLabel() }}
                                        </span>
                                    @else
                                        <span class="badge bg-secondary text-white">Not Specified</span>
                                    @endif
                                </td>
                                <td class="fw-bold">{{ $experience->position_designation }}</td>
                                <td>{{ $experience->institution_industry_name }}</td>
                                <td>
                                    {{ $experience->from_date->format('M Y') }} - 
                                    @if($experience->is_current)
                                        <span class="badge badge-success">Current</span>
                                    @else
                                        {{ $experience->to_date ? $experience->to_date->format('M Y') : 'N/A' }}
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $experience->getFormattedDuration() }}</strong>
                                </td>
                                <td>
                                    @if($experience->document_path)
                                        <a href="{{ route('applicant.experience.download-document', [$application, $experience]) }}" 
                                           class="btn btn-sm btn-outline-primary" title="Download Document">
                                            <i class="fas fa-download"></i>
                                        </a>
                                    @else
                                        <span class="text-danger fw-bold">Missing Required Document</span>
                                    @endif
                                </td>
                                @if($application->isEditable())
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('applicant.experience.show', [$application, $experience]) }}" 
                                           class="btn btn-sm btn-outline-info" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('applicant.experience.edit', [$application, $experience]) }}" 
                                           class="btn btn-sm btn-outline-primary" title="Edit Experience">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('applicant.experience.destroy', [$application, $experience]) }}" 
                                              method="POST" class="d-inline" 
                                              onsubmit="return confirm('Are you sure you want to delete this experience?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete Experience">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between">
                    <div>
                        @if($application->isEditable())
                        <a href="{{ route('applicant.experience.create', $application) }}?type=teaching" class="btn btn-success me-2">
                            <i class="fas fa-chalkboard-teacher me-2"></i>Add Teaching
                        </a>
                        <a href="{{ route('applicant.experience.create', $application) }}?type=research" class="btn btn-success me-2">
                            <i class="fas fa-microscope me-2"></i>Add Research
                        </a>
                        <a href="{{ route('applicant.experience.create', $application) }}?type=industrial" class="btn btn-success">
                            <i class="fas fa-industry me-2"></i>Add Industry
                        </a>
                        @else
                            <span class="text-muted">
                                <i class="fas fa-lock me-1"></i>Application finalized - editing disabled
                            </span>
                        @endif
                    </div>
                    
                    <div>
                        @php
                            $nextStep = $currentStep->getNextStep();
                        @endphp
                        @if($nextStep)
                            <a href="{{ route('applicant.applications.step', [$application, $nextStep->slug]) }}" class="btn btn-primary">
                                <i class="fas fa-arrow-right me-2"></i>Next: {{ $nextStep->name }}
                            </a>
                        @else
                            <a href="{{ route('applicant.applications.index') }}" class="btn btn-success">
                                <i class="fas fa-check me-2"></i>Application Complete
                            </a>
                        @endif
                    </div>
                </div>
            @else
                <!-- Show message to add experience -->
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Please add your professional experience to continue with the application process.
                </div>
                
                <!-- Experience Types Info -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card border-primary h-100">
                            <div class="card-header bg-primary text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-chalkboard-teacher me-2"></i>Teaching Experience
                                </h6>
                            </div>
                            <div class="card-body">
                                <p class="card-text">Academic positions in educational institutions including professor, lecturer, assistant professor, etc.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-success h-100">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-microscope me-2"></i>Research Experience
                                </h6>
                            </div>
                            <div class="card-body">
                                <p class="card-text">Research positions in academic institutions, research organizations, or R&D departments.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-info h-100">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-industry me-2"></i>Industry Experience
                                </h6>
                            </div>
                            <div class="card-body">
                                <p class="card-text">Professional experience in private companies, government organizations, or industry.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center py-5">
                    <i class="fas fa-briefcase fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">No Experience Added</h5>
                    <p class="text-muted mb-4">
                        Add your professional experience including teaching, research, and industry experience.
                    </p>
                    <div class="alert alert-warning mb-4">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Important:</strong> Experience proof document (certificate, appointment letter, or relieving letter) is <strong>mandatory</strong> for all experience entries.
                    </div>
                    @if($application->isEditable())
                        <div class="d-flex gap-2 justify-content-center flex-wrap">
                            <a href="{{ route('applicant.experience.create', $application) }}?type=teaching" class="btn btn-primary">
                                <i class="fas fa-chalkboard-teacher me-2"></i>Add Teaching Experience
                            </a>
                            <a href="{{ route('applicant.experience.create', $application) }}?type=research" class="btn btn-success">
                                <i class="fas fa-microscope me-2"></i>Add Research Experience
                            </a>
                            <a href="{{ route('applicant.experience.create', $application) }}?type=industrial" class="btn btn-info">
                                <i class="fas fa-industry me-2"></i>Add Industry Experience
                            </a>
                        </div>
                    @else
                        <span class="text-muted">
                            <i class="fas fa-lock me-1"></i>Application finalized - cannot add experience
                        </span>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <!-- Navigation Section -->
    <div class="card shadow mt-4" id="navigationSection">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <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>
                    @php
                        $nextStep = $currentStep->getNextStep();
                        $hasNoExperience = $application->form_data['experience']['has_no_experience'] ?? false;
                        $hasExperiences = $experiences->count() > 0;
                        $canProceed = $hasNoExperience || $hasExperiences;
                        $stepCompleted = $hasExperiences || $hasNoExperience;
                    @endphp
                    
                    @if($nextStep)
                        @if($canProceed)
                            <a href="{{ route('applicant.applications.step', [$application, $nextStep->slug]) }}" class="btn btn-primary">
                                Next: {{ $nextStep->name }} <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        @else
                            <button type="button" class="btn btn-primary" disabled title="Please add experience or check 'I have no experience' to proceed">
                                Next: {{ $nextStep->name }} <i class="fas fa-arrow-right ms-1"></i>
                            </button>
                            <br><small class="text-muted mt-1">Add experience or check "I have no experience" to proceed</small>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleExperienceSection() {
    const checkbox = document.getElementById('has_no_experience');
    const experienceSection = document.getElementById('experienceSection');
    const form = document.getElementById('noExperienceForm');
    
    // Check if checkbox is disabled (has experiences)
    if (checkbox.disabled) {
        // Prevent any action if disabled
        return false;
    }
    
    if (checkbox.checked) {
        experienceSection.style.display = 'none';
        // Auto-submit the form to save the "no experience" state
        form.submit();
    } else {
        experienceSection.style.display = 'block';
        // Auto-submit the form to clear the "no experience" state
        form.submit();
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.getElementById('has_no_experience');
    const experienceSection = document.getElementById('experienceSection');
    const hasExperiences = {{ $experiences->count() ?? 0 }};
    
    // If user has experiences, disable the checkbox and show experience section
    if (hasExperiences > 0) {
        checkbox.disabled = true;
        checkbox.checked = false; // Uncheck if experiences exist
        experienceSection.style.display = 'block';
    } else if (checkbox.checked) {
        experienceSection.style.display = 'none';
    } else {
        experienceSection.style.display = 'block';
    }
    
    // Add click handler to disabled checkbox to show message
    if (checkbox.disabled) {
        checkbox.addEventListener('click', function(e) {
            e.preventDefault();
            alert('You cannot select "no experience" because you have already added experience entries. Please remove all experiences first if you want to select this option.');
            return false;
        });
    }
});
</script>

<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;
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #5a5c69;
    font-size: 0.875rem;
}

.btn-group .btn {
    margin-right: 2px;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

.form-check-label {
    cursor: pointer;
}
</style>
@endsection