@extends('dashboard.layout.layout')

@section('content')
<!-- app ecommerce details start -->
<section class="app-ecommerce-details">
    <div class="card border-info">
        <div class="card-body">
            <div class="row mb-5 mt-2">
                <div class="col-12 col-md-5 d-flex align-items-center justify-content-center mb-2 mb-md-0">
                    <div class="swiper-custom swiper-container">
                        <div class="swiper-wrapper text-center">
                            @foreach ($product->media as $image)
                                <div class="swiper-slide">
                                    <img class="img-fluid" src="{{ asset('storage/images/product/'.$image->media) }}" alt="banner" style="">
                                </div>
                            @endforeach
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="col-12 col-md-7">
                    <h5>{{ $product->name }}
                    </h5>
                    <p class="text-muted"><i class="feather icon-target"></i> {{ optional($product->category)->name }}</p>
                    <div class="ecommerce-details-price d-flex flex-wrap">

                        <p class="text-primary font-medium-3 mr-1 mb-0">
                            @if ($product->offer_price)
                            <span><del>{{ $product->price }}</del></span>
                            {{ $product->offer_price }}
                            @else
                            {{ $product->price }}
                            @endif
                            {!! trans('dashboard.setting.currency') !!}
                        </p>
                        <div class="ratings font-medium-3">
                            <div class="empty-stars"></div>
                            <div class="full-stars" style="width:{{ $product->product_rate_percentage ? $product->product_rate_percentage.'%' : '0%' }}"></div>
                        </div>
                        ({{ $product->product_rate_percentage ? number_format($product->product_rate_percentage,2).'%' : '0%' }})
                        <span class="ml-50 text-dark font-medium-1">{{ $product->rateUsers->count() }} {!! trans('dashboard.product.rating_count') !!}</span>
                    </div>
                    <hr>
                    <p>{{ $product->desc }}</p>

                    <hr>

                    <div class="row">

                        <div class="col-md-10 col-12">
                            <div class="custom-control toggle-edit custom-switch  switch-lg custom-switch-success mr-2 mb-1">
                                <input id="check_active" {{ $product->is_active ? 'checked' : '' }} class="custom-control-input" onchange="toggleActive('{{ $product->id }}')" type="checkbox">
                                <label for="check_active"></label>
                                <label class="custom-control-label" for="check_active">
                                    <span class="switch-text-left font-small-3">{!! trans('dashboard.user.active') !!}</span>
                                    <span class="switch-text-right font-small-3">{!! trans('dashboard.user.not_active') !!}</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ route('dashboard.product.edit',$product->id) }}" class="btn btn-block btn-primary mr-0 mr-sm-1 mb-1 mb-sm-0 float-left"><i class="feather icon-edit mr-25"></i>{!! trans('dashboard.general.edit') !!}</a>

                        </div>
                    </div>
                    <hr>
                    <p class="font-weight-bold">{!! trans('dashboard.branch.branches') !!}</p>
                    @forelse ($product->branches as $branch)
                    <button type="button" class="btn btn-icon rounded btn-outline-primary mr-1 mb-1 text-bold-700">{{ $branch->name }}</button>
                    @empty
                    <div class="alert alert-info alert-styled-left alert-dismissible text-center">
                        {{ trans('dashboard.branch.no_branches') }}
                    </div>
                    @endforelse
                    <hr>
                    <p class="font-weight-bold">{!! trans('dashboard.addition.additions') !!}</p>
                    @forelse ($product->additions as $addition)
                    <button type="button" class="btn btn-icon rounded btn-outline-info mr-1 mb-1 text-bold-700">{{ $addition->name }}</button>
                    @empty
                    <div class="alert alert-info alert-styled-left alert-dismissible text-center">
                        {{ trans('dashboard.addition.no_additiones') }}
                    </div>
                    @endforelse
                    <hr>
                    @if ($product->measuring_unit == 'size')
                    <p class="font-weight-bold">{!! trans('dashboard.product.sizes') !!}</p>
                    @foreach ($product->sizes_array as $size)
                    <button type="button" class="btn btn-icon rounded btn-outline-success mr-1 mb-1 text-bold-700">
                        <span>{!! trans('dashboard.product.size') !!}: {{ $size[0] }}</span>
                        @if (isset($size[1]))
                            <br><span>{!! trans('dashboard.product.price') !!}: {{ $size[1] }}</span>
                        @endif
                    </button>
                    @endforeach
                    @elseif ($product->measuring_unit == 'weight')
                    <p class="font-weight-bold">{!! trans('dashboard.product.weights') !!}</p>
                    @foreach ($product->weights_array as $weight)
                    <button type="button" class="btn btn-icon rounded btn-outline-success mr-1 mb-1 text-bold-700">{{ $weight }}</button>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- Review section start -->
    <section id="bordered-media-object">
        <div class="divider divider-success">
            <div class="divider-text text-success font-medium-2">{!! trans('dashboard.product.reviews') !!}</div>
        </div>
        <div class="row match-height">
            @forelse ($product->rateUsers->split(2) as $chunk)
            <div class="col-xl-6 col-lg-12">
                <div class="card border-info bg-transparent">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media-list media-bordered">
                                @foreach ($chunk as $review)
                                <div class="media">
                                    <a class="media-left" href="{!! route('dashboard.client.show',$review->id) !!}">
                                        <img src="{{ $review->avatar }}" class="rounded-circle" alt="{{ $review->fullname }}" height="64" width="64" />
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{ $review->fullname }}</h4>
                                        <div class="ratings font-medium-3">
                                            <div class="empty-stars"></div>
                                            <div class="full-stars" style="width:{{ optional($review->pivot)->rate ? ($review->pivot->rate/5)*100 .'%' : '0%' }}"></div>
                                        </div>
                                        <p>{{ $review->pivot->review }}</p>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            @empty
            <div class="col-12 text-center">
                <p class="font-medium-1">{!! trans('dashboard.product.no_reviews') !!}</p>

            </div>
            @endforelse
        </div>
    </section>
    <!-- Review section end -->

    <div class="row">
        <div class="col-lg-9 col-12">
            <div class="divider divider-success">
                <div class="divider-text text-success font-medium-2">{!! trans('dashboard.product.related_products') !!}</div>
            </div>
            <div class="card border-info bg-transparent">
                <div class="card-body">
                    @if ($related_products->count())
                    <div class="swiper-responsive-breakpoints swiper-container px-4 py-2">
                        <div class="swiper-wrapper">
                            @foreach ($related_products as $related_product)
                            <div class="swiper-slide rounded swiper-shadow">
                                <a href="{{ route('dashboard.product.show',$related_product) }}">
                                <div class="item-heading">
                                    <p class="text-truncate mb-0">
                                        {{ str_limit($related_product->name,20) }}
                                    </p>
                                    <p>
                                        <i class="feather icon-target"></i>
                                        <small>{{ optional($related_product->category)->name }}</small>
                                    </p>
                                </div>
                                <div class="img-container w-50 mx-auto my-2 py-75">
                                    <img src="{{ $related_product->image }}" style="height:100px; width:134px;" class="img-fluid" alt="{{ $related_product->name }}">
                                </div>
                                <div class="item-meta">
                                    <div class="ratings font-medium-3">
                                        <div class="empty-stars"></div>
                                        <div class="full-stars" style="width:{{ $related_product->product_rate_percentage ? $related_product->product_rate_percentage.'%' : '0%' }}"></div>
                                    </div>
                                    <p class="text-primary mb-0">
                                        @if ($related_product->offer_price)
                                        <span><del>{{ $related_product->price }}</del></span>
                                        {{ $related_product->offer_price }}
                                        @else
                                        {{ $related_product->price }}
                                        @endif
                                    </p>
                                </div>
                                </a>
                            </div>

                            @endforeach
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>

                    </div>
                    @else
                        <p class="text-center text-bold-700 font-medium-3">{!! trans('dashboard.product.no_products') !!}</p>
                    @endif
                </div>
            </div>

        </div>
        <div class="col-lg-3 col-12">
            <div class="divider divider-success">
                <div class="divider-text text-success font-medium-2">{!! trans('dashboard.general.images') !!}</div>
            </div>
            <div class="card border-info bg-transparent">
                <div class="card-body">
                    <div class="row">
                        @foreach ($product->media as $image)
                        <div class="col-md-4 col-6 user-latest-img">
                            <a href="{{ asset('storage/images/product/'.$image->media) }}" data-fancybox="gallery">
                                <img src="{{ asset('storage/images/product/'.$image->media) }}" class="img-fluid mb-1 rounded-sm" style="height:100px;" alt="{{ $product->name }}">
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- app ecommerce details end -->
@endsection

@section('vendor_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/vendors/css/forms/spinner/jquery.bootstrap-touchspin.css">
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/vendors/css/extensions/swiper.min.css">
@endsection

@section('page_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/app-ecommerce-details.css">
<link rel="stylesheet" href="{{ asset('dashboardAssets') }}/global/css/custom/custom_rate.css">
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/users.css">
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/plugins/extensions/swiper.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<style media="screen">
    .toggle-edit .custom-control-label:before {
        background-color: #666b81 !important;
        height: 26px !important;
        width: 80px !important;
    }

    .toggle-edit .custom-control-label:after {
        height: 21px !important;
        width: 21px !important;
    }

    .toggle-edit .custom-control-label {
        width: 82px !important;
    }
</style>
@endsection

@section('vendor_scripts')
<script src="{{ asset('dashboardAssets') }}/vendors/js/forms/spinner/jquery.bootstrap-touchspin.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/extensions/swiper.min.js"></script>
@endsection

@section('page_scripts')
<script src="{{ asset('dashboardAssets') }}/js/scripts/pages/app-ecommerce-details.js"></script>
<script src="{{ asset('dashboardAssets') }}/js/scripts/forms/number-input.js"></script>
<script src="{{ asset('dashboardAssets') }}/js/scripts/pages/user-profile.js"></script>
<script src="{{ asset('dashboardAssets') }}/js/scripts/extensions/swiper.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>

$(function(){
    var mySwiper8 = new Swiper('.swiper-custom', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: true,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
    });
})
function toggleActive(product_id) {
    $.ajax({
        url: "{{ LaravelLocalization::localizeUrl('dashboard/ajax/enable_product_active') }}/"+product_id,
        method: "POST",
        dataType: "json",
        data:{_token:'{{ csrf_token() }}'},
        success: function(data) {
            if (data['value'] == 1) {
                toastr.success(data['message'], '', { "progressBar": true });
            }else{
                toastr.danger(data['message'], '', { "progressBar": true });
            }
        }
    });
}


</script>
@endsection