MIF_E31230680/resources/views/kriteria/index.blade.php

132 lines
7.1 KiB
PHP

@extends('layout.app')
@section('content')
<div class="page-header">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Data Kriteria</li>
</ol>
</div>
<div class="row gutters">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card">
<div class="card-body">
{{-- Header & Dropdown Per Page --}}
<div class="mb-3 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center" style="gap: 15px;">
<h5 class="mb-0">Data Kriteria</h5>
{{-- Dropdown Pilihan Halaman --}}
<form action="{{ route('kriteria.index') }}" method="GET" id="form-per-page" class="m-0">
<div class="d-flex align-items-center" style="gap: 8px;">
<label class="text-muted mb-0" style="font-size: 0.9rem; font-weight: normal; white-space: nowrap;">Tampil:</label>
<select name="per_page" class="form-control form-control-sm shadow-sm" style="width: 75px; cursor: pointer; border-radius: 6px; border-color: #ced4da;" onchange="document.getElementById('form-per-page').submit();">
{{-- Tambahkan ?? 10 untuk jaga-jaga kalau variabel $perPage belum terdefinisi --}}
<option value="10" {{ ($perPage ?? 10) == 10 ? 'selected' : '' }}>10</option>
<option value="25" {{ ($perPage ?? 10) == 25 ? 'selected' : '' }}>25</option>
<option value="50" {{ ($perPage ?? 10) == 50 ? 'selected' : '' }}>50</option>
<option value="100" {{ ($perPage ?? 10) == 100 ? 'selected' : '' }}>100</option>
</select>
</div>
</form>
</div>
<a href="{{ route('kriteria.create') }}" class="btn btn-success">
<i class="icon-plus"></i> Tambah Kriteria
</a>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th width="50">No</th>
<th width="100">Kode</th>
<th>Nama Kriteria</th>
<th width="150">Bobot Akhir</th>
<th width="150" class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse ($kriterias as $index => $k)
<tr>
{{-- Nomor urut menyesuaikan halaman --}}
<td>{{ $kriterias->firstItem() + $loop->index }}</td>
<td><span class="text-primary font-weight-bold">{{ $k->kode }}</span></td>
<td>{{ $k->nama }}</td>
<td>
<span
class="badge {{ $k->bobot_global > 0 ? 'badge-info' : 'badge-light border' }}"
style="font-size: 14px; padding: 5px 10px;">
{{ number_format($k->bobot_global, 4) }}
</span>
</td>
<td>
{{-- Flexbox untuk Tombol Aksi yang Rapi (sejajar dan berjarak) --}}
<div class="d-flex justify-content-center align-items-center" style="gap: 8px;">
<a href="{{ route('kriteria.edit', $k->id) }}" class="btn btn-primary btn-sm m-0" title="Edit Nama Kriteria">
<i class="icon-edit"></i>
</a>
<form id="delete-form-{{ $k->id }}" action="{{ route('kriteria.destroy', $k->id) }}" method="POST" class="m-0">
@csrf
@method('DELETE')
<button type="button" class="btn btn-danger btn-sm m-0" onclick="confirmDelete('{{ $k->id }}', '{{ $k->nama }}')" title="Hapus Kriteria">
<i class="icon-trash"></i>
</button>
</form>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="5" class="text-center">Data kosong. Klik "Tambah Kriteria" untuk memulai.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
{{-- Menampilkan Tombol Next / Previous (Pagination) beserta Info Data --}}
<div class="mt-4 d-flex justify-content-between align-items-center">
<div class="text-muted small">
Menampilkan {{ $kriterias->firstItem() ?? 0 }} sampai {{ $kriterias->lastItem() ?? 0 }} dari total {{ $kriterias->total() }} data
</div>
<div>
{{ $kriterias->links('pagination::bootstrap-4') }}
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function confirmDelete(id, name) {
Swal.fire({
title: 'Apakah anda yakin?',
text: "Kriteria '" + name + "' akan dihapus beserta seluruh data sub dan detail warga terkait!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#858796',
confirmButtonText: 'Ya, hapus!',
cancelButtonText: 'Batal',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
document.getElementById('delete-form-' + id).submit();
}
})
}
</script>
@endpush