@extends('frontend::layouts.master')

@section('title')

@section('style')
    <style>
        <style>.sub-service-list ul,
        .category-list>ul,
        .category-list

        /* >ul li, */
        .category-detail,
        .sub-s-l-item,
        .sub-service-list ul li,
        .sub-service-detail {
            display: flex;
        }

        .sub-service-list ul,
        .category-list>ul {
            flex-wrap: wrap;
        }

        .sub-s-l-item,
        .sub-service-detail,
        .category-detail {
            flex-direction: column;
            flex: 1;
        }

        .sub-service-detail,
        .category-detail {
            justify-content: space-between;
        }

        .sub-detail {
            height: initial;
        }

        .img-sub-ser {
            position: relative;
            z-index: 1;
        }

        .category-detail>div:not(.btn-download) {
            word-break: break-word;
            overflow: hidden !important;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4 !important;
        }

        .category-detail .btn-download ul,
        .category-detail .btn-download ul li {
            padding: 0 8px;
            text-align: left !important;
        }

        .category-detail .btn-download ul li {
            width: auto !important;
        }

    </style>
    </style>
@endsection

@section('content')
    <div id="wrapper">

        @if (count($Banner) > 1)
            <div class="banner-style-10  carousel" data-dots="false" data-items="1" data-arrow="false" data-autoplay="true"
                data-loop="true">
                @foreach ($Banner as $banner)
                    <div class="slide"><a
                            href="{{ !empty($banner['link_th']) ? $banner['link_th'] : 'javascript:void(0);' }}"
                            {{ !empty($banner['link_th']) ? 'target="_blank"' : '' }}><img
                                src="{{ convert_image($banner['image'], 1) }}"></a>
                        <div class="text-banner">
                            <div class="container">
                                <h1>{!! nl2br($banner['name']) !!}</h1>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @elseif(count($Banner) == 1)
            @foreach ($Banner as $banner)
                <div class="">
                    <a href="{{ !empty($banner['link_th']) ? $banner['link_th'] : 'javascript:void(0);' }}"
                        {{ !empty($banner['link_th']) ? 'target="_blank"' : '' }}><img class="w-100"
                            src="{{ convert_image($banner['image'], 1) }}"></a>
                    <div class="text-banner">
                        <div class="container">
                            <h1>{!! nl2br($banner['name']) !!}</h1>
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <div class="">
                <img class="w-100" src="{{ convert_image('image', 1) }}">
                <div class="text-banner">
                    <div class="container">
                    </div>
                </div>
            </div>
        @endif

        <!-- About -->
        <section class="about">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="h-highlight">
                            <h2 class="htitle">{!! !empty($data['data_about']['data_about'][0]['name']) ? $data['data_about']['data_about'][0]['name'] : '' !!}</h2>
                            {{-- <h2 class="htitle">LABORATORY SERVICES</h2> --}}
                            <div class="btn-about">
                                <a href="{{ mwz_route('frontend.about') }}"><i class="fas fa-chevron-right"></i>
                                    {{ __('frontend.discover_more') }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box-text-about">
                            <div>{!! !empty($data['data_about']['data_about'][0]['description_1']) ? $data['data_about']['data_about'][0]['description_1'] : '' !!}</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- About -->

        <!-- Service -->
        <section class="service">
            <div class="slide-service carousel" data-dots="false" data-items="4" data-arrow="false">

                @if (!empty($data['data_service_cat']['data_header']))
                    @foreach ($data['data_service_cat']['data_header'] as $item)
                        <div class="slide">
                            <a href="{{ route('frontend.servicedetail', $item['id']) }}">
                                <div class="service-item">
                                    <img
                                        src="{{ !empty($item['image']) ? $item['image'] : asset('assets/images/home_service1.jpg') }}">
                                    <div class="test-service">
                                        <p>{{ $item['name'] }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @endif

            </div>
        </section>
        <!-- Service -->

        <!-- Content -->
        <section class="content-h cont-home"
            style="background-image: url({{ !empty($data['data_page']['image_page'])? $data['data_page']['image_page']: asset('assets/images/home_article.png') }});">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="h-highlight h-content-home">
                            <h2>{{ !empty($data['data_page']['name']) ? $data['data_page']['name'] : '' }}</h2>
                            <div class="s-content-home">
                                <div>{!! !empty($data['data_page']['description']) ? $data['data_page']['description'] : '' !!}</div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>
        </section>

        <section class="news">
            <div class="container">
                {{-- <h2 class="htitle">{{ $page_init['top_menus']->name }}</h2> --}}
                <h2 class="htitle" style="text-transform:uppercase ">{{ __('frontend.new_and_event') }}</h2>

                <div class="slide-news  carousel" data-dots="false" data-items="3" data-arrow="false">

                    @if (!empty($data['data_new']['data_news']))
                        @foreach ($data['data_new']['data_news'] as $item)
                            <div class="slide">
                                <a>
                                    <div class="news-item">
                                        <img src="{{ convert_image($item['image'], 2) }}">
                                        <div class="news-detail">
                                            <p class="news-date">{{ $item['publish_at'] }}</p>
                                            <h4 class="topic">{{ $item['name'] }}</h4>
                                            <div class="sub-detail">{!! !empty($item['description']) ? $item['description'] : '' !!}</div>
                                            <a href="{{ mwz_route('frontend.newsdetail', [$item['id']]) }}"
                                                class="read-more"><i class="fas fa-plus"></i>
                                                {{ __('frontend.read_more') }}</a>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    @endif

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

    <!-- Go to top button -->
    <a id="goToTop"><i class="fa fa-angle-up top-icon"></i><i class="fa fa-angle-up"></i></a>

@endsection

@section('script')

@endsection