@extends('layouts.applicant.applicant')

@section('title', 'Subject Taught/Willing to Teach')

@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">Subject Taught/Willing to Teach</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">Subject Taught/Willing to Teach</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')

    <!-- Fresher Option -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form action="{{ route('applicant.applications.update-step', [$application, 'subjects-taught']) }}" method="POST" id="fresherForm">
                @csrf
                @method('PUT')
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="is_fresher" name="is_fresher" 
                           value="1" {{ old('is_fresher', $application->form_data['subjects-taught']['is_fresher'] ?? false) ? 'checked' : '' }}
                           onchange="toggleSubjectSections()">
                    <label class="form-check-label fw-bold text-primary" for="is_fresher">
                        <i class="fas fa-user-graduate me-2"></i>I am a fresher with no teaching experience
                    </label>
                </div>
                <small class="text-muted">Check this box if you are a fresher and have no prior teaching experience. This will hide the "Subjects Taught" section and only show "Willing to Teach".</small>
            </form>
        </div>
    </div>

    <!-- Requirements Alert -->
    <div class="alert alert-info mb-4">
        <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Minimum Requirements</h6>
        <div class="row">
            <div class="col-md-6">
                <strong>Subjects Taught:</strong>
                <ul class="mb-0">
                    <li>UG Level: Minimum 3 Core + 3 Elective courses</li>
                    <li>PG Level: Minimum 3 Core + 3 Elective courses</li>
                </ul>
            </div>
            <div class="col-md-6">
                <strong>Willing to Teach:</strong>
                <ul class="mb-0">
                    <li>UG Level: Minimum 3 Core + 3 Elective courses</li>
                    <li>PG Level: Minimum 3 Core + 3 Elective courses</li>
                </ul>
            </div>
        </div>
    </div>

    @php
        $subjectsTaught = $application->subjectsTaught;
        $groupedSubjects = $subjectsTaught->groupBy(['category', 'level', 'type']);
        
        // Count subjects by category, level, and type
        $counts = [];
        foreach ($subjectsTaught as $subject) {
            $counts[$subject->category][$subject->level][$subject->type] = 
                ($counts[$subject->category][$subject->level][$subject->type] ?? 0) + 1;
        }
        
        // Check missing requirements
        $missing = App\Models\SubjectTaught::checkMinimumRequirements($application->id);
    @endphp

    <!-- Missing Requirements Alert -->
    @if(!empty($missing))
    <div class="alert alert-warning mb-4">
        <h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Missing Requirements</h6>
        <div class="row">
            @foreach($missing as $item)
            <div class="col-md-6 mb-2">
                <strong>{{ ucfirst(str_replace('_', ' ', $item['category'])) }}</strong> - 
                {{ strtoupper($item['level']) }} {{ ucfirst($item['type']) }}: 
                <span class="text-danger">Need {{ $item['needed'] }} more ({{ $item['current'] }}/{{ $item['required'] }})</span>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Subjects Taught Section -->
    <div class="card shadow mb-4" id="subjectsTaughtSection">
        <div class="card-header py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-chalkboard-teacher me-2"></i>Subjects Taught
                </h6>
                @if($application->isEditable())
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addSubjectModal" onclick="setModalCategory('taught')">
                    <i class="fas fa-plus me-1"></i>Add Subject Taught
                </button>
                @endif
            </div>
        </div>
        <div class="card-body">
            @if($subjectsTaught->where('category', 'taught')->count() > 0)
                @foreach(['ug' => 'Undergraduate (UG)', 'pg' => 'Postgraduate (PG)'] as $level => $levelLabel)
                    @if($subjectsTaught->where('category', 'taught')->where('level', $level)->count() > 0)
                    <h6 class="text-primary mb-3">{{ $levelLabel }}</h6>
                    <div class="row mb-4">
                        @foreach(['core' => 'Core Courses', 'elective' => 'Elective Courses'] as $type => $typeLabel)
                            @php $subjects = $subjectsTaught->where('category', 'taught')->where('level', $level)->where('type', $type); @endphp
                            @if($subjects->count() > 0)
                            <div class="col-md-6">
                                <h6 class="text-secondary">{{ $typeLabel }} ({{ $subjects->count() }})</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Course Name</th>
                                                <th>Code</th>
                                                <th>Credits</th>
                                                @if($application->isEditable())
                                                <th>Actions</th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($subjects as $subject)
                                            <tr>
                                                <td>{{ $subject->course_name }}</td>
                                                <td>{{ $subject->course_code ?? '-' }}</td>
                                                <td>{{ $subject->credits ?? '-' }}</td>
                                                @if($application->isEditable())
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-outline-primary me-1" 
                                                            onclick="editSubject({{ $subject->id }})" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                                            onclick="deleteSubject({{ $subject->id }})" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                                @endif
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            @endif
                        @endforeach
                    </div>
                    @endif
                @endforeach
            @else
                <div class="text-center py-4">
                    <i class="fas fa-chalkboard-teacher fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No Subjects Taught Added</h5>
                    <p class="text-muted">Add the subjects you have taught at UG and PG levels.</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Willing to Teach Section -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-success">
                    <i class="fas fa-heart me-2"></i>Willing to Teach
                </h6>
                @if($application->isEditable())
                <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addSubjectModal" onclick="setModalCategory('willing_to_teach')">
                    <i class="fas fa-plus me-1"></i>Add Willing to Teach
                </button>
                @endif
            </div>
        </div>
        <div class="card-body">
            @if($subjectsTaught->where('category', 'willing_to_teach')->count() > 0)
                @foreach(['ug' => 'Undergraduate (UG)', 'pg' => 'Postgraduate (PG)'] as $level => $levelLabel)
                    @if($subjectsTaught->where('category', 'willing_to_teach')->where('level', $level)->count() > 0)
                    <h6 class="text-success mb-3">{{ $levelLabel }}</h6>
                    <div class="row mb-4">
                        @foreach(['core' => 'Core Courses', 'elective' => 'Elective Courses'] as $type => $typeLabel)
                            @php $subjects = $subjectsTaught->where('category', 'willing_to_teach')->where('level', $level)->where('type', $type); @endphp
                            @if($subjects->count() > 0)
                            <div class="col-md-6">
                                <h6 class="text-secondary">{{ $typeLabel }} ({{ $subjects->count() }})</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Course Name</th>
                                                <th>Code</th>
                                                <th>Credits</th>
                                                @if($application->isEditable())
                                                <th>Actions</th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($subjects as $subject)
                                            <tr>
                                                <td>{{ $subject->course_name }}</td>
                                                <td>{{ $subject->course_code ?? '-' }}</td>
                                                <td>{{ $subject->credits ?? '-' }}</td>
                                                @if($application->isEditable())
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-outline-primary me-1" 
                                                            onclick="editSubject({{ $subject->id }})" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                                            onclick="deleteSubject({{ $subject->id }})" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                                @endif
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            @endif
                        @endforeach
                    </div>
                    @endif
                @endforeach
            @else
                <div class="text-center py-4">
                    <i class="fas fa-heart fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No Subjects Added for Willing to Teach</h5>
                    <p class="text-muted">Add the subjects you are willing to teach at UG and PG levels.</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Navigation -->
    <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>
            @php
                $nextStep = $currentStep->getNextStep();
            @endphp
            @if($nextStep)
                <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>
            @endif
        </div>
    </div>
</div>

<!-- Add/Edit Subject Modal -->
@if($application->isEditable())
<div class="modal fade" id="addSubjectModal" tabindex="-1" aria-labelledby="addSubjectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addSubjectModalLabel">Add Subject</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="subjectForm" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="subject_id" name="subject_id">
                    <input type="hidden" id="form_category" name="category">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="course_name" class="form-label">Course Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="course_name" name="course_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="course_code" class="form-label">Course Code</label>
                                <input type="text" class="form-control" id="course_code" name="course_code">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="level" class="form-label">Level <span class="text-danger">*</span></label>
                                <select class="form-select" id="level" name="level" required>
                                    <option value="">Select Level</option>
                                    <option value="ug">Undergraduate (UG)</option>
                                    <option value="pg">Postgraduate (PG)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="type" class="form-label">Type <span class="text-danger">*</span></label>
                                <select class="form-select" id="type" name="type" required>
                                    <option value="">Select Type</option>
                                    <option value="core">Core Course</option>
                                    <option value="elective">Elective Course</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="credits" class="form-label">Credits</label>
                                <input type="number" class="form-control" id="credits" name="credits" min="1" max="10">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="duration" class="form-label">Duration</label>
                                <input type="text" class="form-control" id="duration" name="duration" placeholder="e.g., 1 semester, 2 semesters">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="university_board" class="form-label">Institution Name</label>
                                <input type="text" class="form-control" id="university_board" name="university_board" placeholder="e.g., NIT Hamirpur, Delhi University">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="course_description" class="form-label">Course Description</label>
                        <textarea class="form-control" id="course_description" name="course_description" rows="3"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="syllabus_topics" class="form-label">Syllabus Topics</label>
                        <textarea class="form-control" id="syllabus_topics" name="syllabus_topics" rows="3" placeholder="List main topics covered in the course"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Subject</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<script>
let currentCategory = 'taught';

// Toggle subject sections based on fresher checkbox
function toggleSubjectSections() {
    const isFresher = document.getElementById('is_fresher').checked;
    const subjectsTaughtSection = document.getElementById('subjectsTaughtSection');
    const requirementsAlert = document.querySelector('.alert-info');
    const missingAlert = document.querySelector('.alert-warning');
    
    // Update visibility immediately
    if (isFresher) {
        subjectsTaughtSection.style.display = 'none';
        if (requirementsAlert) {
            requirementsAlert.style.display = 'none';
        }
        if (missingAlert) {
            missingAlert.style.display = 'none';
        }
    } else {
        subjectsTaughtSection.style.display = 'block';
        if (requirementsAlert) {
            requirementsAlert.style.display = 'block';
        }
        if (missingAlert) {
            missingAlert.style.display = 'block';
        }
    }
    
    // Save the fresher status via AJAX to avoid page reload
    saveFresherStatus(isFresher);
}

// Save fresher status via AJAX
function saveFresherStatus(isFresher) {
    const formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('_method', 'PUT');
    if (isFresher) {
        formData.append('is_fresher', '1');
    }
    
    fetch('{{ route("applicant.applications.update-step", [$application, "subjects-taught"]) }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        },
    })
    .then(response => {
        if (response.ok) {
            // Show a subtle success indicator
            showSuccessMessage(isFresher ? 'Fresher status saved. Subjects Taught section hidden.' : 'Fresher status updated. Subjects Taught section shown.');
        } else {
            console.error('Failed to save fresher status');
        }
    })
    .catch(error => {
        console.error('Error saving fresher status:', error);
    });
}

// Show success message
function showSuccessMessage(message) {
    // Remove any existing success message
    const existingMessage = document.querySelector('.fresher-success-message');
    if (existingMessage) {
        existingMessage.remove();
    }
    
    // Create and show new success message
    const successDiv = document.createElement('div');
    successDiv.className = 'alert alert-success alert-dismissible fade show fresher-success-message';
    successDiv.innerHTML = `
        <i class="fas fa-check-circle me-2"></i>${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    
    // Insert after the fresher form
    const fresherForm = document.getElementById('fresherForm').closest('.card');
    fresherForm.insertAdjacentElement('afterend', successDiv);
    
    // Auto-hide after 3 seconds
    setTimeout(() => {
        if (successDiv && successDiv.parentNode) {
            successDiv.remove();
        }
    }, 3000);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const isFresher = document.getElementById('is_fresher').checked;
    if (isFresher) {
        const subjectsTaughtSection = document.getElementById('subjectsTaughtSection');
        const requirementsAlert = document.querySelector('.alert-info');
        const missingAlert = document.querySelector('.alert-warning');
        
        subjectsTaughtSection.style.display = 'none';
        if (requirementsAlert) {
            requirementsAlert.style.display = 'none';
        }
        if (missingAlert) {
            missingAlert.style.display = 'none';
        }
    }
});

function setModalCategory(category) {
    currentCategory = category;
    document.getElementById('form_category').value = category;
    document.getElementById('addSubjectModalLabel').textContent = 
        category === 'taught' ? 'Add Subject Taught' : 'Add Subject Willing to Teach';
    
    // Reset form
    document.getElementById('subjectForm').reset();
    document.getElementById('subject_id').value = '';
    document.getElementById('form_category').value = category;
                    document.getElementById('subjectForm').action = '{{ route("applicant.subjects-taught.store", $application) }}';
}

function editSubject(subjectId) {
    // Fetch subject data and populate modal
    fetch(`{{ route("applicant.subjects-taught.show", [$application, "SUBJECT_ID"]) }}`.replace('SUBJECT_ID', subjectId))
        .then(response => response.json())
        .then(data => {
            document.getElementById('subject_id').value = data.id;
            document.getElementById('form_category').value = data.category;
            document.getElementById('course_name').value = data.course_name;
            document.getElementById('course_code').value = data.course_code || '';
            document.getElementById('level').value = data.level;
            document.getElementById('type').value = data.type;
            document.getElementById('credits').value = data.credits || '';
            document.getElementById('duration').value = data.duration || '';
            document.getElementById('university_board').value = data.university_board || '';
            document.getElementById('course_description').value = data.course_description || '';
            document.getElementById('syllabus_topics').value = data.syllabus_topics || '';
            
            document.getElementById('addSubjectModalLabel').textContent = 'Edit Subject';
            document.getElementById('subjectForm').action = 
                `{{ route("applicant.subjects-taught.update", [$application, "SUBJECT_ID"]) }}`.replace('SUBJECT_ID', subjectId);
            
            // Show modal
            new bootstrap.Modal(document.getElementById('addSubjectModal')).show();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error loading subject data');
        });
}

function deleteSubject(subjectId) {
    if (confirm('Are you sure you want to delete this subject?')) {
        fetch(`{{ route("applicant.subjects-taught.destroy", [$application, "SUBJECT_ID"]) }}`.replace('SUBJECT_ID', subjectId), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error deleting subject');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error deleting subject');
        });
    }
}

// Handle form submission
document.getElementById('subjectForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const isEdit = document.getElementById('subject_id').value !== '';
    
    if (isEdit) {
        formData.append('_method', 'PUT');
    }
    
    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error saving subject: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error saving subject');
    });
});
</script>

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

.table td {
    vertical-align: middle;
    font-size: 0.875rem;
}

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

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.alert {
    border: none;
    border-radius: 0.5rem;
}

.modal-content {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
</style>
@endsection