437 lines
23 KiB
PHP
437 lines
23 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Manajemen Formulir Pendaftaran Pengajuan UKT')
|
|
|
|
@section('content')
|
|
|
|
@if(session('success'))
|
|
<div class="alert-mega alert alert-success alert-dismissible fade show" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-check-circle-fill me-3 fs-1"></i>
|
|
<div>
|
|
<h4 class="alert-heading mb-1">Berhasil!</h4>
|
|
<p class="mb-0 fs-5">{{ session('success') }}</p>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="container-fluid px-0">
|
|
<!-- Header Section -->
|
|
<div class="dashboard-header p-4 rounded-0 shadow-sm" style="background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);">
|
|
<div class="container-fluid px-4">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="fw-bold text-white mb-2">
|
|
<i class="bi bi-file-earmark-text me-2"></i> Manajemen Formulir UKT
|
|
</h2>
|
|
<p class="mb-0 text-white opacity-75">Kelola formulir pendaftaran Uang Kuliah Tunggal</p>
|
|
</div>
|
|
|
|
@if(auth()->user()->role == 'karyawan')
|
|
<div class="d-flex gap-2">
|
|
<a href="{{ route('form.create') }}" class="btn bg-white text-dark fw-bold rounded-pill px-4 shadow-sm">
|
|
<i class="fa fa-plus me-2"></i> Buat Form Baru
|
|
</a>
|
|
<button class="btn btn-info rounded-circle ml-2" data-bs-toggle="modal" data-bs-target="#helpModal">
|
|
<i class="fa fa-question"></i>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container-fluid px-4 py-4">
|
|
<!-- Stats Cards -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm rounded-3 h-100 hover-lift">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-shape bg-light-primary text-primary rounded-3 me-3 p-3">
|
|
<i class="bi bi-files fs-4"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1 text-dark fw-bold">Total Formulir</h6>
|
|
<h3 class="mb-0 fw-bold text-dark">{{ $forms->count() }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm rounded-3 h-100 hover-lift">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-shape bg-light-success text-success rounded-3 me-3 p-3">
|
|
<i class="bi bi-unlock fs-4"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1 text-dark fw-bold">Formulir Aktif</h6>
|
|
<h3 class="mb-0 fw-bold text-dark">{{ $forms->where('status', 'Dibuka')->count() }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm rounded-3 h-100 hover-lift">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-shape bg-light-warning text-warning rounded-3 me-3 p-3">
|
|
<i class="bi bi-lock fs-4"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1 text-dark fw-bold">Formulir Nonaktif</h6>
|
|
<h3 class="mb-0 fw-bold text-dark">{{ $forms->where('status', 'Ditutup')->count() }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Card -->
|
|
<div class="card border-0 shadow-lg rounded-3 overflow-hidden hover-lift">
|
|
<div class="card-header bg-white py-3 border-bottom">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 fw-semibold text-primary">
|
|
<i class="bi bi-table me-2"></i> Daftar Formulir
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="ps-4">Formulir</th>
|
|
<th class="text-center">Semester</th>
|
|
<th class="text-center">Tahun Ajaran</th>
|
|
<th class="text-center">Pembukaan</th>
|
|
<th class="text-center">Penutupan</th>
|
|
<th class="text-center">Verifikasi</th>
|
|
<th class="text-center">Pengumuman</th>
|
|
<th class="text-center">Kuota</th>
|
|
<th class="text-center">Status</th>
|
|
@if(auth()->user()->role == 'karyawan')
|
|
<th class="text-center pe-4">Aksi</th>
|
|
@endif
|
|
</tr>
|
|
</thead>
|
|
<tbody class="border-top-0">
|
|
@forelse($forms as $form)
|
|
<tr class="position-relative align-middle hover-highlight">
|
|
<td class="ps-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-shape
|
|
@if($form->jenis_form == 'pengangsuran') bg-light-info text-info
|
|
@elseif($form->jenis_form == 'penurunan') bg-light-warning text-warning
|
|
@else bg-light-secondary text-secondary
|
|
@endif
|
|
rounded-3 me-3 p-2">
|
|
<i class="bi bi-file-earmark-text fs-5"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0 fw-bold text-dark">{{ $form->nama_form }}</h6>
|
|
<span class="badge
|
|
@if($form->jenis_form == 'pengangsuran') bg-info text-white
|
|
@elseif($form->jenis_form == 'penurunan') bg-warning text-dark
|
|
@else bg-secondary text-white
|
|
@endif
|
|
text-capitalize">
|
|
{{ $form->jenis_form }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<!-- Semester Column -->
|
|
<td class="text-center">
|
|
<span class="badge badge-semester
|
|
@if($form->semester == 'Ganjil') bg-primary text-white
|
|
@else bg-info text-white
|
|
@endif">
|
|
{{ $form->semester }}
|
|
</span>
|
|
</td>
|
|
|
|
<!-- Academic Year Column -->
|
|
<td class="text-center">
|
|
<span class="academic-year">{{ $form->tahun }}</span>
|
|
</td>
|
|
|
|
<td class="text-center">
|
|
<span class="fw-medium text-dark">{{ $form->tanggal_pembukaan ? \Carbon\Carbon::parse($form->tanggal_pembukaan)->format('d M Y') : '-' }}</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="fw-medium text-dark">{{ $form->tanggal_penutupan ? \Carbon\Carbon::parse($form->tanggal_penutupan)->format('d M Y') : '-' }}</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="fw-medium text-dark">{{ $form->tanggal_verifikasi ? \Carbon\Carbon::parse($form->tanggal_verifikasi)->format('d M Y') : '-' }}</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="fw-medium text-dark">{{ $form->tanggal_pengumuman ? \Carbon\Carbon::parse($form->tanggal_pengumuman)->format('d M Y') : '-' }}</span>
|
|
</td>
|
|
|
|
<!-- Kuota Column - Automatically shows the correct quota based on jenis_form -->
|
|
<td class="text-center">
|
|
@if($form->jenis_form == 'pengangsuran')
|
|
@if(auth()->user()->role == 'admin')
|
|
<form action="{{ route('form.updateQuota', $form->id) }}" method="POST" class="d-inline">
|
|
@csrf
|
|
<div class="d-flex align-items-center">
|
|
<input type="number"
|
|
name="kuota_pengangsuran"
|
|
value="{{ $form->kuota_pengangsuran }}"
|
|
min="0"
|
|
max="1000"
|
|
class="form-control form-control-sm d-inline-block text-center"
|
|
style="width: 80px;"
|
|
required>
|
|
<button type="submit" class="btn btn-sm btn-info ms-2">
|
|
<i class="bi bi-check text-white me-2"></i> <span class="text-white">Save</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
@else
|
|
<span class="badge bg-info bg-opacity-10 text-white rounded-pill px-3 py-2 border border-info border-opacity-25">
|
|
<i class="bi bi-arrow-up-circle me-1"></i>
|
|
{{ $form->kuota_pengangsuran }} Kuota
|
|
</span>
|
|
@if($form->kuota_pengangsuran == 0)
|
|
<small class="d-block text-muted">Hanya admin yang bisa mengubah</small>
|
|
@endif
|
|
@endif
|
|
@elseif($form->jenis_form == 'penurunan')
|
|
@if(auth()->user()->role == 'admin')
|
|
<form action="{{ route('form.updateQuota', $form->id) }}" method="POST" class="d-inline">
|
|
@csrf
|
|
<div class="d-flex align-items-center">
|
|
<input type="number"
|
|
name="kuota_penurunan"
|
|
value="{{ $form->kuota_penurunan }}"
|
|
min="0"
|
|
max="1000"
|
|
class="form-control form-control-sm d-inline-block text-center"
|
|
style="width: 80px;"
|
|
required>
|
|
<button type="submit" class="btn btn-sm btn-warning ms-2">
|
|
<i class="bi bi-check text-dark me-2"></i> <span class="text-dark">Save</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
@else
|
|
<span class="badge bg-warning bg-opacity-10 text-dark rounded-pill px-3 py-2 border border-warning border-opacity-25">
|
|
<i class="bi bi-arrow-down-circle me-1"></i>
|
|
{{ $form->kuota_penurunan }} Kuota
|
|
</span>
|
|
@if($form->kuota_penurunan == 0)
|
|
<small class="d-block text-dark">Hanya admin yang bisa mengubah</small>
|
|
@endif
|
|
@endif
|
|
@endif
|
|
</td>
|
|
|
|
<td class="text-center">
|
|
<span class="badge rounded-pill px-3 py-2 fw-semibold
|
|
{{ $form->status == 'Dibuka' ? 'bg-success bg-opacity-10 text-white border border-success border-opacity-25' : 'bg-secondary bg-opacity-10 text-white border border-secondary border-opacity-25' }}">
|
|
<i class="bi {{ $form->status == 'Dibuka' ? 'bi-unlock' : 'bi-lock' }} me-1"></i>
|
|
{{ $form->status }}
|
|
</span>
|
|
</td>
|
|
|
|
@if(auth()->user()->role == 'karyawan')
|
|
<td class="text-center pe-4">
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-icon btn-light rounded-circle dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
<i class="bi bi-three-dots-vertical"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end shadow border-0 py-2">
|
|
<li>
|
|
<form action="{{ route('form.toggleStatus', $form->id) }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="dropdown-item d-flex align-items-center py-2 px-3">
|
|
<i class="bi {{ $form->status == 'Dibuka' ? 'bi-lock text-danger' : 'bi-unlock text-success' }} me-2"></i>
|
|
<span>{{ $form->status == 'Dibuka' ? 'Tutup Formulir' : 'Buka Formulir' }}</span>
|
|
</button>
|
|
</form>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center py-2 px-3" href="{{ route('form.edit', $form->id) }}">
|
|
<i class="bi bi-pencil me-2 text-warning"></i>
|
|
<span>Edit Formulir</span>
|
|
</a>
|
|
</li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li>
|
|
<form action="{{ route('form.destroy', $form->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus formulir ini?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="dropdown-item d-flex align-items-center py-2 px-3 text-danger">
|
|
<i class="bi bi-trash me-2"></i>
|
|
<span>Hapus Formulir</span>
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
@endif
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="text-center py-5">
|
|
<div class="d-flex flex-column align-items-center justify-content-center">
|
|
<img src="{{ asset('images/empty-state.svg') }}" alt="Empty state" class="img-fluid mb-4" style="max-height: 150px;">
|
|
<h5 class="text-muted mb-2">Belum ada formulir tersedia</h5>
|
|
@if(auth()->user()->role == 'admin')
|
|
<a href="{{ route('form.create') }}" class="btn btn-primary mt-3 rounded-pill px-4">
|
|
<i class="bi bi-plus-circle me-2"></i> Buat Formulir Pertama
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
@if($forms->hasPages())
|
|
<div class="card-footer bg-white py-3 border-top">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="text-muted small">
|
|
Menampilkan <span class="fw-semibold">{{ $forms->firstItem() }}</span> - <span class="fw-semibold">{{ $forms->lastItem() }}</span> dari <span class="fw-semibold">{{ $forms->total() }}</span> formulir
|
|
</div>
|
|
<div>
|
|
{{ $forms->onEachSide(1)->links('pagination::bootstrap-5') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Modal -->
|
|
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow-lg">
|
|
<div class="modal-header bg-primary text-white rounded-top-4">
|
|
<h5 class="modal-title" id="helpModalLabel"><i class="bi bi-question-circle me-2"></i> Panduan Formulir</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h6>Fitur Manajemen Formulir:</h6>
|
|
<ul>
|
|
<li><strong>Buat Form Baru:</strong> Untuk membuat formulir pendaftaran baru</li>
|
|
<li><strong>Status Formulir:</strong> Untuk mengubah status formulir dibuka atau ditutup</li>
|
|
<li><strong>Edit Formulir:</strong> Untuh mengubah dan memperbarui formulir</li>
|
|
<li><strong>Update Kuota:</strong> Hanya untuk admin </li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.dashboard-header {
|
|
background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.icon-shape {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.table > :not(:first-child) {
|
|
border-top: 0;
|
|
}
|
|
|
|
.table-hover > tbody > tr:hover {
|
|
background-color: rgba(13, 110, 253, 0.05);
|
|
}
|
|
|
|
.btn-hover-light:hover {
|
|
background-color: rgba(255, 255, 255, 0.9) !important;
|
|
color: #0d6efd !important;
|
|
}
|
|
|
|
.rounded-3 {
|
|
border-radius: 0.75rem !important;
|
|
}
|
|
|
|
.rounded-4 {
|
|
border-radius: 1rem !important;
|
|
}
|
|
|
|
.hover-lift {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.hover-highlight:hover {
|
|
background-color: rgba(13, 110, 253, 0.03) !important;
|
|
}
|
|
|
|
.badge {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.badge:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Responsive table adjustments */
|
|
@media (max-width: 768px) {
|
|
.table-responsive {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.card-header .d-flex {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.card-header .input-group {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
/* Full width adjustments */
|
|
.container-fluid.px-0 {
|
|
padding-right: 0 !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.dashboard-header.rounded-0 {
|
|
border-radius: 0 !important;
|
|
}
|
|
</style>
|
|
@endsection |