@extends('layouts.frontendTemplate')

<style>
    li a:hover {
        color: #E23134 !important
    }

    .category span {
        font-size: 16px;
    }

    .category p {
        font-size: 14px;
    }
</style>

@section('main')

    <section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-8 col-md-6 text-center text-md-start">
                    <!-- start page title -->
                    <h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">Categories</h1>
                    <!-- end page title -->
                </div>
                <div
                    class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
                    <!-- breadcrumb -->
                    <ul class="text-center text-md-end">
                        <li><a href="{{ url('') }}" class="text-white">Home</a></li>
                        <li class="text-white">Categories</li>
                    </ul>
                    <!-- end breadcrumb -->
                </div>
            </div>
        </div>
    </section>


    <section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom category">
        <div class="container-fluid" style="margin-bottom: 100px;">
            <div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
                <div class="col-12 text-center">
                    <img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
                        alt="GREATER CHIANG MAI">
                    <p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">Categories
                    </p>
                    <h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
                    WHERE ELSE</h5>
                    <span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-12 filter-content overflow-hidden">
                    <ul
                        class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
                        <li class="grid-sizer"></li>

                        @foreach ($itemView['sub_category'] as $item)
                            <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
                                <figure>
                                    <div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
                                        <img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
                                            alt="" />
                                        <div class="portfolio-icon">
                                            <a href="{{ url('category/where-else/article/' . $item->id) }}"><i
                                                    class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
                                            <a class="gallery-link" title="image title..."
                                                href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
                                                    class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <figcaption class="bg-white">
                                        <div class="portfolio-hover-main text-center">
                                            <div class="portfolio-hover-box align-middle">
                                                <div class="portfolio-hover-content position-relative">
                                                    <a href="{{ url('category/where-else/article/' . $item->id) }}"><span
                                                            class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
                                                            {{ $item->name_en }}
                                                        </span></a>
                                                    <p class="text-medium-gray text-extra-small text-uppercase">
                                                        ({{ $itemView['count_article'][$item->id] ?? 0 }})
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </figcaption>
                                </figure>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>

@stop

@section('js')

@endsection