@extends('backEnd.layouts.master')
@section('title', 'Product Features Management')

@push('styles')
<link rel="stylesheet" href="{{ asset('backEnd/css/product-live-search.css') }}?v={{ @filemtime(public_path('backEnd/css/product-live-search.css')) }}">
<style>.pf-page-header {
    background: #fff; border: 1px solid #dee2e6; border-radius: 8px;
    padding: 16px 20px; margin-bottom: 20px;
}
.pf-page-title { font-size: 18px; font-weight: 700; color: #333; margin: 0; }
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; inset: 0; background-color: #ccc;
    transition: .4s; border-radius: 24px;
}
.slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: #fff; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider:before { transform: translateX(26px); }
.category-section {
    border: 1px solid #dee2e6; border-radius: 8px; padding: 20px;
    background-color: #f8f9fa; margin-bottom: 24px;
}
.category-header { border-bottom: 1px solid #dee2e6; padding-bottom: 15px; margin-bottom: 20px; }
.category-title { font-size: 1.1rem; font-weight: 700; color: #333; }
.product-features-card { border: 1px solid #e9ecef; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.product-features-card .card-img-top { background: #fff; padding: 8px; }
.fade-in { animation: pfFadeIn .5s ease-in; }
@keyframes pfFadeIn { from { opacity: 0; } to { opacity: 1; } }
.slide-in { animation: pfSlideIn .3s ease-out; }
@keyframes pfSlideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.loading { position: relative; pointer-events: none; opacity: .7; }
.pf-search-wrap { position: relative; max-width: 520px; }
.pf-search-card { overflow: visible !important; position: relative; z-index: 1; }
.pf-search-card.is-search-open { z-index: 1060; }
.pf-search-card .admin-card-body { overflow: visible; }
@media (max-width: 768px) {
    .pf-search-wrap { max-width: none; }
    .pf-page-header { padding: 14px 16px; }
    .pf-page-title { font-size: 16px; }
}
.pf-search-pinned .category-section { border-color: #86efac; }
.pf-highlight-card { box-shadow: 0 0 0 3px rgba(34, 197, 94, .35); transition: box-shadow .3s ease; }
.loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px;
    margin: -10px 0 0 -10px; border: 2px solid #f3f3f3; border-top: 2px solid #3498db;
    border-radius: 50%; animation: pfSpin 1s linear infinite;
}
@keyframes pfSpin { to { transform: rotate(360deg); } }
</style>
@endpush

@section('content')
<div class="pf-page-header d-flex align-items-center justify-content-between flex-wrap gap-2">
    <div>
        <h1 class="pf-page-title">Product Features Management</h1>
        <p class="text-muted small mb-0 mt-1">
            Showing products for theme:
            <span class="badge bg-success">{{ ucfirst($activeTheme ?? \App\Services\ThemeService::active()) }}</span>
        </p>
    </div>
    <button type="button" class="btn btn-primary btn-sm" id="toggleAllBtn" onclick="toggleAllCategories()">
        <i class="fas fa-minus me-1"></i> Collapse
    </button>
</div>

<div class="admin-card mb-3 pf-search-card" id="pfSearchCard">
    <div class="admin-card-body py-3">
        <label class="form-label fw-semibold mb-2"><i class="fas fa-search me-1"></i> Search Product</label>
        <div class="pf-search-wrap product-search-wrap" id="pfSearchWrap">
            <input type="search" class="form-control product-search-input" id="pfSearchInput"
                   placeholder="Product name, SKU, or ID — active theme only"
                   autocomplete="off" inputmode="search" enterkeyhint="search">
            <div class="product-search-dropdown"></div>
        </div>
        <div class="form-text">Search করে product select করলে নিচে feature card খুলবে বা existing card-এ scroll করবে।</div>
    </div>
</div>

<div id="pfSearchPinned" class="pf-search-pinned"></div>

<div id="pfCategoryList">
@foreach($categories as $category)
<div class="category-section mb-4">
    <div class="category-header mb-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h4 class="mb-0 me-3 category-title" style="cursor:pointer;user-select:none"
                onclick="toggleCategory('category-{{ $category->id }}')">
                <i class="fas fa-tags me-2"></i>{{ $category->name }}
                <i class="fas fa-chevron-down ms-2 category-arrow" id="arrow-category-{{ $category->id }}"></i>
            </h4>
            <span class="badge bg-primary text-white fs-6 px-3 py-2">
                {{ $category->products->count() }} Products
            </span>
        </div>
    </div>
    <div class="products-grid" id="category-{{ $category->id }}">
        <div class="row">
            <div class="col-lg-12 mb-3">
                <div class="row">
                    @foreach($category->products as $product)
                        @include('backEnd.product.partials.feature-card', compact('product'))
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endforeach
</div>

@if($categories->isEmpty())
<div class="admin-card">
    <div class="admin-card-body text-center py-5 text-muted">
        <i class="fas fa-box-open fa-3x mb-3 opacity-50"></i>
        <p class="mb-0">No published products found for this theme.</p>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
const updateProductFeaturesUrl = @json(route('admin.product-features.update'));
const productFeatureSearchUrl = @json(route('admin.product-features.search'));
const productFeatureCardUrl = @json(url('/admin/product-features/card'));
const collapseText = 'Collapse';
const expandText = 'Expand';
</script>
<script src="{{ asset('backEnd/js/product-features.js') }}"></script>
@endpush