@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Product') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Product') }}</li>

                        </ol>
                    </nav>
                </div>
            </div>

        </div>
    </div>
    <!-- Main content -->
    <section class="content">

        <div class="box">
            <div class="box-body">
                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="hide_scroll">
                                    @forelse ($product->productAttach as $key => $photo)
                                        @if ($key == 0)
                                            <div class="photos-item item-active">
                                                <img class="img-fluid-slider" src="{{ url($photo->file_path) }}" alt="">
                                            </div>

                                        @else
                                            <div class="photos-item">
                                                <img class="img-fluid-slider" src="{{ url($photo->file_path) }}" alt="">
                                            </div>
                                        @endif
                                    @empty

                                    @endforelse

                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="img-wrapper-custom">
                                    <img src="{{ url($product->productAttach[0]->file_path) }}" id="product-image"
                                        class="img-fluid img-fluid-custom" alt="" />
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-8 col-sm-6">
                        @php
                            $qty = 0;
                            if ($product->variant_product) {
                                foreach ($product->stocks as $key => $stock) {
                                    $qty += $stock->qty;
                                }
                            } else {
                                $qty = $product->current_stock;
                            }
                        @endphp
                        <h2 class="box-title mt-0">{{ $product->getTranslation('title') }}</h2>

                        <div class="list-inline">
                            @for ($i = 0; $i < $product->review->avg('rate'); $i++)
                                <a class="text-warning"><i class="mdi mdi-star product-star"></i></a>
                            @endfor
                            @for ($i = 0; $i < 5 - $product->review->avg('rate'); $i++)
                                <a class=""><i class=" mdi mdi-star product-star"></i></a>
                            @endfor
                        </div>
                        <h1 class="pro-price mb-10 mt-0">
                            @if (roundNumberMaxHalf(explode('-', homeDiscountedPrice($product->id))[0]) == roundNumberMaxHalf(explode('-', homeDiscountedPrice($product->id))[1]))
                                {{ roundNumberMaxHalf(explode('-', homeDiscountedPrice($product->id))[0]) }}
                                {{ currency_sympol()['symbol'] }}
                            @else
                                {{ roundNumberMaxHalf(explode('-', homeDiscountedPrice($product->id))[0]) }}
                                /
                                {{ roundNumberMaxHalf(explode('-', homeDiscountedPrice($product->id))[1]) }}
                                {{ currency_sympol()['symbol'] }}
                            @endif
                            {{-- <span class="old-price">&#36;540</span>
                                    <span class="text-danger">50% off</span> --}}
                        </h1>
                        @if ($product->advanced_product == 'normal_product' || $product->advanced_product == 'advanced_product' || $product->advanced_product == 'restorants')
                            <div class="list-inline">
                                @if ($qty > 0)
                                    {{ translate('Available quantity') }} <span class="badge badge-warning badg-60sec">
                                        {{ $qty }} {{ translate('Pieces') }}</span>
                                @else
                                    {{ translate('Out of stock') }} <span class="badge badge-danger">
                                        {{ $qty }} {{ translate('Pieces') }}</span>
                                @endif
                            </div>
                            <br>
                        @elseif($product->advanced_product == 'digital_cards')
                            @if ($product->digitalCards->where('used_card', 0)->count() > 0)
                                {{ translate('Available quantity') }} <span class="badge badge-warning badg-60sec">
                                    {{ $product->digitalCards->where('used_card', 0)->count() }}
                                    {{ translate('Cards') }}</span>
                            @else
                                {{ translate('Out of stock') }} <span class="badge badge-danger">
                                    {{ $product->digitalCards->where('used_card', 0)->count() }}
                                    {{ translate('Cards') }}</span>
                            @endif
                        @endif

                        <div class="row">
                            <div class="col-md-8">
                                <p>{{ $product->getTranslation('short_desc') }}</p>
                            </div>
                        </div>

                    </div>
                </div>
                <br>
                <br>

                <form id="option-choice-form">
                    @csrf
                    <input type="hidden" name="id" value="{{ $product->id }}">
                    <div class="row">
                        <div class="col-md-6">
                            @isset(json_decode($product->colors)[0])
                                <div class="color-choice-box">

                                    <div class="row">
                                        <div class="col-md-3">
                                            {{ translate('Color') }}
                                        </div>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <ul class="icolors">
                                                    @foreach (json_decode($product->colors) as $key => $color)
                                                        <li mid="{{ $product->id }}-color-{{ $key }}"
                                                            color="{{ $color }}"
                                                            style="background-color: {{ $color }};"
                                                            class="rounded-circle  @if ($key == 0) active @endif">
                                                        </li>
                                                    @endforeach
                                                    <input type="hidden" name="color" id="radioColor"
                                                        value="{{ json_decode($product->colors)[0] }}">

                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @endisset
                            @if ($product->choice_options != null)
                                @foreach ($product->choice_options as $key => $choice)
                                    <div class="color-choice-box">
                                        <div class="row">
                                            <div class="col-3">
                                                <div class="product-description-label mt-2 ">
                                                    {{ $choice['title'] }}:
                                                </div>
                                            </div>
                                            <div class="col-9">
                                                <div class="row">
                                                    @foreach ($choice['options'] as $key => $value)
                                                        <div class="col-md">
                                                            <input type="radio"
                                                                id="{{ $choice['name'] }}-{{ $value['id'] }}"
                                                                name="attribute_id_{{ $choice['name'] }}"
                                                                value="{{ $value['id'] }}" @if ($key == 0) checked @endif>
                                                            <label
                                                                for="{{ $choice['name'] }}-{{ $value['id'] }}">{{ $value['title'] }}</label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif


                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                @if ($product->advanced_product == 'normal_product' || $product->advanced_product == 'advanced_product' || $product->advanced_product == 'restorants')
                                    <div class="col-md text-center choice-result1">
                                        <h3>{{ translate('Available quantity') }}</h3>
                                        @if ($qty > 0)
                                            <h3 class="avialable-amount"><span
                                                    id="available-quantity">{{ $qty }}</span>
                                            </h3>
                                            <h3>{{ translate('Pieces') }}</h3>

                                        @else
                                            {{ translate('Out of Stock') }}
                                        @endif
                                    </div>
                                    <div class="col-md text-center choice-result2">
                                        <div id="chosen_price_div">
                                            <h3>{{ translate('Amount') }}</h3>
                                            <h3 id="chosen_price">

                                            </h3>
                                            <h3>
                                                {{ currency_sympol()['symbol'] }}
                                            </h3>
                                        </div>
                                    </div>

                                @endif


                            </div>
                        </div>
                    </div>
                </form>

                @if ($product->getTranslation('serialized_specs') != null || $product->country != null)
                    <h4 class="box-title mt-40">{{ translate('Specs') }}</h4>
                    <div class="specs-container">
                        <div class="row">
                            @isset($product->country)
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-4">{{ translate('Country') }}:</div>
                                        <div class="col-md-8">
                                            {{ $product->country ? $product->country->getTranslation('title') : '' }}</div>
                                    </div>
                                </div>
                            @endisset
                            @forelse (json_decode($product->getTranslation('serialized_specs')) as $key => $item)
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-4">{{ $key }} :</div>
                                        <div class="col-md-8">{{ $item }}</div>
                                    </div>
                                </div>
                            @empty

                            @endforelse
                        </div>

                    </div>
                @endif

                <h4 class="box-title mt-40">{{ translate('Reviews') }}</h4>
                <div class="reviews-container">
                    @forelse ($reviews as $key => $review)
                        <div class="review-cont">
                            <h5 class="review-user">{{ $review->user->name }}</h5>
                            <div class="list-inline">
                                @for ($i = 0; $i < $review->rate; $i++)
                                    <a class="text-warning"><i class="mdi mdi-star review-star"></i></a>
                                @endfor
                                @for ($i = 0; $i < 5 - $review->rate; $i++)
                                    <a class=""><i class=" mdi mdi-star review-star"></i></a>
                                @endfor
                            </div>
                            <p>
                                {{ $review->review }}
                            </p>
                            <hr>
                            <div class="check-review">
                                <div class="form-group">
                                    <div class="checkbox">
                                        <input type="checkbox" id="Checkbox_{{ $key }}"                                             onchange="update_active(this)" value="{{ $review->id }}" />
                                        <label for="Checkbox_{{ $key }}"></label>
                                    </div>
                                </div>
                            </div>
                        </div>


                    @empty
                        <img src="{{ url('/images/no review.png') }}" alt="">
                    @endforelse
                    <div class="view-reviews-all text-left">
                        <a href="{{ route('ProductReview.productReviews', encrypt($product->id)) }}"
                            class="view-all-reviews">{{ translate('View all reviews') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')

    <script type="text/javascript">
        $('.icolors li').on("click", function() {
            $('.icolors li').removeClass('active');
            $(this).addClass('active');
            var color = $(this).attr('color');
            $('#radioColor').val(color);
            getVariantPrice();
        });
        @if ($product->advanced_product == 'normal_product' || $product->advanced_product == 'advanced_product' || $product->advanced_product == 'restorants')
            getVariantPrice();
        @endif
        $('#option-choice-form input').on('change', function() {
            getVariantPrice();
        });

        function getVariantPrice() {
            $.ajax({
                type: "POST",
                url: '{{ route('Product.variant_price') }}',
                data: $('#option-choice-form').serializeArray(),
                success: function(data) {
                    $('#option-choice-form #chosen_price_div #chosen_price').html(data.price);
                    $('#available-quantity').html(data.in_stock);

                }
            });
        }

        function update_active(el) {
            if (el.checked) {
                var active = 1;
            } else {
                var active = 0;
            }
            $.post(`{{ route('ProductReview.updateActive') }}`, {
                _token: '{{ csrf_token() }}',
                id: el.value,
                active: active
            }, function(data) {

            });
        }


        $('.photos-item').on("click", function() {
            var src = $(this).children().attr('src');
            $('#product-image').attr('src', src);
            $('.photos-item').removeClass('item-active');
            $(this).addClass('item-active');
        });
    </script>
@endsection