@extends('layouts.app')
@section('title', 'Our Products - ')
@section('description', 'Discover skincare essentials for glowing, healthy skin.')
@section('content')
<div id="our-products">
    <div id="our-products-banner" class="container-fluid px-lg-0 px-4">
        <div class="custom-container our-products-container">
            <div class="row align-items-center mx-0">
                <div class="col-md-6 col-12 mt-md-0 mt-4 pb-md-0 pb-4">
                    <span class="banner-title montserrat-bold text-green">Our Products</span>
                </div>
            </div>        
        </div> 
    </div>
    @if ($products->isEmpty() && Route::currentRouteName() == 'our-products-page')
        <div class="container-fluid px-lg-0 px-4 my-5">
            <div class="custom-container my-5">
                <div class="row justify-content-center mx-0 my-5">
                    <span class="banner-title montserrat-bold text-green text-center">No Products Uploaded Yet</span>
                </div>
            </div>
        </div>
    @else
        <div class="container-fluid px-lg-0 px-4" id="products">
            <div class="custom-container">
                <div class="row justify-content-between mx-0">
                    @if(!$tags->isEmpty())
                        <div class="col-lg-2 col-12 my-lg-0 my-4 py-lg-5 py-3 text-start d-flex flex-column">
                            @foreach ($categories as $category)
                                <span class="dropdown-toggle main-paragraph montserrat-bold text-green mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#dropdown-{{$category->slug}}" aria-controls="dropdown-{{$category->slug}}" aria-expanded="true" aria-label="Toggle {{$category->name}}">{{$category->name}}</span>
                                <hr>
                                <!-- Toggle Tags -->
                                <div id="dropdown-{{$category->slug}}" class="toggle-dropdown">
                                    @foreach ($category->tags as $tag)
                                        <div class="my-3">
                                            <label class="custom-checkbox d-flex align-items-center">
                                            @php
                                            $url = route('product-filter', [
                                                'tags' => in_array($tag->id, request()->input('tags', [])) // if the tag is in the tag array
                                                    ? array_diff(request()->input('tags', []), [$tag->id]) // remove the tag 
                                                    : array_merge(request()->input('tags', []), [$tag->id]) // else add the tag
                                            ]);
                                            @endphp
                                                <input type="checkbox" value="{{ $url }}" class="checkbox d-none" onchange="window.location.href=this.value"{{ in_array($tag->id, request()->get('tags', [])) ? 'checked' : '' }}>
                                                <span class="checkmark"></span>
                                                <span class="main-paragraph px-2">{{ $tag->name }}</span>
                                            </label>                    
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <div class="col-lg-9 col-12 my-lg-0 my-4 text-start px-0">
                        <div class="row justify-content-start g-lg-4 g-3">
                            @foreach ($products as $index => $product)
                                <div class="col-lg-4 col-6 py-lg-3 py-0">
                                    <div id="product-hover" class="d-flex flex-column justify-content-between grey-border">
                                        <button id="button-hover" class="my-3 button"><a class="text-decoration-none text-white" href="{{ route('product-page', ['product_slug' => $product->slug]) }}" >
                                            <span class="text">Learn More</span>
                                            <div class="span-wrapper">
                                                <span class="s1"></span>
                                                <span class="s2"></span>
                                                <span class="s3"></span>
                                            </div>
                                            </a>
                                        </button>
                                        <div id="product-tag" class="{{ $product->tags->contains(fn($tag) => $tag->slug == 'nourishing') ? 'green' : 'dark-green' }}">
                                            <p class="main-paragraph tag-paragraph montserrat-medium text-white">{{ $product->tags->firstWhere('category.slug', 'product-line')->name }}</p>
                                        </div>
                                        <picture class="text-center">
                                            <img src="{{ Storage::disk('public')->url($product->product_thumbnail) }}" alt="{{ $product->name }}" title="{{ $product->name }}" class="product-image mw-100"/>
                                        </picture>
                                        <div class="product-background d-flex flex-column justify-content-start">
                                            <p class="main-paragraph montserrat-bold text-grey text-start">{{ $product->name }}</p>
                                            <p class="main-paragraph montserrat-bold text-grey text-start">{{ $product->volume }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    @endif
</div>
@endsection
@push('js')
    <script type="module">
        $('document').ready(function(){
            // auto scroll after search
            const scrollTo = "{{ session('scroll_to') }}";
            if (scrollTo) {
                const element = $("#" + scrollTo);
                if (element.length) {
                    $("html, body").animate({ scrollTop: element.offset().top }, "slow");
                }
            }
        })
    </script>
@endpush