@extends('layouts.admin')

@section('page-title', 'Products')

@section('content')
<div class="container-fluid  mt-4">

    {{-- Add New Product --}}
    <a href="{{ route('page_products.create') }}" class="main-butn mb-3">Add New Product</a>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    {{-- Loop categories --}}
    @foreach($categories as $category)
        <h3 class="mt-4">{{ $category }}</h3>
        <div class="row mb-4">
            @if(isset($products[$category]) && count($products[$category]) > 0) 
                @foreach($products[$category] as $product)
                    <div class="col-md-3">
                        <div class="card mb-3">
                            @if($product->image)
                                <img src="{{ asset('uploads/products/'.$product->image) }}" class="card-img-top" style="height:150px; object-fit:cover;">
                            @endif
                            <div class="card-body">
                                <h5 class="card-title">{{ $product->title }}</h5>
                                <p class="card-text">{{ $product->description }}</p>

                                {{-- Edit button --}}
                                <a href="{{ route('page_products.edit', $product->id) }}" class="p-btn">Edit</a>

                                {{-- Delete button --}}
                                <a href="{{ route('page_products.delete', $product->id) }}" class="p-dltbtn" onclick="return confirm('Are you sure you want to delete this product?')">Delete</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="col-12">
                    <p class="text-muted">No products available in this category.</p>
                </div>
            @endif
        </div>
    @endforeach

</div>
@endsection