@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: 4px 16px 4px 11px;
          border-radius: 12px;
          font-weight: 500;
          gap: 6px;
          box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15);
          min-width: 76px;
          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); color: #fff; }
      .priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); color: #fff; }
      .priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); color: #fff; }

      .priority-badge .icon {
          margin-right: 5px;
          font-size: 1.1em;
          line-height: 1;
          display:inline-block;
          width: 17px;
          text-align: center;
      }

      /* 🎨 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 */
      .badge {
          font-size: 13px;
          padding: 7px 12px;
          border-radius: 10px;
      }

      /* ✨ 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="badge rounded-pill bg-primary me-1">
                {{ $requests->where('status', 'pending')->count() }} Pending
            </span>
            <span class="badge rounded-pill bg-success me-1">
                {{ $requests->where('status', 'approved')->count() }} Approved
            </span>
            <span class="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"><span class="icon">🔥</span>High</span>
                                    @elseif(strtolower($req->priority) == 'medium')
                                        <span class="priority-badge priority-medium"><span class="icon">⚡</span>Medium</span>
                                    @elseif(strtolower($req->priority) == 'low')
                                        <span class="priority-badge priority-low"><span class="icon">🟢</span>Low</span>
                                    @else
                                        {{ $req->priority }}
                                    @endif
                                </td>
                                <td>{{ $req->date }}</td>
                                <td>
                                    @if($req->status == 'approved')
                                        <span class="badge bg-success">Approved</span>
                                    @elseif($req->status == 'rejected')
                                        <span class="badge bg-danger">Rejected</span>
                                    @else
                                        <span class="badge bg-warning text-dark">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