@extends('layouts.index')

@section('content')

    <!--start product grid-->
    <section class="py-4">
        <h5 class="mb-0 fw-bold d-none">Product Grid</h5>
        <div class="container-fluid">
            <div class="btn btn-dark btn-ecomm d-xl-none position-fixed top-50 start-0 translate-middle-y"  data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarFilter">
                <span><i class="bi bi-funnel me-1"></i> Filters</span>
            </div>
            <div class="row">
                <div class="col-12 col-xl-2 filter-column">
                    <nav class="navbar navbar-expand-xl flex-wrap p-0">
                        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbarFilter" aria-labelledby="offcanvasNavbarFilterLabel">
                            <div class="offcanvas-header">
                                <h5 class="offcanvas-title mb-0 fw-bold" id="offcanvasNavbarFilterLabel">Filters</h5>
                                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body">
                                <div class="filter-sidebar">
                                    <div class="card rounded-0">
                                        <div class="card-header d-none d-xl-block bg-transparent">
                                            <h5 class="mb-0 fw-bold">Filters</h5>
                                        </div>
                                        <div class="card-body">
                                            <h6 class="p-1 fw-bold bg-light">Categories</h6>
                                            <div class="categories">
                                                <div class="categories-wrapper height-1 p-1">
                                                    @foreach($workerCategoriesNotChunked as $key => $value)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="{{ $key }}" id="chekCate{{ $key }}">
                                                            <label class="form-check-label" for="chekCate{{ $key }}">
                                                                <span>{{ $value }}</span>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="Price">
                                                <h6 class="p-1 fw-bold bg-light">Price</h6>
                                                <div class="Price-wrapper p-1">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control rounded-0" placeholder="$10">
                                                        <span class="input-group-text bg-section-1 border-0">-</span>
                                                        <input type="text" class="form-control rounded-0" placeholder="$10000">
                                                        <button type="button" class="btn btn-outline-dark rounded-0 ms-2"><i class="bi bi-chevron-right"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
                <div class="col-12 col-xl-10">
                    <div class="shop-right-sidebar">
                        <div class="product-grid mt-4" style="margin-top: 0px !important;">
                            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-5 g-4">
                                @foreach($jobs as $job)
                                    <div class="col">
                                        <div class="card border shadow-none">
                                            <div class="position-relative overflow-hidden">
                                                <a href="javascript:;">
                                                    <img src="{{ asset('user/images/featured-products/featured-product.png') }}" class="card-img-top" alt="...">
                                                </a>
                                            </div>
                                            <div class="card-body border-top">
                                                <h5 class="mb-0 fw-bold product-short-title">{{ $job->name }}</h5>
                                                <p class="mb-0 product-short-name">{{ $job->description }}</p>
                                                <div class="product-price d-flex align-items-center gap-2 mt-2">
                                                    <div class="h6 fw-bold">$458</div>
                                                    <div class="h6 fw-light text-muted text-decoration-line-through">$2089</div>
                                                    <div class="h6 fw-bold text-danger">(70% off)</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div><!--end row-->
                        </div>

                    </div>
                </div>
            </div><!--end row-->
        </div>
    </section>
    <!--start product details-->

@endsection