@if($products && count($products) > 0)
<div class="search_product">
    <ul style="list-style: none; padding: 0; margin: 0;">
        @foreach($products as $value)
        <a href="{{ route('product', $value->slug) }}" style="text-decoration: none; color: inherit; display: block;">
            <li style="display: flex; align-items: center; gap: 15px; padding: 10px 20px; border-bottom: 1px solid #eee; transition: background 0.2s; min-height: 60px;">
                <div style="flex-shrink: 0; color: #888; font-size: 14px;">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </div>
                <div class="search_img" style="flex-shrink: 0;">
                    <img src="{{ asset($value->image ? $value->image->image : 'public/no-image.png') }}" 
                         alt="{{ $value->name }}" 
                         style="width: 45px; height: 45px; object-fit: contain; border-radius: 4px; border: 1px solid #f0f0f0;">
                </div>
                <div class="search_content" style="flex-grow: 1; min-width: 0;">
                    <p class="name" style="margin: 0; font-size: 14px; font-weight: 600; color: #111; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                        @php
                            $kw = request('keyword');
                            if($kw) {
                                $highlighted = preg_replace('/(' . preg_quote($kw, '/') . ')/i', '<strong style="color:#000;">$1</strong>', $value->name);
                                echo $highlighted;
                            } else {
                                echo $value->name;
                            }
                        @endphp
                    </p>                 
                    <p class="price" style="margin: 2px 0 0; font-size: 13px; color: #B12704; font-weight: 700;">
                        ৳{{ $value->new_price }} 
                        @if($value->old_price)
                        <del style="font-size: 11px; color: #565959; font-weight: 400; margin-left: 6px;">৳{{ $value->old_price }}</del>
                        @endif
                    </p>
                </div>
                <div style="color: #ddd; font-size: 12px; margin-left: auto; flex-shrink: 0;">
                    <i class="fa-solid fa-chevron-right"></i>
                </div>
            </li>
        </a>
        @endforeach
    </ul>
    <div style="padding: 10px; text-align: center; background: #f8f8f8; border-top: 1px solid #eee;">
        <a href="{{ route('search', ['keyword' => request('keyword')]) }}" style="font-size: 12px; color: #007185; font-weight: 600; text-decoration: none;">See all results for "{{ request('keyword') }}"</a>
    </div>
</div>
@else
<div style="padding: 20px; text-align: center; color: #555; font-size: 14px;">
    No products found for "{{ request('keyword') }}"
</div>
@endif
