@extends('admin.layouts.app')

@section('title', 'Products')

@section('content')

<div class="mb-6 flex justify-between items-center">
    <h3 class="text-xl font-bold text-gray-900">Products</h3>
    <a href="{{ route('admin.products.create') }}"
       class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition">
        Add Product
    </a>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-100 border-b border-gray-200">
            <tr>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Name</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Category</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Price</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Stock</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Status</th>
                <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900">Actions</th>
            </tr>
        </thead>

        <tbody>
        @forelse ($products as $product)

            @php
                $isUpdated = session('updated_id') == $product->id;
            @endphp

            <tr id="product-row-{{ $product->id }}"
                class="border-b border-gray-200 transition-all duration-700
                {{ $isUpdated ? 'bg-orange-50' : 'hover:bg-gray-50' }}"
                @if($isUpdated)
                    style="outline: 2px solid #f97316; outline-offset: -2px;"
                @endif
            >

                {{-- Product Name --}}
                <td class="px-6 py-4 text-sm text-gray-900">
                    <div class="flex items-center">
                        {{ $product->name ?? '—' }}

                        @if($isUpdated)
                            <span
                                class="ml-2 px-2 py-0.5 text-[10px] font-bold bg-orange-500 text-white rounded uppercase animate-pulse">
                                Updated
                            </span>
                        @endif
                    </div>
                </td>

                {{-- Category (NULL SAFE) --}}
                <td class="px-6 py-4 text-sm text-gray-600">
                    {{ $product->category?->name ?? '—' }}
                </td>

                {{-- Price --}}
                <td class="px-6 py-4 text-sm text-gray-900">
                    {{ $product->price !== null ? format_price($product->price) : '—' }}
                </td>

                {{-- Stock --}}
                <td class="px-6 py-4 text-sm text-gray-600">
                    {{ $product->stock_quantity ?? '—' }}
                </td>

                {{-- Status --}}
                <td class="px-6 py-4 text-sm">
                    <span
                        class="px-3 py-1 rounded-full text-xs font-semibold
                        {{ $product->is_active
                            ? 'bg-green-100 text-green-800'
                            : 'bg-gray-100 text-gray-800' }}">
                        {{ $product->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>

                {{-- Actions --}}
                <td class="px-6 py-4 text-right">
                    <a href="{{ route('admin.products.edit', $product) }}"
                       class="text-blue-600 hover:text-blue-900 mr-4">
                        Edit
                    </a>

                    <form action="{{ route('admin.products.destroy', $product) }}"
                          method="POST"
                          class="inline"
                          onsubmit="return confirm('Are you sure?')">
                        @csrf
                        @method('DELETE')

                        <button type="submit"
                                class="text-red-600 hover:text-red-900">
                            Delete
                        </button>
                    </form>
                </td>

            </tr>

        @empty
            <tr>
                <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                    No products found
                </td>
            </tr>
        @endforelse
        </tbody>
    </table>
</div>

{{-- Pagination --}}
{!! admin_pagination($products) !!}

{{-- Auto-scroll + highlight removal --}}
@if(session('updated_id'))
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const row = document.getElementById('product-row-{{ session('updated_id') }}');

        if (row) {
            row.scrollIntoView({ behavior: 'smooth', block: 'center' });

            setTimeout(() => {
                row.style.outline = 'none';
                row.classList.remove('bg-orange-50');
            }, 5000);
        }
    });
</script>
@endif

@endsection