@extends('layouts.admin')

@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="mb-0">Product List</h1>
        <a href="{{ route('products.create') }}" class="btn btn-primary">Add Product</a>
    </div>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5 product-grid">
        @forelse($products as $product)
            <div class="col mb-4">
                <div class="card h-100">
                    <img 
                        src="{{ $product->image ? asset('storage/app/public/' . $product->image) : asset('assets/images/products/placeholder.png') }}" 
                        class="card-img-top" 
                        alt="{{ $product->name }}"
                        onerror="this.onerror=null;this.src='{{ asset('assets/images/products/placeholder.png') }}';"
                    />
                    <div class="card-body">
                        <h6 class="card-title cursor-pointer">{{ $product->name }}</h6>
                        <p class="card-text">{{ $product->description }}</p>
                        <p class="mb-0"><strong>Price:</strong> ₱{{ number_format($product->price, 2) }}</p>
                        <p class="mb-0"><strong>Merchant:</strong> {{ $product->merchant->business_name ?? 'N/A' }}</p>
                        @if($product->options->count() > 0)
                            <div class="mt-2">
                                <small class="text-muted"><strong>Options:</strong></small>
                                @foreach($product->options as $option)
                                    <div class="small">
                                        <strong>{{ $option->option_name }}</strong> 
                                        ({{ ucfirst($option->option_type) }})
                                        @if($option->is_required)
                                            <span class="text-danger">*</span>
                                        @endif
                                        <br>
                                        <span class="text-muted">
                                            @php
                                                $values = collect($option->option_values)->pluck('value')->toArray();
                                            @endphp
                                            {{ implode(', ', $values) }}
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                        <div class="mt-3 text-end">
                            <a href="{{ route('products.edit', $product->id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                            <form action="{{ route('products.destroy', $product->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this product?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-info text-center">No products found.</div>
            </div>
        @endforelse
    </div>
</div>
@endsection