@extends('layouts.lookatme')

@section('title', trans('message.product_detail'))

@section('breadcrumb')
    <li class="breadcrumb-item">
        @if(request('product_group'))
            <a href="{{ route('product-list.index',['product_group' => request('product_group')]) }}">{{ request('product_group') }}</a>
        @else
            <a href="{{ route('product-list.index') }}">{{ trans('message.product') }}</a>
        @endif
    </li>
    <li class="breadcrumb-item active">
        {{ trans('message.product_detail') }}
    </li>
@endsection

@section('content')
    <div class="tw-px-8 2xl:tw-px-12">
        <div class="tw-grid tw-grid-cols-12 tw-gap-6" id="product-details">
            <div class="tw-col-span-4">
                <div class="carousel product-image-preview">
                    <div class="">
                        <a role="button"
                           class="preview-img-click"
                           @click=""
                           data-src="{{ $product_info->picture_url }}">
                            <img class="tw-w-full tw-rounded" src="{{ $product_info->picture_url }}"
                                 alt="image">
                        </a>
                    </div>
                    @foreach($product_info->productGalleries as $galleries)
                        <div class="">
                            <a role="button" class="preview-img-click"
                               @click=""
                               data-src="{{ $galleries->picture_url }}">
                                <img class="tw-w-full tw-rounded"
                                     src="{{ $galleries->picture_url }}"
                                     alt="image">
                            </a>
                        </div>
                    @endforeach
                    @if($product_info->video_url !=='')
                        <div class="tw-flex tw-justify-center tw-items-center">
                            <a role="button"
                               data-src="{{ $product_info->video_url }}"
                               data-is-video="1"
                               class="preview-img-click tw-relative">
                                <img class="tw-w-full tw-rounded" src="{{ $product_info->video_thumbnail_url }}"
                                     alt="Video">
                                <i class="fa fa-play-circle tw-text-5xl
                                          tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0
                                          tw-flex tw-justify-center tw-items-center"></i>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
            <section class="tw-flex tw-flex-col tw-justify-start tw-mt-8 tw-col-span-8">
                <div class="tw-mb-8">
                    <h2 class="tw-m-0">{{ $product_info->name }}</h2>
                    <div class="tw-mt-8 tw-font-bold">
                        <span v-if="getDiscountPrice !== ''" class="tw-text tw-mr-2 text-danger">
                            @{{ getDiscountPrice }}
                        </span>
                        <span :class="{'text-danger': !price,'tw-line-through tw-text-gray-400 tw-decoration-2': getDiscountPrice !== ''}"
                              id="price">
                            @{{ getPrice }}
                        </span>
                    </div>
                </div>
                <div class="divider"></div>
                @if(!empty($product_info->product_options))
                    @foreach($product_info->product_options as $option)
                                                <div class="tw-my-8">
                            <div class="">
                                <span class="tw-text-gray-400 tw-mr-1">{{ $option->title }}</span>
                                @if(!(bool)$optionProperty->is_color)
                                    <a role="button" data-bs-toggle="modal" data-bs-target="#size-guide"
                                       class="tw-text-green-400">
                                        {{ trans('message.size_guide') }}
                                    </a>
                                    <div class="modal fade" tabindex="-1" role="dialog" id="size-guide">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header tw-relative tw-justify-center">
                                                    <img class="tw-w-auto tw-py-6"
                                                         src="{{ asset($public_assets . 'assets/lookatme/images/logo/logo.svg') }}"
                                                         alt="">
                                                    <button type="button"
                                                            class="tw-border-0 tw-bg-transparent tw-absolute tw-top-6 tw-right-6"
                                                            data-bs-dismiss="modal" aria-label="Close">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <img class="tw-w-full"
                                                         src="{{ asset($public_assets . 'assets/lookatme/images/size_guide.jpg') }}">
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- /.modal -->
                                @endif
                            </div>
                            @if((bool)$optionProperty->is_color)