207 lines
9.5 KiB
PHP
207 lines
9.5 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('header')
|
|
<!-- Page Header -->
|
|
<div class="bg-header text-white p-4 rounded-lg shadow-md flex justify-between items-center">
|
|
<h1 class="text-2xl font-medium">Dashboard</h1>
|
|
<span class="text-sm">Good morning, <span class="font-bold">{{ Auth::user()->name }}</span></span>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Main Content Container -->
|
|
<div class="mt-6 bg-white p-6 rounded-lg shadow">
|
|
@if (session('success'))
|
|
<div class="mb-4 p-3 bg-green-100 text-green-800 rounded">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Title Bar -->
|
|
<div class="mb-4">
|
|
<h3 class="text-lg font-bold">Data Jurusan</h3>
|
|
<p class="text-sm text-gray-500">View the existing Jurusan</p>
|
|
</div>
|
|
|
|
<!-- Action Bar -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<div>
|
|
<button class="text-gray-600 flex items-center">
|
|
<i class="bi bi-funnel mr-1"></i> Filters
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="relative">
|
|
<input type="text" placeholder="Search Jurusan"
|
|
class="pl-8 pr-4 py-2 border rounded-lg bg-gray-100 w-56">
|
|
<i class="bi bi-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
<button id="btnTambah" class="bg-teal-500 text-white px-4 py-2 rounded-lg flex items-center">
|
|
<i class="bi bi-plus-lg mr-2"></i> Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Table -->
|
|
<table class="w-full border-collapse bg-white shadow rounded-lg">
|
|
<thead>
|
|
<tr class="bg-gray-100 border-b">
|
|
<th class="p-3 text-gray-600">No</th>
|
|
<th class="p-3 text-gray-600">ID</th>
|
|
<th class="p-3 text-gray-600">Nama</th>
|
|
<th class="p-3 text-gray-600">Slug</th>
|
|
<th class="p-3 text-gray-600">Deskripsi</th>
|
|
<th class="p-3 text-gray-600">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($jurusan as $i => $j)
|
|
<tr class="border-b hover:bg-gray-50">
|
|
<td class="p-3">{{ $i + 1 }}</td>
|
|
<td class="p-3">{{ $j->id }}</td>
|
|
<td class="p-3">{{ $j->nama }}</td>
|
|
<td class="p-3">{{ $j->slug }}</td>
|
|
<td class="p-3">{{ $j->deskripsi }}</td>
|
|
<td class="p-3 flex space-x-2">
|
|
<button
|
|
onclick="openEditModal('{{ $j->id }}', '{{ addslashes($j->nama) }}', '{{ $j->slug }}', '{{ addslashes($j->deskripsi) }}')"
|
|
class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-lg flex items-center">
|
|
<i class="bi bi-pencil-fill mr-1"></i>Edit
|
|
</button>
|
|
<form action="{{ route('admin.datajurusan.destroy', $j) }}" method="POST"
|
|
onsubmit="return confirm('Hapus jurusan {{ $j->nama }}?')">
|
|
@csrf @method('DELETE')
|
|
<button
|
|
class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded-lg flex items-center">
|
|
<i class="bi bi-trash-fill mr-1"></i>Delete
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Modal Form -->
|
|
<div id="modalForm" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6">
|
|
<h2 id="modalTitle" class="text-xl font-semibold mb-4">Tambah Jurusan</h2>
|
|
|
|
<form id="formJurusan" action="" method="POST" class="space-y-4">
|
|
@csrf
|
|
<input type="hidden" name="_method" id="methodInput" value="POST">
|
|
|
|
<div>
|
|
<label for="idField" class="block text-sm font-medium">ID (4 karakter)</label>
|
|
<input type="text" name="id" id="idField"
|
|
class="mt-1 block w-full border rounded px-3 py-2" maxlength="4" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="namaField" class="block text-sm font-medium">Nama Jurusan</label>
|
|
<input type="text" name="nama" id="namaField"
|
|
class="mt-1 block w-full border rounded px-3 py-2" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="slugField" class="block text-sm font-medium">Slug</label>
|
|
<input type="text" name="slug" id="slugField"
|
|
class="mt-1 block w-full border rounded px-3 py-2" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="deskripsiField" class="block text-sm font-medium">Deskripsi</label>
|
|
<textarea name="deskripsi" id="deskripsiField" class="mt-1 block w-full border rounded px-3 py-2" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3 pt-4">
|
|
<button type="button" id="btnBatal"
|
|
class="px-4 py-2 rounded-lg font-medium hover:underline">Batal</button>
|
|
<button type="submit"
|
|
class="bg-blue hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
|
|
<i id="modalIcon" class="bi bi-check-lg mr-1"></i>
|
|
<span id="modalButtonText">Simpan</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const btnTambah = document.getElementById('btnTambah');
|
|
const modal = document.getElementById('modalForm');
|
|
const btnBatal = document.getElementById('btnBatal');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const formJurusan = document.getElementById('formJurusan');
|
|
const methodInput = document.getElementById('methodInput');
|
|
const idField = document.getElementById('idField');
|
|
const namaField = document.getElementById('namaField');
|
|
const slugField = document.getElementById('slugField');
|
|
const deskripsiField = document.getElementById('deskripsiField');
|
|
const modalIcon = document.getElementById('modalIcon');
|
|
const modalButtonText = document.getElementById('modalButtonText');
|
|
|
|
const storeUrl = '{{ route('admin.datajurusan.store') }}';
|
|
const updateUrlTemplate = '{{ route('admin.datajurusan.update', ':id') }}';
|
|
|
|
// Function to open modal
|
|
function openModal(isEdit = false, data = {}) {
|
|
if (isEdit) {
|
|
modalTitle.textContent = 'Edit Jurusan';
|
|
formJurusan.action = updateUrlTemplate.replace(':id', data.id);
|
|
methodInput.value = 'PUT';
|
|
idField.readOnly = true;
|
|
idField.value = data.id;
|
|
namaField.value = data.nama;
|
|
slugField.value = data.slug;
|
|
deskripsiField.value = data.deskripsi;
|
|
modalIcon.className = 'bi bi-pencil-fill mr-1';
|
|
modalButtonText.textContent = 'Update';
|
|
} else {
|
|
modalTitle.textContent = 'Tambah Jurusan';
|
|
formJurusan.action = storeUrl;
|
|
methodInput.value = 'POST';
|
|
idField.readOnly = false;
|
|
idField.value = '';
|
|
namaField.value = '';
|
|
slugField.value = '';
|
|
deskripsiField.value = '';
|
|
modalIcon.className = 'bi bi-check-lg mr-1';
|
|
modalButtonText.textContent = 'Simpan';
|
|
}
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
// Add button click
|
|
btnTambah.addEventListener('click', () => openModal(false));
|
|
|
|
// Cancel button click
|
|
btnBatal.addEventListener('click', () => modal.classList.add('hidden'));
|
|
|
|
// Global function for edit
|
|
window.openEditModal = (id, nama, slug, deskripsi) => {
|
|
openModal(true, {
|
|
id,
|
|
nama,
|
|
slug,
|
|
deskripsi
|
|
});
|
|
};
|
|
|
|
// If there are validation errors, show modal
|
|
@if ($errors->any())
|
|
openModal({{ old('id') ? true : false }}, {
|
|
id: '{{ old('id') }}',
|
|
nama: '{{ old('nama') }}',
|
|
slug: '{{ old('slug') }}',
|
|
deskripsi: '{{ old('deskripsi') }}'
|
|
});
|
|
@endif
|
|
});
|
|
</script>
|
|
@endpush
|