@extends('frontend.layouts.app')

@php
    $title = trim($data['category']->meta_title);
    if($title != null && $title != 'NULL')
            $title = $data['category']->meta_title;
    else
        $title = $data['category']->name . ' - ' . app_name();

    if($data['category']->do_index == 'N' || $data['category']->status == 'N')
        $no_index = 'NOINDEX';

    $video_tag = '';

    if(trim($data['category']->video_link) != null)
    {
        if($data['category']->video_site == 'YouTube')
        {
            $video_tag = '<div class="categ-video-section"><iframe style="width: -webkit-fill-available; height: -webkit-fill-available; position: relative;" src="https://www.youtube.com/embed/'. $data['category']->video_link .'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
        }
        else
        {
            $video_tag = '<div class="categ-video-section"><iframe class="mb-5" style="width: -webkit-fill-available; height: -webkit-fill-available; position: relative;" src="https://player.vimeo.com/video/'. $data['category']->video_link .'" frameborder="0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
        }
    }
@endphp

@section('title', $title)

@if(trim($data['category']->meta_description) != null && $data['category']->meta_description != 'NULL')
    @section('meta_description', $data['category']->meta_description)
    @section('meta_keywords', $data['category']->meta_keywords)

    @section('meta_url', URL::Current())
    @section('page_title', $title)
    @section('product_description',$data['category']->meta_description)
    @section('image',URL::to('/').'/up_data/categories/large/'.$data['category']->image)
    @section('image:width', "300")
    @section('image:height', "200")
@endif


@push('schema')
    @component('frontend.layouts.schema')
    {{-- <script type="application/ld+json"> --}}
        {
          "@context": "https://schema.org",
          "@type": "CollectionPage",
          "name": "{{ $data['category']->name }}",
          "url": "https://www.germedusa.com/{{$data['category']->slug }}",
          "description": "{{ $data['category']->description }}",
          "keywords": "{{ $data['category']->meta_description }}",
          "mainEntity": {
            "@type": "BreadcrumbList",
            "itemListElement": [
                @foreach ($data['categories'] as $key => $subCat)
                {
                  "@type": "ListItem",
                  "position": {{ $key+1 }},
                  "name": "{{ $subCat->name }}",
                  "item": "https://www.germedusa.com/{{$data['category']->slug }}/#Product"
                }
                    @if($key < count($data['categories'])-1)
                        ,
                    @endif
                @endforeach
            ]
          }
        }
        {{-- </script> --}}

    @endcomponent
@endpush

@if($data['category']->is_canonical == 'Y')
    @php
        if($data['category']->canonical_url != '')
            $url = $data['category']->canonical_url;
        else
            $url = URL::to( '/' . $data['category']->slug);
    @endphp
    @push('head-area')
        <link rel="canonical" href="{{ $url }}" />
    @endpush
@endif

@if(isset($no_index))
    @push('head-area')
        <META NAME="ROBOTS" CONTENT="{{ $no_index }}">
    @endpush
@endif

@section('content')

<div class="row">
            <div class="col-md-12 mb">
                <div id="main-banner-after-header"  class="bg-buttery-white align-items-center d-flex banner-3 justify-content-center">
                <h1 class="category_detail_heading lh-1 text-center title" style="font-weight: bold; font-size: 2rem;">
                        {{ $data['category']->name }}
                </h1>
                </div>
            </div>
</div>

@include('includes.partials.bread-crumbs')


    <div class="container-fluid mb-4">


        <div class="row">
            <div class="col-md-12 mb-2 mt-4">
                <div class="shop_title">
                    {{-- <h1 class="title h3 listing-page-heading">{{ $data['category']->name }}</h1> --}}
                </div>
                <div class="pt-2">
                    <div class="category-description" id="div-category-description">{!! $data['category']->short_description ? $data['category']->short_description : $data['category']->description !!}</div>
                    <div class="text-right d-md-none"><a href="javascript:;" id="show-category-description">Read more ...</a></div>
                </div>

                {!! $video_tag !!}
            </div>
        </div>



        <div class="product-wrapper pt-5">
            <div class="product-intro divide-line up-effect mb-2">


                @foreach($data['categories'] as $category)

                    {!! \App\Models\Category::categoryBlockFlex($category) !!}

                @endforeach

            </div>
            @if(isset($data['category']) && $data['category']->short_description !== null)
                @if (strlen($data['category']->description) > 1200)
                    <div class="category-description pt-2 dynamic-data-h2" id="div-category-full-description" style="padding: 0px 10px;">
                        {!! implode(' ', array_slice(explode(' ', $data['category']->description), 0, 170)) !!}
                        <button type="button" id="load_more_description"
                        class="mt-4 quicky-btn-2 transition-none rounded" onclick="return false;">Show
                        More</button>
                    </div>
                @else
                    <div class="category-description pt-2 dynamic-data-h2" id="div-category-full-description" style="padding: 0px 10px;">
                        {!! $data['category']->description !!}
                    </div>
                @endif

            @endif
        </div>





    </div>

    @push('before-scripts')
        <input type="hidden" value="shop" id="page_id">
    @endpush
    @push('after-scripts')
    <script>
        let more_info = null;
        document.getElementById('load_more_description').addEventListener("click", function() {
            document.getElementById("div-category-full-description").innerHTML = more_info;
            document.getElementById('load_more_description').style.display = 'none';
        });
    </script>
    @endpush
@endsection