@extends('buyer.layout')

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

@section('frontend-content')
<div class="container mx-auto p-4">
    <h2 class="text-dark my-3">Your Notifications</h2>
    <div class="bg-white p-4 shadow">
        <h5 class="text-info">Catalogue Updates!</h5>
        <p class="text-muted mb-2">
            We've added fresh new arrivals to our product catalogue including premium accessories, seasonal wear, and
            top-trending styles. Stay ahead and explore what's new!
        </p>
        <a href="#" class="text-primary fw-bold text-decoration-underline">View Catalogue Updates</a>
    </div>

    <div class="card container bg-white mx-auto my-4 p-4 shadow">
        <h5 class="text-success">New Arrivals here !</h5>
        <div class="d-flex flex-wrap gap-5 px-2 mt-4 mx-4">
            @foreach ([1, 2, 3, 4] as $index)
            <div class="bg-white border p-4 shadow rounded-md " style="width: 450px">
                <div class="flex justify-between items-start gap-4">
                    <!-- Product Info -->
                    <div class="flex-1">
                        <h2 class="text-md font-bold text-primary">New Product Alert</h2>
                        <p class="font-semibold text-gray-800">
                            Product Name: <span class="font-normal text-gray-600">
                                {{ ['Men\'s High Ankle Tennis Socks', 'Men\'s Formal White Shirt', 'Kids Grey Hoodie', 'Women\'s Full Sleeve T-Shirt'][$index - 1] }}
                            </span><br>
                            Category: <span class="font-normal text-gray-600">
                                {{ ['Accessories', 'Men', 'Kids', 'Women'][$index - 1] }}
                            </span><br>
                            Sub-Category: <span class="font-normal text-gray-600">
                                {{ ['Socks', 'Formal Shirt', 'Hoodie', 'T-Shirt'][$index - 1] }}
                            </span><br>
                            <span class="text-sm text-gray-400">Added on: {{ now()->format('d M Y') }}</span>
                        </p>
                    </div>

                    <!-- Product Image -->
                    <div class="flex-shrink-0">
                        <img src="{{ asset(['img/socks.png', 'img/white_front.png', 'img/child.png', 'img/women2.png'][$index - 1]) }}"
                            alt="Product Image"
                            style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;" />
                    </div>
                </div>

                <div class="mt-3 flex items-center">
                    <a href="#" class="text-sm text-blue-600 hover:underline">View Product Details</a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>


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