{{-- 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
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell