280 lines
14 KiB
PHP
280 lines
14 KiB
PHP
@extends('layouts.app')
|
|
|
|
@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">
|
|
@isset($kategori)
|
|
Template Kategori: {{ $kategori->nama }}
|
|
@else
|
|
Semua Template
|
|
@endisset
|
|
</h3>
|
|
|
|
@if (!isset($kategori))
|
|
<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 Template
|
|
</button>
|
|
@endif
|
|
</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 Template -->
|
|
<div class="bg-white rounded-lg shadow-sm">
|
|
<div class="p-4 overflow-x-auto">
|
|
<table class="w-full table-fixed text-left border border-gray-300 border-collapse">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="p-2 border border-gray-300 w-[50px] text-center">No</th>
|
|
<th class="p-2 border border-gray-300 w-[200px]">Nama Template</th>
|
|
<th class="p-2 border border-gray-300 w-[150px]">Kategori</th>
|
|
<th class="p-2 border border-gray-300 w-[150px]">Fitur</th>
|
|
<th class="p-2 border border-gray-300 w-[90px] text-center">Foto</th>
|
|
<th class="p-2 border border-gray-300 w-[100px] text-center">Harga</th>
|
|
<th class="p-2 border border-gray-300 w-[130px] text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($templates as $key => $template)
|
|
<tr>
|
|
<td class="p-2 border border-gray-300 text-center">{{ $key + 1 }}</td>
|
|
<td class="p-2 border border-gray-300 truncate">{{ $template->nama_template }}</td>
|
|
<td class="p-2 border border-gray-300 truncate">{{ $template->kategori->nama ?? '-' }}</td>
|
|
<td class="p-2 border border-gray-300 truncate">{{ $template->fitur->deskripsi ?? '-' }}</td>
|
|
<td class="p-2 border border-gray-300 text-center">
|
|
<div class="w-12 h-12 overflow-hidden rounded bg-gray-100 flex items-center justify-center mx-auto">
|
|
<img src="{{ $template->foto ? asset('storage/' . $template->foto) : asset('default-image.png') }}"
|
|
alt="foto" class="max-w-full max-h-full object-contain">
|
|
</div>
|
|
</td>
|
|
<td class="p-2 border border-gray-300 text-right font-semibold">
|
|
Rp {{ number_format($template->harga, 0, ',', '.') }}
|
|
</td>
|
|
<td class="p-2 border border-gray-300 text-center">
|
|
<div class="flex justify-center space-x-2">
|
|
<button class="text-blue-600 hover:underline flex items-center openEditModalBtn"
|
|
data-id="{{ $template->id }}">
|
|
<i class="bi bi-pencil mr-1"></i> Edit
|
|
</button>
|
|
<form action="{{ route('templates.destroy', $template->id) }}" method="POST"
|
|
class="inline" onsubmit="return confirm('Hapus template ini?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button class="text-red-600 hover:underline flex items-center">
|
|
<i class="bi bi-trash mr-1"></i> Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="7" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada template</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Tambah Template -->
|
|
@if (!isset($kategori))
|
|
<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('templates.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="p-4 border-b">
|
|
<h5 class="text-lg font-medium">Tambah Template</h5>
|
|
</div>
|
|
<div class="p-4 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium">Nama Template</label>
|
|
<input type="text" name="nama_template" class="w-full p-2 border rounded" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium">Kategori</label>
|
|
<select name="kategori_id" class="w-full p-2 border rounded" required>
|
|
@foreach ($kategoris as $kategori)
|
|
<option value="{{ $kategori->id }}">{{ $kategori->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium">Fitur</label>
|
|
<select name="fitur_id" class="w-full p-2 border rounded" required>
|
|
@foreach ($fiturs as $fitur)
|
|
<option value="{{ $fitur->id }}">{{ $fitur->deskripsi }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium">Harga</label>
|
|
<input type="number" name="harga" class="w-full p-2 border rounded" required min="0" step="1000">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium">Foto (opsional)</label>
|
|
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
|
|
<small class="text-gray-500">Format yang didukung: JPG, PNG, GIF. Maksimal 5MB.</small>
|
|
</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>
|
|
@endif
|
|
|
|
<!-- Modal Edit Template -->
|
|
@foreach ($templates as $template)
|
|
<div id="modalEdit{{ $template->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
|
|
<div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $template->id }}"></div>
|
|
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
|
|
<form action="{{ route('templates.update', $template->id) }}" method="POST" enctype="multipart/form-data">
|
|
@csrf @method('PUT')
|
|
<div class="p-4 border-b">
|
|
<h5 class="text-lg font-medium">Edit Template</h5>
|
|
</div>
|
|
<div class="p-4 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium">Nama Template</label>
|
|
<input type="text" name="nama_template" value="{{ $template->nama_template }}"
|
|
class="w-full p-2 border rounded" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium">Kategori</label>
|
|
<select name="kategori_id" class="w-full p-2 border rounded" required>
|
|
@foreach ($kategoris as $kategori)
|
|
<option value="{{ $kategori->id }}" @selected($kategori->id == $template->kategori_id)>{{ $kategori->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium">Fitur</label>
|
|
<select name="fitur_id" class="w-full p-2 border rounded" required>
|
|
@foreach ($fiturs as $fitur)
|
|
<option value="{{ $fitur->id }}" @selected($fitur->id == $template->fitur_id)>{{ $fitur->deskripsi }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium">Harga</label>
|
|
<input type="number" name="harga" value="{{ $template->harga }}"
|
|
class="w-full p-2 border rounded" required min="0" step="1000">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium">Foto (opsional)</label>
|
|
@if ($template->foto)
|
|
<div class="mb-2">
|
|
<small class="text-gray-500">Foto saat ini:</small>
|
|
<div class="w-20 h-20 mt-1 overflow-hidden rounded bg-gray-100 flex items-center justify-center border">
|
|
<img src="{{ asset('storage/' . $template->foto) }}" alt="foto"
|
|
class="max-w-full max-h-full object-contain">
|
|
</div>
|
|
</div>
|
|
@endif
|
|
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
|
|
</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="{{ $template->id }}">Batal</button>
|
|
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Modal Tambah
|
|
const openTambahModal = document.getElementById('openTambahModal');
|
|
const modalTambah = document.getElementById('modalTambah');
|
|
const closeTambahBtn = document.getElementById('closeTambahBtn');
|
|
const closeTambahOverlay = document.getElementById('closeTambahModal');
|
|
|
|
if (openTambahModal) {
|
|
openTambahModal.addEventListener('click', () => {
|
|
modalTambah.classList.remove('hidden');
|
|
modalTambah.classList.add('flex');
|
|
});
|
|
}
|
|
if (closeTambahBtn) {
|
|
closeTambahBtn.addEventListener('click', () => {
|
|
modalTambah.classList.add('hidden');
|
|
modalTambah.classList.remove('flex');
|
|
});
|
|
}
|
|
if (closeTambahOverlay) {
|
|
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);
|
|
if (modal) {
|
|
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);
|
|
if (modal) {
|
|
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);
|
|
if (modal) {
|
|
modal.classList.add('hidden');
|
|
modal.classList.remove('flex');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
@endsection
|