@extends('backEnd.layouts.master')
@section('title', 'Products')

@push('styles')
<style>
.products-page { background: #f4f6f9; margin: -20px -20px 0; padding: 20px; min-height: calc(100vh - 60px); }

.pp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.pp-header h4 { font-weight: 700; margin: 0; color: #1e293b; }

.btn-add-product {
    background: #16a34a; color: #fff; border: none; font-weight: 700;
    padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 14px;
}
.btn-add-product:hover { background: #15803d; color: #fff; }

/* Status tabs */
.pp-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pp-tab {
    padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 700;
    text-decoration: none; border: 2px solid #16a34a; transition: .15s;
}
.pp-tab.active { background: #fff; color: #16a34a; }
.pp-tab.inactive { background: #16a34a; color: #fff; }
.pp-tab.inactive:hover { background: #15803d; color: #fff; }
.pp-tab.trash-tab.inactive { background: #ef4444; border-color: #ef4444; }
.pp-tab.trash-tab.active { color: #ef4444; border-color: #ef4444; }

/* Filter bar */
.pp-filters {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 0; display: flex; flex-wrap: wrap;
    gap: 10px; align-items: center; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.pp-filters .form-select, .pp-filters .form-control { font-size: 13px; height: 38px; }
.pp-filters select { min-width: 150px; }
.pp-btn-green {
    background: #16a34a; color: #fff; border: none; font-weight: 600;
    padding: 8px 16px; border-radius: 6px; font-size: 13px;
}
.pp-btn-green:hover { background: #15803d; color: #fff; }

/* Table card */
.pp-table-wrap {
    background: #fff; border: 1px solid #e2e8f0; border-top: none;
    border-radius: 0 0 8px 8px; overflow: hidden;
}
.pp-table { width: 100%; margin: 0; border-collapse: collapse; }
.pp-table thead th {
    background: #f8fafc; font-size: 12px; font-weight: 700; color: #475569;
    padding: 12px 14px; border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.pp-table tbody td {
    padding: 12px 14px; border-bottom: 1px solid #f1f5f9;
    vertical-align: middle; font-size: 13px; color: #334155;
}
.pp-table tbody tr:hover { background: #fafafa; }

/* Product cell */
.pp-product { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.pp-thumb {
    width: 48px; height: 48px; border-radius: 6px; object-fit: cover;
    border: 1px solid #e2e8f0; flex-shrink: 0;
}
.pp-thumb-preview {
    cursor: zoom-in;
    transition: transform .15s, box-shadow .15s;
}
.pp-thumb-preview:hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.pp-thumb-popover .popover-body { padding: 6px; line-height: 0; }
.pp-preview-popover-img {
    display: block; max-width: min(280px, 70vw); max-height: min(280px, 60vh);
    width: auto; height: auto; border-radius: 6px; object-fit: contain;
}
.pp-thumb-placeholder {
    width: 48px; height: 48px; border-radius: 6px; background: #f1f5f9;
    display: flex; align-items: center; justify-content: center; color: #94a3b8; flex-shrink: 0;
}
.pp-pid { font-size: 11px; color: #64748b; font-weight: 600; }
.pp-pname { font-weight: 700; color: #1e293b; line-height: 1.3; }
.pp-slug { font-size: 11px; color: #94a3b8; }
.pp-sku { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color: #475569; font-weight: 600; white-space: nowrap; }

/* Category */
.pp-cat { font-weight: 600; color: #334155; }
.pp-cat i { color: #16a34a; margin-right: 4px; font-size: 11px; }
.pp-brand { font-size: 12px; color: #64748b; margin-top: 2px; }

/* Price */
.pp-price-now { font-weight: 700; color: #16a34a; font-size: 14px; }
.pp-price-old { font-size: 11px; color: #94a3b8; text-decoration: line-through; }

/* Badges */
.pp-badge-sold {
    display: inline-block; background: #dbeafe; color: #1d4ed8;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px;
}
.pp-badge-stock {
    display: inline-block; background: #dcfce7; color: #166534;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px;
}
.pp-badge-stock.out { background: #fee2e2; color: #991b1b; }
.pp-badge-stock.low { background: #fef3c7; color: #92400e; }
.pp-badge-status {
    display: inline-block; background: #ecfdf5; color: #059669;
    font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    border: 1px solid #a7f3d0;
}
.pp-badge-status.draft {
    background: #f3f4f6; color: #6b7280; border-color: #d1d5db;
}

/* Action buttons */
.pp-actions { display: flex; gap: 5px; }
.pp-act {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px; border: none; cursor: pointer; font-size: 13px; text-decoration: none;
}
.pp-act-view   { background: #3b82f6; color: #fff; }
.pp-act-edit   { background: #16a34a; color: #fff; }
.pp-act-copy   { background: #eab308; color: #fff; }
.pp-act-delete { background: #ef4444; color: #fff; }
.pp-act:hover  { opacity: .85; color: #fff; }

.pp-empty { text-align: center; padding: 48px 20px; color: #94a3b8; }
.pp-pagination {
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
}
.pp-pagination nav { width: 100%; justify-content: center !important; }
.pp-pagination .d-sm-none { display: none !important; }
.pp-pagination .d-none.flex-sm-fill { display: flex !important; justify-content: center !important; width: 100%; }
.pp-pagination .small.text-muted { display: none; }
.pp-pagination .pagination { margin: 0; }
</style>
@endpush

@section('content')
<div class="products-page">

    {{-- Header --}}
    <div class="pp-header">
        <h4>Products</h4>
        <a href="{{ route('admin.products.create') }}" class="btn-add-product">
            <i class="fas fa-plus me-1"></i> Add New Product
        </a>
    </div>

    {{-- Status Tabs --}}
    <div class="pp-tabs">
        @foreach([
            ['all',       'All',       $counts['all']],
            ['published', 'Published', $counts['published']],
            ['draft',     'Draft',     $counts['draft']],
            ['trashed',   'Trash',     $counts['trashed']],
        ] as [$key, $label, $count])
        <a href="{{ route('admin.products.index', array_merge(request()->except('page'), ['tab' => $key])) }}"
           class="pp-tab {{ $tab === $key ? 'active' : 'inactive' }}{{ $key === 'trashed' ? ' trash-tab' : '' }}">
            {{ $label }} ({{ $count }})
        </a>
        @endforeach
    </div>

    {{-- Filters --}}
    <form method="GET" class="pp-filters" id="filterForm">
        <input type="hidden" name="tab" value="{{ $tab }}">
        <select name="category_id" class="form-select form-select-sm" style="width:160px">
            <option value="">All Category</option>
            @foreach($categories as $cat)
            <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
            @endforeach
        </select>
        <select name="brand_id" class="form-select form-select-sm" style="width:150px">
            <option value="">All Brand</option>
            @foreach($brands as $brand)
            <option value="{{ $brand->id }}" {{ request('brand_id') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
            @endforeach
        </select>
        <select id="bulkAction" class="form-select form-select-sm" style="width:160px">
            <option value="">Select Action</option>
            @if($tab === 'trashed')
            <option value="restore">Restore Selected</option>
            <option value="force_delete">Delete Forever</option>
            @else
            <option value="publish">Publish Selected</option>
            <option value="draft">Move to Draft</option>
            <option value="delete">Move to Trash</option>
            @endif
        </select>
        <button type="button" class="pp-btn-green" onclick="applyBulk()">Apply</button>
        <div class="ms-auto d-flex gap-2 align-items-center">
            <div class="live-search-wrap">
                <input type="text" name="search" value="{{ request('search') }}"
                       class="form-control form-control-sm live-search-input"
                       style="width:min(320px, 100%)"
                       placeholder="Search product, SKU, slug…"
                       autocomplete="off">
            </div>
            <button type="submit" class="pp-btn-green">Search</button>
        </div>
    </form>

    {{-- Table --}}
    <div id="liveSearchResults">
    <div class="pp-table-wrap">
        <div class="table-responsive">
            <table class="pp-table">
                <thead>
                    <tr>
                        <th width="40"><input type="checkbox" id="checkAll" onchange="toggleAll(this)"></th>
                        <th>Product Name</th>
                        <th>SKU</th>
                        <th>Category, Brand</th>
                        <th>Price</th>
                        <th>Sales</th>
                        <th>Stock</th>
                        <th>Status</th>
                        <th width="160">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                    @php
                        $sellPrice = ($product->sale_price && $product->sale_price < $product->price)
                            ? $product->sale_price : $product->price;
                        $sold = (int) ($product->total_sold ?? 0);
                    @endphp
                    <tr>
                        <td><input type="checkbox" class="row-check" value="{{ $product->id }}"></td>
                        <td>
                            <div class="pp-product">
                                @if($product->thumbnail)
                                <img src="{{ asset($product->thumbnail) }}"
                                     class="pp-thumb pp-thumb-preview"
                                     data-preview="{{ asset($product->thumbnail) }}"
                                     alt="{{ $product->name }}"
                                     title="Click to preview">
                                @else
                                <div class="pp-thumb-placeholder"><i class="fas fa-image"></i></div>
                                @endif
                                <div>
                                    <div class="pp-pid">#{{ $product->id }}</div>
                                    <div class="pp-pname">{{ Str::limit($product->name, 45) }}</div>
                                    <div class="pp-slug">{{ $product->slug }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="pp-cat">
                                <i class="fas fa-folder"></i>{{ $product->category?->name ?? 'Uncategorized' }}
                            </div>
                            <div class="pp-brand">{{ $product->brand?->name ?? 'No Brand' }}</div>
                        </td>
                        <td>
                            <div class="pp-price-now">৳{{ number_format($sellPrice, 2) }}</div>
                            @if($product->sale_price && $product->sale_price < $product->price)
                            <div class="pp-price-old">৳{{ number_format($product->price, 2) }}</div>
                            @endif
                        </td>
                        <td>
                            <span class="pp-badge-sold">{{ $sold }} Sold</span>
                        </td>
                        <td>
                            @if($product->stock <= 0)
                            <span class="pp-badge-stock out">Out of Stock</span>
                            @elseif($product->stock <= 5)
                            <span class="pp-badge-stock low">Low: {{ $product->stock }}</span>
                            @else
                            <span class="pp-badge-stock">In Stock</span>
                            @endif
                        </td>
                        <td>
                            @if($tab === 'trashed')
                            <span class="pp-badge-status draft">Deleted</span>
                            @elseif($product->status)
                            <span class="pp-badge-status">Publish</span>
                            @else
                            <span class="pp-badge-status draft">Draft</span>
                            @endif
                        </td>
                        <td>
                            <div class="pp-actions">
                                @if($tab === 'trashed')
                                <form action="{{ route('admin.products.restore', $product->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="pp-act pp-act-edit" title="Restore">
                                        <i class="fas fa-undo"></i>
                                    </button>
                                </form>
                                <form action="{{ route('admin.products.force-destroy', $product->id) }}" method="POST" class="d-inline"
                                      onsubmit="return confirm('Permanently delete this product?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="pp-act pp-act-delete" title="Delete Forever">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                                @else
                                @if($product->status && $product->slug)
                                <a href="{{ \App\Support\AppUrl::shopRoute('frontend.product', $product->slug) }}" target="_blank"
                                   class="pp-act pp-act-view" title="View on site">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @else
                                <button type="button" class="pp-act pp-act-edit publish-one" data-id="{{ $product->id }}"
                                        title="Publish to view on site">
                                    <i class="fas fa-globe"></i>
                                </button>
                                @endif
                                <a href="{{ route('admin.products.edit', $product->id) }}"
                                   class="pp-act pp-act-edit" title="Edit">
                                    <i class="fas fa-pencil-alt"></i>
                                </a>
                                <form action="{{ route('admin.products.duplicate', $product->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="pp-act pp-act-copy" title="Duplicate">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </form>
                                <form id="del-{{ $product->id }}" method="POST"
                                      action="{{ route('admin.products.destroy', $product->id) }}" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="button" class="pp-act pp-act-delete delete-confirm"
                                            data-form="#del-{{ $product->id }}" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8">
                            <div class="pp-empty">
                                <i class="fas fa-box-open fa-3x mb-3 d-block opacity-50"></i>
                                No products found.
                                <a href="{{ route('admin.products.create') }}">Add your first product</a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($products->hasPages())
        <div class="pp-pagination">{{ $products->links() }}</div>
        @endif
    </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function toggleAll(cb) {
    document.querySelectorAll('.row-check').forEach(c => c.checked = cb.checked);
}

function applyBulk() {
    const action = document.getElementById('bulkAction').value;
    const ids = [...document.querySelectorAll('.row-check:checked')].map(c => c.value);
    if (!action || !ids.length) {
        toastr.warning('Select action and at least one product.');
        return;
    }
    if (action === 'delete' && !confirm('Move ' + ids.length + ' products to trash?')) return;
    if (action === 'force_delete' && !confirm('Permanently delete ' + ids.length + ' products?')) return;

    const csrf = document.querySelector('meta[name=csrf-token]').content;
    const promises = ids.map(id => {
        if (action === 'delete') {
            return fetch(`/admin/products/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' }
            });
        }
        if (action === 'force_delete') {
            return fetch(`/admin/products/${id}/force`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' }
            });
        }
        if (action === 'restore') {
            const f = document.createElement('form');
            f.method = 'POST';
            f.action = `/admin/products/${id}/restore`;
            f.innerHTML = `<input type="hidden" name="_token" value="${csrf}">`;
            document.body.appendChild(f);
            f.submit();
            return Promise.resolve();
        }
        const status = action === 'publish' ? 1 : 0;
        return fetch(`/admin/products/${id}/toggle-status`, {
            method: 'PATCH',
            headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify({ status })
        });
    });

    if (action === 'restore') return;

    Promise.all(promises).then(() => {
        toastr.success('Bulk action applied.');
        location.reload();
    });
}

(function initThumbPreviews() {
    let activeThumb = null;

    document.querySelectorAll('.pp-thumb-preview').forEach(thumb => {
        new bootstrap.Popover(thumb, {
            trigger: 'click',
            html: true,
            placement: 'right',
            sanitize: false,
            container: 'body',
            customClass: 'pp-thumb-popover shadow',
            title: '',
            content: () => `<img src="${thumb.dataset.preview}" class="pp-preview-popover-img" alt="">`,
        });

        thumb.addEventListener('shown.bs.popover', () => {
            if (activeThumb && activeThumb !== thumb) {
                bootstrap.Popover.getInstance(activeThumb)?.hide();
            }
            activeThumb = thumb;
        });

        thumb.addEventListener('hidden.bs.popover', () => {
            if (activeThumb === thumb) activeThumb = null;
        });
    });

    document.addEventListener('click', (e) => {
        if (activeThumb && !e.target.closest('.pp-thumb-preview') && !e.target.closest('.popover')) {
            bootstrap.Popover.getInstance(activeThumb)?.hide();
        }
    });
})();

document.querySelectorAll('.publish-one').forEach(btn => {
    btn.addEventListener('click', () => {
        const id = btn.dataset.id;
        const csrf = document.querySelector('meta[name=csrf-token]').content;
        fetch(`/admin/products/${id}/toggle-status`, {
            method: 'PATCH',
            headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify({ status: 1 })
        }).then(r => {
            if (!r.ok) throw new Error('Failed');
            toastr.success('Product published.');
            location.reload();
        }).catch(() => toastr.error('Could not publish product.'));
    });
});
</script>
@endpush