Done Bismillah
This commit is contained in:
parent
e718c10a60
commit
fce63d76a2
|
@ -18,25 +18,37 @@
|
|||
class AdminDataKursusController extends Controller
|
||||
{
|
||||
|
||||
// ADMIN FADIAS TUKANG SERVER
|
||||
public function dataKursus()
|
||||
public function dataKursus(Request $request)
|
||||
{
|
||||
// Mengambil semua data kursus dari model DataKursus
|
||||
$courses = DataKursus::with('kategoris')
|
||||
->where('user_id', auth()->id()) // Filter berdasarkan user yang login
|
||||
->paginate(10);
|
||||
$query = DataKursus::with('kategoris')
|
||||
->where('user_id', auth()->id()); // Filter berdasarkan user login
|
||||
|
||||
// Mengambil gambar untuk setiap course, jika ada
|
||||
// Filter berdasarkan pencarian
|
||||
if ($request->has('search') && !empty($request->search)) {
|
||||
$query->where('nama_kursus', 'like', '%' . $request->search . '%');
|
||||
}
|
||||
|
||||
// Filter berdasarkan kategori (jika dipilih)
|
||||
if ($request->has('role') && !empty($request->role)) {
|
||||
$query->whereHas('kategoris', function ($q) use ($request) {
|
||||
$q->where('nama_kategori', $request->role);
|
||||
});
|
||||
}
|
||||
$kategoriList = DataKategori::all();
|
||||
// Ambil data dengan paginasi
|
||||
$courses = $query->paginate(10);
|
||||
|
||||
// Ambil gambar untuk setiap course
|
||||
foreach ($courses as $course) {
|
||||
$course->imageNames = $course->img_konten ? json_decode($course->img_konten, true) : [];
|
||||
}
|
||||
|
||||
// Mengirim data courses dengan gambar ke view
|
||||
return view('admin.dataKursusAdmin', ['courses' => $courses]);
|
||||
return view('admin.dataKursusAdmin', compact('courses', 'kategoriList'));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
public function create()
|
||||
{
|
||||
$kategori = DataKategori::all();
|
||||
|
|
|
@ -11,15 +11,23 @@ class KategoriController extends Controller
|
|||
/**
|
||||
* Display a listing of the resource.
|
||||
*/
|
||||
public function index()
|
||||
public function index(Request $request)
|
||||
{
|
||||
// Mengambil semua data kursus dari model DataKursus
|
||||
$kategori = DataKategori::paginate(10);
|
||||
$query = DataKategori::query();
|
||||
|
||||
// Mengirim data courses dengan gambar ke view
|
||||
// Cek apakah ada input pencarian
|
||||
if ($request->has('search') && !empty($request->search)) {
|
||||
$query->where('nama_kategori', 'like', '%' . $request->search . '%');
|
||||
}
|
||||
|
||||
// Ambil data dengan paginasi
|
||||
$kategori = $query->paginate(10);
|
||||
|
||||
// Kirim data ke view
|
||||
return view('admin.dataKategoriAdmin', compact('kategori'));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Show the form for creating a new resource.
|
||||
*/
|
||||
|
|
|
@ -59,7 +59,7 @@ public function authenticate(Request $request)
|
|||
|
||||
if ($role === 'pengunjung') {
|
||||
session(['is_pengunjung_logged_in' => true]); // Status pengunjung
|
||||
return redirect()->route('pengunjung.home'); // Redirect ke halaman pengunjung
|
||||
return redirect()->route('user.home'); // Redirect ke halaman pengunjung
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -110,7 +110,7 @@ public function detail(string $id)
|
|||
|
||||
// Ambil data kursus beserta ulasan dan kategorinya
|
||||
$data = DataKursus::with('kategoris', 'ulasan')->find($id);
|
||||
|
||||
$data->fasilitas = json_decode($data->fasilitas, true);
|
||||
if (!$data) {
|
||||
abort(404, 'Kursus tidak ditemukan');
|
||||
}
|
||||
|
|
|
@ -50,25 +50,25 @@ public function run(): void
|
|||
['nama_kategori' => 'Good Evening'],
|
||||
]);
|
||||
|
||||
// // Buat 3 kategori, setiap kategori memiliki banyak kursus
|
||||
// // Buat 3 kategori
|
||||
$kategoris = DataKategori::factory(3)->create();
|
||||
// // // Buat 3 kategori, setiap kategori memiliki banyak kursus
|
||||
// // // Buat 3 kategori
|
||||
// $kategoris = DataKategori::factory(3)->create();
|
||||
|
||||
// Buat kursus hingga total 20 data
|
||||
$totalKursus = 20;
|
||||
$kategoris->each(function ($kategori) use ($totalKursus, $kategoris) {
|
||||
$jumlahKursusPerKategori = floor($totalKursus / $kategoris->count());
|
||||
DataKursus::factory($jumlahKursusPerKategori)->create([
|
||||
'kategori_id' => $kategori->id,
|
||||
]);
|
||||
});
|
||||
// // Buat kursus hingga total 20 data
|
||||
// $totalKursus = 20;
|
||||
// $kategoris->each(function ($kategori) use ($totalKursus, $kategoris) {
|
||||
// $jumlahKursusPerKategori = floor($totalKursus / $kategoris->count());
|
||||
// DataKursus::factory($jumlahKursusPerKategori)->create([
|
||||
// 'kategori_id' => $kategori->id,
|
||||
// ]);
|
||||
// });
|
||||
|
||||
// Jika ada sisa karena pembagian tidak rata, tambahkan ke kategori pertama
|
||||
$sisa = $totalKursus % $kategoris->count();
|
||||
if ($sisa > 0) {
|
||||
DataKursus::factory($sisa)->create([
|
||||
'kategori_id' => $kategoris->first()->id,
|
||||
]);
|
||||
}
|
||||
// // Jika ada sisa karena pembagian tidak rata, tambahkan ke kategori pertama
|
||||
// $sisa = $totalKursus % $kategoris->count();
|
||||
// if ($sisa > 0) {
|
||||
// DataKursus::factory($sisa)->create([
|
||||
// 'kategori_id' => $kategoris->first()->id,
|
||||
// ]);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
"alpinejs": "^3.4.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"axios": "^1.1.2",
|
||||
"flowbite": "^3.0.0",
|
||||
"flowbite": "^3.1.2",
|
||||
"laravel-mix": "^6.0.49",
|
||||
"laravel-vite-plugin": "^0.7.2",
|
||||
"postcss": "^8.5.1",
|
||||
|
@ -5939,15 +5939,16 @@
|
|||
}
|
||||
},
|
||||
"node_modules/flowbite": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-3.0.0.tgz",
|
||||
"integrity": "sha512-5FyZOzsD6iER+iEm+NnqtzTdBVXOjG2HhuuAjOWmqTlz4GK/tVkXHJoY41lnHBMSHlFPM4aPcppnXrzPYL3vYA==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-3.1.2.tgz",
|
||||
"integrity": "sha512-MkwSgbbybCYgMC+go6Da5idEKUFfMqc/AmSjm/2ZbdmvoKf5frLPq/eIhXc9P+rC8t9boZtUXzHDgt5whZ6A/Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.9.3",
|
||||
"flowbite-datepicker": "^1.3.1",
|
||||
"mini-svg-data-uri": "^1.4.3"
|
||||
"mini-svg-data-uri": "^1.4.3",
|
||||
"postcss": "^8.5.1"
|
||||
}
|
||||
},
|
||||
"node_modules/flowbite-datepicker": {
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
"alpinejs": "^3.4.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"axios": "^1.1.2",
|
||||
"flowbite": "^3.0.0",
|
||||
"flowbite": "^3.1.2",
|
||||
"laravel-mix": "^6.0.49",
|
||||
"laravel-vite-plugin": "^0.7.2",
|
||||
"postcss": "^8.5.1",
|
||||
|
|
|
@ -1 +1 @@
|
|||
import 'flowbite';
|
||||
import 'flowbite';
|
||||
|
|
|
@ -10,8 +10,26 @@
|
|||
class="bg-gradient-to-tr from-[#60BC9D] to-[#12372A] py-2 px-4 rounded-md shadow-md shadow-gray-600 hover:bg-[#3F6A6B] text-white text-5x1 poppins-regular"
|
||||
href="{{ route('kategori.create') }}">Tambah Data</button>
|
||||
</div>
|
||||
<div class="flex justify-end items-center pb-4 ">
|
||||
<form class="max-w-lg w-full" method="GET" action="{{ route('kategori.index') }}">
|
||||
<div
|
||||
class="relative w-full overflow-hidden rounded-lg border border-gray-300 focus-within:ring-2 focus-within:ring-blue-500">
|
||||
<input type="search" name="search" value="{{ request('search') }}"
|
||||
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 border-none focus:ring-0"
|
||||
placeholder="Search Kategori..." />
|
||||
<button type="submit"
|
||||
class="absolute top-0 end-0 p-2.5 h-full text-white bg-gradient-to-tr from-[#60BC9D] to-[#12372A] hover:bg-green-800 focus:ring-2 focus:ring-blue-300">
|
||||
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
|
||||
</svg>
|
||||
<span class="sr-only">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{ $kategori->links() }}
|
||||
|
||||
<div class="relative overflow-x-auto sm:rounded-lg poppins-regular">
|
||||
<table class="w-full text-sm text-gray-700 shadow-md border border-gray-300 rounded-lg overflow-hidden">
|
||||
<thead class="text-xs uppercase bg-gray-100 border-b border-gray-300">
|
||||
|
@ -118,8 +136,8 @@ class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50
|
|||
<button type="button"
|
||||
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center "
|
||||
data-modal-hide="default-modal-edit-kategori{{ $kategoris->id }}">
|
||||
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 14 14">
|
||||
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
||||
</svg>
|
||||
|
@ -130,8 +148,8 @@ class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounde
|
|||
action="{{ route('kategori.update', $kategoris->id) }}">
|
||||
@csrf <!-- Token CSRF -->
|
||||
@method('PUT') <!-- Menggunakan metode PUT -->
|
||||
<input hidden value="{{ $kategoris->id }}" type="text" id="edit-idkategori" name="id"
|
||||
required>
|
||||
<input hidden value="{{ $kategoris->id }}" type="text" id="edit-idkategori"
|
||||
name="id" required>
|
||||
|
||||
<div class="px-4 pb-4 items-center">
|
||||
<label for="detail_kategori"
|
||||
|
|
|
@ -8,7 +8,37 @@
|
|||
<a class="bg-gradient-to-tr from-[#60BC9D] to-[#12372A] py-2 px-4 rounded-xl shadow-md shadow-gray-600 hover:bg-[#3F6A6B] text-white text-5x1 poppins-regular"
|
||||
href="{{ route('admin.create') }}">Tambah Data</a>
|
||||
</div>
|
||||
<div class="flex justify-end items-center pb-4 ">
|
||||
<form class="max-w-lg w-full" method="GET" action="{{ route('admin.dataKursus') }}">
|
||||
<div class="flex">
|
||||
<select name="role" id="role"
|
||||
class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100">
|
||||
<option value="" {{ request('role') == '' ? 'selected' : '' }}>All Categories</option>
|
||||
@foreach ($kategoriList as $kategori)
|
||||
<option value="{{ $kategori->nama_kategori }}"
|
||||
{{ request('role') == $kategori->nama_kategori ? 'selected' : '' }}>
|
||||
{{ $kategori->nama_kategori }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="relative w-full">
|
||||
<input type="search" name="search" value="{{ request('search') }}"
|
||||
class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Search kursus..." />
|
||||
<button type="submit"
|
||||
class="absolute top-0 end-0 p-2.5 h-full text-white bg-gradient-to-tr from-[#60BC9D] to-[#12372A] rounded-e-lg border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
|
||||
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
|
||||
</svg>
|
||||
<span class="sr-only">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
{{ $courses->links() }}
|
||||
<div class="relative overflow-x-auto sm:rounded-lg">
|
||||
<table class="w-full text-sm text-gray-700 shadow-md border border-gray-300 rounded-lg overflow-hidden">
|
||||
|
@ -189,7 +219,7 @@ class="py-2.5 px-5 ms-3 text-sm poppins-regular text-gray-900 focus:outline-none
|
|||
class="hidden overflow-y-auto fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
||||
<div class="relative p-4 w-full max-w-2xl xl:max-w-5xl max-h-full">
|
||||
<!-- Modal content -->
|
||||
<div class="relative rounded-lg shadow dark:bg-gray-700 bg-[#4F7F81]">
|
||||
<div class="relative rounded-lg shadow bg-[#4F7F81]">
|
||||
<!-- Modal body -->
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="">
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
@include('components.navbarAdmin')
|
||||
<div class="p-4 sm:ml-64">
|
||||
<div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">
|
||||
<div class="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -19,7 +19,7 @@ class="self-center pt-6 text-4xl text-white barlow-condensed-semibold whitespace
|
|||
</h2>
|
||||
<ul class="text-white poppins-regular space-y-4">
|
||||
<li class="">
|
||||
<a href="/beranda" class="hover:underline">Beranda</a>
|
||||
<a href="/" class="hover:underline">Beranda</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/kursus" class="hover:underline">Kursus</a>
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
<div class="flex justify-center ">
|
||||
<nav class="container px-4 top-4 fixed z-[999] ">
|
||||
<div class="flex justify-between py-2 items-center shadow-lg bg-white px-4 rounded-full text-white">
|
||||
<nav class="w-full md:container md:px-4 md:top-4 fixed z-[999] ">
|
||||
<div class="flex justify-between py-1 md:py-2 items-center shadow-lg bg-white px-4 md:rounded-full text-white">
|
||||
<a href="#" class="flex items-center">
|
||||
<svg class="h-7 w-7 text-green-700" viewBox="0 0 24 24" fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 2C8 2 5 5 5 9c0 5 7 11 7 11s7-6 7-11c0-4-3-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z" />
|
||||
</svg>
|
||||
<span class="text-2xl font-semibold text-green-800">LearnMap</span>
|
||||
<span class="text-sm lg:text-xl 2xl:text-2xl font-semibold text-green-800">LearnMap</span>
|
||||
</a>
|
||||
<div class="hidden md:flex" id="navbar-menu">
|
||||
<ul class="flex space-x-8 text-lg poppins-regular">
|
||||
<ul class="flex space-x-8 text-sm lg:text-base 2xl:text-lg poppins-regular">
|
||||
<li>
|
||||
<a href="{{ route('user.home') }}"
|
||||
class="text-black hover:text-green-600 {{ Request::routeIs('user.home') ? 'text-green-700 ' : '' }}">
|
||||
|
@ -33,17 +33,7 @@ class="text-black hover:text-green-600 {{ Request::routeIs('user.peta') ? 'text-
|
|||
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<!-- Hamburger Button (hanya tampil di mobile) -->
|
||||
<button data-collapse-toggle="navbar-menu" type="button"
|
||||
class="md:hidden inline-flex items-center p-2 w-10 h-10 justify-center text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
|
||||
aria-controls="navbar-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-6 h-6" aria-hidden="true" fill="none" viewBox="0 0 17 14"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
<!-- Login / Dropdown User -->
|
||||
<div class="ml-4">
|
||||
|
@ -91,9 +81,63 @@ class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
|
|||
</div>
|
||||
@else
|
||||
<a href="{{ route('login') }}"
|
||||
class="bg-green-900 text-white px-5 py-2 text-xs lg:text-sm rounded-full hover:bg-green-700">Login</a>
|
||||
class="bg-green-900 text-white px-4 lg:px-5 py-1.5 text-xs lg:text-sm rounded-full hover:bg-green-700">Login</a>
|
||||
@endif
|
||||
</div>
|
||||
<!-- Hamburger Button (hanya tampil di mobile) -->
|
||||
<button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar"
|
||||
aria-controls="default-sidebar" type="button"
|
||||
class="ml-2 md:hidden inline-flex items-center p-2 w-10 h-10 justify-center text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
|
||||
aria-controls="navbar-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-5 h-5 " aria-hidden="true" fill="none" viewBox="0 0 17 14"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<aside id="default-sidebar"
|
||||
class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full "
|
||||
aria-label="Sidebar">
|
||||
<div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 ">
|
||||
<ul class="space-y-2 font-medium">
|
||||
|
||||
<li>
|
||||
<a href="#" class="flex items-center">
|
||||
<svg class="h-7 w-7 text-green-700" viewBox="0 0 24 24" fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 2C8 2 5 5 5 9c0 5 7 11 7 11s7-6 7-11c0-4-3-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z" />
|
||||
</svg>
|
||||
<span
|
||||
class="text-sm lg:text-xl 2xl:text-2xl font-semibold text-green-800">LearnMap</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="border border-b-2">
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('user.home') }}"
|
||||
class="text-black hover:text-green-600 {{ Request::routeIs('user.home') ? 'text-green-700 ' : '' }}">
|
||||
Beranda
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('user.kursus') }}"
|
||||
class="text-black hover:text-green-600
|
||||
{{ Request::routeIs('user.kursus', 'user.rute', 'kursus.detail', 'kursus.visit') ? 'text-green-700' : '' }}">
|
||||
Kursus
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('user.peta') }}"
|
||||
class="text-black hover:text-green-600 {{ Request::routeIs('user.peta') ? 'text-green-700 ' : '' }}">
|
||||
Peta
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
@ -65,13 +65,13 @@ class="bg-green-900 text-white px-4 py-2 rounded-full hover:bg-green-700">Login<
|
|||
|
||||
|
||||
|
||||
<nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
|
||||
<nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 ">
|
||||
<div class="px-3 py-3 lg:px-5 lg:pl-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-start rtl:justify-end">
|
||||
<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar"
|
||||
type="button"
|
||||
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
|
||||
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 ">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
@ -93,20 +93,20 @@ class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden h
|
|||
<div class="flex items-center ms-3">
|
||||
<div>
|
||||
<button type="button"
|
||||
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
||||
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 "
|
||||
aria-expanded="false" data-dropdown-toggle="dropdown-user">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="w-8 h-8 rounded-full"
|
||||
src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="user photo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-sm shadow-sm dark:bg-gray-700 dark:divide-gray-600"
|
||||
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-sm shadow-sm "
|
||||
id="dropdown-user">
|
||||
<div class="px-4 py-3" role="none">
|
||||
<p class="text-sm text-green-900 dark:text-white" role="none">
|
||||
<p class="text-sm text-green-900 " role="none">
|
||||
{{ Auth::user()->email }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-green-900 truncate dark:text-gray-300" role="none">
|
||||
<p class="text-sm font-medium text-green-900 truncate d" role="none">
|
||||
{{ Auth::user()->name }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
@ -1,44 +1,281 @@
|
|||
<div class="container">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="grid grid-cols-2">
|
||||
|
||||
|
||||
<div>
|
||||
<div class="text-black poppins-medium font-semibold pb-2 text-2xl pt-4 poppins-semibold">
|
||||
<p>Deskripsi</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="poppins-regular text-black text-lg pb-2" id="deskripsi-text">
|
||||
{{ Str::limit($data->deskripsi, 500, '...') }}
|
||||
</p>
|
||||
@if (strlen($data->deskripsi) > 500)
|
||||
<button id="toggle-deskripsi" class="text-blue-500 hover:underline poppins-medium text-sm mt-2">
|
||||
Lihat Selengkapnya
|
||||
</button>
|
||||
@endif
|
||||
<div class="grid lg:grid-cols-2 gap-10 pb-10 px-4 md:px-0">
|
||||
<div class=" space-y-4 lg:pr-28">
|
||||
<div class="">
|
||||
<div class="flex justify-start mb-4 mt-2">
|
||||
<a href="/kursus/{{ $data->id }}/rute" target="_blank"
|
||||
class="inline-flex items-center gap-2 px-5 py-2 text-white bg-gradient-to-tr from-[#60BC9D] to-[#12372A] hover:brightness-110 transition-all duration-200 rounded-full shadow-md poppins-medium text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 20l-5.447-2.724A2 2 0 013 15.382V8.618a2 2 0 01.553-1.382L9 4m6 16l5.447-2.724A2 2 0 0021 15.382V8.618a2 2 0 00-.553-1.382L15 4M9 4v16m6-16v16" />
|
||||
</svg>
|
||||
Lihat Rute
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="font-bold pb-2">
|
||||
{{ $data->nama_kursus }}
|
||||
</p>
|
||||
<h1 class="poppins-reguler text-xl">{{ $data->deskripsi }}</h1>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<p class="poppins-semibold text-2xl">Fasilitas</p>
|
||||
@if (!empty($data->fasilitas) && is_array($data->fasilitas))
|
||||
<div class="pl-2 poppins-reguler text-xl space-y-1">
|
||||
@foreach ($data->fasilitas as $item)
|
||||
<p>* {{ $item }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="text-gray-500 italic">Tidak ada data fasilitas.</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{{-- Bagian Fasilitas --}}
|
||||
<div class="w-auto xl:max-w-max space-y-4">
|
||||
<p class="poppins-semibold font-semibold text-2xl text-black underline">
|
||||
Fasilitas
|
||||
</p>
|
||||
<p class="pl-4 poppins-regular text-lg text-black" id="fasilitas-text">
|
||||
{!! htmlspecialchars_decode(Str::limit(strip_tags($data->fasilitas, '<br><p><strong><em>'), 250, '...')) !!}
|
||||
</p>
|
||||
@if (strlen(strip_tags($data->fasilitas)) > 250)
|
||||
<button id="toggle-fasilitas" class="pl-4 text-blue-500 hover:underline poppins-medium text-sm mt-2">
|
||||
Lihat Selengkapnya
|
||||
</button>
|
||||
<div class=" space-y-2">
|
||||
@if (!empty($imageNames) && is_array($imageNames) && count($imageNames) > 0)
|
||||
{{-- Gambar utama di atas --}}
|
||||
<div>
|
||||
<img src="{{ asset('storage/' . $imageNames[0]) }}" alt="Gambar Utama"
|
||||
class="w-full h-[320px] object-cover rounded-lg shadow-lg cursor-pointer" onclick="openModal()">
|
||||
</div>
|
||||
|
||||
@if (count($imageNames) > 1)
|
||||
<div class="grid grid-cols-12 gap-2 mt-2">
|
||||
{{-- Gambar kiri --}}
|
||||
<div class="col-span-7">
|
||||
<img src="{{ asset('storage/' . $imageNames[1]) }}" alt="Gambar Detail 1"
|
||||
class="w-full h-80 object-cover rounded-lg cursor-pointer" onclick="openModal()">
|
||||
</div>
|
||||
|
||||
{{-- Gambar kanan --}}
|
||||
<div class="col-span-5 relative">
|
||||
@if (count($imageNames) > 2)
|
||||
<img src="{{ asset('storage/' . $imageNames[2]) }}" alt="Gambar Detail 2"
|
||||
class="w-full h-80 object-cover rounded-lg cursor-pointer" onclick="openModal()">
|
||||
|
||||
{{-- Tombol +n jika lebih dari 3 gambar --}}
|
||||
@if (count($imageNames) > 3)
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-lg font-bold rounded-lg cursor-pointer"
|
||||
onclick="openModal()">
|
||||
+{{ count($imageNames) - 3 }}
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Modal untuk menampilkan semua gambar --}}
|
||||
<div id="imageModal"
|
||||
class="fixed inset-0 hidden bg-black bg-opacity-80 flex items-center justify-center z-50">
|
||||
<div class="bg-white p-5 rounded-lg shadow-lg max-w-3xl w-full relative">
|
||||
<button onclick="closeModal()"
|
||||
class="absolute top-2 right-2 text-white bg-red-500 p-2 rounded-full">✖</button>
|
||||
<div class="grid grid-cols-2 gap-2 max-h-[80vh] overflow-y-auto p-2">
|
||||
@foreach ($imageNames as $image)
|
||||
<img src="{{ asset('storage/' . $image) }}" alt="Gambar Detail"
|
||||
class="w-full h-40 object-cover rounded-lg">
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- JavaScript untuk Modal --}}
|
||||
<script>
|
||||
function openModal() {
|
||||
document.getElementById('imageModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('imageModal').classList.add('hidden');
|
||||
}
|
||||
</script>
|
||||
@else
|
||||
<p class="text-gray-500 italic text-center">Tidak ada gambar yang tersedia.</p>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-4 py-20 ">
|
||||
<!-- Left Column: Comment Form -->
|
||||
<!-- Right Column: Ratings and Reviews -->
|
||||
<div class="col-span-4 ">
|
||||
<!-- Ratings Section -->
|
||||
<div class="bg-gray-50">
|
||||
<div class=" flex justify-between items-center">
|
||||
<div class="flex w-full items-center">
|
||||
<div class="flex items-center">
|
||||
@for ($i = 1; $i <= 5; $i++)
|
||||
<svg class="w-5 h-5 {{ $i <= round($averageRating) ? 'text-yellow-400' : 'text-gray-300' }}"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
|
||||
</svg>
|
||||
@endfor
|
||||
<span class="text-sm pl-4">Rata-rata: {{ round($averageRating, 1) }} / 5</span>
|
||||
</div>
|
||||
<div class=" md:ml-4">
|
||||
<p class="poppins-medium poppins-regular text-sm xl:text-xl text-black">
|
||||
(Total: {{ $totalRatings }} ulasan)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
|
||||
{{ $ulasan->links() }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Reviews Section -->
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-3 w-full gap-4 items-center justify-start lg:justify-end rtl">
|
||||
@foreach ($ulasan as $review)
|
||||
<div class="mb-6 mt-4 p-4 bg-white rounded-lg shadow-xl w-full">
|
||||
<!-- Reviewer Info -->
|
||||
<div class="flex items-center mb-3 w-full">
|
||||
<img src="/img/profil.png" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-800">{{ $review->user->name ?? 'Anonim' }}</h4>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ $review->created_at->diffForHumans() }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reviewer Rating -->
|
||||
<div class="flex items-center mb-2">
|
||||
@for ($i = 1; $i <= 5; $i++)
|
||||
<svg class="w-5 h-5 {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-300' }}"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
|
||||
</svg>
|
||||
@endfor
|
||||
</div>
|
||||
|
||||
<p id="comment-text-{{ $review->id }}" class="text-gray-700">
|
||||
@if (strlen($review->comment) > 100)
|
||||
{{ Str::limit($review->comment, 100) }}
|
||||
<button class="text-blue-600 underline ml-2" data-id="{{ $review->id }}"
|
||||
data-full="{{ e($review->comment) }}" onclick="showFullComment(this)">
|
||||
Lihat Selengkapnya
|
||||
</button>
|
||||
@else
|
||||
{{ $review->comment }}
|
||||
@endif
|
||||
</p>
|
||||
|
||||
|
||||
<script>
|
||||
function showFullComment(button) {
|
||||
const id = button.getAttribute('data-id');
|
||||
const fullText = button.getAttribute('data-full');
|
||||
const el = document.getElementById('comment-text-' + id);
|
||||
el.innerHTML = fullText.replace(/\n/g, "<br>");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Pagination Links -->
|
||||
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
@auth
|
||||
<form action="{{ route('storeUlasan') }}" method="POST">
|
||||
@csrf
|
||||
<div class="max-w-xl mb-4 border border-gray-200 rounded-lg bg-gray-50">
|
||||
<!-- Comment Input -->
|
||||
<div class="hidden">
|
||||
<input name="user_id" value="{{ Auth::user()->id }}" type="text">
|
||||
<input name="kursus_id" value="{{ $data->id }}" type="text">
|
||||
</div>
|
||||
<div class="px-4 py-2 bg-white rounded-t-lg">
|
||||
<label for="comment" class="sr-only">Your comment</label>
|
||||
<textarea id="comment" name="comment" rows="4"
|
||||
class="w-full px-0 text-sm text-gray-900 bg-white border-0 focus:ring-0 placeholder-gray-400"
|
||||
placeholder="Write a comment..." required></textarea>
|
||||
</div>
|
||||
<!-- Rating Stars and Submit Button -->
|
||||
<div class="flex items-center justify-between px-3 py-2 border-t border-gray-200">
|
||||
<!-- Rating Stars -->
|
||||
<div class="flex items-center space-x-2" id="rating-stars">
|
||||
@for ($i = 1; $i <= 5; $i++)
|
||||
<label class="cursor-pointer">
|
||||
<input type="radio" name="rating" value="{{ $i }}" class="hidden" />
|
||||
<svg class="w-6 h-6 text-gray-300 hover:text-yellow-400 transition-colors duration-200"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
|
||||
</svg>
|
||||
</label>
|
||||
@endfor
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// JavaScript for managing star ratings
|
||||
const starsContainer = document.getElementById('rating-stars');
|
||||
const stars = starsContainer.querySelectorAll('svg');
|
||||
const inputs = starsContainer.querySelectorAll('input[type="radio"]');
|
||||
|
||||
stars.forEach((star, index) => {
|
||||
star.addEventListener('click', () => {
|
||||
// Set all previous stars to active
|
||||
stars.forEach((s, i) => {
|
||||
if (i <= index) {
|
||||
s.classList.add('text-yellow-400');
|
||||
s.classList.remove('text-gray-300');
|
||||
} else {
|
||||
s.classList.add('text-gray-300');
|
||||
s.classList.remove('text-yellow-400');
|
||||
}
|
||||
});
|
||||
|
||||
// Set the corresponding radio input
|
||||
inputs[index].checked = true;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit"
|
||||
class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 hover:bg-blue-800">
|
||||
Post Comment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endauth
|
||||
|
||||
@guest
|
||||
<p class="text-sm poppins-regular text-gray-500">
|
||||
Anda harus <a href="{{ route('login') }}"
|
||||
class="text-green-800 poppins-semibold hover:underline">login</a> untuk
|
||||
memberikan ulasan.
|
||||
</p>
|
||||
@endguest
|
||||
|
||||
|
||||
|
||||
<!-- Community Guidelines -->
|
||||
<p class="ms-auto text-xs poppins-regular text-gray-500">
|
||||
Remember, contributions to this topic should follow our
|
||||
<a href="#" class="text-green-800 poppins-semibold hover:underline">Community
|
||||
Guidelines</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,84 @@
|
|||
<div class="w-full mb-10 border p-10 grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<!-- Bagian Map - Order pertama di mobile, kedua di lg -->
|
||||
<div class="">
|
||||
<div class="aspect-[5/3] min-h-[300px]" id="map"></div>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const mapElement = document.getElementById('map');
|
||||
if (!mapElement) {
|
||||
console.warn("Element dengan ID 'map' tidak ditemukan.");
|
||||
return;
|
||||
}
|
||||
|
||||
const map = L.map('map').setView(
|
||||
[{{ $data->latitude ?? '-7.7560717' }}, {{ $data->longitude ?? '112.1823541' }}],
|
||||
15
|
||||
);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
@if (!empty($data->latitude) && !empty($data->longitude))
|
||||
L.marker([{{ $data->latitude }}, {{ $data->longitude }}]).addTo(map)
|
||||
.bindPopup(`
|
||||
<b>{{ addslashes($data->nama_kursus) }}</b><br>
|
||||
<img class="w-32 h-20 object-cover" src="{{ asset('storage/' . $data->img) }}" alt="{{ addslashes($data->nama_kursus) }}" /><br>
|
||||
<a href="{{ url('/kursus/' . $data->id . '/detail') }}" class="text-blue-500 underline">Selengkapnya</a>
|
||||
`);
|
||||
@else
|
||||
L.marker([-7.7560717, 112.1823541]).addTo(map)
|
||||
.bindPopup('<b>Default Marker: Pusat Kota Pare</b>');
|
||||
@endif
|
||||
|
||||
// Gunakan whenReady untuk pastikan map siap
|
||||
map.whenReady(() => {
|
||||
setTimeout(() => {
|
||||
map.invalidateSize();
|
||||
}, 300); // Lebih responsif
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Bagian Lokasi - Order kedua di mobile, pertama di lg -->
|
||||
<div class="">
|
||||
<p class="poppins-semibold text-2xl text-black ">
|
||||
Lokasi
|
||||
</p>
|
||||
<p class="poppins-semibold pb-4">{{ $data->nama_kursus }}</p>
|
||||
<p class="pl-4 poppins-regular text-lg text-black" id="lokasi-text">
|
||||
{!! htmlspecialchars_decode(Str::limit(strip_tags($data->lokasi, '<br><p><strong><em>'), 250, '...')) !!}
|
||||
</p>
|
||||
@if (strlen(strip_tags($data->lokasi)) > 250)
|
||||
<button id="toggle-lokasi" class="pl-4 text-blue-500 hover:underline poppins-medium text-sm mt-2">
|
||||
Lihat Selengkapnya
|
||||
</button>
|
||||
@endif
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const lokasiText = document.getElementById("lokasi-text");
|
||||
const toggleButton = document.getElementById("toggle-lokasi");
|
||||
|
||||
if (lokasiText && toggleButton) {
|
||||
const fullText = `{!! addslashes($data->lokasi) !!}`;
|
||||
const shortText = `{!! addslashes(
|
||||
htmlspecialchars_decode(Str::limit(strip_tags($data->lokasi, '<br><p><strong><em>'), 250, '...')),
|
||||
) !!}`;
|
||||
let expanded = false;
|
||||
|
||||
toggleButton.addEventListener("click", function() {
|
||||
lokasiText.innerHTML = expanded ? shortText : fullText;
|
||||
toggleButton.textContent = expanded ? "Lihat Selengkapnya" : "Sembunyikan";
|
||||
expanded = !expanded;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,41 @@
|
|||
<div class="w-full mb-10 border p-10">
|
||||
<p class="poppins-semibold text-2xl text-black ">
|
||||
Metode Pembelajaran
|
||||
</p>
|
||||
<p class="poppins-semibold pb-4">{{ $data->nama_kursus }}</p>
|
||||
|
||||
<p class="pl-4 poppins-regular text-lg text-black" id="metode-text">
|
||||
{!! htmlspecialchars_decode(Str::limit(strip_tags($data->metode, '<br><p><strong><em>'), 250, '...')) !!}
|
||||
</p>
|
||||
|
||||
@if (strlen(strip_tags($data->metode)) > 250)
|
||||
<button id="toggle-metode" class="pl-4 text-blue-500 hover:underline poppins-medium text-sm mt-2">
|
||||
Lihat Selengkapnya
|
||||
</button>
|
||||
@endif
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const metodeText = document.getElementById("metode-text");
|
||||
const toggleButton = document.getElementById("toggle-metode");
|
||||
|
||||
if (toggleButton && metodeText) {
|
||||
const fullText = `{!! addslashes($data->metode) !!}`;
|
||||
const shortText = `{!! addslashes(
|
||||
htmlspecialchars_decode(Str::limit(strip_tags($data->metode, '<br><p><strong><em>'), 250, '...')),
|
||||
) !!}`;
|
||||
let expanded = false;
|
||||
|
||||
toggleButton.addEventListener("click", function() {
|
||||
if (expanded) {
|
||||
metodeText.innerHTML = shortText;
|
||||
toggleButton.textContent = "Lihat Selengkapnya";
|
||||
} else {
|
||||
metodeText.innerHTML = fullText;
|
||||
toggleButton.textContent = "Sembunyikan";
|
||||
}
|
||||
expanded = !expanded;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -0,0 +1,37 @@
|
|||
<div class="w-full mb-10 border p-10">
|
||||
<p class="poppins-semibold font-semibold text-2xl text-black ">
|
||||
Paket
|
||||
</p>
|
||||
<p class="poppins-semibold pb-4">{{ $data->nama_kursus }}</p>
|
||||
<p class="pl-4 poppins-regular text-lg text-black" id="paket-text">
|
||||
{!! htmlspecialchars_decode(Str::limit(strip_tags($data->paket, '<br><p><strong><em>'), 250, '...')) !!}
|
||||
</p>
|
||||
@if (strlen(strip_tags($data->paket)) > 200)
|
||||
<button id="toggle-paket" class="pl-4 text-blue-500 hover:underline poppins-medium text-sm mt-2">
|
||||
Lihat Selengkapnya
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const paketText = document.getElementById("paket-text");
|
||||
const toggleButton = document.getElementById("toggle-paket");
|
||||
|
||||
if (toggleButton && paketText) {
|
||||
const fullText = `{!! addslashes($data->paket) !!}`;
|
||||
const shortText = `{!! addslashes(htmlspecialchars_decode(Str::limit(strip_tags($data->paket, '<br><p><strong><em>'), 250, '...'))) !!}`;
|
||||
let expanded = false;
|
||||
|
||||
toggleButton.addEventListener("click", function() {
|
||||
if (expanded) {
|
||||
paketText.innerHTML = shortText;
|
||||
toggleButton.textContent = "Lihat Selengkapnya";
|
||||
} else {
|
||||
paketText.innerHTML = fullText;
|
||||
toggleButton.textContent = "Sembunyikan";
|
||||
}
|
||||
expanded = !expanded;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
|
@ -12,41 +12,92 @@ class="fixed top-5 left-1/2 transform -translate-x-1/2 bg-red-500 text-white px-
|
|||
</div>
|
||||
@enderror
|
||||
|
||||
<div class="flex justify-center items-center p-4">
|
||||
<div class="flex justify-center items-center p-4 pt-20 md:pt-4">
|
||||
<div class="h-auto w-full relative ">
|
||||
<img src="{{ asset('storage/' . $data->img) }}" alt=""
|
||||
class="aspect-[4/2] w-full object-cover rounded-2xl">
|
||||
class="aspect-[4/3] lg:aspect-[655px] 2xl:h-[895px] w-full object-cover brightness-75 rounded-2xl">
|
||||
<figcaption class="container w-full">
|
||||
|
||||
<div class="absolute container bottom-12 left-1/2 transform -translate-x-1/2 space-y-10 text-center">
|
||||
<p class="poppins-bold text-start text-6xl xl:text-8xl text-white pr-16 w-1/2">
|
||||
<div
|
||||
class="absolute container bottom-4 lg:bottom-12 left-1/2 transform -translate-x-1/2 space-y-10 text-center px-4">
|
||||
<p class="poppins-bold text-start text-5xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl text-green-800 pr-16 w-3/4 xl:w-1/2"
|
||||
style="text-shadow: 2px 2px 4px white;">
|
||||
{{ $data->nama_kursus }}
|
||||
</p>
|
||||
<div class="flex justify-start space-x-4">
|
||||
<a href="/kursus/{{ $data->id }}/rute" target="_blank"
|
||||
class="poppins-medium py-3 px-8 bg-[#4F7F81] text-white rounded-xl text-sm shadow-xl">Rute
|
||||
Terdekat</a>
|
||||
<button data-modal-target="default-modal-detail-gambar"
|
||||
data-modal-toggle="default-modal-detail-gambar"
|
||||
class="poppins-medium py-3 px-8 bg-[#4F7F81] text-white rounded-xl text-sm shadow-xl">Foto
|
||||
Detail</button>
|
||||
</div>
|
||||
<div class="flex justify-between w-full text-white">
|
||||
<button
|
||||
class="px-20 py-3 poppins-regular bg-gradient-to-tr from-[#60BC9D] to-[#12372A] rounded-3xl">Deskripsi</button>
|
||||
<button
|
||||
class="px-20 py-3 poppins-regular bg-gradient-to-tr from-[#60BC9D] to-[#12372A] rounded-3xl">Paket</button>
|
||||
<button
|
||||
class="px-20 py-3 poppins-regular bg-gradient-to-tr from-[#60BC9D] to-[#12372A] rounded-3xl">Metode</button>
|
||||
<button
|
||||
class="px-20 py-3 poppins-regular bg-gradient-to-tr from-[#60BC9D] to-[#12372A] rounded-3xl">Fasilitas</button>
|
||||
<button
|
||||
class="px-20 py-3 poppins-regular bg-gradient-to-tr from-[#60BC9D] to-[#12372A] rounded-3xl">Lokasi</button>
|
||||
|
||||
|
||||
<div class="flex justify-between w-full text-white text-[10px] lg:text-sm" id="tab-buttons">
|
||||
<button data-target="overview"
|
||||
class="tab-btn px-8 py-1.5 sm:px-12 md:px-16 sm:py-2 2xl:px-20 xl:py-3 poppins-regular border-white border-2 rounded-3xl bg-white/10 backdrop-blur">Deskripsi</button>
|
||||
<button data-target="paket"
|
||||
class="tab-btn px-8 py-1.5 sm:px-12 md:px-16 sm:py-2 2xl:px-20 xl:py-3 poppins-regular border-white border-2 rounded-3xl bg-white/10 backdrop-blur">Paket</button>
|
||||
<button data-target="metode"
|
||||
class="tab-btn px-8 py-1.5 sm:px-12 md:px-16 sm:py-2 2xl:px-20 xl:py-3 poppins-regular border-white border-2 rounded-3xl bg-white/10 backdrop-blur">Metode</button>
|
||||
<button data-target="lokasi"
|
||||
class="tab-btn px-8 py-1.5 sm:px-12 md:px-16 sm:py-2 2xl:px-20 xl:py-3 poppins-regular border-white border-2 rounded-3xl bg-white/10 backdrop-blur">Lokasi</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</figcaption>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-0 lg:px-4">
|
||||
<div id="overview" class="tab-content">
|
||||
@include('partials.detail.deskripsi')
|
||||
</div>
|
||||
<div id="paket" class="tab-content hidden">
|
||||
@include('partials.detail.paket')
|
||||
</div>
|
||||
<div id="metode" class="tab-content hidden">
|
||||
@include('partials.detail.metode')
|
||||
</div>
|
||||
<div id="lokasi" class="tab-content hidden">
|
||||
@include('partials.detail.lokasi')
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const buttons = document.querySelectorAll('.tab-btn');
|
||||
const contents = document.querySelectorAll('.tab-content');
|
||||
|
||||
@include('partials.detail.deskripsi')
|
||||
function activateTab(targetId) {
|
||||
// Sembunyikan semua konten
|
||||
contents.forEach(content => content.classList.add('hidden'));
|
||||
|
||||
// Reset semua tombol
|
||||
buttons.forEach(btn => {
|
||||
btn.classList.remove('bg-gradient-to-tr', 'from-[#60BC9D]', 'to-[#12372A]',
|
||||
'ring-white', 'scale-105');
|
||||
btn.classList.add('bg-white/10', 'backdrop-blur');
|
||||
});
|
||||
|
||||
// Tampilkan konten sesuai target
|
||||
const targetContent = document.getElementById(targetId);
|
||||
if (targetContent) targetContent.classList.remove('hidden');
|
||||
|
||||
// Aktifkan tombol terkait
|
||||
const activeButton = document.querySelector(`.tab-btn[data-target="${targetId}"]`);
|
||||
if (activeButton) {
|
||||
activeButton.classList.remove('bg-white/10', 'backdrop-blur');
|
||||
activeButton.classList.add('bg-gradient-to-tr', 'from-[#60BC9D]', 'to-[#12372A]',
|
||||
'ring-white', 'scale-105');
|
||||
}
|
||||
}
|
||||
|
||||
// Default tab
|
||||
activateTab('overview');
|
||||
|
||||
// Tambahkan event ke semua tombol
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const target = this.getAttribute('data-target');
|
||||
activateTab(target);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
{{-- @include('partials.detail.deskripsi') --}}
|
||||
</x-layout>
|
||||
|
|
|
@ -12,9 +12,9 @@ class="h-[420px] sm:h-[450px] md:h-[480px] lg:h-[545px] xl:h-[645px] 2xl:h-[945p
|
|||
class="absolute inset-0 flex items-center justify-center mb-14 sm:mb-14 md:mb-20 lg:mb-32 xl:mb-44 2xl:mb-72">
|
||||
<div class="text-white">
|
||||
<div>
|
||||
<h1
|
||||
class=" text-green-600 text-5xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl
|
||||
font-bold text-center barlow-condensed-semibold drop-shadow-lg">
|
||||
<h1 class=" text-green-600 text-5xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl
|
||||
font-bold text-center barlow-condensed-semibold drop-shadow-lg"
|
||||
style="text-shadow: 2px 2px 4px white;">
|
||||
PARE EDUCATION <br> ENGLISH LANGUAGE
|
||||
</h1>
|
||||
|
||||
|
@ -89,7 +89,7 @@ class="text-2xl lg:text-3xl 2xl:text-5xl font-bold text-start barlow-condensed-s
|
|||
Berikut adalah persebaran
|
||||
seluruh wisata saat ini
|
||||
</h5>
|
||||
<div class="aspect-[5/2]" id="map"></div>
|
||||
<div class="aspect-[5/3] lg:aspect-[5/2]" id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -101,17 +101,32 @@ class="text-2xl lg:text-3xl 2xl:text-5xl font-bold text-start barlow-condensed-s
|
|||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Pastikan elemen "map" ada dalam dokumen sebelum inisialisasi
|
||||
var mapElement = document.getElementById('map');
|
||||
const mapElement = document.getElementById('map');
|
||||
if (!mapElement) {
|
||||
console.warn("Element dengan ID 'map' tidak ditemukan.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Inisialisasi Leaflet map
|
||||
var map = L.map('map').setView([-7.7560717, 112.1823541], 15);
|
||||
// Tentukan zoom level berdasarkan ukuran layar
|
||||
let zoomLevel = 15; // default
|
||||
const width = window.innerWidth;
|
||||
|
||||
// Tambahkan tile layer dari OpenStreetMap
|
||||
if (width < 640) { // sm
|
||||
zoomLevel = 13;
|
||||
} else if (width < 768) { // md
|
||||
zoomLevel = 13.5;
|
||||
} else if (width < 1024) { // lg
|
||||
zoomLevel = 14;
|
||||
} else if (width < 1280) { // xl
|
||||
zoomLevel = 14.5;
|
||||
} else { // 2xl dan ke atas
|
||||
zoomLevel = 15;
|
||||
}
|
||||
|
||||
// Inisialisasi Leaflet map
|
||||
const map = L.map('map').setView([-7.7560717, 112.1823541], zoomLevel);
|
||||
|
||||
// Tambahkan tile layer
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
@ -121,18 +136,18 @@ class="text-2xl lg:text-3xl 2xl:text-5xl font-bold text-start barlow-condensed-s
|
|||
@foreach ($peta as $latlong)
|
||||
L.marker([{{ $latlong->latitude }}, {{ $latlong->longitude }}]).addTo(map)
|
||||
.bindPopup(`
|
||||
<b>{{ addslashes($latlong->nama_kursus) }}</b> <br>
|
||||
<img class="w-32 h-20 object-cover" src="{{ asset('storage/' . $latlong->img) }}" alt="{{ addslashes($latlong->nama_kursus) }}" /> <br>
|
||||
<a href="{{ url('/kursus/' . $latlong->id . '/detail') }}" class="text-blue-500 underline">Selengkapnya</a>
|
||||
`);
|
||||
<b>{{ addslashes($latlong->nama_kursus) }}</b> <br>
|
||||
<img class="w-32 h-20 object-cover" src="{{ asset('storage/' . $latlong->img) }}" alt="{{ addslashes($latlong->nama_kursus) }}" /> <br>
|
||||
<a href="{{ url('/kursus/' . $latlong->id . '/detail') }}" class="text-blue-500 underline">Selengkapnya</a>
|
||||
`);
|
||||
@endforeach
|
||||
@else
|
||||
// Jika tidak ada data, tambahkan titik default di pusat kota Pare
|
||||
// Jika tidak ada data, tambahkan titik default
|
||||
L.marker([-7.7560717, 112.1823541]).addTo(map)
|
||||
.bindPopup('<b>Default Marker: Pusat Kota Pare</b>');
|
||||
@endif
|
||||
|
||||
// Perbaiki ukuran map jika terjadi masalah dengan tampilan
|
||||
// Pastikan peta menyesuaikan ukuran container
|
||||
setTimeout(() => {
|
||||
map.invalidateSize();
|
||||
}, 500);
|
||||
|
@ -143,6 +158,7 @@ class="text-2xl lg:text-3xl 2xl:text-5xl font-bold text-start barlow-condensed-s
|
|||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{{-- Kursus Populer --}}
|
||||
<div>
|
||||
|
|
|
@ -17,7 +17,7 @@ class="p-2 border border-gray-300 rounded-md text-gray-700 text-sm poppins-regul
|
|||
<div class="relative">
|
||||
<input type="text" name="search" id="search-dropdown"
|
||||
class="pr-14 pl-4 p-2.5 w-full text-sm text-black bg-white border border-gray-300 rounded-md poppins-regular"
|
||||
placeholder="Pencarian Nama Kursus" value="{{ request('search') }}" />
|
||||
placeholder="Pencarian Kursus" value="{{ request('search') }}" />
|
||||
<button type="submit"
|
||||
class="absolute top-0 end-0 px-4 h-full text-sm font-medium text-white bg-gradient-to-tr from-[#60BC9D] to-[#12372A] rounded-e-lg">
|
||||
🔍
|
||||
|
|
|
@ -0,0 +1,46 @@
|
|||
@if ($paginator->hasPages())
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
|
||||
<span class="page-link" aria-hidden="true">‹</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@foreach ($elements as $element)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
|
||||
@endif
|
||||
|
||||
{{-- Array Of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $paginator->currentPage())
|
||||
<li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
|
||||
@else
|
||||
<li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
|
||||
<span class="page-link" aria-hidden="true">›</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
@endif
|
|
@ -0,0 +1,88 @@
|
|||
@if ($paginator->hasPages())
|
||||
<nav class="d-flex justify-items-center justify-content-between">
|
||||
<div class="d-flex justify-content-between flex-fill d-sm-none">
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">@lang('pagination.previous')</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">@lang('pagination.next')</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="d-none flex-sm-fill d-sm-flex align-items-sm-center justify-content-sm-between">
|
||||
<div>
|
||||
<p class="small text-muted">
|
||||
{!! __('Showing') !!}
|
||||
<span class="fw-semibold">{{ $paginator->firstItem() }}</span>
|
||||
{!! __('to') !!}
|
||||
<span class="fw-semibold">{{ $paginator->lastItem() }}</span>
|
||||
{!! __('of') !!}
|
||||
<span class="fw-semibold">{{ $paginator->total() }}</span>
|
||||
{!! __('results') !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
|
||||
<span class="page-link" aria-hidden="true">‹</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@foreach ($elements as $element)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
|
||||
@endif
|
||||
|
||||
{{-- Array Of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $paginator->currentPage())
|
||||
<li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
|
||||
@else
|
||||
<li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
|
||||
<span class="page-link" aria-hidden="true">›</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@endif
|
|
@ -0,0 +1,46 @@
|
|||
@if ($paginator->hasPages())
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
|
||||
<span aria-hidden="true">‹</span>
|
||||
</li>
|
||||
@else
|
||||
<li>
|
||||
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@foreach ($elements as $element)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
|
||||
@endif
|
||||
|
||||
{{-- Array Of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $paginator->currentPage())
|
||||
<li class="active" aria-current="page"><span>{{ $page }}</span></li>
|
||||
@else
|
||||
<li><a href="{{ $url }}">{{ $page }}</a></li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<li>
|
||||
<a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
|
||||
<span aria-hidden="true">›</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
@endif
|
|
@ -0,0 +1,36 @@
|
|||
@if ($paginator->hasPages())
|
||||
<div class="ui pagination menu" role="navigation">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
|
||||
@else
|
||||
<a class="icon item" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@foreach ($elements as $element)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<a class="icon item disabled" aria-disabled="true">{{ $element }}</a>
|
||||
@endif
|
||||
|
||||
{{-- Array Of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $paginator->currentPage())
|
||||
<a class="item active" href="{{ $url }}" aria-current="page">{{ $page }}</a>
|
||||
@else
|
||||
<a class="item" href="{{ $url }}">{{ $page }}</a>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<a class="icon item" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
|
||||
@else
|
||||
<a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
|
@ -0,0 +1,27 @@
|
|||
@if ($paginator->hasPages())
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">@lang('pagination.previous')</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">@lang('pagination.next')</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
@endif
|
|
@ -0,0 +1,29 @@
|
|||
@if ($paginator->hasPages())
|
||||
<nav role="navigation" aria-label="Pagination Navigation">
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">{!! __('pagination.previous') !!}</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">
|
||||
{!! __('pagination.previous') !!}
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">{!! __('pagination.next') !!}</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">{!! __('pagination.next') !!}</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
@endif
|
|
@ -0,0 +1,19 @@
|
|||
@if ($paginator->hasPages())
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<li class="disabled" aria-disabled="true"><span>@lang('pagination.previous')</span></li>
|
||||
@else
|
||||
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
|
||||
@endif
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
|
||||
@else
|
||||
<li class="disabled" aria-disabled="true"><span>@lang('pagination.next')</span></li>
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
@endif
|
|
@ -0,0 +1,25 @@
|
|||
@if ($paginator->hasPages())
|
||||
<nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md ">
|
||||
{!! __('pagination.previous') !!}
|
||||
</span>
|
||||
@else
|
||||
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 ">
|
||||
{!! __('pagination.previous') !!}
|
||||
</a>
|
||||
@endif
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 ">
|
||||
{!! __('pagination.next') !!}
|
||||
</a>
|
||||
@else
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md ">
|
||||
{!! __('pagination.next') !!}
|
||||
</span>
|
||||
@endif
|
||||
</nav>f
|
||||
@endif
|
|
@ -0,0 +1,130 @@
|
|||
@if ($paginator->hasPages())
|
||||
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
|
||||
<div class="flex justify-between flex-1 sm:hidden">
|
||||
@if ($paginator->onFirstPage())
|
||||
<span
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md ">
|
||||
{!! __('pagination.previous') !!}
|
||||
</span>
|
||||
@else
|
||||
<a href="{{ $paginator->previousPageUrl() }}"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 ">
|
||||
{!! __('pagination.previous') !!}
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@if ($paginator->hasMorePages())
|
||||
<a href="{{ $paginator->nextPageUrl() }}"
|
||||
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 ">
|
||||
{!! __('pagination.next') !!}
|
||||
</a>
|
||||
@else
|
||||
<span
|
||||
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md ">
|
||||
{!! __('pagination.next') !!}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700 leading-5 ">
|
||||
{!! __('Showing') !!}
|
||||
@if ($paginator->firstItem())
|
||||
<span class="font-medium">{{ $paginator->firstItem() }}</span>
|
||||
{!! __('to') !!}
|
||||
<span class="font-medium">{{ $paginator->lastItem() }}</span>
|
||||
@else
|
||||
{{ $paginator->count() }}
|
||||
@endif
|
||||
{!! __('of') !!}
|
||||
<span class="font-medium">{{ $paginator->total() }}</span>
|
||||
{!! __('results') !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="relative z-0 inline-flex rtl:flex-row-reverse shadow-sm rounded-md">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
|
||||
<span
|
||||
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 "
|
||||
aria-hidden="true">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
@else
|
||||
<a href="{{ $paginator->previousPageUrl() }}" rel="prev"
|
||||
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 "
|
||||
aria-label="{{ __('pagination.previous') }}">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@foreach ($elements as $element)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<span aria-disabled="true">
|
||||
<span
|
||||
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 ">{{ $element }}</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
{{-- Array Of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $paginator->currentPage())
|
||||
<span aria-current="page">
|
||||
<span
|
||||
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 ">{{ $page }}</span>
|
||||
</span>
|
||||
@else
|
||||
<a href="{{ $url }}"
|
||||
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 "
|
||||
aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
|
||||
{{ $page }}
|
||||
</a>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<a href="{{ $paginator->nextPageUrl() }}" rel="next"
|
||||
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 "
|
||||
aria-label="{{ __('pagination.next') }}">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
@else
|
||||
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
|
||||
<span
|
||||
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5 "
|
||||
aria-hidden="true">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@endif
|
|
@ -1,4 +1,4 @@
|
|||
{{-- <!DOCTYPE html>
|
||||
{{-- {{-- <!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
@ -218,7 +218,7 @@ class="w-full h-auto object-contain" alt="Image {{ $index + 1 }}">
|
|||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{{-- Bagian Lokasi --}}
|
||||
<div class="w-auto xl:max-w-max space-y-4">
|
||||
|
@ -423,4 +423,4 @@ class="text-green-800 poppins-semibold hover:underline">login</a> untuk
|
|||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
|
|
@ -77,9 +77,9 @@
|
|||
Route::get('/gagal-login', [PengunjungController::class, 'gagal'])->name('gagal.home');
|
||||
Route::get('/kursus', [PengunjungController::class, 'kursus'])->name('user.kursus');
|
||||
Route::get('/peta', [PengunjungController::class, 'maps'])->name('user.peta');
|
||||
Route::post('/store-ulasan', [PengunjungController::class, 'storeUlasann'])->name('storeUlasan');
|
||||
Route::get('/kursus/{id}/rute', [PengunjungController::class, 'rute'])->name('user.rute');
|
||||
Route::get('/kursus/{id}/detail', [PengunjungController::class, 'detail'])->name('kursus.detail');
|
||||
Route::post('/store-ulasan', [PengunjungController::class, 'storeUlasann'])->name('storeUlasan');
|
||||
Route::post('/kursus/{id}/detail', [KunjunganController::class, 'visitCourse'])->name('kursus.visit');
|
||||
|
||||
Route::get('/set-locale/{lang}', function ($lang) {
|
||||
|
|
|
@ -7,4 +7,13 @@ export default defineConfig({
|
|||
refresh: true,
|
||||
}),
|
||||
],
|
||||
// RUN DI MOBILE
|
||||
server: {
|
||||
host: '0.0.0.0', // Akses dari HP bisa
|
||||
port: 5173, // Default Vite port
|
||||
strictPort: true,
|
||||
hmr: {
|
||||
host: '192.168.1.4' // IP MENYESUAIKAN laptop kamu
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue