@extends('front.layout.app')

@section('custom-styles')
    <link href="{{asset('assets/css/ar/product-section.css')}}" rel="stylesheet">

@endsection
@section('content')
<section class="bg-gray-light2">
        <div class="container py-5">
            <div class="row">
                <div class="col">
                    <nav aria-label="breadcrumb" class="bg-white fw-bold rounded-3 p-3 mb-4 border">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="#">@lang('word.categories')</a></li>
                            <li class="breadcrumb-item"><a href="#">فساتين</a></li>
                            <li class="breadcrumb-item"><a href="#">فساتين زفاف</a></li>

                        </ol>
                    </nav>
                </div>
            </div>

            <div class="row">
                <div class=" col-xl-4 col-lg-4 col-md-4">
                    <div class="card mb-4 mb-lg-0 ">
                        <div class="card-body p-2 d-block">
                            <h5 class="fw-bold text-capitalize border-bottom p-2">@lang('word.categories')</h5>
                            <div class="pt-2" id="category-btn">
                                <a class="d-block full-width bg-gray-light2 p-2 mb-2 fw-bold" href="#">
                                    <i class='bx bxs-widget'></i>
                                    @lang('word.all')
                                </a>
                                <a class="d-block full-width bg-gray-light2 p-2 mb-2 fw-bold" href="#">
                                    <i class='bx bx-align-justify'></i>
                                    فساتين
                                </a>
                                <a class="d-block full-width bg-gray-light2 p-2 mb-2 fw-bold" href="#">
                                    <i class='bx bx-align-justify'></i>
                                    الاحذية
                                </a>
                                <a class="d-block full-width bg-gray-light2 p-2 mb-2 fw-bold" href="#">
                                    <i class='bx bx-align-justify'></i>
                                    ساعات
                                </a>
                                <a class="d-block full-width bg-gray-light2 p-2 mb-2 fw-bold" href="#">
                                    <i class='bx bx-align-justify'></i>
                                    اكسسورات
                                </a>
                                <a class="d-block full-width bg-gray-light2 p-2 mb-2 fw-bold" href="#">
                                    <i class='bx bx-align-justify'></i>
                                    مستلزمات المنزل
                                </a>
                                <a class="d-block full-width bg-gray-light2 p-2 mb-2 fw-bold" href="#">
                                    <i class='bx bx-align-justify'></i>
                                    مستلزمات الاطفال
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-8 col-lg-8 col-md-8">
                    <div class="row mb-5">
                        <div class="col-12 bg-white p-1 border d-flex fw-bold" style="border-radius: 15px;">
                            <div class="sort-by pt-2 pb-2 ">
                                @lang('word.sort-by')
                            </div>
                            <select class="form-control filter-select2 pt-2 pb-2 fw-bold " id="state" required="">
                                <option value="" disabled selected>@lang('word.select')</option>
                                <option><a href="#">@lang('word.prices-lowest-to-highest')</a></option>
                                <option><a href="#">@lang('word.prices-highest-to-lowest')</a></option>
                            </select>

                        </div>
                    </div>
                    <div class="products-card d-flex border-radius-5px full-width bg-white mb-3">
                        <img src="{{asset('assets/images/img/dress.jpg')}}" class="card-img-top" alt="...">
                        <div class="d-block full-width">
                            <div class="card-body margin-bottom-0 padding-bottom-0">
                                <div class="text-section">
                                    <h5 class="card-title fw-bold primary-color1"><a href="#">فستان زفاف</a></h5>
                                    <span class="bg-gray-light border-radius-5px p-1">11:11AM</span>
                                    <p class="primary-color1 fw-bold mt-3 mb-3 ">
                                        <i class="fa-regular fa-user fa-xl mr-1 ml-1 "></i>

                                        <span> menna galal</span>

                                        <i class="fa-solid fa-check bx border-radius-circle p-1 white" style='background-color:#25D366'></i>
                                    </p>
                                    <p class="black-color"><i class="fa-solid fa-location-dot "></i>مصر</p>
                                </div>
                                <div class="cta-section">
                                    <div class="font-size-1-5r">105.5 <span>{{__('word.KWD')}}</span></div>
                                </div>
                            </div>

                            <div class="card-body margin-top-0 padding-top-0">
                                <div class="text-section2 d-flex">
                                    <div class="bg-primary-color white border-radius-5px p-2 m-1 call-section">اتصل بصاحب الاعلان</div>
                                    <button href="#" class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a> <i class='bx bxl-whatsapp border-radius-5px white' style='background-color:#25D366'></i></a></button>

                                    <button href="#"
                                            class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a><i class='fa fa-phone'></i></a></button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="products-card d-flex border-radius-5px full-width bg-white mb-3">
                        <img src="{{asset('assets/images/img/dress.jpg')}}" class="card-img-top" alt="...">
                        <div class="d-block full-width">
                            <div class="card-body margin-bottom-0 padding-bottom-0">
                                <div class="text-section">
                                    <h5 class="card-title fw-bold primary-color1"><a href="#">فستان زفاف</a></h5>
                                    <span class="bg-gray-light border-radius-5px p-1">11:11AM</span>
                                    <p class="primary-color1 fw-bold mt-3 mb-3 ">
                                        <i class="fa-regular fa-user fa-xl mr-1 ml-1 "></i>

                                        <span> menna galal</span>

                                        <i class="fa-solid fa-check bx border-radius-circle p-1 white" style='background-color:#25D366'></i>
                                    </p>
                                    <p class="black-color"><i class="fa-solid fa-location-dot "></i>مصر</p>
                                </div>
                                <div class="cta-section">
                                    <div class="font-size-1-5r">105.5 <span>{{__('word.KWD')}}</span></div>
                                </div>
                            </div>

                            <div class="card-body margin-top-0 padding-top-0">
                                <div class="text-section2 d-flex">
                                    <div class="bg-primary-color white border-radius-5px p-2 m-1 call-section">اتصل بصاحب الاعلان</div>
                                    <button href="#" class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a> <i class='bx bxl-whatsapp border-radius-5px white' style='background-color:#25D366'></i></a></button>

                                    <button href="#"
                                            class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a><i class='fa fa-phone'></i></a></button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="products-card d-flex border-radius-5px full-width bg-white mb-3">
                        <img src="{{asset('assets/images/img/dress.jpg')}}" class="card-img-top" alt="...">
                        <div class="d-block full-width">
                            <div class="card-body margin-bottom-0 padding-bottom-0">
                                <div class="text-section">
                                    <h5 class="card-title fw-bold primary-color1"><a href="#">فستان زفاف</a></h5>
                                    <span class="bg-gray-light border-radius-5px p-1">11:11AM</span>
                                    <p class="primary-color1 fw-bold mt-3 mb-3 ">
                                        <i class="fa-regular fa-user fa-xl mr-1 ml-1 "></i>

                                        <span> menna galal</span>

                                        <i class="fa-solid fa-check bx border-radius-circle p-1 white" style='background-color:#25D366'></i>
                                    </p>
                                    <p class="black-color"><i class="fa-solid fa-location-dot "></i>مصر</p>
                                </div>
                                <div class="cta-section">
                                    <div class="font-size-1-5r">105.5 <span>{{__('word.KWD')}}</span></div>
                                </div>
                            </div>

                            <div class="card-body margin-top-0 padding-top-0">
                                <div class="text-section2 d-flex">
                                    <div class="bg-primary-color white border-radius-5px p-2 m-1 call-section">اتصل بصاحب الاعلان</div>
                                    <button href="#" class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a> <i class='bx bxl-whatsapp border-radius-5px white' style='background-color:#25D366'></i></a></button>

                                    <button href="#"
                                            class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a><i class='fa fa-phone'></i></a></button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="products-card d-flex border-radius-5px full-width bg-white mb-3">
                        <img src="{{asset('assets/images/img/dress.jpg')}}" class="card-img-top" alt="...">
                        <div class="d-block full-width">
                            <div class="card-body margin-bottom-0 padding-bottom-0">
                                <div class="text-section">
                                    <h5 class="card-title fw-bold primary-color1"><a href="#">فستان زفاف</a></h5>
                                    <span class="bg-gray-light border-radius-5px p-1">11:11AM</span>
                                    <p class="primary-color1 fw-bold mt-3 mb-3 ">
                                        <i class="fa-regular fa-user fa-xl mr-1 ml-1 "></i>

                                        <span> menna galal</span>

                                        <i class="fa-solid fa-check bx border-radius-circle p-1 white" style='background-color:#25D366'></i>
                                    </p>
                                    <p class="black-color"><i class="fa-solid fa-location-dot "></i>مصر</p>
                                </div>
                                <div class="cta-section">
                                    <div class="font-size-1-5r">105.5 <span>{{__('word.KWD')}}</span></div>
                                </div>
                            </div>

                            <div class="card-body margin-top-0 padding-top-0">
                                <div class="text-section2 d-flex">
                                    <div class="bg-primary-color white border-radius-5px p-2 m-1 call-section">اتصل بصاحب الاعلان</div>
                                    <button href="#" class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a> <i class='bx bxl-whatsapp border-radius-5px white' style='background-color:#25D366'></i></a></button>

                                    <button href="#"
                                            class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a><i class='fa fa-phone'></i></a></button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="products-card d-flex border-radius-5px full-width bg-white mb-3">
                        <img src="{{asset('assets/images/img/dress.jpg')}}" class="card-img-top" alt="...">
                        <div class="d-block full-width">
                            <div class="card-body margin-bottom-0 padding-bottom-0">
                                <div class="text-section">
                                    <h5 class="card-title fw-bold primary-color1"><a href="#">فستان زفاف</a></h5>
                                    <span class="bg-gray-light border-radius-5px p-1">11:11AM</span>
                                    <p class="primary-color1 fw-bold mt-3 mb-3 ">
                                        <i class="fa-regular fa-user fa-xl mr-1 ml-1 "></i>

                                        <span> menna galal</span>

                                        <i class="fa-solid fa-check bx border-radius-circle p-1 white" style='background-color:#25D366'></i>
                                    </p>
                                    <p class="black-color"><i class="fa-solid fa-location-dot "></i>مصر</p>
                                </div>
                                <div class="cta-section">
                                    <div class="font-size-1-5r">105.5 <span>{{__('word.KWD')}}</span></div>
                                </div>
                            </div>

                            <div class="card-body margin-top-0 padding-top-0">
                                <div class="text-section2 d-flex">
                                    <div class="bg-primary-color white border-radius-5px p-2 m-1 call-section">اتصل بصاحب الاعلان</div>
                                    <button href="#" class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a> <i class='bx bxl-whatsapp border-radius-5px white' style='background-color:#25D366'></i></a></button>

                                    <button href="#"
                                            class="btn-outline-primary-color1 border-radius-5px p-1 m-1"><a><i class='fa fa-phone'></i></a></button>
                                </div>
                            </div>
                        </div>

                    </div>

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

@endsection
@section('scripts')
    <script>
         let prevButton = null;

    const buttons1 = document.getElementById("category-btn");

    buttons1.addEventListener('click', (e) => {

      const isButton = e.target.nodeName === 'A';

      if (!isButton) {
        return;
      }

      e.target.classList.add('active-category'); // Add .active CSS Class
      if(prevButton !== null) {
        prevButton.classList.remove('active-category');  // Remove .active CSS Class
      }

      prevButton = e.target;

    });

    </script>
@endsection