MIF_E31222658/resources/views/admin/pengajuan/index.blade.php

398 lines
17 KiB
PHP

@extends('layouts.app')
@section('title', 'Daftar Pengajuan UKT')
@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show">
<i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show">
<i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@endif
<div class="container-fluid px-3 px-md-4 px-lg-5">
<!-- Header Section -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h1 class="h4 h3-md text-gray-800 mb-1">Daftar Pengajuan UKT</h1>
</div>
</div>
<!-- Stats Cards - Responsive -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mb-4">
<div class="col">
<div class="card border-left-primary shadow h-100">
<div class="card-body p-2 p-sm-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Total Pengajuan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['totalPengajuan'] ?? 0 }}</div>
</div>
<div class="icon-circle bg-primary text-white">
<i class="fas fa-file-alt"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-success shadow h-100">
<div class="card-body p-2 p-sm-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
Valid</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['valid'] ?? 0 }}</div>
</div>
<div class="icon-circle bg-success text-white">
<i class="fas fa-check-circle"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-warning shadow h-100">
<div class="card-body p-2 p-sm-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
Menunggu</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['menunggu'] ?? 0 }}</div>
</div>
<div class="icon-circle bg-warning text-white">
<i class="fas fa-clock"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-danger shadow h-100">
<div class="card-body p-2 p-sm-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
Tidak Valid</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['tidak valid'] ?? 0 }}</div>
</div>
<div class="icon-circle bg-danger text-white">
<i class="fas fa-times-circle"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Card -->
<div class="card shadow-sm border-0">
<!-- Filter Section -->
<div class="card-header bg-white py-3">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
<h6 class="m-0 font-weight-bold text-primary mb-2 mb-md-0">
<i class="fas fa-list-alt mr-2"></i>Daftar Pengajuan
</h6>
<!-- Search Input - Moved to the right side -->
<div class="input-group" style="max-width: 300px;">
<input type="text" id="searchInput" class="form-control" placeholder="Cari mahasiswa...">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="searchButton">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
<!-- Filter Form -->
<div class="mt-3">
<form method="GET" action="{{ route('admin.pengajuan') }}" class="row g-2">
<div class="col-md-4">
<select name="status_form_id" class="form-control" onchange="this.form.submit()">
<option value="">Semua Form</option>
@foreach($forms as $form)
<option value="{{ $form->id }}" {{ request('status_form_id') == $form->id ? 'selected' : '' }}>
{{ $form->nama_form }}
</option>
@endforeach
</select>
</div>
<div class="col-md-4">
<select name="jenis_form" class="form-control" onchange="this.form.submit()">
<option value="">Semua Jenis</option>
<option value="penurunan" {{ request('jenis_form') == 'penurunan' ? 'selected' : '' }}>Penurunan UKT</option>
<option value="pengangsuran" {{ request('jenis_form') == 'pengangsuran' ? 'selected' : '' }}>Pengangsuran UKT</option>
</select>
</div>
<div class="col-md-4">
<select name="status" class="form-control" onchange="this.form.submit()">
<option value="">Semua Status</option>
<option value="menunggu" {{ request('status') == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
<option value="valid" {{ request('status') == 'valid' ? 'selected' : '' }}>Valid</option>
<option value="tidak valid" {{ request('status') == 'tidak valid' ? 'selected' : '' }}>Tidak Valid</option>
</select>
</div>
</form>
</div>
</div>
<div class="card-body px-2 px-sm-3 px-md-4">
<div class="table-responsive">
<table class="table table-hover mb-0" id="dataTable">
<thead>
<tr>
<th width="50px">No</th>
<th>Mahasiswa</th>
<th>Jenis</th>
<th>Status</th>
<th>Tanggal</th>
<th width="120px" class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse ($pengajuan as $index => $p)
<tr>
<td class="align-middle">
{{ ($pengajuan->currentPage() - 1) * $pengajuan->perPage() + $loop->iteration }}
</td>
<td class="align-middle">
<div class="d-flex align-items-center">
<div class="avatar-sm mr-3 flex-shrink-0">
<span class="avatar-title bg-soft-primary rounded-circle d-flex align-items-center justify-content-center">
<i class="fas fa-user text-primary"></i>
</span>
</div>
<div class="flex-grow-1 min-width-0">
<h6 class="mb-0 text-dark" title="{{ $p->mahasiswa->user->name ?? 'Data tidak tersedia' }}">
{{ $p->mahasiswa->user->name ?? 'Data tidak tersedia' }}
</h6>
<small class="text-dark d-block text-truncate" title="NIM: {{ $p->mahasiswa->nim ?? '-' }}">
NIM: {{ $p->mahasiswa->nim ?? '-' }}
</small>
</div>
</div>
</td>
<td class="align-middle">
<span class="badge badge-pill {{ $p->jenis_pengajuan == 'penurunan' ? 'badge-primary' : 'badge-info' }}">
{{ ucfirst($p->jenis_pengajuan) }}
</span>
</td>
<td class="align-middle">
@if($p->status_validasi == 'menunggu')
<span class="badge badge-pill badge-soft-warning py-1 px-3">
<i class="fas fa-clock mr-1"></i>Menunggu
</span>
@elseif($p->status_validasi == 'valid')
<span class="badge badge-pill badge-soft-success py-1 px-3">
<i class="fas fa-check-circle mr-1"></i>Valid
</span>
@else
<span class="badge badge-pill badge-soft-danger py-1 px-3">
<i class="fas fa-times-circle mr-1"></i>Ditolak
</span>
@endif
</td>
<td class="align-middle">
<small class="text-dark">
<i class="far fa-calendar-alt mr-1"></i>
{{ $p->created_at->format('d M Y') }}
</small>
<br>
<small class="text-dark">
<i class="far fa-clock mr-1"></i>
{{ $p->created_at->format('H:i') }}
</small>
</td>
<td class="align-middle text-center">
<div class="d-flex justify-content-center">
<a href="{{ route('admin.pengajuan.detail', $p->id) }}"
class="btn btn-sm
@if($p->status_validasi == 'menunggu') btn-warning
@elseif($p->status_validasi == 'valid') btn-success
@else btn-danger @endif mr-1"
data-toggle="tooltip"
title="Lihat Detail">
<i class="fas
@if($p->status_validasi == 'menunggu') fa-clock
@elseif($p->status_validasi == 'valid') fa-check-circle
@else fa-times-circle @endif"></i>
</a>
@if(auth()->user()->role === 'admin')
<form action="{{ route('admin.pengajuan.destroy', $p->id) }}" method="POST" class="d-inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm delete-btn">
<i class="fas fa-trash"></i>
</button>
</form>
@endif
</div>
</td>
</tr>
@empty
<tr>
<td colspan="6" class="text-center py-4">
<div class="empty-state">
<h4 class="mt-3">Tidak ada data pengajuan</h4>
<p class="text-dark">Belum ada pengajuan UKT yang tercatat</p>
</div>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- Pagination -->
@if($pengajuan->hasPages())
<div class="card-footer d-flex justify-content-between align-items-center">
<div class="text-muted small">
Menampilkan <strong>{{ $pengajuan->firstItem() }}</strong> sampai <strong>{{ $pengajuan->lastItem() }}</strong> dari <strong>{{ $pengajuan->total() }}</strong> hasil
</div>
<div>
{{ $pengajuan->withQueryString()->links() }}
</div>
</div>
@endif
</div>
</div>
</div>
@endsection
@section('styles')
<style>
.badge-soft-warning {
color: #856404;
background-color: #fff3cd;
}
.badge-soft-success {
color: #155724;
background-color: #d4edda;
}
.badge-soft-danger {
color: #721c24;
background-color: #f8d7da;
}
.empty-state {
text-align: center;
padding: 20px;
}
.icon-circle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
.card-header {
flex-direction: column;
align-items: flex-start;
}
.input-group {
width: 100%;
max-width: 100% !important;
margin-top: 10px;
}
}
@media (max-width: 575.98px) {
.h4 {
font-size: 1.25rem;
}
.card-body {
padding: 0.75rem;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
}
</style>
@endsection
@section('js')
<!-- Page level plugins -->
<script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
// Initialize DataTables
var table = $('#dataTable').DataTable({
responsive: true,
autoWidth: false,
language: {
search: "_INPUT_",
searchPlaceholder: "Cari...",
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
infoEmpty: "Menampilkan 0 sampai 0 dari 0 entri",
infoFiltered: "(disaring dari _MAX_ total entri)",
paginate: {
first: "Pertama",
last: "Terakhir",
next: "Selanjutnya",
previous: "Sebelumnya"
}
},
dom: '<"top"<"float-right">>rt<"bottom"lip><"clear">'
});
// Search functionality
$('#searchInput').keyup(function() {
table.search($(this).val()).draw();
});
// Delete confirmation
$('.delete-btn').click(function(e) {
e.preventDefault();
const form = $(this).closest('form');
Swal.fire({
title: 'Yakin ingin menghapus?',
text: "Data tidak bisa dikembalikan!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Ya, hapus!'
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
});
});
// Initialize tooltips
$('[data-toggle="tooltip"]').tooltip();
});
</script>
@endsection