MIF_E31221264/resources/views/admin/pages/alternatif/index.blade.php

678 lines
27 KiB
PHP

@extends('admin.layouts.base')
@section('title', 'Data Alternatif')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 text-grey-800">
<i class="bi bi-boxes"></i> Data Alternatif
</h1>
</div>
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex justify-content-between align-items-center">
<h6 class="m-0 font-weight-bold" style="color: #064E3B;">
<i class="bi bi-table"></i> Daftar Data Alternatif
</h6>
<button type="button" class="btn" style="background-color: #064E3B; color: white;" data-bs-toggle="modal" data-bs-target="#modalTambah">
<i></i> Tambah Data
</button>
</div>
<style>
.label-spacing {
margin-right: 0.3rem; /* Jarak antara label dan select */
}
.search-input {
width: 200px; /* Lebar input search */
}
.justify-between {
justify-content: space-between;
}
.pagination {
display: flex;
justify-content: flex-end; /* Geser ke pojok kanan */
align-items: center;
padding: 10px;
}
.pagination .page-item .page-link {
font-size: 14px;
padding: 6px 12px;
border-radius: 5px;
border: none;
color: white;
background-color: #064E3B; /* Warna biru */
margin: 0 2px;
transition: 0.3s ease-in-out;
}
.pagination .page-item.active .page-link {
background-color: #053B2D; /* Biru lebih gelap */
font-weight: bold;
}
.pagination .page-item .page-link:hover {
background-color: #046C4E;
}
.pagination .page-item.disabled .page-link {
background-color: #e9ecef;
color: #6c757d;
cursor: not-allowed;
}
.entries-form {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.entries-left,
.entries-right {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 14px;
}
.entries-left label,
.entries-right label {
margin: 0;
line-height: 1;
}
.entries-left select,
.entries-right input[type="text"] {
padding: 4px 8px;
height: 32px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.entries-right button {
height: 32px;
padding: 0 12px;
font-size: 14px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.entries-right button:hover {
background-color: #0056b3;
}
</style>
<div class="card-body">
<div class="d-flex align-items-center justify-between mb-3">
<div class="d-flex align-items-center">
<form method="GET" id="entriesForm" action="{{ route('admin.alternatif.index') }}" class="entries-form mb-3" style="display: flex; justify-content: space-between; align-items: center;">
{{-- Kiri: Dropdown jumlah data --}}
<div class="entries-left">
<label for="entriesPerPage">Show</label>
<select name="entries" id="entriesPerPage" onchange="document.getElementById('entriesForm').submit()">
<option value="10" {{ request('entries') == 10 ? 'selected' : '' }}>10</option>
<option value="25" {{ request('entries') == 25 ? 'selected' : '' }}>25</option>
<option value="50" {{ request('entries') == 50 ? 'selected' : '' }}>50</option>
</select>
<span>entries</span>
</div>
{{-- Kanan: Search input --}}
<div class="entries-right" style="display: flex; align-items: center; gap: 0.5rem;">
<label for="search" class="me-2">Search:</label>
<input type="text" name="search" id="search" placeholder="Search..." value="{{ request('search') }}">
<button type="submit">Cari</button>
</div>
{{-- Hidden --}}
@if(request('jenis_pakaian'))
<input type="hidden" name="jenis_pakaian" value="{{ request('jenis_pakaian') }}">
@endif
</form>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th class="text-center">No</th>
<th class="text-center">Gambar</th>
<th class="text-center">Nama Alternatif</th>
<th class="text-center">Jenis Pakaian</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody id="tableBody">
@php
$no = ($alternatif->currentPage() - 1) * $alternatif->perPage() + 1;
@endphp
@foreach ($alternatif as $key => $item)
<tr class="data-row">
<td class="text-center">{{ $no++ }}</td>
<td class="text-center">
@if($item->gambar)
<img src="{{ asset($item->gambar) }}" alt="Gambar" style="max-width: 100px; max-height: 100px;">
@else
Tidak ada gambar
@endif
</td>
<td class="text-center data-item">{{ $item->nama_alternatif }}</td>
<td class="text-center">{{ $item->subkriteria?->nama_subkriteria ?? '-' }}</td>
<td class="text-center">
<div class="d-flex justify-content-center" style="gap: 10px;">
<button type="button" class="btn btn-primary btn-sm edit-btn"
data-id="{{ $item->id }}"
data-nama="{{ $item->nama_alternatif }}"
data-subkriteria="{{ $item->subkriteria_id }}"
data-gambar="{{ $item->gambar }}"
data-bs-toggle="modal"
data-bs-target="#modalEdit">
<i class="bi bi-pencil"></i>
</button>
<form action="{{ route('admin.alternatif.destroy', $item->id) }}" method="POST" class="delete-form">
@csrf
@method('DELETE')
<button type="button" class="btn btn-danger btn-sm delete-button" data-id="{{ $item->id }}">
<i class="bi bi-trash"></i>
</button>
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="d-flex justify-content-end">
{{ $alternatif->appends(['entries' => request('entries')])->links('vendor.pagination.bootstrap-5') }}
</div>
</div>
</div>
</div>
</div>
<!-- Modal Tambah Data Alternatif -->
<div class="modal fade" id="modalTambah" tabindex="-1" aria-labelledby="modalTambahLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Header Modal -->
<div class="modal-header">
<h5 class="modal-title" id="modalTambahLabel">
<i class="bi bi-plus-circle"></i> Tambah Alternatif
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- Body Modal -->
<div class="modal-body">
<form action="{{ route('admin.alternatif.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<!-- Nama Alternatif -->
<div class="mb-3">
<label for="nama_alternatif" class="form-label">Nama Alternatif</label>
<input type="text" class="form-control" id="nama_alternatif" name="nama_alternatif" required>
</div>
<!-- Jenis Pakaian -->
<div class="mb-3">
<label for="subkriteria_id" class="form-label fw-bold">Jenis Pakaian</label>
<select name="subkriteria_id" id="subkriteria_id" class="form-control" required>
<option value="">Pilih Jenis Pakaian</option>
@foreach ($subkriteria as $sub)
<option value="{{ $sub->id }}">{{ $sub->nama_subkriteria }}</option>
@endforeach
</select>
</div>
<!-- Upload Gambar -->
<div class="mb-3">
<label for="gambar" class="form-label">Upload Gambar</label>
<input type="file" class="form-control" id="gambar" name="gambar" accept="image/*">
</div>
<!-- Tombol Simpan & Batal -->
<div class="d-flex justify-content-end" style="gap: 10px;">
<button type="button" class="btn" style="background-color: #90ee90; color: black;" data-bs-dismiss="modal">
Batal
</button>
<button type="submit" class="btn" style="background-color: #064E3B; color: white;">
Simpan
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal Edit -->
<div class="modal fade" id="modalEdit" tabindex="-1" aria-labelledby="modalEditLabel" aria-hidden="true">
<div class="modal-dialog modal-lg"> <!-- Tambahkan modal-lg -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalEditLabel">Edit Data Alternatif</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="formEdit" method="POST" enctype="multipart/form-data" action="">
@csrf
@method('PUT')
<div class="modal-body">
<input type="hidden" id="edit_id" name="id">
<!-- Nama Alternatif -->
<div class="mb-3">
<label for="edit_nama_alternatif" class="form-label">Nama Alternatif</label>
<input type="text" id="edit_nama_alternatif" name="nama_alternatif" class="form-control">
</div>
<!-- Jenis Pakaian -->
<div class="mb-3">
<label for="edit_subkriteria_id" class="form-label fw-bold">Jenis Pakaian</label>
<select name="subkriteria_id" id="edit_subkriteria_id" class="form-control" required>
<option value="">Pilih Jenis Pakaian</option>
@foreach ($subkriteria as $sub)
<option value="{{ $sub->id }}">{{ $sub->nama_subkriteria }}</option>
@endforeach
</select>
</div>
<!-- Upload Gambar -->
<div class="mb-3">
<label for="edit_gambar" class="form-label">Upload Gambar</label>
<input type="file" name="gambar" id="edit_gambar" class="form-control">
<!-- Tampilkan gambar lama -->
<div id="preview_gambar_lama" class="mt-2">
<img src="" id="gambar_lama" alt="Gambar Lama" width="120">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn" style="background-color: #90ee90; color: black;" data-bs-dismiss="modal">Batal</button>
<button type="submit" class="btn" style="background-color: #064E3B; color: white;">Simpan</button>
</div>
</form>
</div>
</div>
</div>
<!-- Tambahkan SweetAlert2 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '.edit-btn', function () {
let id = $(this).data('id');
let nama = $(this).data('nama');
let subkriteria = $(this).data('subkriteria');
let gambar = $(this).data('gambar');
$('#edit_id').val(id);
$('#edit_nama_alternatif').val(nama);
$('#edit_subkriteria_id').val(subkriteria);
$('#gambar_lama').attr('src', '/' + gambar);
// Set action URL dinamis
$('#formEdit').attr('action', '{{ route("admin.alternatif.update", ":id") }}'.replace(':id', id));
$('#modalEdit').modal('show');
});
$('#formEdit').on('submit', function (e) {
e.preventDefault();
let form = $(this)[0];
let data = new FormData(form);
let actionUrl = $(this).attr('action');
$.ajax({
url: actionUrl,
type: 'POST',
data: data,
processData: false,
contentType: false,
success: function (res) {
// alert(res.message); // Dihapus agar tidak muncul pop-up
$('#modalEdit').modal('hide');
location.reload(); // Bisa diganti dengan update DOM jika tidak ingin reload
},
error: function (xhr) {
alert("Gagal mengubah data.");
}
});
});
</script>
<script>
$('#modalEdit').on('show.bs.modal', function (event) {
const button = $(event.relatedTarget);
const id = button.data('id');
const nama = button.data('nama');
const subkriteria = button.data('subkriteria-id');
// Isi form
$('#edit_id').val(id);
$('#edit_nama_alternatif').val(nama);
$('#edit_subkriteria_id').val(subkriteria);
// Ubah action-nya
$('#formEdit').attr('action', '/alternatif/' + id);
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const editButtons = document.querySelectorAll(".edit-btn");
const formEdit = document.getElementById("formEdit");
editButtons.forEach(button => {
button.addEventListener("click", function () {
const id = this.dataset.id;
const nama = this.dataset.nama;
const subkriteria = this.dataset.subkriteria;
document.getElementById("edit_id").value = id;
document.getElementById("edit_nama_alternatif").value = nama;
document.getElementById("edit_subkriteria_id").value = subkriteria;
// ⬇️ Perhatikan ini: Sesuaikan dengan route manual kamu
formEdit.action = `/alternatif/${id}`;
// Tampilkan modal
const modal = new bootstrap.Modal(document.getElementById("modalEdit"));
modal.show();
});
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
let editButtons = document.querySelectorAll(".edit-btn");
editButtons.forEach(function (button) {
button.addEventListener("click", function () {
// Ambil data dari tombol
let id = this.getAttribute("data-id");
let nama = this.getAttribute("data-nama");
let subkriteriaId = this.getAttribute("data-subkriteria");
// Isi form di modal
document.getElementById("edit_id").value = id;
document.getElementById("edit_nama_alternatif").value = nama;
document.getElementById("edit_subkriteria_id").value = subkriteriaId;
// Ubah action form ke /alternatif/{id}
document.getElementById("formEdit").action = "/alternatif/" + id;
// Tampilkan modal (kalau pakai Bootstrap 5)
let modal = new bootstrap.Modal(document.getElementById('modalEdit'));
modal.show();
});
});
});
</script>
<script>
function updateEntries() {
let selectedValue = document.getElementById("entriesPerPage").value;
let url = new URL(window.location.href);
url.searchParams.set("entries", selectedValue);
window.location.href = url.toString();
}
</script>
<script>
function searchFunction() {
let input = document.getElementById('search').value.toLowerCase();
let rows = document.querySelectorAll('.data-row');
rows.forEach(row => {
let text = row.querySelector('.data-item').textContent.toLowerCase();
row.style.display = text.includes(input) ? "" : "none";
});
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Ambil semua tombol dengan class "edit-btn"
let editButtons = document.querySelectorAll(".edit-btn");
editButtons.forEach(function (button) {
button.addEventListener("click", function () {
// Ambil data dari atribut data-*
let id = this.getAttribute("data-id");
let nama = this.getAttribute("data-nama");
let subkriteriaId = this.getAttribute("data-subkriteria");
// Set nilai input di modal
document.getElementById("edit_id").value = id;
document.getElementById("edit_nama_alternatif").value = nama;
// Set dropdown "Jenis Pakaian"
let dropdown = document.getElementById("edit_subkriteria_id");
for (let i = 0; i < dropdown.options.length; i++) {
if (dropdown.options[i].value == subkriteriaId) {
dropdown.options[i].selected = true;
break;
}
}
// Set action form ke URL update
document.getElementById("formEdit").action = "/alternatif/" + id;
});
});
});
</script>
<script>
$(document).on('click', '.btn-edit', function() {
var id = $(this).data('id');
$.get("/admin/dataalternatif/" + id + "/edit", function(data) {
$('#edit_id').val(data.id);
$('#edit_nama_alternatif').val(data.nama_alternatif);
// Update form action agar konsisten
$('#formEdit').attr('action', '/admin/dataalternatif/' + id);
// Tampilkan modal
$('#modalEdit').modal('show');
});
});
</script>
<script>
$('#modalEdit').on('show.bs.modal', function (event) {
let button = $(event.relatedTarget);
let id = button.data('id'); // Pastikan tombol punya data-id
let nama = button.data('nama');
let subkriteria_id = button.data('subkriteria');
let gambar = button.data('gambar'); // Optional
let modal = $(this);
modal.find('#edit_id').val(id);
modal.find('#edit_nama_alternatif').val(nama);
modal.find('#edit_subkriteria_id').val(subkriteria_id);
// Set form action URL (pastikan sesuai route update)
$('#formEdit').attr('action', '/admin/alternatif/' + id);
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
let editButtons = document.querySelectorAll(".edit-btn");
editButtons.forEach(function (button) {
button.addEventListener("click", function () {
let id = this.getAttribute("data-id");
let nama = this.getAttribute("data-nama"); // Ambil nama alternatif dari tombol
// Masukkan data ke input di modal
document.getElementById("edit_nama_alternatif").value = nama || ""; // Jangan biarkan NULL
document.getElementById("formEdit").action = "/alternatif/" + id;
});
});
});
</script>
<script>
document.getElementById("filterKriteria").addEventListener("change", function() {
let selectedValue = this.value;
let rows = document.querySelectorAll(".data-row");
rows.forEach(row => {
if (selectedValue === "" || row.dataset.kriteriaId === selectedValue) {
row.style.display = "";
} else {
row.style.display = "none";
}
});
});
</script>
<script>
$(document).ready(function () {
// Form Edit Data
$('#formEdit').submit(function (event) {
event.preventDefault(); // Mencegah reload halaman
let form = $(this);
let url = form.attr('action');
let formData = form.serialize(); // Ambil data form
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: "json",
success: function (response) {
console.log("Respon dari server:", response); // Debugging
if (response.success) {
Swal.fire({
icon: 'success',
title: 'Berhasil!',
text: response.message || 'Data berhasil diperbarui!',
showConfirmButton: false,
timer: 1500
}).then(() => {
location.reload();
});
} else {
Swal.fire({
icon: 'error',
title: 'Gagal!',
text: response.message || "Data tidak dapat diperbarui.",
});
}
},
error: function (xhr) {
console.log("Error AJAX:", xhr.responseText);
let errorMsg = "Terjadi kesalahan!";
if (xhr.responseJSON && xhr.responseJSON.message) {
errorMsg = xhr.responseJSON.message;
}
Swal.fire({
icon: 'error',
title: 'Oops...',
text: errorMsg,
});
}
});
});
// SweetAlert untuk konfirmasi hapus data
$(document).on('click', '.delete-button', function (event) {
event.preventDefault();
let button = $(this);
let form = button.closest('form');
let url = form.attr('action');
let row = button.closest('tr'); // Ambil elemen baris yang ingin dihapus
Swal.fire({
title: "Apakah Anda yakin?",
text: "Data yang dihapus tidak dapat dikembalikan!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6",
confirmButtonText: "Ya, hapus!",
cancelButtonText: "Batal"
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: url,
type: "POST",
data: {
_method: "DELETE",
_token: $('meta[name="csrf-token"]').attr('content')
},
success: function (data) {
if (data.success) {
// Animasi fade out sebelum elemen dihapus
row.fadeOut(300, function () {
$(this).remove();
updateRowNumbers(); // Update nomor setelah dihapus
});
Swal.fire({
icon: 'success',
title: 'Data Terhapus!',
text: 'Data berhasil dihapus.',
showConfirmButton: false,
timer: 1500
});
} else {
Swal.fire("Gagal!", data.message || "Data tidak dapat dihapus.", "error");
}
},
error: function () {
Swal.fire("Error!", "Terjadi kesalahan saat menghapus data.", "error");
}
});
}
});
});
// Fungsi untuk memperbarui nomor urut setelah data dihapus
function updateRowNumbers() {
$('tbody tr').each(function (index) {
$(this).find('td:first').text(index + 1);
});
}
// Tampilkan SweetAlert jika ada session success
let successMessage = "{{ session('success') }}";
if (successMessage && successMessage.trim() !== "") {
Swal.fire({
icon: 'success',
title: 'Berhasil!',
text: successMessage,
showConfirmButton: false,
timer: 1500
});
}
});
</script>
@endsection