Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Fitur BE]

Browse Source
This commit is contained in:
Arief Dwi Wicaksono 2025-09-17 12:44:52 +07:00
parent b1f29db598
commit ea5ad05de9
7 changed files with 501 additions and 536 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
backend/app/Http/Controllers/FiturController.php
View File

@ -1,56 +1,59 @@
<?php <?php
// app/Http/Controllers/FiturController.php
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use App\Models\Fitur; use App\Models\Fitur;
use Illuminate\Http\Request; use Illuminate\Http\Request;
class FiturController extends Controller class FiturController extends Controller
{ {
// Tampilkan semua fitur (halaman admin) // Tampilkan semua fitur
public function index() public function index()
{ {
$fitur = \App\Models\Fitur::paginate(5); $fitur = Fitur::paginate(5);
return view('admin.fitur.index', compact('fitur')); return view('admin.fitur.index', compact('fitur'));
} }
// Form tambah fitur // Simpan fitur baru
public function create() public function store(Request $request)
{ {
return view('admin.fitur.create'); $request->validate([
'deskripsi' => 'required|string|max:255',
'harga' => 'required|numeric|min:0',
]);
Fitur::create([
'deskripsi' => $request->deskripsi,
'harga' => $request->harga,
]);
return redirect()->route('admin.fitur.index')->with('success', 'Fitur berhasil ditambahkan');
} }
// Simpan fitur baru // Update fitur
public function store(Request $request) public function update(Request $request, $id)
{ {
$data = $request->validate([ $request->validate([
'deskripsi' => 'required|string', 'deskripsi' => 'required|string|max:255',
]); 'harga' => 'required|numeric|min:0',
]);
Fitur::create($data);
return redirect()->route('admin.fitur.index')->with('success', 'Fitur berhasil ditambahkan!');
}
public function update(Request $request, Fitur $fitur)
{
$data = $request->validate([
'deskripsi' => 'required|string',
]);
$fitur->update($data);
return redirect()->route('admin.fitur.index')->with('success', 'Fitur berhasil diperbarui!');
}
$fitur = Fitur::findOrFail($id);
$fitur->update([
'deskripsi' => $request->deskripsi,
'harga' => $request->harga,
]);
return redirect()->route('admin.fitur.index')->with('success', 'Fitur berhasil diperbarui');
}
// Hapus fitur // Hapus fitur
public function destroy(Fitur $fitur) public function destroy($id)
{ {
$fitur = Fitur::findOrFail($id);
$fitur->delete(); $fitur->delete();
return redirect()->route('admin.fitur.index')->with('success', 'Fitur berhasil dihapus!'); return redirect()->route('admin.fitur.index')->with('success', 'Fitur berhasil dihapus');
} }
} }

105
backend/app/Http/Controllers/TemplateController.php
View File

@ -27,66 +27,67 @@ public function show($id)
} }
public function store(Request $request) public function store(Request $request)
{ {
$data = $request->validate([ $data = $request->validate([
'nama_template' => 'required|string|max:255', 'nama_template' => 'required|string|max:255',
'kategori_id' => 'required|exists:kategoris,id', 'kategori_id' => 'required|exists:kategoris,id',
'fitur_id' => 'required|array', 'fitur_id' => 'required|array',
'fitur_id.*' => 'exists:fiturs,id', 'fitur_id.*' => 'exists:fiturs,id',
'foto' => 'nullable|image|mimes:jpg,jpeg,png,gif|max:5120', 'foto' => 'nullable|image|mimes:jpg,jpeg,png,gif|max:5120',
'harga' => 'required|numeric|min:0' ]);
]);
if ($request->hasFile('foto')) { // hitung total harga dari fitur yang dipilih
$data['foto'] = $request->file('foto')->store('templates', 'public'); $totalHarga = Fitur::whereIn('id', $data['fitur_id'])->sum('harga');
}
// create template (tanpa fitur) if ($request->hasFile('foto')) {
$template = Template::create([ $data['foto'] = $request->file('foto')->store('templates', 'public');
'nama_template' => $data['nama_template'],
'kategori_id' => $data['kategori_id'],
'foto' => $data['foto'] ?? null,
'harga' => $data['harga'],
]);
// sync fitur ke pivot
$template->fiturs()->sync($data['fitur_id'] ?? []);
return redirect()->route('templates.index')->with('success', 'Template berhasil ditambahkan!');
} }
public function update(Request $request, Template $template) $template = Template::create([
{ 'nama_template' => $data['nama_template'],
$data = $request->validate([ 'kategori_id' => $data['kategori_id'],
'nama_template' => 'required|string|max:255', 'foto' => $data['foto'] ?? null,
'kategori_id' => 'required|exists:kategoris,id', 'harga' => $totalHarga, // ✅ otomatis dari fitur
'fitur_id' => 'required|array', ]);
'fitur_id.*' => 'exists:fiturs,id',
'foto' => 'nullable|image|mimes:jpg,jpeg,png,gif|max:5120',
'harga' => 'required|numeric|min:0'
]);
if ($request->hasFile('foto')) { $template->fiturs()->sync($data['fitur_id']);
if ($template->foto && Storage::disk('public')->exists($template->foto)) {
Storage::disk('public')->delete($template->foto); return redirect()->route('templates.index')->with('success', 'Template berhasil ditambahkan!');
} }
$data['foto'] = $request->file('foto')->store('templates', 'public');
public function update(Request $request, Template $template)
{
$data = $request->validate([
'nama_template' => 'required|string|max:255',
'kategori_id' => 'required|exists:kategoris,id',
'fitur_id' => 'required|array',
'fitur_id.*' => 'exists:fiturs,id',
'foto' => 'nullable|image|mimes:jpg,jpeg,png,gif|max:5120',
]);
// hitung ulang harga
$totalHarga = Fitur::whereIn('id', $data['fitur_id'])->sum('harga');
if ($request->hasFile('foto')) {
if ($template->foto && Storage::disk('public')->exists($template->foto)) {
Storage::disk('public')->delete($template->foto);
} }
$data['foto'] = $request->file('foto')->store('templates', 'public');
$template->update([
'nama_template' => $data['nama_template'],
'kategori_id' => $data['kategori_id'],
'foto' => $data['foto'] ?? $template->foto,
'harga' => $data['harga'],
]);
// update pivot
$template->fiturs()->sync($data['fitur_id'] ?? []);
return redirect()->route('templates.index')->with('success', 'Template berhasil diperbarui!');
} }
$template->update([
'nama_template' => $data['nama_template'],
'kategori_id' => $data['kategori_id'],
'foto' => $data['foto'] ?? $template->foto,
'harga' => $totalHarga, // ✅ otomatis dari fitur
]);
$template->fiturs()->sync($data['fitur_id']);
return redirect()->route('templates.index')->with('success', 'Template berhasil diperbarui!');
}
public function destroy(Template $template) public function destroy(Template $template)
{ {
if ($template->foto && Storage::disk('public')->exists($template->foto)) { if ($template->foto && Storage::disk('public')->exists($template->foto)) {

8
backend/app/Models/Fitur.php
View File

@ -3,14 +3,12 @@
namespace App\Models; namespace App\Models;
use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Model;
class Fitur extends Model
class Fitur extends Model
{ {
protected $fillable = ['deskripsi']; protected $fillable = ['deskripsi', 'harga'];
// many-to-many
public function templates() public function templates()
{ {
return $this->belongsToMany(Template::class, 'fitur_template'); return $this->belongsToMany(Template::class, 'fitur_template');
} }
} }

18
backend/database/migrations/2025_09_03_042108_create_templates_table.php
View File

@ -7,15 +7,15 @@ use Illuminate\Support\Facades\Schema;
return new class extends Migration { return new class extends Migration {
public function up(): void { public function up(): void {
Schema::create('templates', function (Blueprint $table) { // database/migrations/2025_09_08_000003_create_templates_table.php
$table->id(); Schema::create('templates', function (Blueprint $table) {
$table->string('nama_template'); $table->id();
$table->foreignId('kategori_id')->constrained()->cascadeOnDelete(); $table->string('nama_template');
$table->foreignId('fitur_id')->constrained()->cascadeOnDelete(); $table->foreignId('kategori_id')->constrained()->cascadeOnDelete();
$table->decimal('harga', 10, 2)->default(0); $table->decimal('harga', 10, 2)->default(0); // ✅ harga template
$table->string('foto')->nullable(); $table->string('foto')->nullable();
$table->timestamps(); $table->timestamps();
}); });
} }
public function down(): void { public function down(): void {

22
backend/database/migrations/2025_09_17_040752_add_harga_to_fiturs_table.php Normal file
View File

@ -0,0 +1,22 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::table('fiturs', function (Blueprint $table) {
$table->decimal('harga', 10, 2)->default(0)->after('deskripsi');
});
}
public function down(): void
{
Schema::table('fiturs', function (Blueprint $table) {
$table->dropColumn('harga');
});
}
};

319
backend/resources/views/admin/dashboard.blade.php
View File

@ -1,232 +1,157 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Halaman Dasbor') @section('title', 'Manajemen Template')
@section('content') @section('content')
<div class="container mx-auto py-4"> <div class="container py-4">
<!-- Header --> <div class="d-flex justify-content-between align-items-center mb-4">
<div class="flex justify-between items-center mb-4"> <h3 class="fw-bold">Manajemen Template</h3>
<h3 class="text-xl font-bold">Halaman Dasbor</h3> <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambah">
<div class="flex items-center gap-3"> <i class="bi bi-plus-lg"></i> Tambah Template
<div class="bg-blue-100 text-blue-600 px-3 py-2 rounded-lg flex items-center gap-2 text-sm"> </button>
<i class="bi bi-clock-history"></i>
{{ $today }}
</div>
</div>
</div> </div>
<!-- Cards --> <!-- Table Template -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> <div class="card shadow-sm">
<div <div class="card-body">
class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2"> <table class="table table-bordered">
<div> <thead class="table-light">
<h5 class="text-gray-500 text-sm">Kategori</h5>
<h3 class="font-bold text-xl">{{ $totalKategori }}</h3>
</div>
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
<i class="bi bi-diagram-3"></i>
</div>
</div>
<div
class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2">
<div>
<h5 class="text-gray-500 text-sm">Template</h5>
<h3 class="font-bold text-xl">{{ $totalTemplate }}</h3>
</div>
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
<i class="bi bi-card-list"></i>
</div>
</div>
<div
class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2">
<div>
<h5 class="text-gray-500 text-sm">Pelanggan</h5>
<h3 class="font-bold text-xl">{{ $totalPelanggan }}</h3>
</div>
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
<i class="bi bi-person"></i>
</div>
</div>
</div>
<!-- Recent Pelanggan -->
<div class="bg-white rounded-lg shadow-sm mt-6">
<div class="p-4 overflow-x-auto">
<h4 class="text-lg font-bold mb-3">Pelanggan Terbaru</h4>
<table class="w-full text-left border-collapse border border-gray-300">
<thead class="bg-gray-100">
<tr> <tr>
<th class="p-2 border border-gray-300 text-center w-16">Nomor</th> <th>Nomor</th>
<th class="p-2 border border-gray-300 text-center">Nama</th> <th>Nama Template</th>
<th class="p-2 border border-gray-300 text-center">Template</th> <th>Kategori</th>
<th class="p-2 border border-gray-300 text-center">Kategori</th> <th>Harga</th>
<th class="p-2 border border-gray-300 text-center">Email</th> <th>Fitur</th>
<th class="p-2 border border-gray-300 text-center">No. Telepon</th> <th>Aksi</th>
<th class="p-2 border border-gray-300 text-center">Harga</th>
<th class="p-2 border border-gray-300 text-center">Tanggal Pemesanan</th>
<th class="p-2 border border-gray-300 text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@forelse($recentPelanggan as $index => $pelanggan) @forelse($templates as $index => $template)
<tr> <tr>
<td class="p-2 py-4 border border-gray-300 text-center"> <td>{{ $templates->firstItem() + $index }}</td>
{{ $recentPelanggan->firstItem() + $index }} <td>{{ $template->nama_template }}</td>
<td>{{ $template->kategori->nama_kategori ?? '-' }}</td>
<td>Rp {{ number_format($template->harga, 0, ',', '.') }}</td>
<td>
@foreach ($template->fiturs as $fitur)
<span class="badge bg-info text-dark">{{ $fitur->nama_fitur }}</span>
@endforeach
</td> </td>
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_pemesan }}</td> <td>
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_template }}</td> <a href="{{ route('templates.show', $template->id) }}" class="btn btn-sm btn-info">
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->kategori ?? '-' }}</td> <i class="bi bi-eye"></i>
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->email }}</td> </a>
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->no_tlpn ?? '-' }}</td> <a href="{{ route('templates.edit', $template->id) }}" class="btn btn-sm btn-warning">
<td class="py-3 px-2 border border-gray-300 text-center"> <i class="bi bi-pencil"></i>
Rp {{ number_format($pelanggan->harga, 0, ',', '.') }} </a>
</td> <form action="{{ route('templates.destroy', $template->id) }}" method="POST"
<td class="py-3 px-2 border border-gray-300 text-center"> class="d-inline">
{{ \Carbon\Carbon::parse($pelanggan->created_at)->format('d M Y') }} @csrf
</td> @method('DELETE')
<td class="p-2 border border-gray-300 text-center"> <button class="btn btn-sm btn-danger"
<div class="flex justify-center space-x-2"> onclick="return confirm('Yakin hapus template ini?')">
<a href="{{ route('admin.pelanggan.show', $pelanggan->id) }}" <i class="bi bi-trash"></i>
class="text-blue-600 hover:underline flex items-center">
<i class="bi bi-eye mr-1"></i> Detail
</a>
<button class="text-red-600 hover:underline flex items-center openDeleteModalBtn"
data-id="{{ $pelanggan->id }}">
<i class="bi bi-trash mr-1"></i> Hapus
</button> </button>
</div> </form>
</td> </td>
</tr> </tr>
@empty @empty
<tr> <tr>
<td colspan="9" class="p-2 text-center text-gray-500 border border-gray-300"> <td colspan="6" class="text-center text-muted">Belum ada template</td>
Belum ada data pelanggan.
</td>
</tr> </tr>
@endforelse @endforelse
</tbody> </tbody>
</table> </table>
<!-- Pagination --> <div class="mt-3">
<div class="p-4 flex justify-center"> {{ $templates->links() }}
<div class="flex space-x-1">
{{-- Tombol Previous --}}
@if ($recentPelanggan->onFirstPage())
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span>
@else
<a href="{{ $recentPelanggan->previousPageUrl() }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a>
@endif
@php
$total = $recentPelanggan->lastPage();
$current = $recentPelanggan->currentPage();
@endphp
{{-- Selalu tampilkan halaman pertama --}}
@if ($current > 2)
<a href="{{ $recentPelanggan->url(1) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">1</a>
@if ($current > 3)
<span class="px-3 py-1 text-gray-500">...</span>
@endif
@endif
{{-- Hanya tampilkan 3 halaman di tengah (current-1, current, current+1) --}}
@for ($i = max(1, $current - 1); $i <= min($total, $current + 1); $i++)
@if ($i == $current)
<span
class="px-3 py-1 rounded-lg bg-blue-600 text-white font-semibold">{{ $i }}</span>
@else
<a href="{{ $recentPelanggan->url($i) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $i }}</a>
@endif
@endfor
{{-- Selalu tampilkan halaman terakhir --}}
@if ($current < $total - 1)
@if ($current < $total - 2)
<span class="px-3 py-1 text-gray-500">...</span>
@endif
<a href="{{ $recentPelanggan->url($total) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $total }}</a>
@endif
{{-- Tombol Next --}}
@if ($recentPelanggan->hasMorePages())
<a href="{{ $recentPelanggan->nextPageUrl() }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Next</a>
@else
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Next</span>
@endif
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Modal Hapus Pelanggan --> <!-- Modal Tambah Template -->
@foreach ($recentPelanggan as $pelanggan) <div class="modal fade" id="modalTambah" tabindex="-1" aria-labelledby="modalTambahLabel" aria-hidden="true">
<div id="modalDelete{{ $pelanggan->id }}" class="fixed inset-0 hidden items-center justify-center z-50"> <div class="modal-dialog modal-lg">
<div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $pelanggan->id }}"></div> <form action="{{ route('templates.store') }}" method="POST" enctype="multipart/form-data"
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden"> class="modal-content">
<div class="p-4 border-b"> @csrf
<h5 class="text-lg font-medium">Hapus Pelanggan</h5> <div class="modal-header">
<h5 class="modal-title" id="modalTambahLabel">Tambah Template</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- Nama -->
<div class="mb-3">
<label class="form-label">Nama Template</label>
<input type="text" name="nama_template" class="form-control" required>
</div> </div>
<div class="p-4">
<p>Apakah Anda yakin ingin menghapus pelanggan <strong>{{ $pelanggan->nama_pemesan }}</strong>?</p> <!-- Kategori -->
<div class="mb-3">
<label class="form-label">Kategori</label>
<select name="kategori_id" class="form-select" required>
<option value="">-- Pilih Kategori --</option>
@foreach ($kategoris as $kategori)
<option value="{{ $kategori->id }}">{{ $kategori->nama_kategori }}</option>
@endforeach
</select>
</div> </div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn" <!-- Fitur -->
data-id="{{ $pelanggan->id }}">Batal</button> <div class="mb-3">
<form action="{{ route('admin.pelanggan.destroy', $pelanggan->id) }}" method="POST" <label class="form-label">Fitur</label><br>
class="inline"> @foreach ($fiturList as $fitur)
@csrf <div class="form-check form-check-inline">
@method('DELETE') <input class="form-check-input feature-checkbox" type="checkbox"
<button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button> id="fitur{{ $fitur->id }}" data-harga="{{ $fitur->harga }}">
</form> <label class="form-check-label" for="fitur{{ $fitur->id }}">
{{ $fitur->nama_fitur }} - Rp {{ number_format($fitur->harga, 0, ',', '.') }}
</label>
</div>
@endforeach
</div>
<!-- Harga -->
<div class="mb-3">
<label class="form-label">Harga</label>
<input type="text" id="harga" name="harga" class="form-control" value="Rp 0" readonly>
</div>
<!-- Foto -->
<div class="mb-3">
<label class="form-label">Foto</label>
<input type="file" name="foto" class="form-control">
</div> </div>
</div> </div>
</div> <div class="modal-footer">
@endforeach <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn'); const checkboxes = document.querySelectorAll('.feature-checkbox');
const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn'); const hargaInput = document.getElementById('harga');
const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
openDeleteBtns.forEach(btn => { function updateHarga() {
btn.addEventListener('click', () => { let total = 0;
const id = btn.dataset.id; checkboxes.forEach(cb => {
const modal = document.getElementById('modalDelete' + id); if (cb.checked) total += parseInt(cb.dataset.harga);
if (modal) {
modal.classList.remove('hidden');
modal.classList.add('flex');
}
});
}); });
closeDeleteBtns.forEach(btn => { hargaInput.value = 'Rp ' + total.toLocaleString('id-ID');
btn.addEventListener('click', () => { }
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
if (modal) {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
});
});
closeDeleteOverlays.forEach(overlay => { // jalan setiap ada perubahan
overlay.addEventListener('click', () => { checkboxes.forEach(cb => cb.addEventL istener('change', updateHarga));
const id = overlay.dataset.id;
const modal = document.getElementById('modalDelete' + id); // jalan pertama kali biar gak kosong
if (modal) { updateHarga();
modal.classList.add('hidden'); });
modal.classList.remove('flex'); </script>
} @endsection
});
});
});
</script>
@endsection

502
backend/resources/views/admin/fitur/index.blade.php
View File

@ -3,291 +3,307 @@
@section('title', 'Manajemen Fitur') @section('title', 'Manajemen Fitur')
@section('content') @section('content')
<div class="container mx-auto py-4"> <div class="container mx-auto py-4">
<!-- Header --> <!-- Header -->
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Manajemen Fitur</h3> <h3 class="text-xl font-bold">Manajemen Fitur</h3>
<button id="openTambahModal" class="bg-blue-600 text-white px-3 py-2.5 rounded flex items-center"> <button id="openTambahModal" class="bg-blue-600 text-white px-3 py-2.5 rounded flex items-center">
<i class="bi bi-plus-lg mr-1"></i> Tambah Fitur <i class="bi bi-plus-lg mr-1"></i> Tambah Fitur
</button> </button>
</div>
<!-- Flash Message -->
@if (session('success'))
<div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
{{ session('success') }}
</div>
<script>
setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
</script>
@endif
@if ($errors->any())
<div id="toast-error" class="mb-4 p-3 rounded bg-red-100 text-red-800 border border-red-300 shadow">
<ul class="list-disc ml-5">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
<script>
setTimeout(() => document.getElementById('toast-error')?.remove(), 5000);
</script>
@endif
<!-- Tabel Fitur -->
<div class="bg-white rounded-lg shadow-sm">
<div class="p-4 overflow-x-auto">
<table class="w-full table-fixed border border-gray-300 text-left">
<thead class="bg-gray-100">
<tr>
<th class="w-[7%] p-2 border border-gray-300 text-center">Nomor</th>
<th class="w-[70%] p-2 border border-gray-300 text-center">Fitur</th>
<th class="w-[20%] p-2 border border-gray-300 text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse ($fitur as $key => $item)
<tr class="hover:bg-gray-50">
<td class="py-5 px-2 border border-gray-300 text-center">
{{ $fitur->firstItem() + $key }}
</td>
<td class="py-5 px-2 border border-gray-300 truncate whitespace-nowrap">{{ $item->deskripsi }}</td>
<td class="py-5 px-2 border border-gray-300 text-center">
<div class="flex justify-center space-x-2">
<button class="text-blue-600 flex items-center pr-4 openEditModalBtn"
data-id="{{ $item->id }}">
<i class="bi bi-pencil mr-1"></i> Ubah
</button>
<button class="text-red-600 flex items-center openDeleteModalBtn"
data-id="{{ $item->id }}">
<i class="bi bi-trash mr-1"></i> Hapus
</button>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="3" class="p-2 text-center text-gray-500">Belum ada fitur</td>
</tr>
@endforelse
</tbody>
</table>
</div> </div>
<!-- Pagination --> <!-- Flash Message -->
<div class="p-4 flex justify-center"> @if (session('success'))
<div class="flex space-x-1"> <div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
{{-- Tombol Previous --}} {{ session('success') }}
@if ($fitur->onFirstPage()) </div>
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span> <script>
@else setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
<a href="{{ $fitur->previousPageUrl() }}" </script>
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a> @endif
@endif
@php @if ($errors->any())
$total = $fitur->lastPage(); <div id="toast-error" class="mb-4 p-3 rounded bg-red-100 text-red-800 border border-red-300 shadow">
$current = $fitur->currentPage(); <ul class="list-disc ml-5">
@endphp @foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
<script>
setTimeout(() => document.getElementById('toast-error')?.remove(), 5000);
</script>
@endif
{{-- Selalu tampilkan halaman pertama --}} <!-- Tabel Fitur -->
@if ($current > 2) <div class="bg-white rounded-lg shadow-sm">
<a href="{{ $fitur->url(1) }}" <div class="p-4 overflow-x-auto">
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">1</a> <table class="w-full table-fixed border border-gray-300 text-left">
@if ($current > 3) <thead class="bg-gray-100">
<span class="px-3 py-1 text-gray-500">...</span> <tr>
@endif <th class="w-[7%] p-2 border border-gray-300 text-center">Nomor</th>
@endif <th class="w-[45%] p-2 border border-gray-300 text-center">Fitur</th>
<th class="w-[20%] p-2 border border-gray-300 text-center">Harga</th>
<th class="w-[20%] p-2 border border-gray-300 text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse ($fitur as $key => $item)
<tr class="hover:bg-gray-50">
<td class="py-5 px-2 border border-gray-300 text-center">
{{ $fitur->firstItem() + $key }}
</td>
<td class="py-5 px-2 border border-gray-300 truncate whitespace-nowrap">
{{ $item->deskripsi }}
</td>
<td class="py-5 px-2 border border-gray-300 text-center">
Rp {{ number_format($item->harga, 0, ',', '.') }}
</td>
<td class="py-5 px-2 border border-gray-300 text-center">
<div class="flex justify-center space-x-2">
<button class="text-blue-600 flex items-center pr-4 openEditModalBtn"
data-id="{{ $item->id }}">
<i class="bi bi-pencil mr-1"></i> Ubah
</button>
<button class="text-red-600 flex items-center openDeleteModalBtn"
data-id="{{ $item->id }}">
<i class="bi bi-trash mr-1"></i> Hapus
</button>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="p-2 text-center text-gray-500">Belum ada fitur</td>
</tr>
@endforelse
</tbody>
</table>
</div>
{{-- Hanya tampilkan 3 halaman di tengah (current-1, current, current+1) --}} <!-- Pagination -->
@for ($i = max(1, $current - 1); $i <= min($total, $current + 1); $i++) <div class="p-4 flex justify-center">
@if ($i == $current) <div class="flex space-x-1">
<span class="px-3 py-1 rounded-lg bg-blue-600 text-white font-semibold">{{ $i }}</span> {{-- Tombol Previous --}}
@else @if ($fitur->onFirstPage())
<a href="{{ $fitur->url($i) }}" <span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span>
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $i }}</a> @else
@endif <a href="{{ $fitur->previousPageUrl() }}"
@endfor class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a>
@endif
{{-- Selalu tampilkan halaman terakhir --}} @php
@if ($current < $total - 1) $total = $fitur->lastPage();
@if ($current < $total - 2) $current = $fitur->currentPage();
<span class="px-3 py-1 text-gray-500">...</span> @endphp
@endif
<a href="{{ $fitur->url($total) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $total }}</a>
@endif
{{-- Tombol Next --}} {{-- Selalu tampilkan halaman pertama --}}
@if ($fitur->hasMorePages()) @if ($current > 2)
<a href="{{ $fitur->nextPageUrl() }}" <a href="{{ $fitur->url(1) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Next</a> class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">1</a>
@else @if ($current > 3)
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Next</span> <span class="px-3 py-1 text-gray-500">...</span>
@endif @endif
@endif
{{-- Halaman tengah --}}
@for ($i = max(1, $current - 1); $i <= min($total, $current + 1); $i++)
@if ($i == $current)
<span class="px-3 py-1 rounded-lg bg-blue-600 text-white font-semibold">{{ $i }}</span>
@else
<a href="{{ $fitur->url($i) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $i }}</a>
@endif
@endfor
{{-- Selalu tampilkan halaman terakhir --}}
@if ($current < $total - 1)
@if ($current < $total - 2)
<span class="px-3 py-1 text-gray-500">...</span>
@endif
<a href="{{ $fitur->url($total) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $total }}</a>
@endif
{{-- Tombol Next --}}
@if ($fitur->hasMorePages())
<a href="{{ $fitur->nextPageUrl() }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Next</a>
@else
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Next</span>
@endif
</div>
</div>
</div> </div>
</div> </div>
<!-- Modal Tambah -->
<div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50">
<div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div>
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
<form action="{{ route('admin.fitur.store') }}" method="POST">
@csrf
<div class="p-4 border-b">
<h5 class="text-lg font-medium">Tambah Fitur</h5>
</div>
<div class="p-4 space-y-4">
<div>
<label class="block text-sm font-medium">Nama Fitur</label>
<input type="text" name="deskripsi" class="w-full p-2 border rounded" required>
</div>
<div>
<label class="block text-sm font-medium">Harga</label>
<input type="number" name="harga" step="100" min="0" class="w-full p-2 border rounded" required>
</div>
</div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" id="closeTambahBtn"
class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Edit -->
<!-- Modal Tambah --> @foreach ($fitur as $item)
<div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50"> <div id="modalEdit{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
<div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div> <div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $item->id }}"></div>
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden"> <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
<form action="{{ route('admin.fitur.store') }}" method="POST"> <form action="{{ route('admin.fitur.update', $item->id) }}" method="POST">
@csrf @csrf
@method('PUT')
<div class="p-4 border-b"> <div class="p-4 border-b">
<h5 class="text-lg font-medium">Tambah Fitur</h5> <h5 class="text-lg font-medium">Edit Fitur</h5>
</div> </div>
<div class="p-4 space-y-4"> <div class="p-4 space-y-4">
<div> <div>
<label class="block text-sm font-medium">Nama Fitur</label> <label class="block text-sm font-medium">Nama Fitur</label>
<input type="text" name="deskripsi" class="w-full p-2 border rounded" required> <input type="text" name="deskripsi" value="{{ $item->deskripsi }}"
class="w-full p-2 border rounded" required>
</div>
<div>
<label class="block text-sm font-medium">Harga</label>
<input type="number" name="harga" value="{{ $item->harga }}"
step="100" min="0" class="w-full p-2 border rounded" required>
</div> </div>
</div> </div>
<div class="p-4 border-t flex justify-end space-x-2"> <div class="p-4 border-t flex justify-end space-x-2">
<button type="button" id="closeTambahBtn" <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeEditBtn"
class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button> data-id="{{ $item->id }}">Batal</button>
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button> <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
@endforeach
<!-- Modal Edit --> <!-- Modal Hapus -->
@foreach ($fitur as $item) @foreach ($fitur as $item)
<div id="modalEdit{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50"> <div id="modalDelete{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
<div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $item->id }}"></div> <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $item->id }}"></div>
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden"> <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
<form action="{{ route('admin.fitur.update', $item->id) }}" method="POST"> <div class="p-4 border-b">
<h5 class="text-lg font-medium">Hapus Fitur</h5>
</div>
<div class="p-4">
<p>Apakah Anda yakin ingin menghapus fitur <strong>{{ $item->deskripsi }}</strong>?</p>
</div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
data-id="{{ $item->id }}">Batal</button>
<form action="{{ route('admin.fitur.destroy', $item->id) }}" method="POST" class="inline">
@csrf @csrf
@method('PUT') @method('DELETE')
<div class="p-4 border-b"> <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
<h5 class="text-lg font-medium">Edit Fitur</h5>
</div>
<div class="p-4 space-y-4">
<div>
<label class="block text-sm font-medium">Nama Fitur</label>
<input type="text" name="deskripsi" value="{{ $item->deskripsi }}"
class="w-full p-2 border rounded" required>
</div>
</div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeEditBtn"
data-id="{{ $item->id }}">Batal</button>
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
</div>
</form> </form>
</div> </div>
</div> </div>
@endforeach </div>
@endforeach
<!-- Modal Hapus --> <script>
@foreach ($fitur as $item) // Modal Tambah
<div id="modalDelete{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50"> const openTambahModal = document.getElementById('openTambahModal');
<div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $item->id }}"></div> const modalTambah = document.getElementById('modalTambah');
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden"> const closeTambahBtn = document.getElementById('closeTambahBtn');
<div class="p-4 border-b"> const closeTambahOverlay = document.getElementById('closeTambahModal');
<h5 class="text-lg font-medium">Hapus Fitur</h5>
</div>
<div class="p-4">
<p>Apakah Anda yakin ingin menghapus fitur <strong>{{ $item->deskripsi }}</strong>?</p>
</div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
data-id="{{ $item->id }}">Batal</button>
<form action="{{ route('admin.fitur.destroy', $item->id) }}" method="POST" class="inline">
@csrf
@method('DELETE')
<button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
</form>
</div>
</div>
</div>
@endforeach
<script> openTambahModal.addEventListener('click', () => {
// Modal Tambah modalTambah.classList.remove('hidden');
const openTambahModal = document.getElementById('openTambahModal'); modalTambah.classList.add('flex');
const modalTambah = document.getElementById('modalTambah'); });
const closeTambahBtn = document.getElementById('closeTambahBtn'); closeTambahBtn.addEventListener('click', () => {
const closeTambahOverlay = document.getElementById('closeTambahModal'); modalTambah.classList.add('hidden');
modalTambah.classList.remove('flex');
});
closeTambahOverlay.addEventListener('click', () => {
modalTambah.classList.add('hidden');
modalTambah.classList.remove('flex');
});
openTambahModal.addEventListener('click', () => { // Modal Edit
modalTambah.classList.remove('hidden'); const openEditBtns = document.querySelectorAll('.openEditModalBtn');
modalTambah.classList.add('flex'); const closeEditBtns = document.querySelectorAll('.closeEditBtn');
}); const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
closeTambahBtn.addEventListener('click', () => {
modalTambah.classList.add('hidden'); openEditBtns.forEach(btn => {
modalTambah.classList.remove('flex'); btn.addEventListener('click', () => {
}); const id = btn.dataset.id;
closeTambahOverlay.addEventListener('click', () => { const modal = document.getElementById('modalEdit' + id);
modalTambah.classList.add('hidden'); modal.classList.remove('hidden');
modalTambah.classList.remove('flex'); modal.classList.add('flex');
}); });
});
// Modal Edit closeEditBtns.forEach(btn => {
const openEditBtns = document.querySelectorAll('.openEditModalBtn'); btn.addEventListener('click', () => {
const closeEditBtns = document.querySelectorAll('.closeEditBtn'); const id = btn.dataset.id;
const closeEditOverlays = document.querySelectorAll('.closeEditOverlay'); const modal = document.getElementById('modalEdit' + id);
modal.classList.add('hidden');
openEditBtns.forEach(btn => { modal.classList.remove('flex');
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.remove('hidden');
modal.classList.add('flex');
});
}); });
});
closeEditBtns.forEach(btn => { closeEditOverlays.forEach(overlay => {
btn.addEventListener('click', () => { overlay.addEventListener('click', () => {
const id = btn.dataset.id; const id = overlay.dataset.id;
const modal = document.getElementById('modalEdit' + id); const modal = document.getElementById('modalEdit' + id);
modal.classList.add('hidden'); modal.classList.add('hidden');
modal.classList.remove('flex'); modal.classList.remove('flex');
});
}); });
});
closeEditOverlays.forEach(overlay => { // Modal Delete
overlay.addEventListener('click', () => { const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
const id = overlay.dataset.id; const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
const modal = document.getElementById('modalEdit' + id); const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
modal.classList.add('hidden');
modal.classList.remove('flex'); openDeleteBtns.forEach(btn => {
}); btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.remove('hidden');
modal.classList.add('flex');
}); });
});
// Modal Delete closeDeleteBtns.forEach(btn => {
const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn'); btn.addEventListener('click', () => {
const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn'); const id = btn.dataset.id;
const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay'); const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden');
openDeleteBtns.forEach(btn => { modal.classList.remove('flex');
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.remove('hidden');
modal.classList.add('flex');
});
}); });
});
closeDeleteBtns.forEach(btn => { closeDeleteOverlays.forEach(overlay => {
btn.addEventListener('click', () => { overlay.addEventListener('click', () => {
const id = btn.dataset.id; const id = overlay.dataset.id;
const modal = document.getElementById('modalDelete' + id); const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden'); modal.classList.add('hidden');
modal.classList.remove('flex'); modal.classList.remove('flex');
});
}); });
});
closeDeleteOverlays.forEach(overlay => { </script>
overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
</script>
@endsection @endsection