@extends('front.layouts.master')

@section('content')

    <style>
        /* Main categories nav */
        .category-tab {
            transition: all 0.2s;
            white-space: nowrap;
        }
        .category-tab:hover, .category-tab.active {
            background-color: #ff6600;
            color: #fff !important;
        }

        #subcategories-container {
            overflow-x: auto;       /* Scroll أفقي */
            white-space: nowrap;    /* منع التفاف */
            padding-bottom: 10px;   /* مساحة تحت */
        }

        /* Subcategory tabs */
        #subcategories-container .subcat-tab {
            /*display: inline-block;*/
            /*width: 120px;           !* حجم ثابت *!*/
            height: 50px;           /* ارتفاع أكبر */
            /*line-height: 50px;      !* لمطابقة النص مع الارتفاع *!*/
            font-size: 12px;        /* خط أصغر */
            /*text-align: center;*/
            margin-right: 10px;
            border-radius: 25px;
            border: 1px solid #ddd;
            white-space: nowrap;
            overflow: hidden;
            /*text-overflow: ellipsis;*/
            transition: all 0.2s;
            cursor: pointer;
        }

        #subcategories-container .subcat-tab:hover,
        #subcategories-container .subcat-tab.active {
            background-color: #ff6600;
            color: #fff !important;
            border-color: #ff6600;
        }
        /* Products cards */
        #products-container .card.product {
            transition: all 0.3s;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        #products-container .card.product:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        }
        #products-container .card-img-top {
            height: 180px;
            object-fit: cover;
        }
        #products-container .card-body {
            padding: 12px 8px;
        }
        #products-container .card-title a {
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            color: #333;
        }
        #products-container .card-title a:hover {
            color: #ff6600;
        }
        #products-container .text-secondary {
            color: #777 !important;
            font-size: 12px;
        }

        /* Buttons on image */
        .add-to-cart, .add-to-wishlist {
            width: 36px;
            height: 36px;
            font-size: 12px;
        }
        .badge-primary {
            background-color: #ff6600;
            font-size: 10px;
            padding: 4px 6px;
            border-radius: 4px;
        }
    </style>

    <section class="py-2 bg-gray-2">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb-site py-0 d-flex justify-content-center">
                    <li class="breadcrumb-item"><a class="text-decoration-none text-body"
                                                   href="{{route('home')}}">الرئيسية</a>
                    </li>
                    <li class="breadcrumb-item active pl-0 d-flex align-items-center" aria-current="page">  الاقسام</li>
                </ol>
            </nav>
        </div>
    </section>

    <section>
        <div class="container container-xl">
            <h2 class="text-center my-3">الاقسام</h2>
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <p class="fs-18 font-weight-500 my-lg-0 my-2" style="color: #696969;">نحن وجدنا  <strong
                            class="font-weight-bold text-secondary">95</strong>
                    منتج مناسب لك</p>
                <div class="d-flex align-items-center">
                    <div class="dropdown show lh-1 rounded ml-lg-5 ml-0" style="background-color:#f5f5f5">
                        <a href="#"
                           class="dropdown-toggle custom-dropdown-toggle text-decoration-none text-secondary p-3 mw-210 position-relative d-block"
                           id="dropdownMenuButton" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                            الترتيب الاساسي
                        </a>
                        <div class="dropdown-menu custom-dropdown-item" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">السعر الاعلى ثم الاقل</a>
                            <a class="dropdown-item" href="#">السعر الاقل ثم الاعلى</a>
                            <a class="dropdown-item" href="#">مختلط</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <section class="pt-8 d-none d-lg-block">
        <div class="container container-xl">

            <!-- Main Categories Nav -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="overflow-auto">
                        <ul class="nav nav-pills flex-nowrap mb-0" role="tablist">
                            @foreach($categories as $category)
                                <li class="nav-item px-2">
                                    <a class="nav-link text-dark px-4 py-2 fs-14 font-weight-600 rounded-0 category-tab"
                                       data-id="{{ $category->id }}" href="#">
                                        {{ $category->name }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Subcategories -->
            <div id="subcategories-container" class="mb-4"></div>

            <!-- Products Grid -->
            <div id="products-container" class="row">
                @include('front.partials.products', ['products' => $products])
            </div>

        </div>
    </section>







    <section class="pt-lg-5 pb-lg-6 d-block d-lg-none">
        <div class="container">
            <div class="row">
                <!-- القائمة الجانبية -->
                <div class="col-4 col-md-3">
                    <div class="nav nav-tabs flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
                            <div><span><img style="max-width: 50px; border-radius: 50px;" src="images/17060949101234.jpg"/></span></div>
                            <div><span>جراج سيارات</span></div>
                        </button>
                    </div>
                </div>

                <!-- محتوى التاب -->
                <div class="col-8 col-md-9">
                    <div class="tab-content" id="v-pills-tabContent">
                        <!-- Tab Pane Home -->
                        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                            <div class="row text-center">
                                <div class="col-6 col-md-4 px-1">
                                <span class="text-center my-1 d-inline-block" style="padding:1em; background:rgb(233,225,225); border-radius:10px;">
                                    <img class="m-auto" src="images/17060949101234.jpg"/>
                                </span>
                                    <div><span style="font-size:10px !important;">فلل- قصور</span></div>
                                </div>
                                <div class="col-6 col-md-4 px-1">
                                <span class="text-center my-1 d-inline-block" style="padding:1em; background:rgb(233,225,225); border-radius:10px;">
                                    <img class="m-auto" src="images/17060949101234.jpg"/>
                                </span>
                                    <div><span style="font-size:10px !important;">فلل- قصور</span></div>
                                </div>
                                <div class="col-6 col-md-4 px-1">
                                <span class="text-center my-1 d-inline-block" style="padding:1em; background:rgb(233,225,225); border-radius:10px;">
                                    <img class="m-auto" src="images/17060949101234.jpg"/>
                                </span>
                                    <div><span style="font-size:10px !important;">فلل- قصور</span></div>
                                </div>
                            </div>
                        </div>



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






    {{--<section class="pb-lg-5 pb-11">--}}
        {{--<nav class="pt-2">--}}
            {{--<ul class="pagination justify-content-center align-items-center mb-0 fs-16 font-weight-600">--}}
                {{--<li class="page-item fs-18 d-none d-sm-block">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#" tabindex="-1"><i class="far fa-angle-double-left"></i></a>--}}
                {{--</li>--}}
                {{--<li class="page-item">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#">1</a>--}}
                {{--</li>--}}
                {{--<li class="page-item active" aria-current="page">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#">2</a>--}}
                {{--</li>--}}
                {{--<li class="page-item">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#">3</a>--}}
                {{--</li>--}}
                {{--<li class="page-item">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#">4</a>--}}
                {{--</li>--}}
                {{--<li class="page-item">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#">5</a>--}}
                {{--</li>--}}
                {{--<li class="page-item">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#">...</a>--}}
                {{--</li>--}}
                {{--<li class="page-item">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#">16</a>--}}
                {{--</li>--}}
                {{--<li class="page-item fs-18 d-none d-sm-block">--}}
                    {{--<a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex" href="#"><i class="far fa-angle-double-right"></i></a>--}}
                {{--</li>--}}
            {{--</ul>--}}
        {{--</nav>--}}
    {{--</section>--}}



@endsection
@section('scripts')

    {{--<script>--}}
        {{--document.querySelectorAll('.nav-link').forEach(link => {--}}
            {{--link.addEventListener('click', function (e) {--}}
                {{--window.location.href = this.href; // navigate--}}
            {{--});--}}
        {{--})--}}
{{--//    </script>--}}

    <script>
        let currentCategoryId = null;
        let currentSubCategoryId = null;

        /* =========================
           Main Category Click
        ========================= */
        $(document).on('click', '.category-tab', function (e) {
            e.preventDefault();

            currentCategoryId = $(this).data('id');
            currentSubCategoryId = null;

            $('.category-tab').removeClass('active');
            $(this).addClass('active');

            $.ajax({
                url: "{{ route('ajax.subcategories.and.products') }}",
                type: "GET",
                data: { cat_id: currentCategoryId },
                success: function (res) {
                    $('#subcategories-container').html(res.subcategories_html);
                    $('#products-container').html(res.products_html);
                }
            });
        });

        /* =========================
           Subcategory Click
        ========================= */
        $(document).on('click', '.subcat-tab', function (e) {
            e.preventDefault();

            currentSubCategoryId = $(this).data('id');

            $('.subcat-tab').removeClass('active');
            $(this).addClass('active');

            loadProducts(1);
        });

        /* =========================
           Pagination Click (AJAX)
        ========================= */
        $(document).on('click', '.pagination a', function (e) {
            e.preventDefault();

            let page = $(this).attr('href').split('page=')[1];
            loadProducts(page);
        });

        /* =========================
           Load Products Function
        ========================= */
        function loadProducts(page = 1) {
            let data = { page: page };

            if (currentSubCategoryId) {
                data.sub_cat_id = currentSubCategoryId;
            } else if (currentCategoryId) {
                data.cat_id = currentCategoryId;
            }

            $.ajax({
                url: "{{ route('ajax.products') }}",
                type: "GET",
                data: data,
                success: function (html) {
                    $('#products-container').html(html);
                }
            });
        }
    </script>




@endsection