{{-- Menggunakan layout dasar Laravel, sesuaikan jika perlu --}}
@extends('layouts.app') 

@push('scripts')
    <script>
        const MAX_FILE_SIZE = 3 * 1024 * 1024; 

            document.querySelectorAll('input[type="file"]').forEach(input => {
                const errorDiv = input.nextElementSibling;

                input.addEventListener("change", function() {
                    errorDiv.textContent = "";

                    if (input.files.length > 0) {
                        for (let file of input.files) {
                            if (file.size > MAX_FILE_SIZE) {
                                errorDiv.textContent =`"${file.name}" is too large. Max size: 3MB.`;
                                input.value = "";
                                break;
                            }
                        }
                    }
                });
            });
    </script>
@endpush

@section('content')
<div x-data="{
    activeTab: 'informasi',
    showModal: false,
    init() {
        // Jika ada error validasi, buka kembali modal saat halaman dimuat ulang
        @if ($errors->any())
            this.showModal = true;
        @endif
    }
}" x-init="init()">
    {{-- Head Section (dikelola oleh layout atau bisa ditambahkan di sini) --}}
    {{-- <x-slot name="header"> ... </x-slot> --}}

    {{-- Pelatihan Hero Section --}}
    <div class="pt-16 bg-white">
        <div class="relative h-[400px] overflow-hidden">
            <div class="absolute inset-0 bg-gray-900/60 z-10"></div>
            <img src="{{ route('course.thumbnail', $pelatihan->id) }}" alt="{{ $pelatihan->title }}" class="w-full h-full object-cover">
            <div class="absolute inset-0 z-20">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center">
                    <div class="text-white max-w-3xl">
                        <h1 class="text-4xl md:text-5xl font-bold mb-4">{{ $pelatihan->title }}</h1>
                        <p class="text-xl text-gray-200 mb-6">{{ $pelatihan->short_description }}</p>
                        <div class="flex items-center space-x-6 text-sm">
                            <div class="flex items-center">
                                {{-- Star Icon --}}
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400 mr-1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                                <span>
                                    {{-- Kalkulasi rating, max(1,...) untuk menghindari pembagian dengan nol --}}
                                    {{ number_format(5 * (($pelatihan->pelatihan_pesertas_sum_review ?? 0) / (max(1, $pelatihan->pelatihan_pesertas_review_count) * 5)), 1) }} 
                                    ({{ $pelatihan->pesertas_count }} peserta)
                                </span>
                            </div>
                            <div class="flex items-center">
                                {{-- Users Icon --}}
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                                <span>{{ number_format($pelatihan->pesertas_count) }} students</span>
                            </div>
                            <div class="flex items-center">
                                {{-- Clock Icon --}}
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                <span>Terakhir di update {{ $pelatihan->last_updated }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Main Content --}}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {{-- Left Column - Pelatihan Content --}}
            <div class="lg:col-span-2">
                {{-- Tabs Navigation --}}
                <div class="border-b border-gray-200 mb-8">
                    <nav class="flex space-x-8">
                        @foreach (['informasi', 'silabus', 'instruktur', 'peserta'] as $tab)
                            <button
                                @click="activeTab = '{{ $tab }}'"
                                :class="{
                                    'border-blue-600 text-blue-600': activeTab === '{{ $tab }}',
                                    'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== '{{ $tab }}'
                                }"
                                class="py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                            >
                                {{ ucfirst($tab) }}
                            </button>
                        @endforeach
                    </nav>
                </div>

                {{-- Tab Content --}}
                <div x-show="activeTab === 'informasi'" class="space-y-8">
                    <div>
                        <h2 class="text-2xl font-bold mb-4">Deskripsi Pelatihan</h2>
                        <p class="text-gray-600">{{ $pelatihan->description }}</p>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold mb-4">Konten Pelatihan</h2>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                            {{-- Konten item bisa dibuat menjadi Blade component jika sering digunakan --}}
                            <div class="text-center p-4 bg-white rounded-lg shadow-xs">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600 mx-auto mb-2"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
                                <div class="font-semibold">{{ $pelatihan->duration }}</div>
                                <div class="text-sm text-gray-500">Durasi Pertemuan</div>
                            </div>
                             <div class="text-center p-4 bg-white rounded-lg shadow-xs">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600 mx-auto mb-2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                <div class="font-semibold">Materi</div>
                                <div class="text-sm text-gray-500">Materi yang bisa di unduh</div>
                            </div>
                            <div class="text-center p-4 bg-white rounded-lg shadow-xs">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-graduation-cap h-8 w-8 text-blue-600 mx-auto mb-2"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"></path><path d="M22 10v6"></path><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path></svg>
                                <div class="font-semibold">Certificate</div>
                                <div class="text-sm text-gray-500">Of Completion</div>
                            </div>
                            <div class="text-center p-4 bg-white rounded-lg shadow-xs">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600 mx-auto mb-2"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
                                <div class="font-semibold">Akses Materi</div>
                                <div class="text-sm text-gray-500">Akses materi seumur hidup</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div x-show="activeTab === 'silabus'">
                    <h2 class="text-2xl font-bold mb-6">Materi Silabus</h2>
                    <div class="space-y-4">
                        @forelse ($pelatihan->pelatihan_materis as $section)
                            <div class="bg-white p-4 rounded-lg shadow-xs">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <h3 class="font-semibold text-lg">{{ $section->name }}</h3>
                                        <div class="text-sm text-gray-500 mt-1">{{ $section->code }}</div>
                                    </div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
                                </div>
                            </div>
                        @empty
                            <p class="text-gray-500">Silabus belum tersedia.</p>
                        @endforelse
                    </div>
                </div>
                
                <div x-show="activeTab === 'instruktur'">
                    <div class="bg-white p-6 rounded-lg shadow-xs">
                        <div class="flex items-start space-x-4">
                            <div>
                                <h2 class="text-2xl font-bold mb-2">{{ $pelatihan->instructor->nama }}</h2>
                                {{-- Informasi tambahan tentang instruktur bisa ditambahkan di sini --}}
                            </div>
                        </div>
                    </div>
                </div>

                <div x-show="activeTab === 'peserta'">
                     <div class="bg-white p-6 rounded-lg shadow-xs">
                        <h2 class="text-2xl font-bold mb-6">Student Reviews</h2>
                        <div class="flex items-center mb-8">
                            <div class="text-5xl font-bold text-blue-600 mr-8">{{ number_format(5 * (($pelatihan->pelatihan_pesertas_sum_review ?? 0) / (max(1, $pelatihan->pelatihan_pesertas_review_count) * 5)), 1) }}</div>
                            <div>
                                <div class="flex text-yellow-400 mb-2">
                                    {{-- Menampilkan bintang sesuai rating --}}
                                    @for ($i = 0; $i < 5; $i++)
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                                    @endfor
                                </div>
                                <div class="text-gray-600">Pelatihan Rating • {{ $pelatihan->pesertas_count }} Reviews</div>
                            </div>
                        </div>
                        {{-- Komponen review bisa ditambahkan di sini --}}
                    </div>
                </div>

            </div>

            {{-- Right Column - Pelatihan Card --}}
            <div class="lg:col-span-1">
                <div class="sticky top-24">
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                        <div class="p-6">
                            <button @click="showModal = true" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold mb-4 hover:bg-blue-700 transition-colors">
                                Daftar Sekarang
                            </button>
                            <div class="mt-6 space-y-4 text-sm">
                                <div class="flex items-center text-gray-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
                                    <span>{{ $pelatihan->start_date }} s/d {{ $pelatihan->end_date }}</span>
                                </div>
                                 <div class="flex items-center text-gray-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
                                    <span>Certificate of completion</span>
                                </div>
                                <div class="flex items-center text-gray-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg>
                                    <span>Beginner hingga Advanced</span>
                                </div>
                                 <div class="flex items-center text-gray-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
                                    <span>Indonesia</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Join Modal --}}
    <div 
        x-show="showModal" 
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
        style="display: none;"
    >
        <div 
            @click.away="showModal = false"
            class="bg-white rounded-xl max-w-4xl w-full max-h-[85vh] overflow-y-auto"
            x-show="showModal"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-90"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-90"
        >
            {{-- Modal Header --}}
            <div class="p-6 border-b border-gray-200">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-2xl font-bold">Daftar Pelatihan</h2>
                    <button @click="showModal = false" class="text-gray-500 hover:text-gray-700">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                    </button>
                </div>
                <div class="flex flex-col items-center justify-between">
                    <b>{{ $pelatihan->title }}</b>
                    <div class="text-sm text-gray-600">{{ $pelatihan->description }}</div>
                </div>
            </div>

            <div class="p-6">
                <div class="text-sm text-gray-900">Tanggal Pelatihan</div>
                <div class="text-sm text-gray-900 font-bold">{{ $pelatihan->start_date }} s/d {{ $pelatihan->end_date }}</div>

                {{-- Dynamic Form --}}
                <form 
                    action="{{ route('course.join', $pelatihan->id) }}" 
                    method="POST" 
                    enctype="multipart/form-data" 
                    class="space-y-6 mt-8"
                    x-data="{ isSubmitting: false }"
                    @submit="isSubmitting = true"
                    id="{{ $formId }}"
                >
                    @csrf
                    <input type="hidden" value="{{ $formId }}" name="formId">
                    <div class="w-full space-y-4">
                        @foreach ($pelatihan->syarat_pelatihans as $field)
                            <div class="space-y-1">
                                {{-- Hidden input untuk mengirim ID syarat --}}
                                <input type="hidden" name="syarat_pelatihan_id[]" value="{{ $field->id }}">

                                @switch($field->type)
                                    @case('checkbox')
                                        <div class="flex items-center space-x-2">
                                            <input 
                                                type="checkbox" 
                                                id="jawaban_{{ $field->id }}" 
                                                name="jawaban_{{ $field->id }}" 
                                                value="1" {{-- Checkbox butuh value --}}
                                                @if(old('jawaban_'.$field->id)) checked @endif
                                                @if($field->required === 'required') required @endif
                                                class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                                            >
                                            <label for="jawaban_{{ $field->id }}" class="ml-2 text-sm text-gray-600">
                                                {{ $field->description }}
                                                @if($field->required === 'required')<small class="text-red-500">*</small>@endif
                                            </label>
                                            @error('jawaban_'.$field->id)
                                                <small class="text-red-500">{{@$message}}</small>
                                            @enderror
                                        </div>
                                        @break

                                    @case('file')
                                        <div class="space-y-1">
                                            <label for="jawaban_{{ $field->id }}" class="block text-sm font-medium text-gray-700">
                                                {{ $field->description }} <small>(Max : 3MB)</small>
                                                @if($field->required === 'required')<small class="text-red-500">*</small>@endif
                                            </label>
                                            <input 
                                                type="file"
                                                id="jawaban_{{ $field->id }}" 
                                                name="jawaban_{{ $field->id }}"
                                                @if($field->required === 'required') required @endif
                                                class="flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm w-full"
                                                accept=".pdf,image/*"
                                            >
                                            <small class="text-red-500"></small>
                                            @error('jawaban_'.$field->id)
                                                <small class="text-red-500">{{@$message}}</small>
                                            @enderror
                                        </div>
                                        @break
                                        
                                    @default
                                        <div class="space-y-1">
                                             <label for="jawaban_{{ $field->id }}" class="block text-sm font-medium text-gray-700">
                                                {{ $field->description }}
                                                @if($field->required === 'required')<small class="text-red-500">*</small>@endif
                                            </label>
                                            <input 
                                                type="{{ $field->type }}" 
                                                id="jawaban_{{ $field->id }}" 
                                                name="jawaban_{{ $field->id }}"
                                                value="{{ old('jawaban_'.$field->id) }}"
                                                @if($field->required === 'required') required @endif
                                                placeholder="{{ $field->description }}"
                                                class="flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm w-full"
                                            >
                                            @error('jawaban_'.$field->id)
                                                <small class="text-red-500">{{@$message}}</small>
                                            @enderror
                                        </div>
                                @endswitch
                                
                                {{-- Menampilkan error validasi untuk setiap field --}}
                                @error('jawaban_' . $field->id)
                                    <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endforeach
                    </div>

                    <div class="w-full space-y-2">
                        <div class="flex items-center">
                            <input 
                                type="checkbox" 
                                id="setuju"
                                name="setuju"
                                required 
                                class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                            >
                            <label for="setuju" class="ml-2 block text-sm text-gray-600">
                                Saya telah bersedia mengikuti persyaratan yang ada pada formulir komitmen pelatihan ini.
                            </label>
                        </div>
                         @error('setuju')
                            <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                        @enderror

                        <button type="submit" :disabled="isSubmitting" class="w-full bg-[#0070BA] text-white py-3 rounded-lg font-semibold hover:bg-[#003087] transition-colors flex items-center justify-center disabled:bg-gray-400 disabled:cursor-not-allowed">
                             <span x-show="isSubmitting" class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></span>
                             <span x-show="!isSubmitting">Daftar</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection