@extends("web.layouts.master")

@section("content")
    <section class="space--sm background-light-grey">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="row">
                        <div class="col-12 col-md-12" data-aos="fade-up" data-aos-duration="1000">
                            <p class="font-size-14 text-light-grey Font-Manrope-Light mb-2">Home / Merchandise</p>
                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold pl-0 custom-second-section-title mb-5">Merchandise Catalog</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="masonry masonry--tiles">
                        <div class="masonry__container row masonry--active" style="position: relative; height: 5655.94px;">
                            <div class="masonry__item col-md-4" style="position: absolute; left: 0px; top: 0px;"></div>
                            @foreach ($ooliesMerchandise as $oolyMerchandise)
                                <div class="masonry__item col-md-4 filter-computing" data-masonry-filter="Computing" style="position: absolute; left: 0px; top: 0px;">
                                    <div class="feature custom-feature">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <span class="label background-dark-grey font-size-14 Font-Manrope-Regular" style="text-transform: none;">Ooly</span>
                                                <div class="text-center">
                                                    <img src="{{ $oolyMerchandise["image_url"] }}" alt="">
                                                </div>

                                                <br />
                                                <p class="font-size-14 text-dark-grey Font-Manrope-Regular mb-2">{{ $oolyMerchandise["name"] }}</p>
                                                <p class="font-size-18 text-red Font-Manrope-Bold text-uppercase">{{ GeneralHelper::transformAmount($oolyMerchandise["price"]) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            @foreach ($trixiesMerchandise as $trixieMerchandise)
                                <div class="masonry__item col-md-4 filter-computing" data-masonry-filter="Computing" style="position: absolute; left: 0px; top: 0px;">
                                    <div class="feature custom-feature">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <span class="label background-dark-grey font-size-14 Font-Manrope-Regular" style="text-transform: none;">Trixie</span>
                                                <div class="text-center">
                                                    <img src="{{ $trixieMerchandise["image_url"] }}" alt="">
                                                </div>

                                                <br />
                                                <p class="font-size-14 text-dark-grey Font-Manrope-Regular mb-2">{{ $trixieMerchandise["name"] }}</p>
                                                <p class="font-size-18 text-red Font-Manrope-Bold text-uppercase">{{ GeneralHelper::transformAmount($trixieMerchandise["price"]) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <!--end masonry container-->
                    </div>
                </div>

            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection