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

@section('style')
    <style>
        .splide__slide {
            display: flex !important;
        }

        .splide_center {
            align-self: center !important;

        }

    </style>
@endsection

@section('content')

    <main>
        <div class="homebg relative">
            <div class="fade-head"
                style="background-image:url({{ Module::asset('frontend:img/project/rerere.png') }})">
            </div>
            @if (!empty($data['banner']))
                <div class="cccssld splide">
                    <div class="splide__track">
                        <div class="splide__list">
                            @foreach ($data['banner'] as $item)
                                @if (!empty($item['video']) && CheckFileInServer($item['video']))
                                    <div class="splide__slide relative" style="background: black;" data-splide-html-video="{{ URL::asset($item['video']) }}">
                                        <img class="object-cover" src="{{ convert_image($item['image'], 4) }}"
                                            alt="Alternate Text" />
                                    </div>
                                @elseif(!empty($item['video_link']))
                                    <div class="splide__slide" data-splide-youtube="{{ $item['video_link'] }}">
                                        <img class="object-cover" src="{{ convert_image($item['image'], 4) }}"
                                            alt="Alternate Text" />
                                    </div>
                                @else
                                    <div class="splide__slide">
                                        <img class="object-cover" src="{{ convert_image($item['image'], 4) }}"
                                            alt="Alternate Text" />
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <div class="bg-bottom lg:bg-right bg-no-repeat bg-contain"
            style="background-image:url({{ Module::asset('frontend:img/project/sdf.svg') }})">
            <div class="flex lg:space-x-12 flex-col lg:flex-row">
                <div class="lg:w-6/12 flex">
                    <div>
                        <img src="{{ convert_image($data['page']['image'], 2) }}" alt="Alternate Text" />
                    </div>
                </div>
                <div class="lg:w-6/12 flex flex-col items-center lg:items-start px-4 md:px-8">
                    {!! !empty($data['page']['description']) ? $data['page']['description'] : '' !!}
                    <div class="py-8 inline-block max-auto">
                        <a href="{{ mwz_route('frontend.about') }}" class="butn-1st butn-icon text-white">
                            <div class="txt text-white">{{ __('frontend.discover_more') }}</div>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white icor" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17 8l4 4m0 0l-4 4m4-4H3" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @if (!empty($service))
            <div class="bg-world"
                style="background-image:url({{ Module::asset('frontend:img/project/world.svg') }})">
                <div class="bg-opg">
                    <div class="the-container pt-4 pb-20">
                        <svg width="80" height="5" class="mx-auto mt-8" viewBox="0 0 80 5" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <line y1="2.5" x2="80" y2="2.5" stroke="#FFA600" stroke-width="5" />
                        </svg>
                        <div class="text-center">
                            <div class="bluehd">{{ __('frontend.our_services') }}
                                <div class="date">
                                    {!! !empty($data['page']['desc_1']) ? $data['page']['desc_1'] : '' !!}
                                </div>
                            </div>
                            <div class="ondsld splide">
                                <div class="splide__track">
                                    <div class="splide__list">
                                        @foreach ($service as $item)
                                            <div class="splide__slide" data-splide-interval="4000">
                                                <div class="service-card h-full">
                                                    <div class="cn">
                                                        <img src="{{ convert_image($item['image'], 2) }}"
                                                            alt="Alternate Text" />
                                                        <div class="text-1st text-xl font-bold">
                                                            {{ !empty($item['service_name']) ? $item['service_name'] : '' }}
                                                        </div>
                                                        <p>{{ !empty($item['detail']) ? $item['detail'] : '' }}</p>
                                                    </div>
                                                    <a class="flex items-center uppercase text-1st justify-center"
                                                        href="{{ mwz_route('frontend.service-detail', [$item['id']]) }}">
                                                        {{ __('frontend.read_more') }}<svg width="25" height="16"
                                                            class="ml-2" viewBox="0 0 35 16" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M34.7071 8.70711C35.0976 8.31658 35.0976 7.68342 34.7071 7.29289L28.3431 0.928932C27.9526 0.538408 27.3195 0.538408 26.9289 0.928932C26.5384 1.31946 26.5384 1.95262 26.9289 2.34315L32.5858 8L26.9289 13.6569C26.5384 14.0474 26.5384 14.6805 26.9289 15.0711C27.3195 15.4616 27.9526 15.4616 28.3431 15.0711L34.7071 8.70711ZM0 9H34V7H0V9Z"
                                                                fill="#175A87" />
                                                        </svg></a>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if (!empty($news))
            <div class="the-container pt-4 mb-10"><svg width="80" height="5" class="mx-auto mt-8" viewBox="0 0 80 5"
                    fill="none" xmlns="http://www.w3.org/2000/svg">
                    <line y1="2.5" x2="80" y2="2.5" stroke="#FFA600" stroke-width="5" />
                </svg>
                <div class="text-center">
                    <div class="bluehd">{{ __('frontend.new_activity') }}
                        <div class="date"> {!! !empty($data['page']['desc_2']) ? $data['page']['desc_2'] : '' !!}
                        </div>
                    </div>
                </div>
                @foreach ($news as $i => $item)
                    @if ($i == 0)
                        <div class="horizontal-xl">
                            <div class="content-block">
                                <div class="product-card-img">
                                    <img src="{{ convert_image($item['image'], 4) }}" alt="Alternate Text" />
                                    <a href="{{ mwz_route('frontend.blog-detail', [$item['id']]) }}"></a>
                                </div>
                                <div class="product-card-detail">
                                    <div class="flex items-center">
                                        <div class="date mr-2">
                                            <p class="date-num">
                                                {{ !empty($item['publish_at']) ? set_format_day($item['publish_at']) : '' }}
                                            </p>
                                            <p style="font-size: 10px !important">
                                                {{ !empty($item['publish_at']) ? set_format_date($item['publish_at']) : '' }}
                                            </p>
                                        </div>
                                        <div class="relative">
                                            <p class="detail">{{ !empty($item['name']) ? $item['name'] : '' }}
                                            </p>
                                            <a class="full-link"
                                                href="{{ mwz_route('frontend.blog-detail', [$item['id']]) }}"></a>
                                        </div>
                                    </div>
                                    <a class="flex items-center uppercase"
                                        href="{{ mwz_route('frontend.blog-detail', [$item['id']]) }}">
                                        {{ __('frontend.read_more') }}<svg width="25" height="16" class="ml-2"
                                            viewBox="0 0 35 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M34.7071 8.70711C35.0976 8.31658 35.0976 7.68342 34.7071 7.29289L28.3431 0.928932C27.9526 0.538408 27.3195 0.538408 26.9289 0.928932C26.5384 1.31946 26.5384 1.95262 26.9289 2.34315L32.5858 8L26.9289 13.6569C26.5384 14.0474 26.5384 14.6805 26.9289 15.0711C27.3195 15.4616 27.9526 15.4616 28.3431 15.0711L34.7071 8.70711ZM0 9H34V7H0V9Z"
                                                fill="#175A87" />
                                        </svg></a>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
                <div class="grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($news as $i => $item)
                        @if ($i > 0)
                            <div class="content-block">
                                <div class="product-card-img">
                                    <img src="{{ convert_image($item['image'], 4) }}" alt="Alternate Text" />
                                    <a href="{{ mwz_route('frontend.blog-detail', [$item['id']]) }}"></a>
                                </div>
                                <div class="product-card-detail">
                                    <div class="flex items-center">
                                        <div class="date mr-2">
                                            <p class="date-num">
                                                {{ !empty($item['publish_at']) ? set_format_day($item['publish_at']) : '' }}
                                            </p>
                                            <p style="font-size: 10px !important">
                                                {{ !empty($item['publish_at']) ? set_format_date($item['publish_at']) : '' }}
                                            </p>
                                        </div>
                                        <div class="relative">
                                            <p class="detail">
                                                {{ !empty($item['name']) ? $item['name'] : '' }}</p>
                                            <a class="full-link"
                                                href="{{ mwz_route('frontend.blog-detail', [$item['id']]) }}"></a>
                                        </div>
                                    </div>
                                    <a class="flex items-center uppercase"
                                        href="{{ mwz_route('frontend.blog-detail', [$item['id']]) }}">
                                        {{ __('frontend.read_more') }}<svg width="25" height="16" class="ml-2"
                                            viewBox="0 0 35 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M34.7071 8.70711C35.0976 8.31658 35.0976 7.68342 34.7071 7.29289L28.3431 0.928932C27.9526 0.538408 27.3195 0.538408 26.9289 0.928932C26.5384 1.31946 26.5384 1.95262 26.9289 2.34315L32.5858 8L26.9289 13.6569C26.5384 14.0474 26.5384 14.6805 26.9289 15.0711C27.3195 15.4616 27.9526 15.4616 28.3431 15.0711L34.7071 8.70711ZM0 9H34V7H0V9Z"
                                                fill="#175A87" />
                                        </svg></a>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif
    </main>
@endsection

@section('script')

    <script>
        lsdd('.ondsld')
        videoSplide('.cccssld')
    </script>

@endsection