@extends('page_layout')
@section('section')
<div data-elementor-type="wp-post" data-elementor-id="1029" class="elementor elementor-1029"
        data-elementor-post-type="envato_tk_templates">
        <section
            class="elementor-section elementor-top-section elementor-element elementor-element-7af85c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default"
            data-id="7af85c9" data-element_type="section"
            data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
            <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b9658dd"
                    data-id="b9658dd" data-element_type="column">
                    <div class="elementor-widget-wrap elementor-element-populated">
                        <div class="elementor-element elementor-element-8ff69a9 elementor-widget elementor-widget-heading"
                            data-id="8ff69a9" data-element_type="widget" data-widget_type="heading.default">
                            <div class="elementor-widget-container">
                                <h2 class="elementor-heading-title elementor-size-default">Products</h2>
                            </div>
                        </div>
                        <div class="elementor-element elementor-element-cbae4ff elementor-icon-list--layout-inline elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list"
                            data-id="cbae4ff" data-element_type="widget" data-widget_type="icon-list.default">
                            <div class="elementor-widget-container">
                                <ul class="elementor-icon-list-items elementor-inline-items">
                                    <li class="elementor-icon-list-item elementor-inline-item">
                                        <span class="elementor-icon-list-text">Home</span>
                                    </li>
                                    <li class="elementor-icon-list-item elementor-inline-item">
                                        <span class="elementor-icon-list-icon">
                                            <i aria-hidden="true" class=" arrow_triangle-right_alt2"></i> </span>
                                        <span class="elementor-icon-list-text">Products</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
</div>

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap 5 JavaScript (for interactive components, optional) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


    <!-- Filter Form -->
    <form method="GET" action="" style="padding: 50px;">
        <div class="mb-3">
            <label for="category" class="form-label">Select Category:</label>
            <select name="category" id="category" class="form-control">
                <option value="">All Categories</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Filter</button>
    </form>

<div class="container mt-4" style="padding:30px;">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
        @foreach($products as $product)
        <div class="col">
            <div class="card h-100">
                <img src="{{ asset('images/' . $product->image) }}" class="card-img-top" alt="Product Image">
                <div class="card-body">
                    <h5 class="card-title">{{ $product->title }}</h5>
                    <p class="card-text">₹{{ $product->price }}</p>
                    <button class="btn"><a href="{{ route('product_detail', ['id' => $product->id]) }}">Continue Shopping</a></button>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>




@endsection