@extends('layout.client')

@section('contentstyle')
<style>

    .header__logo img {
        width: 60px;
    }

    @media screen and (orientation: landscape) {
        .carousel-item img {
            height: 100vh;
        }
    }

    .tpslider__five__brand img {
        width: 140px;
        height: 156px;
    }


    /* Adjust the grid for 6 columns on larger screens */
    .sub-categories-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        width: 100%;
    }

    /* Style for category items */
    .sub-category-item {
        text-align: center;
        overflow: hidden;
    }

    /* Adjust image sizing */
    .tpblog__thumb img {
        width: 100%;
        height: 130px;
        object-fit: cover;
    }

    .sub_sub_tpblog__title a {
        font-size: 12px;
        line-height: 1.2;
    }

    /* Responsive styles for mobile */
    @media only screen and (max-width: 380px) {



        .carousel-caption p {
            display: none;
        }

        .tpslider__five__brand img {
            width: 90px;
            height: 90px;
        }

        .sub-categories-grid {
            grid-template-columns: repeat(4, 1fr);
        }

        .tpblog__thumb img {
            /*height: 100px;*/
            width: 60px;
            height: 60px;
        }
    }

/*Tab view */
    @media only screen and (min-width: 381px) and (max-width: 768px) {

        .carousel-caption p {
            display: none;
        }

        .tpslider__five__brand img {
            width: 90px;
            height: 90px;
        }

        .sub-categories-grid {
            grid-template-columns: repeat(4, 1fr);
        }

        .tpblog__thumb img {
            height: 120px;
        }
    }

    @media only screen and (min-width: 769px) {

        .carousel-caption p {
            display: none;
        }

        .tpslider__five__brand img {
            width: 90px;
            height: 90px;
        }

        .sub-categories-grid {
            grid-template-columns: repeat(6, 1fr);
        }

        .tpblog__thumb img {
            height: 130px;
        }
    }

    @media (max-width: 768px) {
        .sub_tpblog__title a {
            font-size: 10px;
            line-height: 1.2;
        }
    }

    @media (max-width: 480px) {
        .sub_tpblog__title a {
            font-size: 6px;
            line-height: 1 !important;
            display: inline-block;
        }
    }
</style>


@endsection

@section('content')
    <!-- breadcrumb-area-start -->
    <div class="breadcrumb__area grey-bg pt-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="tp-breadcrumb__content">
                        <div class="tp-breadcrumb__list">
                            <span class="tp-breadcrumb__active"><a href="{{ route('homepage') }}">Home</a></span>
                            <span class="dvdr">/</span>
                            <span>Sub Categories</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb-area-end -->

    <section class="blog-area pb-30">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 text-center pt-50">
                    <div class="tpsection mb-35">
                        <h4 class="tpsection__sub-title">~Enjoy Your Shopping ~</h4>
                    </div>
                </div>
            </div>
            <div class="swiper-container tpblog-active">
                <div class="sub-categories-grid">
                    @foreach ($subCategories as $category)
                        <div class="sub-category-item">
                            <div class="tpblog__item">
                                <div class="tpblog__thumb fix">
                                    <a href="{{ route('singleproductspage', $category->id) }}">
                                        <img src="{{ URL::asset('storage/category/' . $category->image) }}" alt="" >
                                    </a>
                                </div>
                                <div class="tpblog__wrapper">
                                    <h4 class="sub_sub_tpblog__title"><a href="#">{{ $category->name }}</a></h4>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection