@extends('layouts.master')

@section('title', $category->name . ' - The Mini Port')

@section('content')
<style>
    /* Custom Styles for Category Page */
    .category-hero {
        position: relative;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
        overflow: hidden;
    }
    .category-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('{{ $category->image ? asset("storage/" . $category->image) : "https://source.unsplash.com/1600x900/?" . $category->slug . ",business" }}') center/cover no-repeat;
        opacity: 0.2;
        mix-blend-mode: overlay;
    }
    .glass-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
    }
    
    /* Filter Sidebar */
    .filter-sidebar {
        position: sticky;
        top: 100px;
    }
    .filter-group-title {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    .custom-checkbox .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.15em;
        border-radius: 4px;
        border: 2px solid #dee2e6;
    }
    .custom-checkbox .form-check-input:checked {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    /* Product Card */
    .product-card {
        transition: all 0.3s ease;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-color: transparent;
    }
    .product-image-wrapper {
        position: relative;
        padding-top: 100%; /* 1:1 Aspect Ratio */
        background: #f8f9fa;
        overflow: hidden;
    }
    .product-image {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: contain;
        transition: transform 0.5s ease;
        padding: 1rem;
    }
    .product-card:hover .product-image {
        transform: scale(1.05);
    }
    .quick-view-btn {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        opacity: 0;
        z-index: 2;
    }
    .product-card:hover .quick-view-btn {
        bottom: 20px;
        opacity: 1;
    }
    
    /* Pagination */
    .pagination .page-link {
        border: none;
        color: #6c757d;
        border-radius: 8px;
        margin: 0 3px;
        font-weight: 600;
    }
    .pagination .page-item.active .page-link {
        background-color: var(--bs-primary);
        color: white;
        box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
    }
</style>

<!-- Category Hero -->
<section class="category-hero py-5 text-white">
    <div class="container position-relative z-1">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <nav aria-label="breadcrumb" class="mb-3">
                    <ol class="breadcrumb text-white-50 small fw-medium">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-white-50 text-decoration-none">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('public.categories.index') }}" class="text-white-50 text-decoration-none">Categories</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">{{ $category->name }}</li>
                    </ol>
                </nav>
                <h1 class="display-4 fw-bold mb-3">{{ $category->name }}</h1>
                <div class="d-flex align-items-center gap-4">
                    <div class="d-flex align-items-center gap-2">
                        <div class="bg-white bg-opacity-25 rounded-circle p-1">
                            <i class="bi bi-box-seam fs-5 text-white"></i>
                        </div>
                        <span class="fw-medium">{{ $category->products_count }} Products</span>
                    </div>
                    <div class="vr bg-white opacity-25"></div>
                    <div class="d-flex align-items-center gap-2">
                        <div class="bg-white bg-opacity-25 rounded-circle p-1">
                            <i class="bi bi-shield-check fs-5 text-white"></i>
                        </div>
                        <span class="fw-medium">KYC Submitted Suppliers</span>
                    </div>
                </div>
                <div class="mt-4">
                    @if($category->children->count() > 0)
                        <h6 class="text-white-50 small text-uppercase fw-bold mb-2">Sub Categories:</h6>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($category->children as $child)
                                <a href="{{ route('public.categories.show', $child->slug) }}" class="badge bg-white bg-opacity-10 text-white text-decoration-none border border-white border-opacity-10 hover:bg-opacity-25 px-3 py-2 rounded-pill">
                                    {{ $child->name }}
                                </a>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
            <div class="col-lg-4 d-none d-lg-block">
                <div class="glass-card p-4 text-center">
                    <i class="bi bi-grid-3x3-gap-fill display-1 text-white opacity-25"></i>
                    <p class="mb-0 mt-2 text-white-50 small">Browse premium products in {{ $category->name }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Main Content -->
<section class="bg-light py-5">
    <div class="container">
        <div class="row g-4">
            <!-- Sidebar Filters -->
            <div class="col-lg-3">
                <div class="filter-sidebar">
                    <!-- About Category -->
                    <div class="card border-0 shadow-sm mb-4 rounded-4">
                        <div class="card-body p-4">
                            <h6 class="filter-group-title mb-3">About Category</h6>
                            <p class="small text-muted mb-4">
                                Browse the best {{ $category->name }} products. Connect directly with manufacturers and suppliers to get the best quotes.
                            </p>
                            <a href="{{ route('post.requirement.index', ['category' => $category->id]) }}" class="btn btn-warning w-100 fw-bold text-white shadow-sm">
                                <i class="bi bi-megaphone-fill me-2"></i>Post Requirement
                            </a>
                        </div>
                    </div>

                    <!-- Filters (Working) -->
                    <div class="card border-0 shadow-sm rounded-4">
                        <div class="card-body p-4">
                            <form action="{{ url()->current() }}" method="GET" id="categoryFilterForm">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h5 class="fw-bold mb-0"><i class="bi bi-funnel me-2"></i>Filters</h5>
                                    @if(request()->hasAny(['min_price', 'max_price', 'min_moq', 'max_moq', 'location', 'verified']))
                                        <a href="{{ url()->current() }}" class="btn btn-link btn-sm text-decoration-none p-0 text-danger">
                                            <i class="bi bi-x-circle me-1"></i>Clear
                                        </a>
                                    @endif
                                </div>

                                <!-- Price Range -->
                                <div class="mb-4">
                                    <h6 class="filter-group-title"><i class="bi bi-currency-rupee me-1"></i>Price Range (₹)</h6>
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <input type="number" name="min_price" class="form-control form-control-sm" placeholder="Min" value="{{ request('min_price') }}" min="0">
                                        <span class="text-muted">-</span>
                                        <input type="number" name="max_price" class="form-control form-control-sm" placeholder="Max" value="{{ request('max_price') }}" min="0">
                                    </div>
                                </div>

                                <hr class="text-muted opacity-25 my-3">

                                <!-- MOQ Filter -->
                                <div class="mb-4">
                                    <h6 class="filter-group-title"><i class="bi bi-box-seam-fill me-1"></i>MOQ Range</h6>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="number" name="min_moq" class="form-control form-control-sm" placeholder="10" value="{{ request('min_moq') }}" min="1">
                                        <span class="text-muted">-</span>
                                        <input type="number" name="max_moq" class="form-control form-control-sm" placeholder="150" value="{{ request('max_moq') }}" min="1">
                                    </div>
                                    <small class="text-muted">Min Order Quantity (10-150)</small>
                                </div>

                                <hr class="text-muted opacity-25 my-3">

                                <!-- Location Filter -->
                                <div class="mb-4">
                                    <h6 class="filter-group-title"><i class="bi bi-geo-alt me-1"></i>Location</h6>
                                    <input type="text" name="location" class="form-control form-control-sm" placeholder="City, State or Country" value="{{ request('location') }}">
                                </div>

                                <hr class="text-muted opacity-25 my-3">

                                <!-- Supplier Type -->
                                <div class="mb-4">
                                    <h6 class="filter-group-title">Supplier Type</h6>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="verified" id="verified" value="1" {{ request('verified') ? 'checked' : '' }}>
                                        <label class="form-check-label small" for="verified">KYC Submitted Only</label>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary w-100 fw-bold">
                                    <i class="bi bi-search me-1"></i>Apply Filters
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Product Grid (Middle) -->
            <div class="col-lg-6">
                @if($products->count() > 0)
                <!-- Sorting & Count -->
                <div class="d-flex justify-content-between align-items-center mb-3 pb-2">
                    <div class="d-flex align-items-center gap-2">
                        <h5 class="fw-bold mb-0 text-dark d-none d-lg-block">All Products</h5>
                        <span class="badge bg-light text-secondary border rounded-pill d-none d-lg-block">{{ $products->total() }}</span>
                    </div>
                    
                    <div class="d-flex align-items-center gap-2">
                        <span class="small text-muted fw-bold text-uppercase" style="font-size: 0.7rem;">Sort by</span>
                        <select class="form-select form-select-sm border-0 bg-white shadow-sm fw-bold text-dark w-auto" style="min-width: 140px;" onchange="window.location.href=this.value">
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'featured']) }}" {{ request('sort') == 'featured' ? 'selected' : '' }}>Featured</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'newest']) }}" {{ request('sort') == 'newest' ? 'selected' : '' }}>Newest Listed</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_low']) }}" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_high']) }}" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                        </select>
                    </div>
                </div>

                <!-- HORIZONTAL CARD DESIGN (Copied from Products Index) -->
                <div class="d-flex flex-column gap-3">
                    @forelse($products as $product)
                        @php
                            $seller = $product->seller;
                            $subscription = $seller->subscription ?? null;
                            $plan = $subscription?->plan ?? null;
                            $isPremium = $plan && $plan->is_featured;
                            $hasVerifiedBadge = $plan && $plan->has_verified_badge;
                        @endphp
                        
                        <div class="bg-white rounded-4 p-3 shadow-sm border hover-shadow-lg transition-all" style="overflow: hidden;">
                            <div class="row g-0">
                                <!-- Image Section -->
                                <div class="col-md-5">
                                    <div class="position-relative w-100 h-100 rounded-3 overflow-hidden border" style="background: #f9f9f9; min-height: 220px;">
                                        <a href="{{ route('public.products.show', $product->slug) }}">
                                            <img src="{{ $product->main_image }}" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="{{ $product->name }}">
                                        </a>
                                        @if($product->isPromoted())
                                            <span class="position-absolute top-0 start-0 m-2 badge rounded-pill shadow-sm" 
                                                  style="background: {{ $product->promotion->package->badge_color }};">
                                                {{ $product->promotion->package->badge_text }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                
                                <!-- Content Section -->
                                <div class="col-md-7 ps-md-4 pt-3 pt-md-0 d-flex flex-column justify-content-between">
                                    <div>
                                        <div class="col-md-9 b2b-card-content-col p-0">
                                            <h5 class="fw-bold text-dark mb-0 text-truncate-2" style="font-size: 1.1rem; line-height: 1.4;">
                                                <a href="{{ route('public.products.show', $product->slug) }}" class="text-dark text-decoration-none hover:tw-text-orange-600">
                                                    {{ $product->name }}
                                                </a>
                                                @if($isPremium)
                                                    <i class="bi bi-star-fill text-warning ms-1" style="font-size: 0.8em;" title="Premium Seller"></i>
                                                @endif
                                            </h5>
                                        </div>
                                        <div class="text-muted small mb-3">Category: <span class="fw-bold text-dark">{{ $product->category->name ?? 'Industrial' }}</span></div>

                                        <!-- MOQ Boxes -->
                                        <div class="mb-3">
                                            <!-- Platform MOQ -->
                                            <div class="moq-row tw-items-start lg:tw-items-center d-flex align-items-center gap-2 mb-1">
                                                <i class="bi bi-box-seam-fill text-orange-600" style="color: #ea580c"></i>
                                                <span class="moq-label" style="font-size: 0.75rem; color: #374151;">
                                                    Platform MOQ Range: <span class="fw-bold text-dark">{{ \App\Models\Setting::getValue('min_moq', 10) }} - {{ \App\Models\Setting::getValue('max_moq', 150) }}</span>
                                                </span>
                                            </div>
                                            <!-- Product MOQ -->
                                            <div class="moq-row tw-items-start lg:tw-items-center d-flex align-items-center gap-2">
                                                <i class="bi bi-box-seam-fill text-orange-600" style="color: #ea580c"></i>
                                                <span class="moq-label" style="font-size: 0.75rem; color: #374151;">
                                                    Product MOQ: <span class="fw-bold text-dark">{{ $product->moq ?? 1 }} {{ $product->unit->name ?? 'Pieces' }}</span>
                                                </span>
                                            </div>
                                        </div>

                                        <!-- Price -->
                                        <div class="d-flex align-items-baseline gap-2 mb-2">
                                            <span class="text-secondary fw-bold">Price:</span>
                                            <h4 class="text-orange-600 fw-bold mb-0" style="color: #ea580c">{{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 0) }}</h4>
                                            <span class="text-muted small">per Piece</span>
                                        </div>
                                        <div class="text-muted small mb-3 fst-italic">(Tax & Shipping Extra)</div>
                                    </div>

                                    <!-- Action Buttons Grid -->
                                    <div class="d-flex gap-2 flex-wrap">
                                        <button type="button" class="btn btn-primary px-3 py-1 fw-bold rounded-1 text-white flex-grow-1" style="font-size: 0.85rem;" data-bs-toggle="modal" data-bs-target="#quoteModal{{ $product->id }}">
                                            <i class="bi bi-envelope-fill me-1"></i> Send Inquiry
                                        </button>
                                        <a href="{{ route('public.products.show', $product->slug) }}" class="btn btn-warning bg-opacity-25 border-warning text-warning-emphasis px-3 py-1 fw-bold rounded-1 flex-grow-1" style="font-size: 0.85rem; background-color: #fef3c7; border-color: #fcd34d;">
                                            <i class="bi bi-eye-fill me-1"></i> View More
                                        </a>
                                    </div>
                                    <div class="d-flex gap-2 flex-wrap mt-2">
                                        @if($seller->is_verified || in_array($seller->kyc_status, ['submitted', 'verified']))
                                            <button class="btn btn-light border text-primary px-3 py-1 fw-bold rounded-1 flex-grow-1" style="font-size: 0.75rem; background: #e0f2fe; border-color: #bae6fd; color: #0369a1;">
                                                <i class="bi bi-file-earmark-check-fill me-1"></i> KYC Submitted
                                            </button>
                                        @else
                                             <button class="btn btn-light border text-secondary px-3 py-1 fw-bold rounded-1 flex-grow-1 disabled" style="font-size: 0.75rem;">
                                                <i class="bi bi-hourglass-split me-1"></i> KYC Pending
                                            </button>
                                        @endif

                                        @if($isPremium)
                                            <button class="btn btn-light border text-warning-emphasis px-3 py-1 fw-bold rounded-1 flex-grow-1" style="font-size: 0.75rem; background: #fffbeb; border-color: #fde68a; color: #b45309;">
                                                <i class="bi bi-star-fill me-1"></i> Premium Member
                                            </button>
                                        @endif
                                    </div>

                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-5 bg-white rounded-4 shadow-sm">
                            <div class="mb-4">
                                <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                    <i class="bi bi-search fs-1 text-muted opacity-50"></i>
                                </div>
                            </div>
                            <h4 class="fw-bold text-dark mb-2">No products found</h4>
                            <p class="text-muted mb-4">We couldn't find any products in this category yet.</p>
                            <a href="{{ route('public.products.index') }}" class="btn btn-primary px-4 py-2 fw-bold rounded-pill">
                                Browse All Products
                            </a>
                        </div>
                    @endforelse {{-- End gridView wrapper --}}
                    
                </div>

                    <div class="mt-5 d-flex justify-content-center">
                        {{ $products->links() }}
                    </div>
                @else
                    <div class="text-center py-5 bg-white rounded-4 shadow-sm">
                        <div class="mb-4">
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                <i class="bi bi-search fs-1 text-muted opacity-50"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold text-dark mb-2">No products found</h4>
                        <p class="text-muted mb-4">We couldn't find any products in this category yet.</p>
                        <a href="{{ route('public.products.index') }}" class="btn btn-primary px-4 py-2 fw-bold rounded-pill">
                            Browse All Products
                        </a>
                    </div>
                @endif
            </div>

            <!-- RIGHT COLUMN: Trending Products -->
            <div class="col-lg-3 d-none d-lg-block">
                <div class="filter-sidebar">
                    @if(isset($promotedProducts) && $promotedProducts->count() > 0)
                        <!-- PROMOTED PRODUCTS SIDEBAR WIDGET -->
                        <div class="bg-white rounded-3 shadow-sm border p-3 mb-4 position-relative overflow-hidden">
                            <!-- Premium Ribbon -->
                            <div class="position-absolute top-0 end-0 bg-warning text-dark px-2 py-0 fw-bold small" style="border-bottom-left-radius: 8px; font-size: 0.7rem;">
                                Sponsored
                            </div>

                            <h6 class="fw-bold text-uppercase border-bottom pb-2 mb-3 text-dark" style="letter-spacing: 0.5px;">Premium Selections</h6>
                            
                            <div class="d-flex flex-column gap-3">
                                @foreach($promotedProducts->take(3) as $pProduct)
                                    <a href="{{ route('public.products.show', $pProduct->slug) }}" class="text-decoration-none group">
                                        <div class="d-flex align-items-center gap-3">
                                            <!-- Thumb -->
                                            <div class="rounded-2 border flex-shrink-0 position-relative" style="width: 60px; height: 60px; overflow: hidden;">
                                                <img src="{{ $pProduct->main_image }}" class="w-100 h-100 object-fit-cover group-hover:tw-scale-110 tw-transition-transform" alt="{{ $pProduct->name }}">
                                                <div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white text-center" style="font-size: 0.6rem; padding: 1px;">Ad</div>
                                            </div>
                                            <!-- Info -->
                                            <div class="flex-grow-1" style="min-width: 0;">
                                                <h6 class="mb-0 text-dark fw-bold text-truncate" style="font-size: 0.9rem;">{{ $pProduct->name }}</h6>
                                                <div class="text-orange-600 fw-bold small">{{ $pProduct->currency == 'USD' ? '$' : '₹' }}{{ number_format($pProduct->price, 0) }}</div>
                                                <div class="text-muted" style="font-size: 0.7rem;">MOQ: {{ $pProduct->moq }}</div>
                                            </div>
                                        </div>
                                    </a>
                                    @if(!$loop->last) <hr class="my-1 border-light"> @endif
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- TRENDING PRODUCTS WIDGET -->
                    <div class="bg-white rounded-3 shadow-sm border p-3">
                        <h6 class="fw-bold text-uppercase border-bottom pb-2 mb-3 text-dark" style="letter-spacing: 0.5px;">Trending Products</h6>
                        
                        <div class="d-flex flex-column gap-3">
                            @foreach($trendingProducts as $tProduct)
                                <a href="{{ route('public.products.show', $tProduct->slug) }}" class="text-decoration-none group">
                                    <div class="d-flex align-items-center gap-3">
                                        <!-- Thumb -->
                                        <div class="rounded-2 border flex-shrink-0" style="width: 60px; height: 60px; overflow: hidden;">
                                            <img src="{{ $tProduct->main_image }}" class="w-100 h-100 object-fit-cover group-hover:tw-scale-110 tw-transition-transform" alt="{{ $tProduct->name }}">
                                        </div>
                                        <!-- Info -->
                                        <div class="flex-grow-1" style="min-width: 0;">
                                            <h6 class="mb-0 text-dark fw-bold text-truncate" style="font-size: 0.9rem;">{{ $tProduct->name }}</h6>
                                            <div class="text-orange-600 fw-bold small">{{ $tProduct->currency == 'USD' ? '$' : '₹' }}{{ number_format($tProduct->price, 0) }}</div>
                                            <div class="text-muted" style="font-size: 0.7rem;">MOQ: {{ $tProduct->moq }}</div>
                                        </div>
                                    </div>
                                </a>
                                @if(!$loop->last) <hr class="my-1 border-light"> @endif
                            @endforeach
                        </div>
                        
                        <div class="mt-3 pt-2 text-center border-top">
                            <a href="#" class="text-primary fw-bold small text-decoration-none">View All Trending <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</section>
<!-- Quote Modals (Added for Horizontal Layout) -->
@foreach($products as $product)
    @php $seller = $product->seller; @endphp
    <div class="modal fade" id="quoteModal{{ $product->id }}" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white py-2">
                    <h6 class="modal-title"><i class="bi bi-chat-quote me-2"></i>Contact {{ $seller->company_name }}</h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('inquiries.store', $seller) }}" method="POST">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <input type="hidden" name="seller_id" value="{{ $seller->id }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Your Name *</label>
                            <input type="text" name="name" class="form-control form-control-sm" required value="{{ auth()->user()->name ?? '' }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Email *</label>
                            <input type="email" name="email" class="form-control form-control-sm" required value="{{ auth()->user()->email ?? '' }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Phone *</label>
                            <input type="text" name="phone" class="form-control form-control-sm" required value="{{ auth()->user()->phone ?? '' }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Quantity Required</label>
                            <input type="number" name="quantity" class="form-control form-control-sm" placeholder="e.g. 100">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold" style="font-size: 13px;">Your Message *</label>
                            <textarea name="message" class="form-control form-control-sm" rows="3" required placeholder="I am interested in {{ $product->name }}. Please share price and details."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer py-2">
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm fw-bold"><i class="bi bi-send me-1"></i>Send Query</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach

@endsection