@extends('layouts.frontend.app')

@push('meta')
    <meta name='description' content="{{ $product->title }}" />

    <meta property="og:image" content="{{ asset('uploads/product/' . $product->image) }}" />

    <meta name='keywords' content="@foreach ($product->tags as $tag){{ $tag->name . ', ' }} @endforeach" />
@endpush

@section('title', $product->title)

@push('css')
    <link href="https://fonts.cdnfonts.com/css/siyam-rupali" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('/') }}assets/frontend/css/flexslider.css">
    <link rel="stylesheet" href="{{ asset('/') }}assets/frontend/css/image-zoom.css">
    <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />
    <style>
        h1.p_title {
            font-size: 1.4rem !important;
        }

        .get_attri_price+label {
            background: gainsboro;
            padding: 2px 10px;
            margin-right: 5px;
            display: inline-block;
            border-radius: 2px;
            cursor: pointer;
            margin-bottom: 5px;
        }

        @media(max-width:500px) {
            .heading {
                display: block;
            }
        }

        input[type="radio"].get_attri_price {
            display: none
        }

        input[type="radio"].get_attri_price:checked+label {
            background-color: #333;
            color: #fff
        }

        .banner-bootom-w3-agileits {
            font-family: 'Siyam Rupali', sans-serif !important;
            font-family: monospace;

        }

        #specification th {
            width: 160px;
            background: #f1f1f1;
        }

        .flexslider .slides img {
            background: white;
        }

        label.btn.active {
            box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        }

        @import url('https://fonts.cdnfonts.com/css/siyam-rupali');
        @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');

        .p_title {
            word-spacing: 3px;
            font-weight: 300;
            margin-bottom: 14px;
            color: #333;
        }

        @media(max-width:767px) {
            .new_r {
                display: none;
            }
        }

        .new_r {
            background: #f3f3f3;
            margin-top: -20px;
            padding-top: 18px;
            position: relative;
            right: -10px;
        }

        p {
            margin: 0;
        }

        .s_d,
        .rating1 {
            margin-top: 10px;
        }

        .s_d * {
            margin: 0;
        }

        .card {
            position: relative;
            display: flex;
            padding: 0;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: none;
            box-shadow: none;
        }

        .media img {
            width: 50px;
            height: 50px
        }

        .reply a {
            text-decoration: none
        }


        .heading {
            font-size: 25px;
            margin-right: 25px;
        }

        .fa {
            font-size: 25px;
        }

        .checked {
            color: orange;
        }

        /* Three column layout */
        .side {
            float: left;
            width: 15%;
            margin-top: 10px;
        }

        .item_price,
        del {
            font-family: monospace;
            font-weight: 600
        }

        .middle {
            float: left;
            width: 70%;
            margin-top: 10px;
        }

        /* Place text to the right */
        .right {
            text-align: right;
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* The bar container */
        .bar-container {
            width: 100%;
            background-color: #f1f1f1;
            text-align: center;
            color: white;
        }

        .dropdown .dropdown-menu {
            box-shadow: 0px 0px 5px gainsboro;
            padding: 10px;
        }

        /* Individual bars */
        .bar-5 {
            width: 60%;
            height: 18px;
            background-color: #04AA6D;
        }

        .bar-4 {
            width: 30%;
            height: 18px;
            background-color: #2196F3;
        }

        .bar-3 {
            width: 10%;
            height: 18px;
            background-color: #00bcd4;
        }

        .bar-2 {
            width: 4%;
            height: 18px;
            background-color: #ff9800;
        }

        .bar-1 {
            width: 15%;
            height: 18px;
            background-color: #f44336;
        }

        /* Responsive layout - make the columns stack on top of each other instead of next to each other */
        @media (max-width: 400px) {

            .side,
            .middle {
                width: 100%;
            }

            /* Hide the right column on small screens */
            .right {
                display: none;
            }
        }

        .rounded-10 {
            border-radius: 10px;
        }

        #comment-reply i {
            font-size: 14px;
        }

        .single-right-left p {
            color: #54595F;
            font-size: 18px;
            font-weight: 300;
            line-height: 1.3em;
            margin-top: 10px;
            margin-bottom: 0;
        }
    </style>
@endpush

@section('content')

    <div class="banner-bootom-w3-agileits">
        <div class="container">
            <!-- tittle heading -->

            <!-- //tittle heading -->
            <div class="row"
                style="background: white;margin-top: 20px;padding: 20px 10px;box-shadow: 0px 4px 6px -3px #9c9c9c;">

                <div class="col-md-4 single-right-left ">
                    <div class="grid images_3_of_2">
                        <div class="flexslider" style="padding: 20px;box-shadow: none;border: 1px solid gainsboro;">
                            <style>
                                .video-js {
                                    width: 100%;
                                }
                            </style>
                            <div class="clearfix"></div>
                            <div class="flex-viewport" style="overflow: hidden; position: relative;">
                                <ul class="slides my-gallery"
                                    style="width: 1000%; transition-duration: 0.6s; transform: translate3d(-1311px, 0px, 0px);">
                                    @if ($product->yvideo)
                                        <li data-thumb="{{ asset('uploads/product/video/' . $product->video_thumb) }}"
                                            style="width: 437px; float: left; display: block;" class="">
                                            <div class="thumb-image">
                                                <iframe width="100%" style="height:300px;background:black"
                                                    src="{{ $product->yvideo }}"></iframe>
                                            </div>
                                        </li>
                                    @elseif($product->video)
                                        <li data-thumb="{{ asset('uploads/product/video/' . $product->video_thumb) }}"
                                            style="width: 437px; float: left; display: block;" class="">
                                            <div class="thumb-image">


                                                <video class="video-js" controls data-setup="{}" controls width="100%"
                                                    style="height:300px;background:black">
                                                    <source src="{{ asset('uploads/product/video/' . $product->video) }}"
                                                        type="video/mp4">
                                                </video>

                                            </div>
                                        </li>
                                    @endif

                                    @foreach ($product->images as $image)
                                        <li data-cl="{{ $image->color_attri }}"
                                            data-thumb="{{ asset('uploads/product/' . $image->name) }}"
                                            style="width: 437px; float: left; display: block;" class="">
                                            <div class="thumb-image">
                                                <a class="" href="{{ asset('uploads/product/' . $image->name) }}"
                                                    target="_blank">
                                                    <img src="{{ asset('uploads/product/' . $image->name) }}"
                                                        class="my-gallery-image img-responsive " alt=""
                                                        draggable="true">
                                                </a>
                                            </div>
                                        </li>
                                    @endforeach


                                </ul>
                            </div>



                            <ul class="flex-direction-nav">
                                <li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li>
                                <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="col-md-5 single-right-left simpleCart_shelfItem">
                    <h1 class="p_title">{{ $product->title }}</h1>
                    <div class="s_d">
                        <p>{!! $product->short_description !!}</p>
                    </div>
                    <div class="rating1" style="text-align:left !important;">
                        @php
                            if ($product->reviews->count() > 0) {
                                $average_rating = $product->reviews->sum('rating') / $product->reviews->count();
                            } else {
                                $average_rating = 0;
                            }
                        @endphp
                        <div>
                            @if ($average_rating == 0)
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            @elseif ($average_rating > 0 && $average_rating < 1.5)
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            @elseif ($average_rating >= 1.5 && $average_rating < 2)
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            @elseif ($average_rating >= 2 && $average_rating < 2.5)
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            @elseif ($average_rating >= 2.5 && $average_rating < 3)
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            @elseif ($average_rating >= 3 && $average_rating < 3.5)
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            @elseif ($average_rating >= 3.5 && $average_rating < 4)
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                <i class="far fa-star"></i>
                            @elseif ($average_rating >= 4 && $average_rating < 4.5)
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            @elseif ($average_rating >= 4.5 && $average_rating < 5)
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            @elseif ($average_rating >= 5)
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            @endif
                            <span style="color: #333;">{{ $average_rating }} Rating of
                                {{ $product->orderDetails->count() }} orders</span>
                        </div>

                    </div>
                    @if ($product->sku)
                        <p>Product Code (SKU): <b><i>{{ $product->sku }}</i></b></p>
                    @endif
                    @isset($product->user->shop_info->name)
                        <p>
                            Seller: <a style="font-size: 17px"
                                href="{{ route('vendor', $product->user->shop_info->slug) }}">{{ $product->user->shop_info->name }}</a>
                        </p>
                    @endisset
                    {{-- <p>
                    Point : {{$product->point}}
                    </p> --}}
                    @isset($product->brand->name)
                        <p>Brand: <a style="font-size:14px"
                                href="{{ route('brand.product', ['slug' => $product->brand->slug]) }}">{{ $product->brand->name }}</a>
                        </p>
                    @endisset
                    @if ($product->book == 1)
                        <p>{{ $product->book == 1 ? 'by' : 'brand' }} <a style="font-size:14px"
                                href="{{ route('author.product', ['slug' => $product->author_id]) }}">{{ $product->author->name }}</a>
                        </p>
                    @endif
                    <p>
                                                @if ($product->discount_price > 0)
                            <span><del>{{ setting('CURRENCY_CODE_MIN') ?? 'TK' }}.{{ $product->regular_price }}</del></span>

                            <span class="item_price">{{ setting('CURRENCY_CODE_MIN') ?? 'TK' }}.<span
                                    id="dynamic_price">{{ $product->discount_price }}</span></span>
                            @php
                                $per = $product->regular_price / 100;
                                $amc = $product->regular_price - $product->discount_price;
                            @endphp
                            <span style="font-size:13px">You Save
                                {{ setting('CURRENCY_CODE_MIN') ?? 'TK' }}.{{ $amc }}
                                ({{ round($amc / $per) }}%)</span>
                        @else
                            <span class="item_price">{{ setting('CURRENCY_CODE_MIN') ?? 'TK' }}.<span
                                    id="dynamic_price">{{ $product->regular_price }}</span></span>
                        @endif
                        @if ($product->whole_price > 0)
                        <p class="item_price">Whole Sell: {{ setting('CURRENCY_CODE_MIN') ?? 'TK' }}.{{ $product->whole_price }}</p>
                        @endif
                    </p>

                    <p style="font-size: 13px">
                        <span
                            style="background: green;color: white;border-radius: 50%;width: 20px;height: 20px;display: inline-block;font-size: 13px;line-height: 20px;text-align: center;"><i
                                class="icofont icofont-tick-mark"></i></span> In Stock ({{ $product->quantity }} copies
                        available)
                    <p style="margin:0;font-size: 11px;margin-left: 21px;margin-top: 4px;">@if(setting('COUNTRY_SERVE') == 'Bangladesh')* স্টক আউট হওয়ার আগেই অর্ডার করুন@else * Order before finish the stock @endif</p>
                    </p>

                    @if ($product->colors->count() != 0)
                        <div class="row ml-1">
                            <div class="col-12 pl-0 mb-2">
                                <p><strong>Select Color:</strong></p>
                            </div>

                            <div class="btn-group btn-group-toggle btn-color-group d-block mt-n2 ml-n2"
                                data-toggle="buttons">
                                @foreach ($colors_product as $color)
                                    <label class="btn   p-3 m-1 color {{ $product->colors->count() == 1 ? 'active' : '' }}"
                                        style="background: {{ $color->code }}">
                                        @if ($product->images)
                                            @foreach ($product->images as $image)
                                                @if ($image->color_attri == $color->slug)
                                                    <style>
                                                        .color {
                                                            padding: 2px !important;
                                                        }
                                                    </style>
                                                    <img src="{{ asset('uploads/product/' . $image->name) }}"
                                                        style="height: 70px;width: 70px;object-fit: contain;border: 5px solid white;background: white;"
                                                        alt="" draggable="true">
                                                @endif
                                            @endforeach
                                        @endif
                                        <input type="radio" name="color" autocomplete="off"
                                            value="{{ $color->slug }}"
                                            {{ $product->colors->count() == 1 ? 'checked' : '' }}>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @foreach ($attributes as $attribute)