@extends('landing.layouts.app')

@push('prepend-style')
    <link href="{{ asset('assets/libs/tobii/css/tobii.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/libs/tiny-slider/tiny-slider.css') }}" rel="stylesheet">
@endpush

@section('content')
    @include('landing.includes.loading')
    @include('landing.includes.navbar')

    <!-- Start Hero -->
    <section class="relative w-full bg-no-repeat bg-center bg-cover">
        <video id="background-video" class="w-full h-screen object-cover" autoplay="" loop="" muted="">
            <source src="{{ asset('assets/videos/video_1.mp4') }}" type="video/mp4">
        </video>
{{--        <div class="overflow-hidden relative h-screen inset-0">--}}
{{--            <div class="flex items-center justify-center duration-700 ease-in-out" data-carousel-item="active">--}}
{{--                <div--}}
{{--                    class="image-wrap absolute inset-0 -top-[350px] -bottom-[350px] -start-[100px] -end-[100px] min-w-full w-auto min-h-full h-auto overflow-hidden m-auto z-1 bg-top bg-no-repeat bg-cover"--}}
{{--                    style="background-image: url('{{ asset('assets/images/business/bg01.jpg') }}');"></div>--}}
{{--                <div--}}
{{--                    class="absolute inset-0 ltr:md:bg-gradient-to-r rtl:md:bg-gradient-to-l md:from-slate-900 md:via-slate-900/80 md:bg-slate-900/20 bg-slate-900/70 z-2"></div>--}}
{{--                <div class="container relative z-3">--}}
{{--                    <div class="grid grid-cols-1 mt-10">--}}
{{--                        <div class="md:text-start text-center">--}}
{{--                            <h1 class="font-bold text-white lg:leading-normal leading-normal text-4xl lg:text-5xl mb-6">--}}
{{--                                {{ __('landing.hero.title_1') }}--}}
{{--                            </h1>--}}
{{--                            <p class="text-white/70 text-lg max-w-xl">--}}
{{--                                {{ __('landing.hero.subtitle_1') }}--}}
{{--                            </p>--}}

{{--                            <div class="mt-8">--}}
{{--                                <a href="#contactUs"--}}
{{--                                   class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-primary-600 hover:bg-primary-700 border-primary-600 hover:border-primary-700 text-white rounded-md">--}}
{{--                                    {{ __('landing.nav.contact') }}--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div><!--end grid-->--}}
{{--                </div><!--end container-->--}}
{{--            </div>--}}
{{--            <div class="flex items-center justify-center duration-700 ease-in-out" data-carousel-item="">--}}
{{--                <div class="absolute inset-0 image-wrap z-1 bg-top bg-no-repeat bg-cover"--}}
{{--                     style="background-image: url('{{ asset('assets/images/business/bg02.jpg') }}');"></div>--}}
{{--                <div--}}
{{--                    class="absolute inset-0 md:bg-gradient-to-b md:from-transparent md:to-slate-900 md:bg-slate-900/20 bg-slate-900/70 z-2"></div>--}}
{{--                <div class="container relative z-3">--}}
{{--                    <div class="grid grid-cols-1 mt-10">--}}
{{--                        <div class="text-center">--}}
{{--                            <h1 class="font-bold text-white lg:leading-normal leading-normal text-4xl lg:text-5xl mb-6">--}}
{{--                                {{ __('landing.hero.title_2') }}--}}
{{--                            </h1>--}}
{{--                            <p class="text-white/70 text-lg max-w-xl mx-auto">--}}
{{--                                {{ __('landing.hero.subtitle_2') }}--}}
{{--                            </p>--}}

{{--                            <div class="mt-8">--}}
{{--                                <a href="#service"--}}
{{--                                   class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-primary-600 hover:bg-primary-700 border-primary-600 hover:border-primary-700 text-white rounded-md">--}}
{{--                                    {{ __('landing.service.hero') }}--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div><!--end grid-->--}}
{{--                </div><!--end container-->--}}
{{--            </div>--}}
{{--            @foreach($banners as $banner)--}}
{{--                @if($banner->position_content == 'left')--}}
{{--                    <div class="flex items-center justify-center duration-700 ease-in-out" data-carousel-item="">--}}
{{--                        <div class="absolute inset-0 image-wrap z-1 bg-top bg-no-repeat bg-cover"--}}
{{--                             style="background-image: url('{{ $banner->media()?->first()?->original_url }}');"></div>--}}
{{--                        <div--}}
{{--                            class="absolute inset-0 md:bg-gradient-to-b md:from-transparent md:to-slate-900 md:bg-slate-900/20 bg-slate-900/70 z-2"></div>--}}
{{--                        <div class="container relative z-3">--}}
{{--                            <div class="grid grid-cols-1 mt-10">--}}
{{--                                <div class="md:text-start text-center">--}}
{{--                                    <h1 class="font-bold text-white lg:leading-normal leading-normal text-4xl lg:text-5xl mb-6">{{ $banner->title }}</h1>--}}
{{--                                    <p class="text-white/70 text-lg max-w-xl">{{ $banner->description }}</p>--}}

{{--                                    <div class="mt-8">--}}
{{--                                        <a href="{{ $banner->click_url }}" target="{{ $banner->click_url_target }}"--}}
{{--                                           class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-primary-600 hover:bg-primary-700 border-primary-600 hover:border-primary-700 text-white rounded-md">{{ $banner->button_title }}</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div><!--end grid-->--}}
{{--                        </div><!--end container-->--}}
{{--                    </div>--}}
{{--                @elseif($banner->position_content == 'center')--}}
{{--                    <div class="flex items-center justify-center duration-700 ease-in-out" data-carousel-item="">--}}
{{--                        <div class="absolute inset-0 image-wrap z-1 bg-top bg-no-repeat bg-cover"--}}
{{--                             style="background-image: url('{{ $banner->media()?->first()?->original_url }}');"></div>--}}
{{--                        <div--}}
{{--                            class="absolute inset-0 md:bg-gradient-to-b md:from-transparent md:to-slate-900 md:bg-slate-900/20 bg-slate-900/70 z-2"></div>--}}
{{--                        <div class="container relative z-3">--}}
{{--                            <div class="grid grid-cols-1 mt-10">--}}
{{--                                <div class="text-center">--}}
{{--                                    <h1 class="font-bold text-white lg:leading-normal leading-normal text-4xl lg:text-5xl mb-6">{{ $banner->title }}</h1>--}}
{{--                                    <p class="text-white/70 text-lg max-w-xl mx-auto">{{ $banner->description }}</p>--}}

{{--                                    <div class="mt-8">--}}
{{--                                        <a href="{{ $banner->click_url }}" target="{{ $banner->click_url_target }}"--}}
{{--                                           class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-primary-600 hover:bg-primary-700 border-primary-600 hover:border-primary-700 text-white rounded-md">{{ $banner->button_title }}</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div><!--end grid-->--}}
{{--                        </div><!--end container-->--}}
{{--                    </div>--}}
{{--                @else--}}
{{--                    <div class="flex items-center justify-center duration-700 ease-in-out" data-carousel-item="">--}}
{{--                        <div class="absolute inset-0 image-wrap z-1 bg-top bg-no-repeat bg-cover"--}}
{{--                             style="background-image: url('{{ $banner->media()?->first()?->original_url }}');"></div>--}}
{{--                        <div--}}
{{--                            class="absolute inset-0 ltr:md:bg-gradient-to-l rtl:md:bg-gradient-to-r md:from-slate-900 md:via-slate-900/80 md:bg-slate-900/20 bg-slate-900/70 z-2"></div>--}}
{{--                        <div class="container relative z-3">--}}
{{--                            <div class="grid grid-cols-1 mt-10">--}}
{{--                                <div class="md:text-end text-center">--}}
{{--                                    <h1 class="font-bold text-white lg:leading-normal leading-normal text-4xl lg:text-5xl mb-6">{{ $banner->title }}</h1>--}}
{{--                                    <p class="text-white/70 text-lg max-w-xl md:ms-auto">{{ $banner->description }}</p>--}}

{{--                                    <div class="mt-8">--}}
{{--                                        <a href="{{ $banner->click_url }}" target="{{ $banner->click_url_target }}"--}}
{{--                                           class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-primary-600 hover:bg-primary-700 border-primary-600 hover:border-primary-700 text-white rounded-md">{{ $banner->button_title }}</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div><!--end grid-->--}}
{{--                        </div><!--end container-->--}}
{{--                    </div>--}}
{{--                @endif--}}
{{--            @endforeach--}}
{{--        </div>--}}

{{--        <button type="button"--}}
{{--                class="flex absolute top-0 start-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"--}}
{{--                data-carousel-prev="">--}}
{{--                <span--}}
{{--                    class="inline-flex justify-center items-center size-8 rounded-full border border-white hover:border-primary-600 hover:bg-primary-600 group-focus:outline-none">--}}
{{--                    <svg class="size-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"--}}
{{--                         xmlns="http://www.w3.org/2000/svg">--}}
{{--                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"--}}
{{--                              d="M15 19l-7-7 7-7"></path>--}}
{{--                    </svg>--}}
{{--                    <span class="hidden">Previous</span>--}}
{{--                </span>--}}
{{--        </button>--}}
{{--        <button type="button"--}}
{{--                class="flex absolute top-0 end-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"--}}
{{--                data-carousel-next="">--}}
{{--                <span--}}
{{--                    class="inline-flex justify-center items-center size-8 rounded-full border border-white hover:border-primary-600 hover:bg-primary-600 group-focus:outline-none">--}}
{{--                    <svg class="size-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"--}}
{{--                         xmlns="http://www.w3.org/2000/svg">--}}
{{--                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>--}}
{{--                    </svg>--}}
{{--                    <span class="hidden">Next</span>--}}
{{--                </span>--}}
{{--        </button>--}}
    </section><!--end section-->
    <!-- End Hero -->

    <!-- Business Partner -->
    <div class="container relative mb-16 mt-8">
        <div class="grid grid-cols-1 pb-4 text-center">
            <h6 class="text-slate-400 text-lg">{{  __('landing.partner.title') }}</h6>
        </div><!--end grid-->

        <div class="grid md:grid-cols-6 grid-cols-2 justify-center gap-[30px]">
            @foreach($partners as $partner)
                <div class="mx-auto mt-8">
                    <img src="{{ $partner->media()?->first()?->original_url }}" class="h-16" alt="">
                </div>
            @endforeach
        </div><!--end grid-->
    </div><!--end container-->
    <!-- Business Partner -->

    <!-- About -->
    <section class="py-20 w-full table relative bg-center bg-no-repeat bg-cover"
             style="background-image: url('{{ asset('assets/images/digital/bg01.jpg') }}');">
        <div class="container relative">
            <div class="flex">
                <div
                    class="lg:w-1/3 md:w-1/2 sm:w-2/3 p-6 rounded-md shadow-md dark:shadow-gray-800 bg-white dark:bg-slate-900">
                    <h6 class="text-primary-600 font-semibold mb-2">{{ $generalSettings->brand_name }}</h6>
                    <h4 class="mb-4 md:text-[28px]] text-2xl leading-normal font-bold">
                        {!! __('landing.about.title_1') !!}
                        <span class="text-primary-600 typewrite"
                              data-period="2000"
                              data-type='["Software", "Technology", "Webapps" ]'>
                            <span class="wrap"></span>
                        </span>
                        {!! __('landing.about.title_2') !!}
                    </h4>
                    <p class="text-slate-400 mb-0">
                        {{ __('landing.about.description') }}
                    </p>
                </div>
            </div><!--end grid-->
        </div><!--end container-->
    </section><!--end section-->
    <!-- About -->

    <!-- Service -->
    <section class="relative md:py-24 py-16" id="service">
        <div class="container relative">
            <div class="grid grid-cols-1 pb-8 text-center">
                <h6 class="text-primary-600 font-semibold mb-2">{{ __('landing.service.text') }}</h6>
                <h3 class="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">{{ __('landing.service.title') }}</h3>

                <p class="text-slate-400 max-w-xl mx-auto">{{ __('landing.service.subtitle') }}</p>
            </div><!--end grid-->

            <div class="grid grid-cols-1 lg:grid-cols-4 md:grid-cols-2 mt-8 gap-[30px] place-items-center">
                @foreach($services as $service)
                    <div class="text-center md:px-6">
                        <div
                            class="size-28 bg-{{ $service->color }}-600/5 text-{{ $service->color }}-600 rounded-3xl text-4xl flex align-middle justify-center items-center shadow-sm dark:shadow-gray-800 mx-auto">
                            <x-icon :name="$service->icon" class="h-16 w-16"/>
                        </div>
                        <div class="content mt-7">
                            <a href="#"
                               class="title h5 text-lg font-medium hover:text-primary-600">{{ $service->title }}</a>
                            <p class="text-slate-400 mt-3">{{ $service->description }}</p>
                        </div>
                    </div>
                @endforeach
            </div><!--end grid-->
        </div><!--end container-->

        <div class="container relative md:mt-24 mt-16">
            <div class="grid grid-cols-1 pb-8 items-end">
                <h3 class="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">{{ __('landing.service.latest_project_title') }}</h3>
                <p class="text-slate-400 max-w-xl">{{ __('landing.service.latest_project_description') }}</p>
            </div><!--end grid-->
        </div><!--end container-->

        <div class="container-fluid relative mt-8">
            <div class="grid grid-cols-1 mt-8">
                <div class="tiny-six-item">
                    @foreach($projects as $project)
                        <div class="tiny-slide">
                            <div class="group relative block overflow-hidden rounded-md duration-500 mx-2">
                                <a href="{{ $project->media()?->first()?->original_url }}" class="lightbox duration-500 group-hover:scale-105" title="">
                                    <img src="{{ $project->media()?->first()?->original_url }}" class="" alt="work-image">
                                </a>
                                <div class="absolute -bottom-52 group-hover:bottom-2 start-2 end-2 duration-500 bg-white dark:bg-slate-900 p-4 rounded shadow dark:shadow-gray-800">
                                    <a href="{{ $project->url }}" target="_blank" class="hover:text-primary-600 text-lg duration-500 font-medium">{{ $project->title }}</a>
                                    <p class="text-slate-400 text-sm">{{ $project->description }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div><!--end container-->
    </section><!--end section-->
    <!-- Service -->

    <!-- Testimonial, Information, Contact -->
    <section class="relative md:py-24 py-16">
        <div class="container relative">
            <div class="grid grid-cols-1 pb-8 text-center">
                <h6 class="text-primary-600 font-semibold mb-2">{{ __('landing.testimonial.text') }}</h6>
                <h3 class="mb-6 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
                    {!! __('landing.testimonial.title') !!}
                </h3>

                <p class="text-slate-400 max-w-xl mx-auto">
                    {{ __('landing.testimonial.subtitle') }}
                </p>
            </div><!--end grid-->

            <div class="grid grid-cols-1 mt-8">
                <div class="tiny-three-item">
                    @foreach($testimonials as $testimonial)
                        <div class="tiny-slide text-center">
                            <div class="cursor-e-resize">
                                <div
                                    class="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900 before:content-[''] before:absolute before:start-1/2 before:-bottom-[4px] before:box-border before:border-8 before:rotate-[45deg] before:border-t-transparent before:border-e-white dark:before:border-e-slate-900 before:border-b-white dark:before:border-b-slate-900 before:border-s-transparent before:shadow-testi dark:before:shadow-gray-700 before:origin-top-left">
                                    <i class="mdi mdi-format-quote-open mdi-48px text-primary-600"></i>
                                    <p class="text-slate-400">" {{ $testimonial->review }} "</p>
                                    <ul class="list-none mb-0 mt-3">
                                        <li class="inline {{ $testimonial->rating >= 1 ? 'text-amber-400' : 'text-gray-400' }}">
                                            <i class="mdi mdi-star"></i></li>
                                        <li class="inline {{ $testimonial->rating >= 2 ? 'text-amber-400' : 'text-gray-400' }}">
                                            <i class="mdi mdi-star"></i></li>
                                        <li class="inline {{ $testimonial->rating >= 3 ? 'text-amber-400' : 'text-gray-400' }}">
                                            <i class="mdi mdi-star"></i></li>
                                        <li class="inline {{ $testimonial->rating >= 4 ? 'text-amber-400' : 'text-gray-400' }}">
                                            <i class="mdi mdi-star"></i></li>
                                        <li class="inline {{ $testimonial->rating >= 5 ? 'text-amber-400' : 'text-gray-400' }}">
                                            <i class="mdi mdi-star"></i></li>
                                    </ul>
                                </div>

                                <div class="text-center mt-5">
                                    <img src="{{ $testimonial->media()?->first()?->original_url }}"
                                         class="size-14 rounded-full shadow-md mx-auto" alt="">
                                    <h6 class="mt-2 font-semibold">{{ $testimonial->name }}</h6>
                                    <span
                                        class="text-slate-400 text-sm">{{ $testimonial->position }} at {{ $testimonial->company }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div><!--end grid-->
        </div><!--end container-->

        <div class="container relative md:mt-24 mt-16">
            <div class="absolute inset-0 opacity-25 dark:opacity-50 bg-no-repeat bg-center bg-cover"
                 style="background-image: url('{{ asset('assets/images/map.png') }}');"></div>
            <div class="grid md:grid-cols-12 grid-cols-1 pb-8 items-end">
                <div class="lg:col-span-8 md:col-span-6 md:text-start text-center">
                    <h6 class="text-primary-600 font-semibold mb-2">{{ __('landing.information.news') }}</h6>
                    <h3 class="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
                        {!! __('landing.information.title') !!}
                    </h3>
                    <p class="text-slate-400 max-w-xl">{{ __('landing.information.subtitle') }}</p>
                </div>

                <div class="lg:col-span-4 md:col-span-6 md:text-end hidden md:block">
                    <a href="{{ route('landing.blogs') }}"
                       class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-primary-600 hover:text-primary-600 after:bg-primary-600 duration-500 ease-in-out">
                        {{ __('landing.information.see_more') }} <i class="uil uil-arrow-right align-middle"></i></a>
                </div>
            </div><!--end grid-->

            <div class="relative grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 mt-8 gap-[30px]">
                @foreach($blogs as $blog)
                    <div
                        class="blog bg-white dark:bg-slate-900 relative rounded-md shadow dark:shadow-gray-800 overflow-hidden">
                        <img src="{{ $blog->media()?->first()?->original_url }}" alt="">

                        <div class="content p-6">
                            <a href="{{ route('landing.blog.detail', ['slug' => $blog->slug]) }}"
                               class="title h5 text-lg font-medium hover:text-primary-600 duration-500 ease-in-out">
                                {{ $blog->title }}
                            </a>
                            <p class="text-slate-400 mt-3">
                                {{ $blog->content_overview }}
                            </p>

                            <div class="mt-4">
                                <a href="{{ route('landing.blog.detail', ['slug' => $blog->slug]) }}"
                                   class="relative inline-block tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 font-normal hover:text-primary-600 after:bg-primary-600 duration-500 ease-in-out">
                                    {{ __('landing.information.read_more') }} <i class="uil uil-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div><!--end grid-->
        </div><!--end container-->

        <div class="container relative md:mt-24 mt-16">
            <div class="grid grid-cols-1 text-center">
                <h6 class="text-primary-600 text-sm font-bold mb-2" id="contactUs">{{ __('landing.nav.contact') }}</h6>
                <h3 class="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
                    {{ __('landing.contact.have_question') }}
                </h3>

                <p class="text-slate-400 max-w-xl mx-auto">
                    {{ __('landing.contact.tell_us') }}
                </p>

                <div class="mt-6">
                    <a href="{{ route('landing.contact') }}"
                       class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-primary-600 hover:bg-primary-700 border-primary-600 hover:border-primary-700 text-white rounded-full">
                        {{ __('landing.contact.title') }}
                    </a>
                </div>
            </div><!--end grid-->
        </div><!--end container-->
    </section><!--end section-->
    <!-- Testimonial, Information, Contact -->

    @include('landing.includes.footer_short')
    @include('landing.includes.cookie_popup')
    @include('landing.includes.whatsapp')
    @include('landing.includes.phone')
    @include('landing.includes.back_to_top')
    @include('landing.includes.switcher')
@endsection

@push('prepend-script')
    <script src="{{ asset('assets/libs/tobii/js/tobii.min.js') }}"></script>
    <script src="{{ asset('assets/libs/tiny-slider/min/tiny-slider.js') }}"></script>
    <script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
@endpush