{{-- resources/views/productcard.blade.php --}}
@extends('layouts.master')

@section('title', $activeMid->name ?? 'Products')

@section('content')
    <main class="main">

        <!-- breadcrumb -->
        <div class="site-breadcrumb">
            <div class="site-breadcrumb-bg" style="background:#d8f5fd"></div>
            <div class="container">
                <div class="site-breadcrumb-wrap">
                    <h4 class="breadcrumb-title">Products</h4>
                    <ul class="breadcrumb-menu">
                        <li><a href="{{ url('/') }}"><i class="far fa-home"></i> Home</a></li>
                        <li class="active">{{ $activeMid->name ?? ($activeTop->name ?? 'Products') }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- breadcrumb end -->

        <div class="page-wrapper container py-5">
            <div class="d-flex gap-4" style="align-items:flex-start;">
                {{-- LEFT: Sidebar (25%) --}}
                <aside class="sidebar-left" style="flex: 0 0 25%; max-width: 25%;">
                    <div class="card p-3 sticky-top" style="top:20px;">
                        <h5 class="mb-3">All Category</h5>


                        <div class="accordion" id="accordionCategories">
                            @foreach ($tops as $top)
                                @php
                                    // ensure id-safe value
                                    $topSlug = $top->slug;
                                    $safeId = \Illuminate\Support\Str::slug($topSlug ?: 'cat-' . $top->id);
                                    $headingId = 'heading-' . $safeId;
                                    $collapseId = 'collapse-' . $safeId;
                                    $isOpen = $activeTop && $activeTop->id === $top->id;
                                @endphp

                                <div class="accordion-item mb-2">
                                    <h2 class="accordion-header" id="{{ $headingId }}">
                                        <button class="accordion-button {{ $isOpen ? '' : 'collapsed' }}" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}"
                                            aria-expanded="{{ $isOpen ? 'true' : 'false' }}"
                                            aria-controls="{{ $collapseId }}">
                                            <span class="fw-semibold">{{ $top->name }}</span>
                                        </button>
                                    </h2>

                                    <div id="{{ $collapseId }}"
                                        class="accordion-collapse collapse {{ $isOpen ? 'show' : '' }}"
                                        aria-labelledby="{{ $headingId }}" data-bs-parent="#accordionCategories">
                                        <div class="accordion-body p-0">
                                            <ul class="list-unstyled mb-0" id="list-{{ $safeId }}">
                                                @foreach ($top->midCategories as $mid)
                                                    @php
                                                        $isActiveMid = $activeMid && $activeMid->id === $mid->id;
                                                    @endphp

                                                    <li class="py-2 px-2 mid-item d-flex align-items-center {{ $isActiveMid ? 'active' : '' }}"
                                                        style="border-radius:8px;">
                                                        <a href="{{ url('/product/' . rawurlencode($top->slug) . '/' . rawurlencode($mid->slug)) }}"
                                                            class="flex-grow-1 text-decoration-none text-reset">
                                                            {{ $mid->name }}
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </aside>

                {{-- RIGHT: Main area (75%) --}}
                <main class="flex-grow-1" style="flex: 1 1 75%;">
                    <div class="mb-4 text-center">
                        <h3 id="currentCategoryTitle" class="mb-0 fw-bold">
                            @if ($activeTop && $activeMid)
                                {{ $activeTop->name }} / {{ $activeMid->name }}
                            @elseif ($activeTop)
                                {{ $activeTop->name }}
                            @elseif ($activeMid)
                                {{ $activeMid->name }}
                            @else
                                Products
                            @endif
                        </h3>

                        @if (!empty($activeMid->description))
                            <div class="text-muted small mt-2">{{ $activeMid->description }}</div>
                        @endif
                    </div>


                    {{-- Products grid: show initial 4 cards (server-side). We'll provide Load more to fetch additional via AJAX. --}}
                    <div id="productsGrid" class="row g-4">
                        @if ($activeMid && $activeMid->products->count())
                            @foreach ($activeMid->products->all() as $product)
                                {{-- compute image url + highlight flag inside loop so variables are defined --}}

                                @php
                                    // Use the controller-normalized public URL (single source of truth)
                                    $imgUrl = $product->main_image_url ?? asset('assets/img/placeholder.png');
                                    $title = $product->product_name ?? ($product->name ?? 'Product');

                                    $isHighlighted =
                                        $activeMid &&
                                        ($product->mid_category_id ?? ($product->mid_category?->id ?? null)) ==
                                            $activeMid->id;
                                @endphp


                                <div class="col-6 col-md-3 d-flex product-card-col">
                                    <div class="product-card card flex-fill {{ $isHighlighted ? 'product-highlight' : '' }}"
                                        data-product-id="{{ $product->id }}">

                                        {{-- clickable image with modal preview --}}
                                        <div class="product-img-wrap" role="button" data-bs-toggle="modal"
                                            data-bs-target="#imgModal" data-img="{{ $imgUrl }}"
                                            data-title="{{ e($title) }}">
                                            <img src="{{ $imgUrl }}" alt="{{ e($title) }}" class="product-img"
                                                loading="lazy" width="300" height="400"
                                                onerror="this.onerror=null;this.src='{{ asset('assets/img/placeholder.png') }}'">
                                            @if (!empty($product->badge))
                                                <div class="badge badge-top-left">{{ $product->badge }}</div>
                                            @endif
                                        </div>


                                        <a href="{{ route('products.details', ['midCategorySlug' => $activeMid->slug ?? '', 'productSlug' => $product->slug ?? $product->id]) }}"
                                            class="stretched-link" aria-label="View {{ e($title) }}"></a>


                                        <div class="card-body d-flex flex-column text-center">
                                            <h4 class="product-title mx-auto">{{ $title }}</h4>
                                            {{-- @if (!empty($product->short_description))
                                                <p class="product-desc">
                                                    {{ \Illuminate\Support\Str::limit(strip_tags($product->short_description), 90) }}
                                                </p>
                                            @endif --}}
                                        </div>

                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-12">
                                <div class="alert alert-info">No products found in this category.</div>
                            </div>
                        @endif
                    </div>

                </main>
            </div>
        </div>

        {{-- Image preview modal --}}
        <div class="modal fade" id="imgModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="imgModalLabel"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <img id="imgModalImg" src="" alt="Preview"
                            style="max-width:100%;height:auto;border-radius:8px;" />
                    </div>
                </div>
            </div>
        </div>

        @push('styles')
            <style>
                /* Layout */
                .sidebar-left {
                    min-width: 220px;
                }

                .product-card {
                    border: 1px solid #eef2f6;
                    border-radius: 12px;
                    overflow: hidden;
                    background: #fff;
                    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                }

                .product-card:hover {
                    transform: translateY(-6px);
                    box-shadow: 0 16px 40px rgba(8, 20, 36, .08);
                    border-color: #d6eaff;
                }

                @media (min-width: 768px) {
                    .product-card-col {
                        max-width: 25%;
                        flex: 0 0 25%;
                    }
                }

                .product-img-wrap {
                    position: relative;
                    overflow: hidden;
                }

                .product-card .product-img {
                    width: 100%;
                    padding-top: 10px;
                    height: 180px;
                    object-fit: scale-down;
                    display: block;
                }

                .badge-top-left {
                    position: absolute;
                    left: 10px;
                    top: 10px;
                    background: linear-gradient(90deg, #ffecd2, #fcb69f);
                    color: #111827;
                    padding: 4px 8px;
                    border-radius: 999px;
                    font-weight: 700;
                    font-size: 12px;
                }

                .product-card .product-title {
                    font-size: 18px;
                    color: #0f172a;
                    font-weight: 600;
                    margin: 10px 0 6px;
                }

                .product-card .product-desc {
                    color: #5b6b77;
                    font-size: 14px;
                    line-height: 1.45;
                    /* margin: 0 0 8px; */
                }

                .product-attrs {
                    border-top: 1px dashed #eef2f6;
                    padding-top: 10px;
                    margin-top: 10px;
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                }

                .attr-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 8px;
                    font-size: 13px;
                }

                .attr-chip {
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    padding: 6px 8px;
                    border-radius: 999px;
                    background: #f8fafc;
                    border: 1px solid #eef2f6;
                    font-weight: 600;
                    font-size: 13px;
                }

                .attr-name {
                    color: #6b7280;
                    font-size: 13px;
                }

                .attr-value {
                    font-weight: 700;
                    color: #0f172a;
                }

                .product-card.product-highlight {
                    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
                    border: 1.6px solid #bae6fd;
                    box-shadow: 0 6px 24px rgba(58, 141, 255, .06);
                }

                .accordion-header {
                    /* padding: 10px; */
                    border-radius: 8px;
                    background: #fff;
                    cursor: pointer;
                }

                .accordion-header.open {
                    background: #f0f9ff;
                }

                .accordion-body {
                    padding: 6px 4px;
                }

                .mid-item.active {
                    background: #eef9ff;
                }

                @media (max-width:576px) {
                    .product-card .product-img {
                        height: 150px;
                    }

                    .sidebar-left {
                        display: none;
                    }
                }
            </style>
        @endpush

        @push('scripts')
            <script>
                // Helpers
                function toggleAccordion(catSlug) {
                    document.querySelectorAll('.accordion-body').forEach(b => b.style.display = 'none');
                    document.querySelectorAll('.accordion-header').forEach(h => h.classList.remove('open'));
                    const body = document.getElementById('body-' + catSlug);
                    const header = document.querySelector('.accordion-header[data-cat="' + catSlug + '"]');
                    if (!body) return;
                    if (body.style.display === 'block') {
                        body.style.display = 'none';
                        header && header.classList.remove('open');
                    } else {
                        body.style.display = 'block';
                        header && header.classList.add('open');
                    }
                }

                // Mark active mid on load & kick off attrs fetch
                document.addEventListener('DOMContentLoaded', function() {
                    const ACTIVE_TOP_SLUG = "{{ $activeTop->slug ?? '' }}";
                    const ACTIVE_MID_SLUG = "{{ $activeMid->slug ?? '' }}";

                    if (ACTIVE_TOP_SLUG) {
                        const body = document.getElementById('body-' + ACTIVE_TOP_SLUG);
                        const header = document.querySelector('.accordion-header[data-cat="' + ACTIVE_TOP_SLUG + '"]');
                        if (body) body.style.display = 'block';
                        if (header) header.classList.add('open');
                    }

                    if (ACTIVE_MID_SLUG) {
                        document.querySelectorAll('.mid-item').forEach(it => {
                            const a = it.querySelector('a');
                            if (!a) return;
                            const href = a.getAttribute('href') || '';
                            if (href.endsWith('/' + ACTIVE_MID_SLUG) || href.endsWith(encodeURIComponent(
                                    ACTIVE_MID_SLUG))) {
                                it.classList.add('active');
                                const parentBody = it.closest('.accordion-body');
                                if (parentBody) parentBody.style.display = 'block';
                            } else {
                                it.classList.remove('active');
                            }
                        });
                    }

                    // Kick off attribute fetch for the visible product cards (initial)
                    document.querySelectorAll('.product-card[data-product-id]').forEach(card => {
                        const id = card.getAttribute('data-product-id');
                        if (id) fetchAndRenderAttributes(id);
                    });
                });

                // Image modal preview
                document.addEventListener('click', function(e) {
                    const wrap = e.target.closest('.product-img-wrap');
                    if (wrap) {
                        const img = wrap.getAttribute('data-img') || wrap.querySelector('img')?.src;
                        const title = wrap.getAttribute('data-title') || '';
                        const modalImg = document.getElementById('imgModalImg');
                        const modalTitle = document.getElementById('imgModalLabel');
                        if (modalImg) modalImg.src = img || '';
                        if (modalTitle) modalTitle.textContent = title || '';
                    }
                });

                // Fetch product attributes via API and render them into the card
                async function fetchAndRenderAttributes(productId) {
                    const container = document.getElementById('attrs-' + productId);
                    if (!container || container.getAttribute('data-loaded') === 'true') return;

                    try {
                        const res = await fetch("{{ url('/api/product/attrs') }}/" + encodeURIComponent(productId));
                        if (!res.ok) throw new Error('Network response was not ok');
                        const data = await res.json();

                        const parts = [];
                        if (data.price !== undefined) {
                            parts.push(
                                `<div class="attr-row"><div class="attr-chip"><strong>₹ ${escapeHtml(data.price)}</strong></div><div class="attr-value small">${data.discount ? escapeHtml(data.discount + ' off') : ''}</div></div>`
                            );
                        }

                        const chips = [];
                        if (data.stock !== undefined) chips.push(
                            `<span class="attr-chip">${escapeHtml(data.stock > 0 ? 'In stock' : 'Out of stock')}</span>`);
                        if (data.sku) chips.push(`<span class="attr-chip">SKU: ${escapeHtml(data.sku)}</span>`);
                        if (data.rating !== undefined) chips.push(
                            `<span class="attr-chip">⭐ ${escapeHtml(data.rating)} / 5</span>`);
                        if (data.short_spec) chips.push(`<span class="attr-chip">${escapeHtml(data.short_spec)}</span>`);

                        if (chips.length) parts.push(`<div class="attr-row">` + chips.join(' ') + `</div>`);

                        const kv = [];
                        if (data.brand) kv.push({
                            k: 'Brand',
                            v: data.brand
                        });
                        if (data.color) kv.push({
                            k: 'Color',
                            v: data.color
                        });
                        if (data.dimensions) kv.push({
                            k: 'Size',
                            v: data.dimensions
                        });

                        if (kv.length) {
                            kv.forEach(item => {
                                parts.push(
                                    `<div class="attr-row"><div class="attr-name">${escapeHtml(item.k)}</div><div class="attr-value">${escapeHtml(item.v)}</div></div>`
                                );
                            });
                        }

                        container.innerHTML = parts.length ? parts.join('') :
                            '<div class="small text-muted">No attributes available</div>';
                        container.setAttribute('data-loaded', 'true');
                    } catch (err) {
                        container.innerHTML = `<div class="small text-danger">Failed to load attributes</div>`;
                        console.error('Attribute fetch failed for', productId, err);
                    }
                }

                // Helper used for dynamic products added by "Load more"
                function makeImgUrl(raw) {

                    alret(raw);
                    const placeholder = '{{ asset('assets/img/placeholder.png') }}';

                    if (!raw) return placeholder;
                    if (/^https?:\/\//i.test(raw)) return raw;

                    // If raw contains no slash, treat as filename and prefix the uploads/products/main path
                    if (raw.indexOf('/') === -1) {
                        return '/storage/uploads/products/main/' + raw.replace(/^\/+/, '');
                    }

                    // If raw already starts with /storage/ or storage/ normalize it
                    if (raw.startsWith('/storage/')) return raw;
                    if (raw.startsWith('storage/')) return '/' + raw;
                    // Otherwise prefix with /storage/
                    return '/storage/' + raw.replace(/^\/+/, '');
                }

                // Load more button: fetch next set of products for the current mid category
                document.addEventListener('click', async function(e) {
                    if (e.target && e.target.id === 'loadMoreBtn') {
                        const btn = e.target;
                        const mid = btn.getAttribute('data-mid');
                        let page = parseInt(btn.getAttribute('data-page') || '1', 10);
                        page++;
                        btn.disabled = true;
                        btn.textContent = 'Loading…';

                        try {
                            const res = await fetch("{{ url('/api/product/mid-products') }}/" + encodeURIComponent(
                                mid) + '?page=' + page);
                            if (!res.ok) throw new Error('Network response was not ok');
                            const json = await res.json();

                            if (json.products && json.products.length) {
                                const grid = document.getElementById('productsGrid');
                                json.products.forEach(p => {
                                    const col = document.createElement('div');
                                    col.className = 'col-6 col-md-3 d-flex product-card-col';
                                    const isHighlighted = {{ $activeMid->id ?? 'null' }} && (p
                                        .mid_category_id == {{ $activeMid->id ?? 'null' }});
                                    const imgUrl = makeImgUrl(p.main_image_url);

                                    col.innerHTML = `
                                        <div class="product-card card flex-fill ${isHighlighted ? 'product-highlight' : ''}" data-product-id="${p.id}">
                                            <div class="product-img-wrap" role="button" data-bs-toggle="modal" data-bs-target="#imgModal" data-img="${imgUrl}" data-title="${escapeHtml(p.product_name || p.name || 'Product')}">
                                                <img src="${imgUrl}" class="product-img" loading="lazy" onerror="this.onerror=null;this.src='{{ asset('assets/img/placeholder.png') }}'">
                                            </div>
                                            <a href="/product/${encodeURIComponent("{{ $activeTop->slug ?? '' }}")}/${encodeURIComponent(p.slug || p.id)}" class="stretched-link"></a>
                                            <div class="card-body d-flex flex-column">
                                                <h4 class="product-title">${escapeHtml(p.product_name || p.name || 'Product')}</h4>
                                                <p class="product-desc">${escapeHtml((p.short_description || '').slice(0, 90))}</p>
                                                <div class="product-attrs mt-auto" id="attrs-${p.id}" data-loaded="false"><div class="attrs-placeholder small text-muted">Loading attributes…</div></div>
                                            </div>
                                        </div>
                                    `;
                                    grid.appendChild(col);
                                    fetchAndRenderAttributes(p.id);
                                });

                                btn.setAttribute('data-page', String(page));
                                btn.disabled = false;
                                btn.textContent = 'Load more';
                                if (!json.has_more) btn.style.display = 'none';
                            } else {
                                btn.style.display = 'none';
                            }
                        } catch (err) {
                            console.error(err);
                            btn.disabled = false;
                            btn.textContent = 'Load more';
                            alert('Failed to load more products.');
                        }
                    }
                });

                function escapeHtml(str) {
                    if (str === undefined || str === null) return '';
                    return String(str).replace(/[&<>\"']/g, function(s) {
                        return ({
                            "&": "&amp;",
                            "<": "&lt;",
                            ">": "&gt;",
                            '"': "&quot;",
                            "'": "&#39;"
                        } [s]);
                    });
                }
            </script>
        @endpush

    </main>
@endsection