@extends('layouts.app')

@section('title', 'Teaching Experience Details')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Teaching Experience Details</h1>
                    <p class="text-gray-600 mt-1">Detailed breakdown of your teaching experience</p>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-500">Application #{{ $application->application_number }}</div>
                    @if($application->status !== 'submitted')
                    <a href="{{ route('applicant.teaching-experience-details.edit', $application) }}" 
                       class="mt-2 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors inline-block">
                        <i class="fas fa-edit mr-2"></i>Edit Details
                    </a>
                    @endif
                </div>
            </div>
        </div>

        <!-- Teaching Experience Status -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex items-center space-x-3 mb-4">
                <div class="w-8 h-8 rounded-full flex items-center justify-center
                    {{ $application->has_teaching_experience ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-600' }}">
                    <i class="fas {{ $application->has_teaching_experience ? 'fa-check' : 'fa-times' }}"></i>
                </div>
                <h2 class="text-xl font-semibold text-gray-900">
                    {{ $application->has_teaching_experience ? 'Has Teaching Experience' : 'No Teaching Experience' }}
                </h2>
            </div>
            
            @if(!$application->has_teaching_experience)
            <p class="text-gray-600">You have indicated that you do not have teaching experience.</p>
            @endif
        </div>

        @if($application->has_teaching_experience)
        <!-- Experience Details -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- Total Teaching Experience -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-clock text-blue-600 mr-2"></i>Total Teaching Experience
                </h3>
                <div class="text-2xl font-bold text-blue-600">
                    {{ $application->getFormattedTotalTeachingExperience() }}
                </div>
            </div>

            <!-- Experience after Ph.D -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-graduation-cap text-green-600 mr-2"></i>Experience after Ph.D
                </h3>
                <div class="text-2xl font-bold text-green-600">
                    {{ $application->getFormattedExperienceAfterPhd() }}
                </div>
            </div>

            <!-- Experience after AGP 6000 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-rupee-sign text-purple-600 mr-2"></i>Experience after AGP 6000 / Pay Level-10
                </h3>
                <div class="text-2xl font-bold text-purple-600">
                    {{ $application->getFormattedExperienceAfterAgp6000() }}
                </div>
            </div>

            <!-- Pay Level 7000 & 11 Experience -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-chart-line text-orange-600 mr-2"></i>Pay Level 7000 & 11 (up to 10500)
                </h3>
                <div class="text-2xl font-bold text-orange-600">
                    {{ $application->getFormattedExperiencePayLevel7000() }}
                </div>
            </div>

            <!-- Pay Level 14A Experience -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 lg:col-span-2">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-star text-red-600 mr-2"></i>Pay Level 14A Experience
                </h3>
                <div class="text-2xl font-bold text-red-600">
                    {{ $application->getFormattedExperiencePayLevel14a() }}
                </div>
            </div>
        </div>
        @endif

        <!-- Experience Summary -->
        @if($application->has_teaching_experience)
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200 p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fas fa-chart-bar text-blue-600 mr-2"></i>Experience Summary
            </h3>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
                <div>
                    <div class="text-2xl font-bold text-blue-600">
                        {{ ($application->total_teaching_experience_years ?? 0) }}
                    </div>
                    <div class="text-sm text-gray-600">Total Years</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-green-600">
                        {{ ($application->experience_after_phd_years ?? 0) }}
                    </div>
                    <div class="text-sm text-gray-600">After Ph.D</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-purple-600">
                        {{ ($application->experience_after_agp_6000_years ?? 0) }}
                    </div>
                    <div class="text-sm text-gray-600">After AGP 6000</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-orange-600">
                        {{ ($application->experience_pay_level_7000_years ?? 0) }}
                    </div>
                    <div class="text-sm text-gray-600">Pay Level 7000</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-red-600">
                        {{ ($application->experience_pay_level_14a_years ?? 0) }}
                    </div>
                    <div class="text-sm text-gray-600">Pay Level 14A</div>
                </div>
            </div>
        </div>
        @endif

        <!-- Navigation -->
        <div class="flex justify-between mt-8">
            <a href="{{ route('applicant.experience.index', $application) }}" 
               class="bg-gray-600 text-white px-6 py-2 rounded-md hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Previous: Experience
            </a>
            <a href="{{ route('applicant.subjects-taught.index', $application) }}" 
               class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors">
                Next: Subjects Taught<i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</div>
@endsection