@extends('layouts.app')

@section('title', 'Application Form')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <!-- Application Progress Sidebar -->
            <div class="card sticky-top">
                <div class="card-header">
                    <h6>Application Progress</h6>
                    <small>ID: {{ $application->application_number }}</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @php
                            $steps = [
                                'personal_info' => 'Personal Information',
                                'education' => 'Education Qualification',
                                'teaching_experience' => 'Teaching Experience',
                                'administrative_experience' => 'Administrative Experience',
                                'research_experience' => 'Research Experience',
                                'research_projects' => 'Research Projects',
                                'journal_publications' => 'Journal Publications',
                                'conference_publications' => 'Conference Publications',
                                'books' => 'Books/Chapters',
                                'patents' => 'Patents',
                                'expert_talks' => 'Expert Talks',
                                'consultancy' => 'Consultancy',
                                'conferences_organized' => 'Conferences Organized',
                                'honors' => 'Honours & Recognition',
                                'national_exposure' => 'National Exposure',
                                'international_exposure' => 'International Exposure',
                                'review' => 'Review & Finalize'
                            ];
                        @endphp
                        
                        @foreach($steps as $step => $label)
                        <a href="{{ route('applicant.applications.step', [$application->id, $step]) }}" 
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center
                                  {{ $currentStep == $step ? 'active' : '' }}">
                            <span class="small">{{ $label }}</span>
                            @if(isset($application->form_data[$step]) && !empty($application->form_data[$step]))
                                <i class="fas fa-check-circle text-success"></i>
                            @else
                                <i class="fas fa-circle text-danger"></i>
                            @endif
                        </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <h5>{{ $application->post->title }}</h5>
                    <small>{{ $application->post->department }}</small>
                </div>
                <div class="card-body">
                    @include('applicant.applications.steps.' . $currentStep)
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-save functionality
    let saveTimeout;
    $('input, textarea, select').on('input change', function() {
        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(function() {
            $('#applicationForm').submit();
        }, 2000); // Auto-save after 2 seconds of inactivity
    });
    
    // Show save indicator
    $('#applicationForm').on('submit', function(e) {
        if (!$(this).data('manual-submit')) {
            e.preventDefault();
            
            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    if (response.success) {
                        showToast('Data saved successfully', 'success');
                    }
                },
                error: function() {
                    showToast('Error saving data', 'error');
                }
            });
        }
    });
    
    function showToast(message, type) {
        // Implement toast notification
        const toast = $(`<div class="alert alert-${type == 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed" 
                          style="top: 20px; right: 20px; z-index: 9999;">
                          ${message}
                          <button type="button" class="close" data-dismiss="alert">
                              <span>&times;</span>
                          </button>
                      </div>`);
        
        $('body').append(toast);
        setTimeout(() => toast.alert('close'), 3000);
    }
});
</script>
@endpush