@extends('vendor.layout.app')

@section('content')
<div class="container">

    <h3 class="mb-3">My Products</h3>

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

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

    <div class="mb-3 text-end">
        <a href="{{ route('vendor.product-create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Add Product
        </a>
    </div>

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>Category</th>
                <th>Product Name</th>
                <th>SKU</th>
                <th width="200">Actions</th>
            </tr>
        </thead>
        <tbody>
            @php
                $row = 1;
                $allCategories = isset($categories) ? $categories : \App\Models\Category::all();
            @endphp
            @forelse($vendorProducts as $vp)
                @php
                    $category = $allCategories->firstWhere('id', $vp->category_id ?? null);
                @endphp
                <tr>
                    <td>{{ $row++ }}</td>
                    <td>{{ $category ? ($category->heading ?? $category->name ?? $category->category_name) : 'N/A' }}</td>

                    <td>{{ $vp->product_name }}</td>
                    <td>{{ $vp->sku ?? 'N/A' }}</td>
                    <td>
                        <!-- Option Button Dropdown -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bi bi-three-dots"></i> Options
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="{{ route('vendor.product-edit', ['id' => $vp->id]) }}">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item text-danger" href="#" onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this product?')){document.getElementById('delete-product-{{ $vp->id }}').submit();}">
                                        <i class="bi bi-trash"></i> Delete
                                    </a>
                                    <form id="delete-product-{{ $vp->id }}" action="{{ route('vendor.product-destroy', ['id' => $vp->id]) }}" method="POST" style="display: none;">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="text-center">No products found</td>
                </tr>
            @endforelse
        </tbody>
    </table>

</div>
@endsection