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

@section('style')

@endsection

@section('content')

    <main>
        <div class="container">
            <div class="flex items-center space-x-4 full-url py-[.5rem] lg:py-8">
                <img class="breadcrumb-size" src="{{ Module::asset('frontend:img/icon/chevron-circle-left.svg') }}"
                    alt="Alternate Text" />
                <p>{{ !empty($data['product']['category']['name']) ? $data['product']['category']['name'] : '' }}</p>
                <a href="{{ !empty($data['product']['category']['url']) ? $data['product']['category']['url'] : '#' }}"></a>
            </div>
            <div class="flex flex-wrap -mx-4">
                <div class="w-full lg:w-1/2 p-3">
                    <div class="prod-showcase">
                        <div class="splide flex-auto main-slider">
                            @if (!empty($data['product']))
                                <div class="splide mx-auto main-slider" id="main-slider">
                                    <div class="splide__track">
                                        <div class="splide__list">
                                            @foreach ($data['product']['image'] as $item)
                                                @if (!empty($item['image']) && CheckFileInServer($item['image']))
                                                    <div class="splide__slide">
                                                        <div class="img asp-1b1">
                                                            <img class="thumb" src="{{ $item['image'] }}" />
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="thumbnails relative" id="thumbnails">
                            @if (!empty($data['product']))
                                <div class="splide__track">
                                    <ul class="splide__list">
                                        @foreach ($data['product']['image'] as $item)
                                            @if (!empty($item['image']) && CheckFileInServer($item['image']))
                                                <li class="splide__slide">
                                                    <img src="{{ $item['image'] }}" />
                                                </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="w-full flex items-start lg:w-1/2 p-3 relative">
                    <div class="border border-gray shadow-rounded py-8 px-6 rounded-xl w-full sticky top-5">
                        <div class="font-medium text-base-2xl">
                            {{ !empty($data['product']['name']) ? $data['product']['name'] : '' }}
                        </div>
                        <div class="text-gray-dark">@lang('frontend::lang.code') :
                            <span class="text-uppercase">{{ !empty($data['product']['code']) ? $data['product']['code'] : '' }}</span>
                        </div>
                        <div class="font-light text-base-lg mt-8">
                            {{ !empty($data['product']['desc']) ? $data['product']['desc'] : '' }}
                        </div>
                        <hr class="mt-6 lg:mt-6 bg-gray" />
                        <div class="accordion product-selector-accordion" id="accordionExample">
                            @if (!empty($data['product']['size']))
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="DownloadHeading0">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#DownloadCollapse0" aria-expanded="false"
                                            aria-controls="DownloadCollapse0">
                                            <div class="text-base-lg font-medium w-full">
                                                <div class="flex items-center justify-between">
                                                    <p>@lang('frontend::lang.size')</p>
                                                    <p class="display-size pr-4" id="size">
                                                        {{ !empty($data['product']['size'][0]['name']) ? $data['product']['size'][0]['name'] : '' }}
                                                    </p>
                                                </div>
                                            </div>
                                        </button>
                                    </h2>
                                    <div class="accordion-collapse collapse" id="DownloadCollapse0"
                                        aria-labelledby="DownloadHeading0">
                                        <div class="accordion-body pb-[.25rem] lg:pb-4 px-2 pt-0">
                                            <div class="color-chooser">
                                                @foreach ($data['product']['size'] as $k => $item)
                                                    <div class="color-blk">
                                                        <input id="color_{{ $k }}" type="radio" name="color"
                                                            @if ($k == 0) checked @endif
                                                            value="{{ !empty($item['name']) ? $item['name'] : '' }}"
                                                            onchange="initSize('{{ !empty($item['name']) ? $item['name'] : '' }}');return;" />
                                                        <label
                                                            for="color_{{ $k }}">{{ !empty($item['name']) ? $item['name'] : '' }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                            @endif
                        </div>
                        @if (!empty($data['product']['color']))
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="DownloadHeading1">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#DownloadCollapse1" aria-expanded="false"
                                        aria-controls="DownloadCollapse1">
                                        <div class="text-base-lg font-medium w-full">
                                            <div class="flex items-center justify-between">
                                                <p>@lang('frontend::lang.color') </p>
                                                <p class="display-color pr-4" id="color">
                                                    {{ !empty($data['product']['color'][0]['name']) ? $data['product']['color'][0]['name'] : '' }}
                                                </p>
                                            </div>
                                        </div>
                                    </button>
                                </h2>
                                <div class="accordion-collapse collapse" id="DownloadCollapse1"
                                    aria-labelledby="DownloadHeading1">
                                    <div class="accordion-body pb-[.25rem] lg:pb-4 px-2 pt-0">
                                        <div class="color-chooser mop-to-weight">
                                            @foreach ($data['product']['color'] as $k => $item)
                                                <div class="color-blk">
                                                    <input id="weight-{{ $k }}" type="radio" name="weight"
                                                        @if ($k == 0) checked @endif
                                                        value="{{ !empty($item['name']) ? $item['name'] : '' }}"
                                                        onchange="initColor('{{ !empty($item['name']) ? $item['name'] : '' }}');return;">
                                                    <label for="weight-{{ $k }}"
                                                        style="background-color:{{ !empty($item['code']) ? $item['code'] : '#fff' }}"></label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="space-y-6 mt-[1.5rem]">
                        @if (!empty($page_init['contact']['line_oa']))
                            <button class="butn bg-linear-green full-url text-whiten w-full"
                                type="button">@lang('frontend::lang.place_order')
                                <a
                                    href="{{ !empty($page_init['contact']['line_oa']) ? $page_init['contact']['line_oa'] : '' }}"></a>
                            </button>
                        @endif
                        <button class="butn butn-2nd-bordered full-url w-full" type="button">@lang('frontend::lang.contact_sing')
                            <a
                                href="{{ !empty($data['route']['contact']['url']) ? $data['route']['contact']['url'] : '' }}"></a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="container my-6 lg:my-10">
            <div class="border-b-2 border-gray-light text-center mb-8">
                <div class="font-medium text-base-2xl text-1st border-b-2 border-1st inline-block px-6 py-2"
                    style="margin-bottom: -2px;">@lang('frontend::lang.product_detail')</div>
            </div>
            <div class="text-editor">
                {!! !empty($data['product']['detail']) ? $data['product']['detail'] : '' !!}
            </div>
        </div>
    </main>
@endsection

@section('script')

    <script>
        function productSplide() {
            var main = new Splide('#main-slider', {
                type: 'fade',
                rewind: true,
                pagination: false,
                arrows: false,
            });
            var thumbnails = new Splide('#thumbnails', {
                gap: 10,
                rewind: true,
                fixedWidth: 80,
                fixedHeight: 80,
                pagination: false,
                arrows: true,
                cover: true,
                focus: 'left',
                isNavigation: true,
                breakpoints: {},
            });
            main.sync(thumbnails);
            main.mount();
            thumbnails.mount();
        }

        productSplide()
        $(window).resize(function() {
            productSplide()
        })

        $('.thumb').wrap('<span style="display:block;"></span>').css('display', 'block').parent().zoom({
            magnify: 3.75
        });

        initSize = function(str) {
            $('#size').html(str);
        }
        initColor = function(str) {
            $('#color').html(str);
        }
    </script>

@endsection