@extends('layouts.admin')

@section('title', 'Manage Products')

@section('admin-content')
<div class="products-page">
    <!-- Page Header -->
    <div class="page-header">
        <div>
            <h4 class="page-title">Product Management</h4>
            <p class="text-muted mb-0 small">Manage all products from sellers</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-light border shadow-sm btn-sm">
                <i class="bi bi-download me-1"></i> Export
            </button>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-4 mb-4">
        <div class="col-lg-3 col-md-6">
            <div class="stat-card stat-card-primary">
                <div class="stat-icon">
                    <i class="bi bi-box-seam"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $totalProducts }}</div>
                    <div class="stat-label">Total Products</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card stat-card-warning">
                <div class="stat-icon">
                    <i class="bi bi-star-fill"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $featuredProducts }}</div>
                    <div class="stat-label">Featured Products</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card stat-card-success">
                <div class="stat-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $totalProducts - ($pendingProducts ?? 0) }}</div>
                    <div class="stat-label">Approved</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card stat-card-info">
                <div class="stat-icon">
                    <i class="bi bi-plus-circle"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $newProductsToday }}</div>
                    <div class="stat-label">New Today</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body p-3">
            <form action="{{ route('admin.products') }}" method="GET" class="row g-3 align-items-end">
                <div class="col-lg-4 col-md-6">
                    <label class="form-label small fw-bold text-muted mb-1">
                        <i class="bi bi-search me-1"></i> Search Products
                    </label>
                    <input type="text" name="q" class="form-control" 
                           placeholder="Product name, ID, seller..." 
                           value="{{ request('q') }}">
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label small fw-bold text-muted mb-1">
                        <i class="bi bi-folder me-1"></i> Category
                    </label>
                    <select name="category" class="form-select">
                        <option value="all">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label small fw-bold text-muted mb-1">
                        <i class="bi bi-filter me-1"></i> Status
                    </label>
                    <select name="status" class="form-select">
                        <option value="all">All Status</option>
                        <option value="featured" {{ request('status') == 'featured' ? 'selected' : '' }}>⭐ Featured</option>
                        <option value="unfeatured" {{ request('status') == 'unfeatured' ? 'selected' : '' }}>Standard</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>⏳ Pending</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-6">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-funnel me-1"></i> Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Products Table -->
    <div class="card">
        <form action="{{ route('admin.products.bulk-action') }}" method="POST" id="bulkActionForm">
            @csrf
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-2">
                    <select name="action" class="form-select form-select-sm" style="width: 160px;" required>
                        <option value="">Bulk Actions</option>
                        <option value="feature">⭐ Mark Featured</option>
                        <option value="unfeature">Remove Featured</option>
                        <option value="approve">✓ Approve</option>
                        <option value="delete">🗑 Delete</option>
                    </select>
                    <button type="submit" class="btn btn-sm btn-secondary" onclick="return confirm('Apply this action to selected products?')">
                        Apply
                    </button>
                    <span class="text-muted small ms-2" id="selectedCount">0 selected</span>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <small class="text-muted">
                        Showing {{ $products->firstItem() ?? 0 }}-{{ $products->lastItem() ?? 0 }} of {{ $products->total() }}
                    </small>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th class="ps-4" style="width: 40px;">
                                <input type="checkbox" class="form-check-input" id="selectAll">
                            </th>
                            <th>Product Details</th>
                            <th>Category</th>
                            <th>Price / MOQ</th>
                            <th>Seller</th>
                            <th class="text-center">Status</th>
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $product)
                            <tr>
                                <td class="ps-4">
                                    <input type="checkbox" name="selected_products[]" value="{{ $product->id }}" class="form-check-input product-checkbox">
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="rounded-3 border d-flex align-items-center justify-content-center bg-light" style="width: 48px; height: 48px; overflow: hidden;">
                                            @if(!empty($product->images_json))
                                                <img src="{{ $product->main_image }}" alt="{{ $product->name }}" style="width: 100%; height: 100%; object-fit: cover;">
                                            @else
                                                <i class="bi bi-image text-secondary"></i>
                                            @endif
                                        </div>
                                        <div>
                                            <h6 class="fw-semibold mb-0 text-dark" style="font-size: 0.9rem;">
                                                {{ Str::limit($product->name, 40) }}
                                            </h6>
                                            <small class="text-muted" style="font-size: 0.75rem;">ID: #{{ $product->id }}</small>
                                            @if($product->isPromoted())
                                                <span class="badge bg-warning text-dark ms-1" style="font-size: 0.65rem;">
                                                    <i class="bi bi-megaphone"></i> Promoted
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark fw-normal border">
                                        <i class="bi bi-tag text-muted me-1"></i>
                                        {{ $product->category->name ?? 'Uncategorized' }}
                                    </span>
                                </td>
                                <td>
                                    <div class="fw-bold text-primary" style="font-size: 0.9rem;">₹{{ number_format($product->price, 0) }}</div>
                                    @if($product->moq)
                                        <div class="text-muted" style="font-size: 0.75rem;">MOQ: {{ $product->moq }} {{ $product->unit->name ?? 'units' }}</div>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="rounded-circle bg-light border d-flex align-items-center justify-content-center" style="width: 28px; height: 28px; overflow: hidden;">
                                            @if($product->seller->logo)
                                                <img src="{{ asset('storage/' . $product->seller->logo) }}" width="28" height="28" style="object-fit: cover;">
                                            @else
                                                <i class="bi bi-building text-muted" style="font-size: 0.75rem;"></i>
                                            @endif
                                        </div>
                                        <div>
                                            <div class="fw-medium text-dark" style="font-size: 0.85rem;">{{ Str::limit($product->seller->company_name, 20) }}</div>
                                            @if($product->seller->is_verified)
                                                <small class="text-success" style="font-size: 0.7rem;"><i class="bi bi-patch-check-fill"></i> Verified</small>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    @if(!$product->is_approved)
                                        <span class="badge bg-warning bg-opacity-10 text-warning px-3 py-2 rounded-pill fw-normal">
                                            <i class="bi bi-clock me-1"></i> Pending
                                        </span>
                                    @elseif($product->is_highlighted)
                                        <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill fw-normal">
                                            <i class="bi bi-star-fill me-1"></i> Featured
                                        </span>
                                    @else
                                        <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill fw-normal">
                                            <i class="bi bi-check-circle me-1"></i> Active
                                        </span>
                                    @endif
                                </td>
                                <td class="text-end pe-4">
                                    <div class="d-flex gap-1 justify-content-end">
                                        <a href="{{ route('public.products.show', $product->slug) }}" target="_blank" 
                                           class="btn btn-sm btn-light border" title="View Live" data-bs-toggle="tooltip">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        
                                        <a href="{{ route('admin.products.edit', $product->id) }}" 
                                           class="btn btn-sm btn-outline-primary" title="Edit" data-bs-toggle="tooltip">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        
                                        @if(!$product->is_approved)
                                            <form action="{{ route('admin.products.approve', $product->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-outline-success" title="Approve" data-bs-toggle="tooltip">
                                                    <i class="bi bi-check-lg"></i>
                                                </button>
                                            </form>
                                        @endif
                                        
                                        <form action="{{ route('admin.products.toggle-featured', $product->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-outline-warning" 
                                                    title="{{ $product->is_highlighted ? 'Remove Featured' : 'Mark Featured' }}" 
                                                    data-bs-toggle="tooltip">
                                                <i class="bi bi-star{{ $product->is_highlighted ? '-fill' : '' }}"></i>
                                            </button>
                                        </form>
                                        
                                        <form action="{{ route('admin.products.delete', $product->id) }}" method="POST" class="d-inline" 
                                              onsubmit="return confirm('Delete this product permanently?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete" data-bs-toggle="tooltip">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <div class="py-4">
                                        <i class="bi bi-box-seam fs-1 text-muted opacity-50 d-block mb-3"></i>
                                        <h5 class="fw-bold text-muted">No Products Found</h5>
                                        <p class="text-muted small mb-0">Try adjusting your search or filter criteria</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </form>
        
        @if($products->hasPages())
            <div class="card-footer border-top bg-light">
                {{ $products->appends(request()->query())->links() }}
            </div>
        @endif
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Select All functionality
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.product-checkbox');
        const selectedCount = document.getElementById('selectedCount');
        
        function updateCount() {
            const checked = document.querySelectorAll('.product-checkbox:checked').length;
            selectedCount.textContent = checked + ' selected';
        }
        
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = this.checked);
            updateCount();
        });
        
        checkboxes.forEach(cb => {
            cb.addEventListener('change', updateCount);
        });
        
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (el) {
            return new bootstrap.Tooltip(el);
        });
    });
</script>
@endsection
