@extends('layouts.app')

@section('title', 'Pelatihan TIK')
@section('meta_description', 'Program pelatihan TIK profesional dari Instrudigi. Tingkatkan kompetensi Anda di bidang teknologi informasi.')

@section('content')

{{-- HERO --}}
<section class="relative py-28 overflow-hidden -mt-20 pt-28">
    <div class="absolute inset-0 hero-gradient"></div>
    <div class="hero-mesh"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10 text-center">
        <span class="text-overline text-accent/80 block mb-4">Pelatihan</span>
        <h1 class="text-display text-4xl md:text-5xl text-white mb-4" style="animation: textReveal 1s ease forwards;">Program <span class="text-gradient-accent">Pelatihan TIK</span></h1>
        <p class="text-white/50 max-w-xl mx-auto">Tingkatkan kompetensi Anda melalui program pelatihan profesional yang didesain untuk praktisi TIK.</p>
    </div>
    <div class="wave-divider"><svg viewBox="0 0 1200 120" preserveAspectRatio="none" fill="#fafbfd"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C57.1,118.92,156.63,69.08,321.39,56.44Z"/></svg></div>
</section>

{{-- CONTENT --}}
<section class="py-16 max-w-7xl mx-auto px-4 sm:px-6">
    @if($trainings->isNotEmpty())
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" data-stagger="80">
        @foreach($trainings as $index => $training)
        <div class="animate-on-scroll">
            <a href="{{ route('trainings.show', $training->slug) }}" class="block card-elevated group h-full">
                @if($training->cover_image)
                <div class="img-zoom aspect-video bg-surface-100">
                    <img src="{{ $training->cover_url }}" alt="{{ $training->title }}" class="w-full h-full object-cover" loading="lazy">
                </div>
                @endif
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        @if($training->status === 'full')
                        <span class="bg-red-500/10 text-red-500 text-xs px-3 py-1.5 rounded-full font-semibold">Kuota Penuh</span>
                        @else
                        <span class="bg-green-500/10 text-green-600 text-xs px-3 py-1.5 rounded-full font-semibold badge-pulse">Tersedia</span>
                        @endif
                        <svg class="w-5 h-5 text-surface-300 group-hover:text-accent group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </div>

                    <h3 class="font-heading font-bold text-gray-900 text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors">{{ $training->title }}</h3>

                    @if($training->short_description)
                    <p class="text-surface-500 text-sm line-clamp-2 leading-relaxed mb-4">{{ $training->short_description }}</p>
                    @endif

                    {{-- Quota Progress --}}
                    @if($training->quota && $training->registered_count !== null)
                    <div class="mb-4">
                        @php $percent = min(100, ($training->registered_count / $training->quota) * 100); @endphp
                        <div class="flex justify-between text-xs text-surface-400 mb-1.5">
                            <span>{{ $training->registered_count }}/{{ $training->quota }} peserta</span>
                            <span>{{ round($percent) }}%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-bar-fill" style="width: {{ $percent }}%"></div>
                        </div>
                    </div>
                    @endif

                    <div class="flex items-center gap-4 text-xs text-surface-400 pt-4 border-t border-surface-100">
                        @if($training->schedule)
                        <span class="flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5 text-accent/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            {{ $training->schedule }}
                        </span>
                        @endif
                        @if($training->location)
                        <span class="flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5 text-accent/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
                            {{ $training->location }}
                        </span>
                        @endif
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>

    <div class="mt-12 pagination-wrapper">
        {{ $trainings->links() }}
    </div>
    @else
    <div class="text-center py-20 animate-on-scroll">
        <div class="w-20 h-20 bg-surface-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-10 h-10 text-surface-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347"/></svg>
        </div>
        <h3 class="font-heading font-bold text-gray-900 text-xl mb-2">Belum ada pelatihan</h3>
        <p class="text-surface-500 text-sm">Saat ini belum ada program pelatihan yang tersedia.</p>
    </div>
    @endif
</section>

@endsection