Kent-logistics-Laravel/resources/views/admin/requests.blade.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