@extends('frontend::layouts.master')
@section('content')
    @if (!empty($banner))
        <div id="slider" class="carousel" data-items="1" data-autoplay="true" data-autoplay="5000">
            @foreach ($banner as $item)
                @if ($item['type'] == 'image')
                    <div class="slide">
                        <!-- Start Text and Button - Comment out this section to display only the image link -->
                        <div class="slider-text-ctrl">
                            <div class="slider-text-over col-lg-6">
                                <div class="slider-text-over-title mb-3">{!! $item['name'] ?? '' !!}</div>
                                <div class="slider-text-over-desc">{!! $item['desc'] ?? '' !!}</div>
                                <div class="row g-0 gap-2 py-4">
                                    @if (!empty($item['btn_learn_more']))
                                        <div class="col-auto pr-0">
                                            <a href="{{ !empty($item['btn_learn_more_link']) ? $item['btn_learn_more_link'] : ($page_init['url']['solutions'] ?? '') }}"
                                                class="btn-ci btn-icn btn-ci-primary d-inline-block">
                                                {{ $item['btn_learn_more_name'] ?? __('frontend::text.btn.learn_more') }}<i class="fas fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    @endif
                                    @if (!empty($item['btn_contact']))
                                        <div class="col-auto pr-0">
                                            <a href="{{ !empty($item['btn_contact_link']) ? $item['btn_contact_link'] : ($page_init['url']['contact'] ?? '') }}"
                                                class="btn-ci btn-icn btn-ci-secondary d-inline-block">
                                                {{ $item['btn_contact_name'] ?? __('frontend::text.btn.contact_us') }}<i class="fas fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <!-- End Text and Button -->
                        <div class="slider-media-ctrl">
                            <a href="{{ $item['url'] ?? '' }}" target="_blank"><img src="{{ asset($item['src']) }}" alt="{!! $item['name'] ?? '' !!}"></a>
                        </div>
                    </div>
                @endif
                @if ($item['type'] == 'video')
                    <div class="slide">
                        <div class="slider-text-ctrl">
                            <div class="slider-text-over col-lg-6">
                                <div class="slider-text-over-title mb-3">{!! $item['name'] ?? '' !!}</div>
                                <div class="slider-text-over-desc">{!! $item['desc'] ?? '' !!}</div>
                                <div class="row g-0 gap-2 py-4">
                                    @if (!empty($item['btn_learn_more']))
                                        <div class="col-auto">
                                            <a href="{{ !empty($item['btn_learn_more_link']) ? $item['btn_learn_more_link'] : ($page_init['url']['solutions'] ?? '') }}"
                                                class="btn-ci btn-icn btn-ci-primary">
                                                {{ $item['btn_learn_more_name'] ?? __('frontend::text.btn.learn_more') }}<i class="fas fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    @endif
                                   
                                    @if (!empty($item['btn_contact']))
                                        <div class="col-auto">
                                            <a href="{{ !empty($item['btn_contact_link']) ? $item['btn_contact_link'] : ($page_init['url']['contact'] ?? '') }}" class="btn-ci btn-icn btn-ci-secondary">
                                                {{ $item['btn_contact_name'] ?? __('frontend::text.btn.contact_us') }}<i class="fas fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="slider-media-ctrl">
                            <video autoplay muted loop>
                                <source src="{{ $item['src'] ?? '' }}" type="video/mp4">
                            </video>
                        </div>
                    </div>
                @endif
                @if ($item['type'] == 'youtube')
                    <div class="slide">
                        <div class="slider-media-ctrl">
                            <iframe src="https://www.youtube.com/embed/{{ $item['src'] ?? '' }}?si=QX_40y3LEoh93GBn"
                                title="YouTube video player" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    @endif

    @if (!empty($article['detail']))
        <section class="bg-white py-5">
            <div class="container">
                {!! $article['detail'] !!}
                <div class="text-center">
                    <a href="{{ $page_init['url']['solutions'] ?? '' }}"
                        class="btn-ci btn-ci-secondary btn-icn text-decoration-none">
                        @lang('frontend::text.btn.learn_more') <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </section>
    @endif

    @if (!empty($machines) || !empty($film))
        <section class="py-5">
            <div class="container py-5">
                <div class="text-center mb-5">
                    <h2 class="fs-1 fw-bold mb-0">@lang('frontend::text.title.our_products')</h2>
                    <p>@lang('frontend::text.title.packaging_standards_redefined')</p>
                </div>

                <div class="row row-cols-1 row-cols-md-2 g-4">
                    @if (!empty($machines))
                        <div class="col">
                            <div class="card hover-card">
                                <div class="ratio ratio-16x9 position-relative">
                                    <img class="object-fit-cover" src="{{ asset($machines['image'] ?? '') }}"
                                        alt="{!! $machines['name'] ?? '' !!}">
                                    <div class="img-text-overlay">{!! $machines['name'] ?? '' !!}</div>
                                </div>
                                <div class="card-body d-flex flex-column">
                                    <div class="card-text">
                                    {!! $machines['text'] ?? '' !!}
                                    </div>
                                    <div class="mt-auto pt-3">
                                        <a href="{{ $page_init['url']['solutions'] ?? '' }}" class="btn btn-icn text-decoration-none">
                                            @lang('frontend::text.btn.our_solutions') <i class="fas fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    
                    @if (!empty($film))
                        <div class="col">
                            <div class="card hover-card">
                                <div class="ratio ratio-16x9 position-relative">
                                    <img class="object-fit-cover"
                                        src="{{ asset($film['image'] ?? '') }}"
                                        alt="{!! $film['name'] ?? '' !!}">
                                    <div class="img-text-overlay">{!! $film['name'] ?? '' !!}</div>
                                </div>
                                <div class="card-body d-flex flex-column">
                                    {{-- <div class="fw-bold fs-2 mb-2">{!! $film['name'] ?? '' !!}</div> --}}
                                    <div class="card-text">
                                        {!! $film['text'] ?? '' !!}
                                    </div>
                                    <div class="mt-auto pt-3">
                                        <a href="{{ $page_init['url']['solutions'] ?? '' }}" class="btn btn-icn text-decoration-none">
                                            @lang('frontend::text.btn.our_solutions') <i class="fas fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    
                </div>
            </div>
        </section>
    @endif
    
    @if (!empty($contact))
        <x-frontend::section.contact-n-question title="" subDescription="" description="{!! $contact['detail'] ?? '' !!}" image="{!! $contact['image'] ?? '' !!}" :toggleBtnContactUs=true :toggleBtnFindAnswers=false :toggleBtnGetInTouch=false :url="$page_init['url']" />
    @endif
@endsection