@extends('user.layout.master')
@section('title', 'View Resume')
@section('content')
<main class="relative h-full max-h-screen transition-all duration-200 ease-in-out xl:ml-68 rounded-xl">
  <div class="w-full px-6 py-6 mx-auto">
    <div class="flex-none w-full max-w-full">
      <div class="relative flex flex-col min-w-0 mb-6 break-words bg-white dark:bg-slate-850 border-0 border-transparent shadow-xl rounded-2xl bg-clip-border">

        <!-- Header -->
        <div class="p-6 pb-0 mb-0 border-b border-slate-200 dark:border-slate-700 rounded-t-2xl">
          <div class="flex justify-between items-center">
            <h6 class="text-xl font-bold text-slate-700 dark:text-white">{{ $resume->name }}'s Resume</h6>
            <div class="flex space-x-3">
              <a href="{{ route('user.resumes.edit', $resume->id) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <i class="fas fa-edit mr-2"></i>
                Edit
              </a>
              <a href="{{ route('user.resumes.download', $resume->id) }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
                <i class="fas fa-download mr-2"></i>
                Download PDF
              </a>
              <a href="{{ route('user.resumes.index') }}" class="inline-flex items-center px-4 py-2 bg-slate-600 text-white text-sm font-medium rounded-lg hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500">
                <i class="fas fa-arrow-left mr-2"></i>
                Back
              </a>
            </div>
          </div>
        </div>

        <!-- Content -->
        <div class="p-6">
          <!-- Personal Information -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold text-slate-700 dark:text-white mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">Personal Information</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Full Name</label>
                <p class="text-slate-700 dark:text-slate-300 font-medium">{{ $resume->name }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Email</label>
                <p class="text-slate-700 dark:text-slate-300">{{ $resume->email }}</p>
              </div>
              @if($resume->phone)
                <div>
                  <label class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Phone</label>
                  <p class="text-slate-700 dark:text-slate-300">{{ $resume->phone }}</p>
                </div>
              @endif
              @if($resume->location)
                <div>
                  <label class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Location</label>
                  <p class="text-slate-700 dark:text-slate-300">{{ $resume->location }}</p>
                </div>
              @endif
              @if($resume->website)
                <div class="md:col-span-2">
                  <label class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Website/Portfolio</label>
                  <a href="{{ $resume->website }}" target="_blank" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">{{ $resume->website }}</a>
                </div>
              @endif
            </div>
          </div>

          <!-- Professional Summary -->
          @if($resume->summary)
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-slate-700 dark:text-white mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">Professional Summary</h3>
              <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-4">
                <p class="text-slate-700 dark:text-slate-300 leading-relaxed">{{ $resume->summary }}</p>
              </div>
            </div>
          @endif

          <!-- Work Experience -->
          @if($resume->experiences->count() > 0)
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-slate-700 dark:text-white mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">Work Experience</h3>
              <div class="space-y-6">
                @foreach($resume->experiences as $experience)
                  <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-6">
                    <div class="flex justify-between items-start mb-3">
                      <div>
                        <h4 class="text-lg font-semibold text-slate-800 dark:text-white">{{ $experience->position }}</h4>
                        <p class="text-blue-600 dark:text-blue-400 font-medium">{{ $experience->company }}</p>
                      </div>
                      <div class="text-right">
                        <p class="text-sm text-slate-600 dark:text-slate-400">
                          @if($experience->start_date)
                            {{ $experience->start_date->format('M Y') }}
                          @endif
                          @if($experience->start_date && $experience->end_date)
                            -
                          @endif
                          @if($experience->end_date)
                            {{ $experience->end_date->format('M Y') }}
                          @elseif($experience->start_date)
                            Present
                          @endif
                        </p>
                      </div>
                    </div>
                    @if($experience->description)
                      <div class="mt-3">
                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed">{{ $experience->description }}</p>
                      </div>
                    @endif
                  </div>
                @endforeach
              </div>
            </div>
          @endif

          <!-- Education -->
          @if($resume->educations->count() > 0)
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-slate-700 dark:text-white mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">Education</h3>
              <div class="space-y-6">
                @foreach($resume->educations as $education)
                  <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-6">
                    <div class="flex justify-between items-start mb-3">
                      <div>
                        <h4 class="text-lg font-semibold text-slate-800 dark:text-white">{{ $education->degree }}</h4>
                        <p class="text-blue-600 dark:text-blue-400 font-medium">{{ $education->institution }}</p>
                        @if($education->field_of_study)
                          <p class="text-slate-600 dark:text-slate-400">{{ $education->field_of_study }}</p>
                        @endif
                        @if($education->gpa)
                          <p class="text-slate-600 dark:text-slate-400">GPA: {{ $education->gpa }}</p>
                        @endif
                      </div>
                      <div class="text-right">
                        <p class="text-sm text-slate-600 dark:text-slate-400">
                          @if($education->start_date)
                            {{ $education->start_date->format('M Y') }}
                          @endif
                          @if($education->start_date && $education->end_date)
                            -
                          @endif
                          @if($education->end_date)
                            {{ $education->end_date->format('M Y') }}
                          @elseif($education->start_date)
                            Present
                          @endif
                        </p>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
          @endif

          <!-- Skills -->
          @if($resume->skills->count() > 0)
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-slate-700 dark:text-white mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">Skills</h3>
              <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  @foreach($resume->skills as $skill)
                    <div class="flex justify-between items-center">
                      <span class="text-slate-700 dark:text-slate-300 font-medium">{{ $skill->name }}</span>
                      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                        @if($skill->level === 'beginner') bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400
                        @elseif($skill->level === 'intermediate') bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400
                        @elseif($skill->level === 'advanced') bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400
                        @elseif($skill->level === 'expert') bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400
                        @endif">
                        {{ ucfirst($skill->level) }}
                      </span>
                    </div>
                  @endforeach
                </div>
              </div>
            </div>
          @endif

          <!-- Resume Metadata -->
          <div class="mt-8 pt-6 border-t border-slate-200 dark:border-slate-700">
            <div class="flex justify-between items-center text-sm text-slate-500 dark:text-slate-400">
              <div>
                <p>Created: {{ $resume->created_at->format('F d, Y') }}</p>
                <p>Last updated: {{ $resume->updated_at->format('F d, Y') }}</p>
              </div>
              <div class="text-right">
                <p>Resume ID: #{{ $resume->id }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
@endsection