@extends('frontend.pages.layouts.master')
@section('content')
    <div class="bg-image mb-5"
         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-->
                                <!--end::Item-->
                                <!--begin::Item-->
                                <li class="breadcrumb-item text-muted"> E-Commerce</li>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <li class="breadcrumb-item">
                                    <span class="bullet bg-gray-200 w-5px h-2px"></span>
                                </li>
                                <!--end::Item-->
                                <!--end::Item-->
                                <!--begin::Item-->
                                <li class="breadcrumb-item text-white"> {{$category->name}}</li>
                                <!--end::Item-->
                            </ul>
                            <!--end::Breadcrumb-->
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="bg-light py-15">
            <div class="container p-lg-0">
                <div class="row">
                    @foreach($category->active_records as $record)

                        {{--<div class="col-md-3 mb-8">--}}
                            {{--<a href="/">--}}
                                {{--<div class="card card-box">--}}
                                    {{--<div class="d-flex justify-content-between h-200px overflow-hidden">--}}


                                    {{--</div>--}}
                                    {{--<img class="card-img-top" src="{{ url(get_image($record->image)) }}" alt="Card image cap">--}}
                                    {{--<div class="card-body pb-0">--}}
                                        {{--<div class="cy-logo-box">--}}
                                            {{--<img src="{{ url(get_image($record->image)) }}" alt="">--}}

                                        {{--</div>--}}

                                        {{--<div class="cy-title">--}}
                                            {{--<h6>{{$record->heading}}</h6>--}}
                                            {{--<p class="card-text text-muted"><small>{{$record->sub_heading}}</small></p>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</a>--}}
                        {{--</div>--}}
                        <div class="col-lg-3 col-md-12 col-sm-12">
                            <div class="card rounded-0 border border-secondary mb-5">
                                <a class="text-dark" href="/">
                                    <img src="{{ url(get_image($record->image)) }}" height="250px" width="100%" class="product-img" alt="...">
                                    <div class="card-body p-5 px-5 text-center">
                                        <p class="mb-0 fs-5 text-dark"><b>{{$record->heading}}</b></p>
                                        <p class="mb-0 text-danger">{{ $record->sub_heading }}</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach


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

    {{--@section('custom_css')--}}
    <style>
        .currents-head h3 {
            padding: 5px;
            color: #555;
            text-transform: capitalize;
            font-weight: 500;
        }



        .categories-main {
            box-shadow: 0px 0px 2px 0px #555;
            transition: 0.3s;
        }

        .categories-main a {
            text-decoration: none !important;
            list-style: none;
        }

        .card-box {
            height: 260px;
            width: auto;
            background-color: #fff;
            border-radius: 5px;
        }

        .card-box img {
            height: 150px;
            width: auto;
        }

        .card-box:hover {
            box-shadow: 2px 2px 2px 2px #555;
            transition: 0.3s;
        }

        .storm:hover {
            box-shadow: 2px 2px 2px 2px #555;
            transition: 0.3s;
        }

        .cy-logo-box {
            height: 50px !important;
            width: 50px !important;
            position: relative;
            top: -50px;
            border: 1px solid #fff;
            border-radius: 5px;
            background-color: #fff;
            left: 40%;
            align-items: center;
            box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.15);
        }


        .cy-logo-box img {
            height: 40px;
            width: 40px;
            position: relative;
            top: 3px;
            left: 4px;
            border-radius: 5px;
        }

        .card-box:hover .cy-logo-box {
            box-shadow: 2px 4px 2px 2px #555;
            transition: 0.3s;
        }

        .cy-title h6 {
            font-size: 18px;
            text-transform: capitalize;
            color: #000;
            position: relative;
            bottom: 32px;
            text-align: center;
        }

        .cy-title p {
            font-size: 15px;
            text-transform: capitalize;
            position: relative;
            bottom: 40px;
            text-align: center;
        }

    </style>

@endsection