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

295 lines
14 KiB
PHP

@extends('admin.layouts.base')
@section('title', 'Data Sub Kriteria')
@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 Sub Kriteria untuk: {{ $kriteria->nama_kriteria }}
</h1>
</div>
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold d-flex justify-content-between align-items-center" style="color: #006400;">
<span>
<i class="bi bi-table"></i> Daftar Sub Kriteria
</span>
<div class="d-flex gap-2">
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#tambahSubkriteriaModal"
style="background-color: #006400; border-color: #004d00;">
<i class="bi bi-plus"></i> Tambah Data
</button>
</div>
</h6>
</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">Nama Subkriteria</th>
<th class="text-center">Nilai</th>
<th class="text-center">Min Harga</th>
<th class="text-center">Max Harga</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse ($subkriterias as $key => $sub)
<tr>
<td class="text-center">{{ $key + 1 }}</td>
<td class="text-center">{{ $sub->nama_sub }}</td>
<td class="text-center">{{ $sub->nilai }}</td>
<td class="text-center">{{ $sub->min_harga ?? '-' }}</td>
<td class="text-center">{{ $sub->max_harga ?? '-' }}</td>
<td class="text-center">
<div class="d-flex justify-content-center">
<button class="btn btn-warning btn-sm mx-1" data-bs-toggle="modal"
data-bs-target="#editModal{{ $sub->id }}">
<i class="bi bi-pencil"></i>
</button>
<form id="delete-form-{{ $sub->id }}" action="{{ route('admin.subkriteria.destroy', $sub->id) }}" method="POST" class="d-inline">
@csrf
@method('DELETE')
<button type="button" class="btn btn-danger btn-sm mx-1 delete-button" data-id="{{ $sub->id }}">
<i class="bi bi-trash"></i>
</button>
</form>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="6" class="text-center">Belum ada subkriteria</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal Tambah Subkriteria -->
<div class="modal fade" id="tambahSubkriteriaModal" tabindex="-1" aria-labelledby="tambahSubkriteriaLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md">
<div class="modal-content border-0 shadow-sm">
<form action="{{ route('admin.subkriteria.store') }}" method="POST">
@csrf
<input type="hidden" name="kriteria_id" value="{{ $kriteria->id }}">
<div class="modal-header border-bottom-0">
<h5 class="modal-title fw-bold" id="tambahSubkriteriaLabel">Tambah Subkriteria</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="kriteria_id" class="form-label">Pilih Kriteria</label>
<select class="form-select" id="kriteria_id" name="kriteria_id" required onchange="toggleHargaFields()">
<option value="">-- Pilih Kriteria --</option>
@foreach ($kriterias as $kriteria)
<option value="{{ $kriteria->id }}" data-nama="{{ $kriteria->nama_kriteria }}">
{{ $kriteria->nama_kriteria }}
</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label for="nama_sub" class="form-label">Nama Subkriteria</label>
<input type="text" class="form-control" id="nama_sub" name="nama_sub" required>
</div>
<div class="mb-3">
<label for="nilai" class="form-label">Nilai</label>
<input type="number" class="form-control" id="nilai" name="nilai" step="1" required>
</div>
<div id="harga-fields" style="display: none;">
<div class="mb-3">
<label for="min_harga" class="form-label">Min Harga</label>
<input type="number" class="form-control" id="min_harga" name="min_harga" min="0">
</div>
<div class="mb-3">
<label for="max_harga" class="form-label">Max Harga</label>
<input type="number" class="form-control" id="max_harga" name="max_harga" min="0">
</div>
</div>
</div>
<div class="modal-footer border-top-0">
<button type="button" class="btn" style="background-color: #90ee90; color: #000; border: none; border-radius: 0.5rem;" data-bs-dismiss="modal">
<i></i> Batal
</button>
<button type="submit" class="btn btn-success" style="background-color: #14532d; border-color: #14532d;">
Simpan
</button>
</div>
</form>
</div>
</div>
</div>
{{-- Modal Edit --}}
@foreach ($subkriterias as $sub)
<div class="modal fade" id="editModal{{ $sub->id }}" tabindex="-1" aria-labelledby="editModalLabel{{ $sub->id }}" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="{{ route('admin.subkriteria.update', $sub->id) }}" method="POST">
@csrf
@method('PUT')
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel{{ $sub->id }}">Edit Subkriteria</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="kriteria_id" class="form-label">Pilih Kriteria</label>
<select class="form-select kriteria-select" data-id="{{ $sub->id }}" name="kriteria_id" required>
@foreach ($kriterias as $kriteria)
<option value="{{ $kriteria->id }}" data-nama="{{ $kriteria->nama_kriteria }}"
{{ $sub->kriteria_id == $kriteria->id ? 'selected' : '' }}>
{{ $kriteria->nama_kriteria }}
</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label for="nama_sub" class="form-label">Nama Subkriteria</label>
<input type="text" class="form-control" name="nama_sub" value="{{ $sub->nama_sub }}" required>
</div>
<div class="mb-3">
<label for="nilai" class="form-label">Nilai</label>
<input type="number" class="form-control" name="nilai" value="{{ $sub->nilai }}" required>
</div>
<div class="harga-fields" id="hargaFields{{ $sub->id }}" style="display: none;">
<div class="mb-3">
<label for="min_harga" class="form-label">Min Harga</label>
<input type="number" class="form-control" name="min_harga" value="{{ $sub->min_harga }}">
</div>
<div class="mb-3">
<label for="max_harga" class="form-label">Max Harga</label>
<input type="number" class="form-control" name="max_harga" value="{{ $sub->max_harga }}">
</div>
</div>
</div>
<div class="modal-footer border-top-0">
<button type="button" class="btn" style="background-color: #90ee90; color: #000; border: none; border-radius: 0.5rem;" data-bs-dismiss="modal">
<i"></i> Batal
</button>
<button type="submit" class="btn" style="background-color: #14532d; color: #fff; border: none; border-radius: 0.5rem;">
Simpan
</button>
</div>
</form>
</div>
</div>
</div>
@endforeach
<!-- SweetAlert CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@if (session('success'))
<script>
Swal.fire({
title: 'Berhasil!',
text: '{{ session('success') }}',
icon: 'success',
timer: 3000,
showConfirmButton: false
});
</script>
@endif
@if (session('error'))
<script>
Swal.fire({
title: 'Error!',
text: '{{ session('error') }}',
icon: 'error',
confirmButtonText: 'OK',
confirmButtonColor: '#d33'
});
</script>
@endif
<script>
function toggleHargaFields() {
const select = document.getElementById('kriteria_id');
const selectedOption = select.options[select.selectedIndex];
const namaKriteria = selectedOption.getAttribute('data-nama');
const hargaFields = document.getElementById('harga-fields');
if (namaKriteria === 'Harga') {
hargaFields.style.display = 'block';
document.getElementById('min_harga').required = true;
document.getElementById('max_harga').required = true;
} else {
hargaFields.style.display = 'none';
document.getElementById('min_harga').required = false;
document.getElementById('max_harga').required = false;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Handle delete buttons with SweetAlert
const deleteButtons = document.querySelectorAll('.delete-button');
deleteButtons.forEach(button => {
button.addEventListener('click', function() {
const id = this.getAttribute('data-id');
Swal.fire({
title: 'Apakah Anda yakin?',
text: 'Data ini akan dihapus secara permanen!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Ya, hapus!',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
document.getElementById('delete-form-' + id).submit();
}
});
});
});
// Handle edit modal harga fields toggle
document.querySelectorAll('.kriteria-select').forEach(select => {
const id = select.dataset.id;
const hargaFields = document.getElementById(`hargaFields${id}`);
function toggleHargaFields() {
const selectedOption = select.options[select.selectedIndex];
const namaKriteria = selectedOption.getAttribute('data-nama');
if (namaKriteria === 'Harga') {
hargaFields.style.display = 'block';
} else {
hargaFields.style.display = 'none';
}
}
// Tampilkan sesuai kondisi saat pertama kali modal muncul
toggleHargaFields();
// Tambahkan event saat value berubah
select.addEventListener('change', toggleHargaFields);
});
});
</script>
@endsection