304 lines
11 KiB
PHP
304 lines
11 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('page-title', 'User Requests')
|
|
|
|
@section('content')
|
|
<div class="container-fluid px-0">
|
|
|
|
<style>
|
|
/* 🌟 Smooth fade-in animation */
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ✨ Container animation */
|
|
.card, .custom-table-wrapper {
|
|
animation: fadeInUp 0.8s ease both;
|
|
}
|
|
|
|
/* 🪄 Table hover effect */
|
|
.custom-table tbody tr {
|
|
transition: all 0.25s ease-in-out;
|
|
}
|
|
.custom-table tbody tr:hover {
|
|
background-color: #fffbea;
|
|
transform: scale(1.01);
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
/* 🎯 Priority Badges */
|
|
.priority-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 13.5px;
|
|
padding: 6px 16px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15);
|
|
width: 90px;
|
|
min-height: 28px;
|
|
justify-content: center;
|
|
color: #fff;
|
|
margin: 2px 0;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
.priority-badge:hover {
|
|
transform: scale(1.08);
|
|
}
|
|
.priority-high { background: linear-gradient(135deg, #ff8a8a, #d12929); }
|
|
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); }
|
|
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); }
|
|
|
|
/* 🎨 Table Header (keep original bg-light color) */
|
|
.custom-table thead th {
|
|
text-align: center;
|
|
font-weight: 700;
|
|
color: #000;
|
|
padding: 14px;
|
|
font-size: 17px;
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 2px solid #bfbfbf;
|
|
background-color: #fde4b3; /* Bootstrap bg-light */
|
|
}
|
|
|
|
/* 🟢 Rounded Corners for Header */
|
|
.custom-table thead tr:first-child th:first-child {
|
|
border-top-left-radius: 12px;
|
|
}
|
|
.custom-table thead tr:first-child th:last-child {
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
/* 🧾 Table bottom corners */
|
|
.custom-table tbody tr:last-child td:first-child {
|
|
border-bottom-left-radius: 12px;
|
|
}
|
|
.custom-table tbody tr:last-child td:last-child {
|
|
border-bottom-right-radius: 12px;
|
|
}
|
|
|
|
/* 💫 Search box styling */
|
|
.input-group input {
|
|
border-radius: 10px 0 0 10px;
|
|
border: 1px solid #ccc;
|
|
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
.input-group .btn {
|
|
border-radius: 0 10px 10px 0;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
.input-group .btn:hover {
|
|
background: #ffd65a;
|
|
border-color: #ffd65a;
|
|
color: #000;
|
|
}
|
|
|
|
/* 🎨 Card Style */
|
|
.card {
|
|
border-radius: 16px;
|
|
border: none;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
|
|
background: #fff;
|
|
}
|
|
|
|
/* ⚡ Status Badges - NEW ATTRACTIVE STYLES */
|
|
.badge {
|
|
font-size: 11px !important;
|
|
font-weight: 600 !important;
|
|
padding: 7px 13px !important;
|
|
border-radius: 20px !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-size: cover !important;
|
|
background-position: center !important;
|
|
color: #fff !important;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
border: 2px solid transparent !important;
|
|
box-sizing: border-box;
|
|
line-height: 1.2;
|
|
gap: 6px;
|
|
animation: pulse 2s infinite;
|
|
width: 99px;
|
|
}
|
|
|
|
/* Status icons */
|
|
.status-icon {
|
|
font-size: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Custom status badge backgrounds */
|
|
.badge-pending {
|
|
background: url('/images/status-bg-pending.png') !important;
|
|
}
|
|
|
|
.badge-approved {
|
|
background: url('/images/status-bg-approved.png') !important;
|
|
}
|
|
|
|
.badge-rejected {
|
|
background: url('/images/status-bg-rejected.png') !important;
|
|
}
|
|
|
|
/* Fallback colors if images don't load */
|
|
.badge.badge-pending {
|
|
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
|
|
color: #d97706 !important;
|
|
border-color: #f59e0b !important;
|
|
width: 85px;
|
|
}
|
|
|
|
.badge.badge-approved {
|
|
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
|
|
color: #065f46 !important;
|
|
border-color: #10b981 !important;
|
|
width: 85px;
|
|
}
|
|
|
|
.badge.badge-rejected {
|
|
background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
|
|
color: #991b1b !important;
|
|
border-color: #ef4444 !important;
|
|
width: 85px;
|
|
}
|
|
|
|
/* Animation effects for badges */
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }
|
|
50% { box-shadow: 0 0 14px rgba(0,0,0,0.15); }
|
|
100% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }
|
|
}
|
|
|
|
/* Count badges at top */
|
|
.count-badge {
|
|
--bs-badge-padding-x: 0.65em;
|
|
--bs-badge-padding-y: 0.35em;
|
|
--bs-badge-font-size: 0.75em;
|
|
--bs-badge-font-weight: 700;
|
|
--bs-badge-color: #fff;
|
|
--bs-badge-border-radius: var(--bs-border-radius);
|
|
}
|
|
|
|
/* ✨ Heading style */
|
|
h4.fw-bold {
|
|
background: linear-gradient(90deg, #000000ff 0%, #030302ff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* ✅ Center align for last column */
|
|
.custom-table tbody td:last-child {
|
|
text-align: center !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
</style>
|
|
|
|
<!-- Heading and status badges row -->
|
|
<div class="d-flex justify-content-between align-items-center mb-2 mt-3">
|
|
<h4 class="fw-bold mb-0">User Requests</h4>
|
|
<div>
|
|
<span class="count-badge badge rounded-pill bg-warning text-dark me-1">
|
|
{{ $requests->where('status', 'pending')->count() }} Pending
|
|
</span>
|
|
<span class="count-badge badge rounded-pill bg-success me-1">
|
|
{{ $requests->where('status', 'approved')->count() }} Approved
|
|
</span>
|
|
<span class="count-badge badge rounded-pill bg-danger">
|
|
{{ $requests->where('status', 'rejected')->count() }} Rejected
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4 shadow-sm">
|
|
<div class="card-body pb-1">
|
|
<form method="GET" action="">
|
|
<div class="input-group mb-2">
|
|
<input type="text" name="search" value="{{ old('search', request('search')) }}" class="form-control" placeholder="Search Request by name, email, Company or Request ID">
|
|
<button class="btn btn-outline-primary" type="submit"><i class="bi bi-search"></i></button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="table-responsive custom-table-wrapper">
|
|
<table class="table align-middle mb-0 custom-table">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Request ID</th>
|
|
<th>Name</th>
|
|
<th>Company</th>
|
|
<th>Email</th>
|
|
<th>Mobile</th>
|
|
<th>Address</th>
|
|
<th>Priority</th>
|
|
<th>Date</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($requests as $index => $req)
|
|
<tr>
|
|
<td>{{ $requests->count() - $index }}</td>
|
|
<td>{{ $req->request_id }}</td>
|
|
<td>{{ $req->customer_name }}</td>
|
|
<td>{{ $req->company_name }}</td>
|
|
<td>{{ $req->email }}</td>
|
|
<td>{{ $req->mobile_no }}</td>
|
|
<td>{{ $req->address }}</td>
|
|
<td>
|
|
@if(strtolower($req->priority) == 'high')
|
|
<span class="priority-badge priority-high">High</span>
|
|
@elseif(strtolower($req->priority) == 'medium')
|
|
<span class="priority-badge priority-medium">Medium</span>
|
|
@elseif(strtolower($req->priority) == 'low')
|
|
<span class="priority-badge priority-low">Low</span>
|
|
@else
|
|
{{ $req->priority }}
|
|
@endif
|
|
</td>
|
|
<td>{{ $req->date }}</td>
|
|
<td>
|
|
@if($req->status == 'approved')
|
|
<span class="badge badge-approved">
|
|
<i class="bi bi-check-circle-fill status-icon"></i>
|
|
Approved
|
|
</span>
|
|
@elseif($req->status == 'rejected')
|
|
<span class="badge badge-rejected">
|
|
<i class="bi bi-x-circle-fill status-icon"></i>
|
|
Rejected
|
|
</span>
|
|
@else
|
|
<span class="badge badge-pending">
|
|
<i class="bi bi-clock-fill status-icon"></i>
|
|
Pending
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td>N/A</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
@if($requests->isEmpty())
|
|
<div class="py-4 text-center text-muted">No records found.</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection |