@extends('buyer.layout')

@section('title')
<title>Admin Notification Page</title>
@endsection

@section('frontend-content')
<!-- Main content  -->
<div class="container d-flex justify-content-center p-3">
    <div class="content-wrapper w-100">
        <div class="p-6 bg-gray-100 min-h-screen">
            <h1 class="text-2xl font-bold mb-6">📩 Enquiry Alerts</h1>

            <!-- Filter Bar -->
            <div class="d-flex flex-wrap gap-5 mb-5 mt-4">
                <select class="px-4 py-2 border rounded shadow-sm">
                    <option>Categories</option>
                    <option>Men</option>
                    <option>Women</option>
                    <option>Kids</option>
                    <option>Accessories</option>
                </select>
                <select class="px-4 py-2 border rounded shadow-sm">
                    <option>Sub Categories : Men</option>
                    <option>Formal Shirt</option>
                    <option>Casual Shirt</option>
                    <option>Polo Shirt</option>
                    <option>T-Shirt</option>
                    <option>Shorts</option>
                    <option>Active Wear</option>
                </select>
                <select class="px-4 py-2 border rounded shadow-sm">
                    <option>Status: All</option>
                    <option>Unread</option>
                    <option>Read</option>
                </select>
                <input type="text" placeholder="Search by RFID/Product"
                    class="px-4 py-2 border rounded w-72 shadow-sm" />
            </div>

            <!-- Notification Cards -->
            <div class="space-y-4 ">
                @foreach ([1, 2, 3] as $index)
                <div class="bg-white border border-gray-200 rounded-lg p-4 shadow hover:shadow-md my-4 w-50">
                    <div class="flex justify-between items-center">
                        <div>
                            <h2 class="text-lg font-semibold">Enquiry - RFID00{{ $index }}</h2>
                            <p class="text-sm text-gray-600">
                                Sub-Category: <span class="text-indigo-600 font-medium">Headwear</span><br>
                                Buyer: John Doe (john{{ $index }}@example.com)<br>
                                <span class="text-gray-500 text-xs">Received:
                                    {{ now()->subMinutes($index * 8)->format('d M Y, h:i A') }}</span>
                            </p>
                        </div>
                        <div class="flex gap-2">
                            <!-- Status Badge -->
                            <span class="text-gray-500 text-xs">Status :</span>
                            @if ($index == 1)
                            <span class="px-3 py-1 fw-bold text-danger">Unread</span>
                            @else
                            <span class="px-3 py-1 fw-bold text-success">Read</span>
                            @endif
                            <a href="#" class="px-3 py-1 text-sm text-primary">View</a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Notification Table -->
            <div class="container bg-white shadow py-3" style="width: 1000px">
                <table class="my-3 w-100 text-sm text-center table-bordered">
                    <thead class="bg-gray-50 text-xs uppercase text-gray-500 border-b">
                        <tr>
                            <th class="px-6 py-3">RFID</th>
                            <th class="px-6 py-3">Sub-Category</th>
                            <th class="px-6 py-3">Buyer</th>
                            <th class="px-6 py-3">Email</th>
                            <th class="px-6 py-3">Received</th>
                            <th class="px-6 py-3">Status</th>
                            <th class="px-6 py-3 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-700 divide-y">
                        @foreach ([1, 2, 3] as $index)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-3">RFID00{{ $index }}</td>
                            <td class="px-6 py-3">Socks</td>
                            <td class="px-6 py-3">John Doe</td>
                            <td class="px-6 py-3">john{{ $index }}@example.com</td>
                            <td class="px-6 py-3">{{ now()->subMinutes($index * 10)->format('d M Y, h:i A') }}</td>
                            <td class="px-6 py-3">
                                @if ($index == 1)
                                <p class="px-3 py-1 fw-bold text-danger">Unread</p>
                                @else
                                <p class="px-3 py-1 fw-bold text-success">Read</p>
                                @endif
                            </td>
                            <td class="px-6 py-3 text-center">
                                <a href="#" class="text-blue-600 hover:underline text-sm mr-3">View</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @php
    $user = Auth::user();
    @endphp
    @endsection