142 lines
5.4 KiB
PHP
142 lines
5.4 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('title', 'Component Management')
|
|
|
|
@include('admin.shared.admin-styles')
|
|
|
|
@section('content')
|
|
<div class="admin-container container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="page-header animate-fade-in">
|
|
<div class="row align-items-center">
|
|
<div class="col-12">
|
|
<h3 class="mb-2 text-white">
|
|
<i class="fas fa-puzzle-piece me-2"></i>Component Management
|
|
</h3>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ route('admindash') }}" class="text-white-50">Dashboard</a></li>
|
|
<li class="breadcrumb-item active text-white" aria-current="page">Components</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="admin-card animate-fade-in">
|
|
<div class="card-body">
|
|
<!-- Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-list me-2"></i>Component List
|
|
</h5>
|
|
</div>
|
|
|
|
<!-- Component Table -->
|
|
<div class="table-responsive">
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Name</th>
|
|
<th class="text-center">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($komponens as $kmpn)
|
|
<tr>
|
|
<td>{{ ($komponens->currentPage() - 1) * $komponens->perPage() + $loop->iteration }}</td>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
{{ $kmpn->nama }}
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<a href="#" class="admin-btn btn-info btn-sm" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<form action="{{ route('deletekomponen', $kmpn->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this component?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="admin-btn btn-danger btn-sm" title="Delete">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Pagination -->
|
|
<div class="d-flex justify-content-between align-items-center mt-4">
|
|
<div class="text-muted">
|
|
Showing {{ $komponens->firstItem() ?? 0 }} to {{ $komponens->lastItem() ?? 0 }} of {{ $komponens->total() }} entries
|
|
</div>
|
|
<div class="admin-pagination">
|
|
{{ $komponens->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
.admin-pagination nav {
|
|
margin-bottom: 0;
|
|
}
|
|
.admin-pagination .pagination {
|
|
margin-bottom: 0;
|
|
}
|
|
.admin-pagination .page-link {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
border-radius: 0.25rem;
|
|
margin: 0 0.125rem;
|
|
color: var(--primary-color);
|
|
background-color: var(--white);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.admin-pagination .page-item.active .page-link {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: var(--white);
|
|
}
|
|
.admin-pagination .page-item.disabled .page-link {
|
|
color: var(--gray);
|
|
pointer-events: none;
|
|
background-color: var(--light);
|
|
border-color: var(--border-color);
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const animateElements = document.querySelectorAll('.animate-fade-in');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = 1;
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
});
|
|
|
|
animateElements.forEach(element => {
|
|
element.style.opacity = 0;
|
|
element.style.transform = 'translateY(20px)';
|
|
observer.observe(element);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|