@extends('web.layouts.layout')
@section('content')


    <main>
        <!-- Start pg_header -->
        @include('web.pages.components.header.header')

        <!-- Start section -->
        <section class="products_pg products_sec section">
            <div class="container">
                <div class="filter_box mb-5">
                    <form id="filter">
                        <input type="hidden" name="page" id="page" value="1">
                        <div class="row">
                            <div class="col-lg-11">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <input type="search" name="title" class="form-control" value="{{$product_title}}" placeholder="{{__('web.search_product_here')}} ...">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <select name="category_id" onchange="categorySelect(this)" class="form-select form-control ">
                                                <option selected value=""> {{__('web.main_category')}}  </option>
                                                @foreach($categories as $row)
                                                    <option {{$row->id == $category_id ? 'selected' : ''}} value="{{$row->id}}">{{$row->title}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <select name="sub_category_id" id="sub_categories" class="form-select form-control ">
                                                <option selected value=""> {{__('web.sub_category')}}  </option>
                                                @foreach($sub_categories as $row)
                                                    <option value="{{$row->id}}">{{$row->title}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <select name="orderBy" class="form-select form-control ">
                                                <option selected disabled>  {{__('web.orderBy')}}    </option>
                                                <option value="newest">{{__('web.newest')}}</option>
                                                <option value="oldest">{{__('web.oldest')}}</option>
                                                <option value="priceDesc">{{__('web.priceDesc')}}</option>
                                                <option value="priceAsc">{{__('web.priceAsc')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <button type="button" onclick="filter()" class="search_butn butn primary_butn sm_butn w-100">  <i class="fa-regular fa-magnifying-glass mx-0"></i></button>
                            </div>
                        </div>

                    </form>
                </div>
                <div id="products">

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

    </main>

@endsection
@section('inject_js')
    <script>
        let url_category = "{{route('web.fetch.categories')}}"
        let url_filter = "{{route('web.filter')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/products.js"></script>
@endsection