@extends('frontend.layouts.master')
@section('content')
<div class="bg-image" style="background-image: url('{{asset('/img/bg-img.jpg')}}');background-size: cover;background-repeat: no-repeat;">
    <div class="bg-primary-default">
        <div class="container p-lg-0">
            <div class="row">
                <div class="col-lg-9">
                    <div class="page-title d-flex align-items-center me-3 flex-wrap py-20 ">
                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-3 my-1">
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-warning">
                                <a href="/" class="text-warning text-hover-primary">Home</a>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-white">Image Gallery</li>
                            <!--end::Item-->
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
<div class="page_details pt-10 d-flex flex-column-fluid" id="kt_page_details">
    <!--begin::Container-->
    <div id="kt_content_container" class="container p-0">
        <!--begin::About us-->
        <div class="mb-10">
            <!--begin::Section-->
            <div class="m-0">
                <!--begin::Content-->
                <div class="d-flex flex-stack">
                    <!--begin::Title-->
                    <h2 class="text-black">{{$cat->name}}</h2>
                    <!--end::Title-->
                    <!--begin::Link-->
                    <div class="mt-3 mt-md-0 text-center text-md-right ml-md-auto align-self-center">
                        <div class="button_cont mt-4"><a class="btn btn-danger" href="/{{request()->segment(1)}}"> <span class="fa fa-backspace"></span> Back</a></div>
                    </div>
                    <!--end::Link-->
                </div>
                <!--end::Content-->
                <!--begin::Separator-->
                <div class="separator separator-dashed border-gray-300 mb-4 mt-2"></div>
                <!--end::Separator-->
            </div>
            <!--end::Section-->
            <!--begin::Row-->
            <div class="row g-1 row-cols-2 row-cols-lg-5">
                @foreach($cat->images as $image)
                <div class="col">
                    <!--begin::Overlay-->
                    <a class="d-block overlay" data-fslightbox="lightbox-hot-sales" href="/{{get_image($image->image)}}">
                        <!--begin::Image-->
                        <div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-175px" style="background-image:url('/{{get_image($image->image)}}')"></div>
                        <!--end::Image-->
                        <!--begin::Action-->
                        <div class="overlay-layer card-rounded bg-dark bg-opacity-25">
                            <i class="bi bi-eye-fill fs-2x text-white"></i>
                        </div>
                        <!--end::Action-->
                    </a>
                </div>
                @endforeach

            </div>
            <!--begin::Row-->
        </div>

    </div>
    <!--end::Container-->
</div>
@endsection