@extends('layouts.front_end')
@section('title', 'Categories')
@section('content')
    <div>
        <style>
            /* .buy-now {
                border: 2px solid black;
                background-color: white;
                color: black;
                padding: 7px 22px;
                font-size: 16px;
                border-radius: 25px;
                cursor: pointer;
            }

            .buy-now-button:hover {
                background: black;
                color: white;
                font-weight: bold;
            } */

            .exclusive-item-two .exclusive-item-content {
                padding: 8px 0px 8px 8px;
                position: relative;
            }

            .image_size {
                width: 100%;
                height: 250px;
            }

            @media only screen and (max-width: 600px) {
                .image_size {
                    width: 100%;
                    height: 150px;
                }
            }
        </style>

        <section class="exclusive-collection pt-35 pb-0">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="section-title text-center mb-60">
                            <span class="sub-title">Exclusive collections</span>
                            <h2 class="title">Our Categories</h2>
                        </div>
                    </div>
                </div>
                <div class="row exclusive-active" style="position: relative; height: 864.8px;">
                    @foreach ($categories as $category)
                        <div class="col-6 col-md-3 col-lg-3 col-xl-2 grid-item grid-sizer cat-two cat-three"
                            style="position: absolute; left: 0%; top: 0px; ">
                            <a href="{{ route('search-category-wise', ['id' => $category->id]) }}">
                                <div class="exclusive-item exclusive-item-two mb-40">
                                    <div class="exclusive-item-thumb" style="height: 173px; width:173px; ">
                                        <img loading="lazy" class="image_size" style="height: 173px; width:173px; "
                                            @if (isset($category->image1)) src="{{ asset('storage/photo/' . $category->image1) }}"
                                            @else src="{{ asset('paikari_app_default_logo.png') }}" @endif
                                             alt="{{ $category->name }}">

                                        @if (isset($category->image1))
                                            <img class="overlay-product-thumb image_size" loading="lazy" style="height: 173px; width:173px; "
                                                @if (isset($category->image1)) src="{{ asset('storage/photo/' . $category->image1) }}"
                                                @else src="{{ asset('paikari_app_default_logo.png') }}" @endif
                                                 alt="{{ $category->name }}">
                                        @endif
                                    </div>
                                    <div class="exclusive-item-content">
                                        <div class="exclusive--content--bottom">
                                            <h5 style="width: 97%;"><a
                                                    href="{{ route('search-category-wise', ['id' => $category->id]) }}">
                                                    @if (strlen($category->name) > 50)
                                                        {{ \Illuminate\Support\Str::limit($category->name, 50) . '...' }}
                                                    @else
                                                        {{ $category->name }}
                                                    @endif
                                                </a></h5>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
    </section>

    {{-- <main>
            <div class="shop-area gray-bg pt-20 pb-0">
                <div class="custom-container-two">
                    <div class="row justify-content-center">
                        <div class="col-xl-12 col-lg-12">
                            <div class="row">
                                @foreach ($categories as $category)
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-6">
                                        <div class="exclusive-item exclusive-item-three text-center">
                                            <div class="exclusive-item-thumb">
                                                <a href="{{ route('search-category-wise', ['id' => $category->id]) }}">
                                                    <img loading="lazy"
                                                        @if (isset($category->image1)) src="{{ asset('storage/photo/' . $category->image1) }}"
                                            @else src="{{ asset('paikari_app_default_logo.png') }}" @endif
                                                        style="width: 100%;height: auto;" alt="{{ $category->name }}">
                                                </a>
                                                <div class="exclusive-item-content">
                                                    <h5>
                                                        <a href="{{ route('search-category-wise', ['id' => $category->id]) }}"
                                                            style="color: #ff0000; font-weight: bold;font-size: 14px;">
                                                            @if (strlen($category->name) > 50)
                                                                {{ \Illuminate\Support\Str::limit($category->name, 50) . '...' }}
                                                            @else
                                                                {{ $category->name }}
                                                            @endif
                                                        </a>
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </main> --}}
    </div>
@endsection
@push('scripts')
@endpush