@extends('layouts.app')

@section('title', 'Products – Social Networks')

@section('content')
<div class="social-networks-page products-page">
    <p class="setting-back">
        <a href="{{ route('social-networks.index') }}">← Social Networks</a>
    </p>
    <header class="setting-header">
        <h1>Products</h1>
        <p class="setting-subtitle">Products not on the website: custom pieces, watches, grillz. The bot uses this catalog to answer customer questions. One product = one description (plain text) + one media.</p>
    </header>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if ($errors->any())
        <div class="alert alert-error">
            <ul style="margin: 0; padding-left: 1.25rem;">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="products-actions" style="margin-bottom: 1.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
        <a href="{{ route('social-networks.products.create') }}" class="btn btn-primary">Add product</a>
        <a href="{{ route('social-networks.products.categories.index') }}" class="btn btn-secondary">Category settings</a>
    </div>

    <section class="setting-section setting-card">
        @if ($products->isEmpty())
            <p class="setting-subtitle" style="margin: 0;">No products yet. Add one to build your in-store catalog for the bot.</p>
        @else
            <div class="products-table-wrap">
                <table class="products-table">
                    <thead>
                        <tr>
                            <th>Media</th>
                            <th>Category</th>
                            <th>Keywords</th>
                            <th>Description</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($products as $product)
                            <tr>
                                <td class="products-table-media">
                                    @if ($product->media_url)
                                        @if ($product->media_type === 'video')
                                            <video src="{{ $product->media_full_url }}#t=0.1" class="products-thumb products-thumb-video" width="48" height="48" muted playsinline preload="metadata" title="Video"></video>
                                        @else
                                            <img src="{{ $product->media_full_url }}" alt="" class="products-thumb" loading="lazy">
                                        @endif
                                    @else
                                        <span class="products-thumb products-thumb-empty">—</span>
                                    @endif
                                </td>
                                <td class="products-table-category">{{ \App\Models\StoreProduct::CATEGORIES[$product->category] ?? $product->category }}</td>
                                <td class="products-table-keywords">{{ $product->keywords ? \Illuminate\Support\Str::limit($product->keywords, 80) : '—' }}</td>
                                <td class="products-table-description">{{ $product->description ? \Illuminate\Support\Str::limit($product->description, 120) : '—' }}</td>
                                <td class="products-table-actions">
                                    <a href="{{ route('social-networks.products.edit', $product) }}" class="btn btn-secondary" style="padding: 0.35rem 0.75rem; font-size: 0.85rem;">Edit</a>
                                    <form action="{{ route('social-networks.products.destroy', $product) }}" method="POST" style="display: inline;" onsubmit="return confirm('Delete this product?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger" style="padding: 0.35rem 0.75rem; font-size: 0.85rem;">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>
</div>
@push('styles')
<style>
.products-page .setting-back { margin-bottom: 1rem; }
.products-page .setting-back a { color: #4b5563; text-decoration: none; }
.products-page .setting-back a:hover { color: #111; text-decoration: underline; }
.setting-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
.products-table-wrap { overflow-x: auto; }
.products-table { width: 100%; border-collapse: collapse; }
.products-table th, .products-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
.products-table th { font-weight: 600; color: #374151; font-size: 0.9rem; }
.products-table-media { width: 64px; vertical-align: middle; }
.products-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.products-thumb-video { object-fit: cover; background: #e5e7eb; display: block; }
.products-thumb-empty { color: #9ca3af; font-size: 0.85rem; }
.products-table-category { vertical-align: middle; }
.products-table-keywords { vertical-align: middle; font-size: 0.85rem; max-width: 180px; color: #4b5563; }
.products-table-description { vertical-align: middle; font-size: 0.9rem; max-width: 320px; }
.products-table-actions { vertical-align: middle; white-space: nowrap; }
.products-table-actions .btn { margin-right: 0.35rem; }
</style>
@endpush
@endsection