@extends('layouts.app')

@section('content')
<!-- Page Header -->
<div class="products-header" style="background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); padding: 60px 0; border-bottom: 1px solid #e9ecef; text-align: center;">
    <h1 class="products-title" style="margin: 0; color: #333; font-weight: 700; font-size: 36px;">All Products</h1>
    <p style="margin: 10px 0 0 0; color: #6c757d; font-size: 16px;">
        <a href="{{ url('/') }}" style="color: #0170B9; text-decoration: none;">Home</a> / <span style="color: #6c757d;">All Products</span>
    </p>
</div>

<div class="elementor elementor-12" style="padding: 60px 0;">
<!-- Search Filter -->
<div style="max-width:800px; margin:0 auto 40px; padding:0 20px;">
    <div style="background:#fff; border:1px solid #e0e0e0; border-radius:12px; padding:18px 20px; box-shadow:0 4px 15px rgba(0,0,0,0.04); display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
        <div style="position:relative; flex:1; min-width:220px;">
            <i class="fas fa-search" style="position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#aaa; font-size:16px;"></i>
            <input type="text" id="public-search" placeholder="Search products..." oninput="publicFilter()"
                style="width:100%; padding:12px 12px 12px 42px; border:1px solid #e0e0e0; border-radius:8px; font-size:15px; font-family:inherit; box-sizing:border-box; outline:none;"
                onfocus="this.style.borderColor='#0170B9'" onblur="this.style.borderColor='#e0e0e0'">
        </div>
        <button onclick="document.getElementById('public-search').value=''; publicFilter();"
            style="padding:12px 18px; background:#f5f5f5; border:1px solid #e0e0e0; border-radius:8px; font-size:14px; color:#666; cursor:pointer; font-family:inherit; transition:background .2s;"
            onmouseover="this.style.background='#e8f4fd'" onmouseout="this.style.background='#f5f5f5'">
            <i class="fas fa-times"></i> Clear
        </button>
        <span id="public-count" style="font-size:13px; color:#888;"></span>
    </div>
</div>

    <section class="elementor-section elementor-top-section elementor-element elementor-element-c42b223 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="c42b223" data-element_type="section">
        <div class="elementor-container elementor-column-gap-default">
            <div class="elementor-row" style="flex-wrap: wrap; justify-content: center;">
                
                @forelse($products as $product)
                <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-bd7481f product-card" data-name="{{ strtolower($product->name) }}" data-id="bd7481f" data-element_type="column" style="margin-bottom: 30px;">
                    <div class="elementor-column-wrap elementor-element-populated">
                        <div class="elementor-widget-wrap">
                            <div class="elementor-element elementor-element-a7d969b elementor-widget elementor-widget-image" data-id="a7d969b" data-element_type="widget" data-widget_type="image.default">
                                <div class="elementor-widget-container">
                                    <div class="elementor-image" style="text-align: center;">
                                        <a href="{{ url('product/' . $product->url) }}">
                                            @if($product->photo)
                                            <img src="{{ asset('storage/' . $product->photo) }}" style="width: 100%; height: auto; max-width: 300px; aspect-ratio: 1; object-fit: cover;" alt="{{ $product->name }}" />
                                            @else
                                            <div style="width: 100%; max-width: 300px; aspect-ratio: 1; background: #eee; display: flex; align-items: center; justify-content: center; margin: 0 auto;"><i class="far fa-image" style="font-size: 40px; color: #ccc;"></i></div>
                                            @endif
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="elementor-element elementor-element-009f743 elementor-widget elementor-widget-heading" data-id="009f743" data-element_type="widget" data-widget_type="heading.default">
                                <div class="elementor-widget-container">
                                    <h5 class="elementor-heading-title elementor-size-default" style="text-align: center;">
                                        <a href="{{ url('product/' . $product->url) }}">{{ $product->name }}</a>
                                        @if($product->price)
                                        <div style="color: #2e7d32; font-size: 16px; margin-top: 5px;">৳{{ $product->price }}</div>
                                        @endif
                                    </h5>
                                </div>
                            </div>
                            <div class="elementor-element elementor-element-40c2cdc elementor-align-center elementor-widget elementor-widget-button" data-id="40c2cdc" data-element_type="widget" data-widget_type="button.default">
                                <div class="elementor-widget-container">
                                    <div class="elementor-button-wrapper">
                                        <a href="{{ url('product/' . $product->url) }}" class="elementor-button-link elementor-button elementor-size-sm" role="button">
                                            <span class="elementor-button-content-wrapper">
                                                <span class="elementor-button-icon elementor-align-icon-left">
                                                    <i aria-hidden="true" class="fas fa-arrow-right"></i>
                                                </span>
                                                <span class="elementor-button-text">More Info</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div style="text-align: center; width: 100%; padding: 50px;">
                    <h3 style="color: #666;">No products found.</h3>
                </div>
                @endforelse

            </div>
        </div>
    </section>

    <style>
    @media (max-width: 768px) {
        .products-header {
            padding: 100px 20px 40px 20px !important;
        }
        .products-title {
            font-size: 28px !important;
        }
    }
</style>
    @include('layouts.footer')
</div>

<script>
function publicFilter() {
    const search = document.getElementById('public-search').value.toLowerCase().trim();
    const cards = document.querySelectorAll('.product-card');
    let visible = 0;
    cards.forEach(function(card) {
        const name = (card.dataset.name || '').toLowerCase();
        if (!search || name.includes(search)) {
            card.style.display = '';
            visible++;
        } else {
            card.style.display = 'none';
        }
    });
    const el = document.getElementById('public-count');
    if (el) el.textContent = search ? visible + ' result(s) found' : '';
}
</script>
@endsection