@extends('bio::layouts.master')
@section('content')
@section('head')
    <link rel="stylesheet" href="{{ gs('assets/css/swiper-bundle.min.css') }}">
@stop
@section('footerJS')
<script src="{{ gs('assets/js/swiper-bundle.min.js') }}"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>
@stop


                

@php
    $sizes = $product->variant()->where('type', 'size')->get();
    $colors = $product->variant()->where('type', 'color')->get();
    $images = $product->variant()->where('type', 'image')->get();

    $gallery = $product->banner;
    if(empty($gallery)) $gallery = [$product->featured_img];
@endphp
@if (!$sizes->isEmpty() && !$colors->isEmpty() && !$images->isEmpty())
    <style>
        .product-single-page-banner .-banner-grid .\--banner-image{
            height: 30rem;
        }
    </style>
@endif
<style>
    .bio-menu{
        display: none !important;
    }

    .bio-wrap{
        width: 46.25rem !important;
    }

    #app-sandy-mix #content, #app-sandy-mix{
        width: 100% !important;
    }

    .swiper-pagination-bullet{
        background: #fff;
    }

    @media(max-width: 768px){
        .product-single-page-banner .-banner-grid .\--banner-image{
            height: 22rem;
        }
    }
</style>

<script>
    function single_product(){
        return {
            single_image: '',
            quantity: 0,
            show_qty: false,
            field_timer: '',

            qty_minus(){
                this.quantity < 1 ? 0 : this.quantity -= 1;

                this.submit_form();
            },

            qty_plus(){
                this.quantity += 1;

                this.submit_form();
            },

            submit_form(){
                var _this = this;
                if (this.field_timer) {
                    clearTimeout(this.field_timer);
                    this.field_timer = null;
                }
                this.field_timer = setTimeout(() => {
                    _this.$refs.form.submit();
                }, 1000);  
            },
            
        }
    }
</script>
<div class="px-5 md:px-0 relative z-10" x-data="single_product">
    <div class="inner-pages-header mb-10 hidden">
        <div class="inner-pages-header-container">
            <a class="previous-page" href="{{ bio_url($bio->id) }}">
                <p class="back-button"><i class="la la-arrow-left"></i></p>
                <h1 class="inner-pages-title ml-3">{{ __('Shop') }}</h1>
            </a>
            <a class="buy-now-button" href="{{ \Bio::route($bio->id, 'sandy-blocks-shop-cart-get') }}"> <span>{{ __('Bag') }}</span> </a>
        </div>
    </div>
    
    <div class="bio-wrap bg-transparent shadow-none">
    <div class="dashboard-header-m flex items-center mb-5 px-5 pt-20 md:pt-5">
                        
        <div class="flex items-center mr-auto">
            <a href="{{ bio_url($bio->id) }}" class="small-menu-cog rounded-full border-0">
                {!! orion('angle-left-1', 'w-8 h-8') !!}
            </a>
        </div>
    </div>
    <div class="koon-gray-title my-5 flex items-center justify-between bg-white">
        <div class="-title">{{ $product->name }}</div>
        
        <a href="{{ \Bio::route($bio->id, 'sandy-blocks-shop-cart-get') }}">
            {!! ori('shopping-ecommerce', 'basket.2', 'w-5 h-5') !!}
        </a>
    </div>

    <div class="product-single-page-banner grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="-banner-grid">
            <div class="swiper mySwiper" x-show="single_image == ''">
              <div class="swiper-wrapper">
                @if (is_array($gallery))
                    @foreach ($gallery as $key => $values)
                        <div class="swiper-slide">
                            
                            <div class="--banner-image">
                                <img src="{{ gs('media/shop/banner', $values) }}" alt="">
                            </div>
                        </div>
                    @endforeach
                @endif
              </div>
              <div class="swiper-pagination"></div>
            </div>

            <template x-if="single_image !== ''">
                <div>
                    <div class="--banner-image">
                        <img :src="single_image" alt="">
                    </div>
                </div>
            </template>
        </div>

        <div class="-second-grid">


            <div class="--desc">{!! Str::limit(clean($product->description, 'clean_all'), 200, '...') !!}</div>
            <div class="--product-prices my-3">
                <div class="actual">{!! \Bio::price($product->price, $bio->id) !!}</div>
                @if (!empty($product->comparePrice))
                <div class="compare">{!! \Bio::price($product->comparePrice, $bio->id) !!}</div>
                @endif
            </div>

            <form action="{{ \Bio::route($bio->id, 'sandy-blocks-shop-cart-add-item') }}" method="post" x-ref="form">
                <input type="hidden" name="product_id" value="{{ $product->id }}">


            @if (!$sizes->isEmpty())
                <div class="-variant-wrap -sizes mt-5">
                    <div class="--variant-name mb-3">{{ __('Size') }}</div>

                    <div class="-variant-items flex gap-2 overflow-x-auto">
                        <label class="sandy-big-checkbox relative">
                            <input type="radio" name="size" value="" class="sandy-input-inner">
                            
                            <div class="checkbox-inner">
                                <div class="--items flex items-center justify-center font-bold truncate p-2"></div>
                            </div>
                        </label>
                        @foreach ($sizes as $item)
                        <label class="sandy-big-checkbox relative">
                            <input type="radio" name="size" value="{{ $item->id }}" class="sandy-input-inner">
                            
                            <div class="checkbox-inner">
                                <div class="--items flex items-center justify-center font-bold truncate p-2">{{ $item->name }}</div>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
            @endif


            @if (!$colors->isEmpty())
                <div class="-variant-wrap -sizes mt-5">
                    <div class="--variant-name mb-3">{{ __('Color') }}</div>

                    <div class="-variant-items flex gap-2 overflow-x-auto">
                        <label class="sandy-big-checkbox relative">
                            <input type="radio" name="color" value="" class="sandy-input-inner">
                            
                            <div class="checkbox-inner">
                                <div class="--items flex items-center justify-center font-bold truncate p-2"></div>
                            </div>
                        </label>
                        @foreach ($colors as $item)
                        <label class="sandy-big-checkbox relative">
                            <input type="radio" name="color" value="{{ $item->id }}" class="sandy-input-inner">
                            
                            <div class="checkbox-inner">
                                <div class="--items flex items-center justify-center font-bold truncate p-2" bg-style="{{ $item->variation_value }}"></div>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
            @endif


            @if (!$images->isEmpty())
                <div class="-variant-wrap -sizes mt-5">
                    <div class="--variant-name mb-3">{{ __('Image') }}</div>

                    <div class="-variant-items flex gap-2 overflow-x-auto">
                        <label class="sandy-big-checkbox relative">
                            <input type="radio" name="image" value="" x-on:change="single_image = ''" class="sandy-input-inner">
                            
                            <div class="checkbox-inner">
                                <div class="--items flex items-center justify-center font-bold truncate p-2"></div>
                            </div>
                        </label>
                        @foreach ($images as $item)
                        <label class="sandy-big-checkbox relative">
                            <input type="radio" name="image" x-on:change="single_image = '{{ gs('media/shop/variant', $item->variation_value) }}'" value="{{ $item->id }}" class="sandy-input-inner">
                            
                            <div class="checkbox-inner">
                                <div class="--items flex items-center justify-center font-bold truncate p-2 bg-cover" data-bg="{{ gs('media/shop/variant', $item->variation_value) }}"></div>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
            @endif
            @if (!empty($link = ao($product->extra, 'external_product_link')))
                
                <a href="{{ $link }}" target="_blank" class="koon-btn-dark w-full py-3 h-12 text-sm cursor-pointer flex items-center justify-center gap-3">{{ __('Buy Now') }} {!! orion('external-link-1', 'w-3 h-3') !!}</a>
                @else


                <div class="flex items-center justify-center mt-5">


                    <a class="koon-btn-dark w-full py-3 h-12 text-sm cursor-pointer" :class="{ 'hidden': show_qty == 1 }" @click="show_qty = true">{{ __('Add To Cart') }}</a>

                    <div class="hidden" :class="{ 'hidden': show_qty == 0 }">
                        
                        <div class="sandy-counter mr-4 mb-0">
                            <a class="counter-btn counter-btn-minus cursor-pointer" @click="qty_minus" type="button"><i>-</i>
                            </a>
                            <input class="counter-input" x-on:input="console.log('lmaooo')" type="text" value="{{ !empty(ao($product->extra, 'min_quantity')) ? ao($product->extra, 'min_quantity') : '' }}" name="quantity" x-model="quantity" size="3">
                            <a class="counter-btn counter-btn-plus cursor-pointer" @click="qty_plus" type="button"><i>+</i></a>
                        </div>
                    </div>
                </div>
            @endif
            </form>
            @if (!$variant->isEmpty())
            <div class="product-options hidden">
                
                <div class="my-7">
                    <div class="text-lg font-bold">{{ __('Options') }}</div>
                    <p class="text-gray-400 text-xs">{{ __('Choose a product option to continue.') }}</p>
                </div>
                <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                    @foreach ($variant as $item)
                    <label class="sandy-big-checkbox relative product-variation">
                        <input type="radio" name="options" value="{{ $item->id }}" class="sandy-input-inner" {{ $loop->first ? 'checked' : '' }}>
                        
                        <div class="product-variation-inner">
                            <span class="variant-price-tag ml-auto">{!! \Bio::price($item->price, $bio->id) !!}</span>
                            @if (ao($product->stock_settings, 'enable'))
                            <span class="absolute right-5 text-xs">{{ $item->stock }} {{ __('Available') }}</span>
                            @endif
                            <div class="text-xl font-bold mt-5 mb-3">{{ $item->name }}</div>
                            <div class="text-sm">{{ $item->description }}</div>
                        </div>
                    </label>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>

    <div class="sandy-tabs mt-7">
        <div class="bio-tabs-menu-g mb-7">
            <a class="active sandy-tabs-link">{{ __('Product') }}</a>
            <a class="sandy-tabs-link">{{ __('Review') }}</a>
            @if ($has_order)
            <a class="sandy-tabs-link w-full">{{ __('Orders') }}</a>
            @endif
        </div>
        <div class="sandy-tabs-item">
            <div class="text-stage">- {{ $product->productType ? __('Downloadable Product') : __('Normal Product') }}</div>
            <h1 class="product-title">{{ $product->name }}</h1>
            <div class="text-base mb-5 tiny-content-init">
                {!! clean($product->description) !!}
            </div>
            @if (ao($product->stock_settings, 'enable'))
            @if (!empty(ao($product->stock_settings, 'sku')))
            <div class="product-code mb-0">{{ __('SKU') }}:<span class="product-number">{{ ao($product->stock_settings, 'sku') }}</span></div>
            @endif
            <div class="product-code mb-0">{{ __('Stock') }}:<span class="product-number">{{ ao($product->stock) }}</span></div>
            @endif


            @if ($has_order && $product->productType == 1)
            @if (is_array($product->files))
            <div class="mt-5">
                <h1 class="font-bold text-lg">{{ __('Unlocked.') }}</h1>
                <p class="text-gray-400 text-xs">{{ __('Download your unlocked files.') }}</p>
            </div>
            @foreach ($product->files as $key => $value)
            <div class="text-sticker rounded-2xl mb-3 w-full justify-between items-center p-3 h-full">
                <p class="is-link truncate">{{ $value }}</p>
                <a href="{{ gs('media/shop/downloadables', $value) }}" download="{{ $value }}" class="sandy-expandable-btn"><span>{{ __('Download') }}</span></a>
            </div>
            @endforeach
            @else
            <p class="text-gray-400 text-xs">{{ __('Downloadables has not been set by this page.') }}</p>
            @endif
            @endif
        </div>
        <div class="sandy-tabs-item">
            
            <div class="p-5 mb-5 rounded-2xl course-review-wrapper bg-white">
                
                @if ($has_order)
                
                <form class="comment-form m-0" action="{{ \Bio::route($bio->id, 'sandy-blocks-shop-review', ['id' => $product->id]) }}" method="post">
                    @csrf
                    <div class="comment-title">{{ __('Leave a Review') }}</div>
                    <div class="comment-head">
                        <div class="comment-text">{{ __('Leave a review on this product.') }}</div>
                    </div>
                    <p class="mt-3 mb-2 text-base">{{ __('Rating') }}</p>
                    <div class="mb-5">
                        <input type="hidden" value="2" name="rating" id="rating-input">
                        
                        <div class="rating js-rating m-0 p-0" data-rating="2" data-input-id="#rating-input" data-read="false"></div>
                    </div>
                    <div class="form-input text-count-limit" data-limit="500">
                        <span class="text-count-field"></span>
                        <textarea name="review" cols="30" rows="10"></textarea>
                    </div>
                    <button class="koon-btn-dark w-full mt-4">{{ __('Post') }}</button>
                </form>
                @else
                <p class="text-lg">{{ __('Purchase this product to leave a review.') }}</p>
                @endif
                
                <div class="rounded-2xl course-review-wrapper bg-transparent flex-col m-0 mt-10">
                    <div>
                        <div class="comment">
                            <div class="comment-head">
                                <div class="comment-title">{{ number_format($review->count()) }} {{ __('Review(s)') }}</div>
                            </div>
                            <div class="comment-list">
                                @foreach ($review as $item)
                                
                                <div class="comment-item">
                                    <div class="comment-details">
                                        <div class="comment-top">
                                            <div class="comment-author">
                                                <div class="tiny-avatar ml-0 mr-2">
                                                    <img src="{{ avatar($item->reviewer_id) }}" alt=" ">
                                                </div>
                                                {{ user('name', $item->reviewer_id) }}
                                            </div>
                                            <div class="rating js-rating" data-rating="{{ !empty($item->rating) ? $item->rating : '0' }}" data-read="true"></div>
                                        </div>
                                        <div class="comment-content">{{ $item->review }}</div>
                                        <div class="comment-foot">
                                            <div class="comment-time">{{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}</div>
                                            
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if ($has_order)
        <div class="sandy-tabs-item">
            <div class="flex-table mt-10">
                @if (is_array($user_orders))
                @foreach ($user_orders as $item)
                
                <div class="flex-table-item rounded-2xl shadow-none">
                    <div class="flex-table-cell is-media is-grow" data-th="">
                        <div class="h-avatar md is-trans">
                            {!! avatar($item->payee_user_id, true) !!}
                        </div>
                        <div>
                            <span class="item-name mb-2">{{ user('name', $item->payee_user_id) }}</span>
                            <span class="item-meta">
                                <span>#{{ $item->id }}</span>
                            </span>
                        </div>
                    </div>
                    <div class="flex-table-cell" data-th="{{ __('Price') }}">
                        <span>
                            {!! \Bio::price($item->price, $bio->id) !!}
                        </span>
                    </div>
                    <div class="flex-table-cell" data-th="{{ __('Status') }}">
                        <span class="my-0">{{ \Sandy\Blocks\shop\Helper\Shop::order_status($item->status) }}</span>
                    </div>
                    <div class="flex-table-cell" data-th="{{ __('Date') }}">
                        <span class="my-0">{{ \Carbon\Carbon::parse($item->created_at)->toFormattedDateString() }}</span>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>
        @endif
    </div>
</div>
</div>
@endsection