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

@section('style')

@endsection

@section('content')
    <main>
        <div class="the-container py-8">
            <div class="flex items-center space-x-2 justify-start">
                <div class="full-url">
                    <img class="w-5" src="{{ Module::asset('frontend:img/icon/home.svg') }}" />
                    <a href="{{ url('') }}"></a>
                </div>
                <div>/ </div>
                <div class="full-url">
                    {{ !empty($data['products']['name']) ? $data['products']['name'] : "" }}
                    @if (!empty($page_init['products_url']))
                        <a href="{{ $page_init['products_url'] }}"></a>
                    @endif
                </div>
            </div>
            <div class="flex -mx-4 flex-wrap -mx-4 pt-6">
                <div class="w-full lg:w-7/12 p-3">
                    <div class="prod-showcase">
                        <div class="splide flex-auto main-slider">
                            <div class="splide mx-auto main-slider" id="main-slider">
                                <div class="splide__track">
                                    <div class="splide__list">
                                        @if (!empty($data['products']['image']))
                                            @foreach ($data['products']['image'] as $image)
                                                <div class="splide__slide">
                                                    <div class="img asp-1b1">
                                                        @if (!empty($image['image']))
                                                            <img class="thumb object-contain w-full" src="{{ asset($image['image']) }}" />
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="splide thumbnails relative" id="thumbnails">
                            <div class="splide__track">
                                <ul class="splide__list">
                                    @if (!empty($data['products']['image']))
                                        @foreach ($data['products']['image'] as $images)
                                           @if (!empty($images['image']))
                                            <li class="splide__slide">
                                                <div class="img-wrapper">
                                                    <img src="{{ asset($images['image']) }}" />
                                                </div>
                                            </li>
                                           @endif
                                        @endforeach
                                    @endif
                                </ul>
                                <div class="splide__arrows"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-5/12 p-3 text-whiten text-editor">
                    <div class="md:block">
                        <p class="fs-30 th-6  text-red">{{ !empty($data['products']['name']) ? $data['products']['name'] : "" }}</p>
                    </div>
                    {!!  !empty($data['products']['detail']) ? $data['products']['detail'] : "" !!}
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')


@endsection