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
// app/Http/Controllers/FiturController.php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use App\Models\Fitur;
use Illuminate\Http\Request;
class FiturController extends Controller
{
// Tampilkan semua fitur (halaman admin)
// Tampilkan semua fitur
public function index()
{
$fitur = \App\Models\Fitur::paginate(5);
$fitur = Fitur::paginate(5);
return view('admin.fitur.index', compact('fitur'));
}
// Form tambah fitur
public function create()
// Simpan fitur baru
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
public function store(Request $request)
{
$data = $request->validate([
'deskripsi' => 'required|string',
]);
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!');
}
// Update fitur
public function update(Request $request, $id)
{
$request->validate([
'deskripsi' => 'required|string|max:255',
'harga' => 'required|numeric|min:0',
]);
$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
public function destroy(Fitur $fitur)
public function destroy($id)
{
$fitur = Fitur::findOrFail($id);
$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)
{
$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',
'harga' => 'required|numeric|min:0'
]);
public function store(Request $request)
{
$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',
]);
if ($request->hasFile('foto')) {
$data['foto'] = $request->file('foto')->store('templates', 'public');
}
// hitung total harga dari fitur yang dipilih
$totalHarga = Fitur::whereIn('id', $data['fitur_id'])->sum('harga');
// create template (tanpa fitur)
$template = Template::create([
'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!');
if ($request->hasFile('foto')) {
$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',
'harga' => 'required|numeric|min:0'
]);
$template = Template::create([
'nama_template' => $data['nama_template'],
'kategori_id' => $data['kategori_id'],
'foto' => $data['foto'] ?? null,
'harga' => $totalHarga, // ✅ otomatis dari fitur
]);
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->fiturs()->sync($data['fitur_id']);
return redirect()->route('templates.index')->with('success', 'Template berhasil ditambahkan!');
}
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);
}
$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!');
$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' => $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)
{
if ($template->foto && Storage::disk('public')->exists($template->foto)) {

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

@ -3,14 +3,12 @@
namespace App\Models;
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()
{
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 {
public function up(): void {
Schema::create('templates', function (Blueprint $table) {
$table->id();
$table->string('nama_template');
$table->foreignId('kategori_id')->constrained()->cascadeOnDelete();
$table->foreignId('fitur_id')->constrained()->cascadeOnDelete();
$table->decimal('harga', 10, 2)->default(0);
$table->string('foto')->nullable();
$table->timestamps();
});
// database/migrations/2025_09_08_000003_create_templates_table.php
Schema::create('templates', function (Blueprint $table) {
$table->id();
$table->string('nama_template');
$table->foreignId('kategori_id')->constrained()->cascadeOnDelete();
$table->decimal('harga', 10, 2)->default(0); // ✅ harga template
$table->string('foto')->nullable();
$table->timestamps();
});
}
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')
@section('title', 'Halaman Dasbor')
@section('title', 'Manajemen Template')
@section('content')
<div class="container mx-auto py-4">
<!-- Header -->
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Halaman Dasbor</h3>
<div class="flex items-center gap-3">
<div class="bg-blue-100 text-blue-600 px-3 py-2 rounded-lg flex items-center gap-2 text-sm">
<i class="bi bi-clock-history"></i>
{{ $today }}
</div>
</div>
<div class="container py-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="fw-bold">Manajemen Template</h3>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambah">
<i class="bi bi-plus-lg"></i> Tambah Template
</button>
</div>
<!-- Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<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">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">
<!-- Table Template -->
<div class="card shadow-sm">
<div class="card-body">
<table class="table table-bordered">
<thead class="table-light">
<tr>
<th class="p-2 border border-gray-300 text-center w-16">Nomor</th>
<th class="p-2 border border-gray-300 text-center">Nama</th>
<th class="p-2 border border-gray-300 text-center">Template</th>
<th class="p-2 border border-gray-300 text-center">Kategori</th>
<th class="p-2 border border-gray-300 text-center">Email</th>
<th class="p-2 border border-gray-300 text-center">No. Telepon</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>
<th>Nomor</th>
<th>Nama Template</th>
<th>Kategori</th>
<th>Harga</th>
<th>Fitur</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@forelse($recentPelanggan as $index => $pelanggan)
@forelse($templates as $index => $template)
<tr>
<td class="p-2 py-4 border border-gray-300 text-center">
{{ $recentPelanggan->firstItem() + $index }}
<td>{{ $templates->firstItem() + $index }}</td>
<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 class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_pemesan }}</td>
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_template }}</td>
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->kategori ?? '-' }}</td>
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->email }}</td>
<td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->no_tlpn ?? '-' }}</td>
<td class="py-3 px-2 border border-gray-300 text-center">
Rp {{ number_format($pelanggan->harga, 0, ',', '.') }}
</td>
<td class="py-3 px-2 border border-gray-300 text-center">
{{ \Carbon\Carbon::parse($pelanggan->created_at)->format('d M Y') }}
</td>
<td class="p-2 border border-gray-300 text-center">
<div class="flex justify-center space-x-2">
<a href="{{ route('admin.pelanggan.show', $pelanggan->id) }}"
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
<td>
<a href="{{ route('templates.show', $template->id) }}" class="btn btn-sm btn-info">
<i class="bi bi-eye"></i>
</a>
<a href="{{ route('templates.edit', $template->id) }}" class="btn btn-sm btn-warning">
<i class="bi bi-pencil"></i>
</a>
<form action="{{ route('templates.destroy', $template->id) }}" method="POST"
class="d-inline">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-danger"
onclick="return confirm('Yakin hapus template ini?')">
<i class="bi bi-trash"></i>
</button>
</div>
</form>
</td>
</tr>
@empty
<tr>
<td colspan="9" class="p-2 text-center text-gray-500 border border-gray-300">
Belum ada data pelanggan.
</td>
<td colspan="6" class="text-center text-muted">Belum ada template</td>
</tr>
@endforelse
</tbody>
</table>
<!-- Pagination -->
<div class="p-4 flex justify-center">
<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 class="mt-3">
{{ $templates->links() }}
</div>
</div>
</div>
</div>
<!-- Modal Hapus Pelanggan -->
@foreach ($recentPelanggan as $pelanggan)
<div id="modalDelete{{ $pelanggan->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
<div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $pelanggan->id }}"></div>
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
<div class="p-4 border-b">
<h5 class="text-lg font-medium">Hapus Pelanggan</h5>
<!-- Modal Tambah Template -->
<div class="modal fade" id="modalTambah" tabindex="-1" aria-labelledby="modalTambahLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<form action="{{ route('templates.store') }}" method="POST" enctype="multipart/form-data"
class="modal-content">
@csrf
<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 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 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="{{ $pelanggan->id }}">Batal</button>
<form action="{{ route('admin.pelanggan.destroy', $pelanggan->id) }}" method="POST"
class="inline">
@csrf
@method('DELETE')
<button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
</form>
<!-- Fitur -->
<div class="mb-3">
<label class="form-label">Fitur</label><br>
@foreach ($fiturList as $fitur)
<div class="form-check form-check-inline">
<input class="form-check-input feature-checkbox" type="checkbox"
id="fitur{{ $fitur->id }}" data-harga="{{ $fitur->harga }}">
<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>
@endforeach
<div class="modal-footer">
<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>
document.addEventListener('DOMContentLoaded', () => {
const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
<script>
document.addEventListener('DOMContentLoaded', () => {
const checkboxes = document.querySelectorAll('.feature-checkbox');
const hargaInput = document.getElementById('harga');
openDeleteBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
if (modal) {
modal.classList.remove('hidden');
modal.classList.add('flex');
}
});
function updateHarga() {
let total = 0;
checkboxes.forEach(cb => {
if (cb.checked) total += parseInt(cb.dataset.harga);
});
closeDeleteBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
if (modal) {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
});
});
hargaInput.value = 'Rp ' + total.toLocaleString('id-ID');
}
closeDeleteOverlays.forEach(overlay => {
overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
const modal = document.getElementById('modalDelete' + id);
if (modal) {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
});
});
});
</script>
@endsection
// jalan setiap ada perubahan
checkboxes.forEach(cb => cb.addEventL istener('change', updateHarga));
// jalan pertama kali biar gak kosong
updateHarga();
});
</script>
@endsection

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

@ -3,291 +3,307 @@
@section('title', 'Manajemen Fitur')
@section('content')
<div class="container mx-auto py-4">
<!-- Header -->
<div class="flex justify-between items-center mb-4">
<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">
<i class="bi bi-plus-lg mr-1"></i> Tambah Fitur
</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 class="container mx-auto py-4">
<!-- Header -->
<div class="flex justify-between items-center mb-4">
<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">
<i class="bi bi-plus-lg mr-1"></i> Tambah Fitur
</button>
</div>
<!-- Pagination -->
<div class="p-4 flex justify-center">
<div class="flex space-x-1">
{{-- Tombol Previous --}}
@if ($fitur->onFirstPage())
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span>
@else
<a href="{{ $fitur->previousPageUrl() }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a>
@endif
<!-- 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
@php
$total = $fitur->lastPage();
$current = $fitur->currentPage();
@endphp
@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
{{-- Selalu tampilkan halaman pertama --}}
@if ($current > 2)
<a href="{{ $fitur->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
<!-- 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-[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) --}}
@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
<!-- Pagination -->
<div class="p-4 flex justify-center">
<div class="flex space-x-1">
{{-- Tombol Previous --}}
@if ($fitur->onFirstPage())
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span>
@else
<a href="{{ $fitur->previousPageUrl() }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a>
@endif
{{-- 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
@php
$total = $fitur->lastPage();
$current = $fitur->currentPage();
@endphp
{{-- 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
{{-- Selalu tampilkan halaman pertama --}}
@if ($current > 2)
<a href="{{ $fitur->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
{{-- 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>
<!-- 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 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>
<!-- Modal Edit -->
@foreach ($fitur as $item)
<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 closeEditOverlay" data-id="{{ $item->id }}"></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">
<form action="{{ route('admin.fitur.update', $item->id) }}" method="POST">
@csrf
@method('PUT')
<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 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>
<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 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>
<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>
</div>
</div>
@endforeach
<!-- Modal Edit -->
@foreach ($fitur as $item)
<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 closeEditOverlay" data-id="{{ $item->id }}"></div>
<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">
<!-- Modal Hapus -->
@foreach ($fitur as $item)
<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 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="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
@method('PUT')
<div class="p-4 border-b">
<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>
@method('DELETE')
<button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
</form>
</div>
</div>
@endforeach
</div>
@endforeach
<!-- Modal Hapus -->
@foreach ($fitur as $item)
<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 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="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
@method('DELETE')
<button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
</form>
</div>
</div>
</div>
@endforeach
<script>
// Modal Tambah
const openTambahModal = document.getElementById('openTambahModal');
const modalTambah = document.getElementById('modalTambah');
const closeTambahBtn = document.getElementById('closeTambahBtn');
const closeTambahOverlay = document.getElementById('closeTambahModal');
<script>
// Modal Tambah
const openTambahModal = document.getElementById('openTambahModal');
const modalTambah = document.getElementById('modalTambah');
const closeTambahBtn = document.getElementById('closeTambahBtn');
const closeTambahOverlay = document.getElementById('closeTambahModal');
openTambahModal.addEventListener('click', () => {
modalTambah.classList.remove('hidden');
modalTambah.classList.add('flex');
});
closeTambahBtn.addEventListener('click', () => {
modalTambah.classList.add('hidden');
modalTambah.classList.remove('flex');
});
closeTambahOverlay.addEventListener('click', () => {
modalTambah.classList.add('hidden');
modalTambah.classList.remove('flex');
});
openTambahModal.addEventListener('click', () => {
modalTambah.classList.remove('hidden');
modalTambah.classList.add('flex');
});
closeTambahBtn.addEventListener('click', () => {
modalTambah.classList.add('hidden');
modalTambah.classList.remove('flex');
});
closeTambahOverlay.addEventListener('click', () => {
modalTambah.classList.add('hidden');
modalTambah.classList.remove('flex');
// Modal Edit
const openEditBtns = document.querySelectorAll('.openEditModalBtn');
const closeEditBtns = document.querySelectorAll('.closeEditBtn');
const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
openEditBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.remove('hidden');
modal.classList.add('flex');
});
});
// Modal Edit
const openEditBtns = document.querySelectorAll('.openEditModalBtn');
const closeEditBtns = document.querySelectorAll('.closeEditBtn');
const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
openEditBtns.forEach(btn => {
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 => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
closeEditBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
closeEditOverlays.forEach(overlay => {
overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
closeEditOverlays.forEach(overlay => {
overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
// Modal Delete
const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
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
const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
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');
});
closeDeleteBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
closeDeleteBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
closeDeleteOverlays.forEach(overlay => {
overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
closeDeleteOverlays.forEach(overlay => {
overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
</script>
});
</script>
@endsection