@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->images as $image)
                                <div class="swiper-slide">
                                    <img class="img-fluid" src="{{ asset('storage/images/product/'.$image->image) }}" alt="banner" style="height: 570px; width:375px;">
                                </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->store)->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)
                            <span><del>{{ $product->price }}</del></span>
                            {{ $product->offer }}
                            @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="form-group">
                        <label class="font-weight-bold">{!! trans('dashboard.product.colors') !!}</label>
                        <ul class="list-unstyled mb-0 product-color-options">
                            @foreach ($product->colors_array as $color)
                            <li class="d-inline-block selected">
                                <div class="color-option">
                                    <div class="filloption" style="background-color: {{ $color }}"></div>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    <hr>

                    <div class="row">
                        <div class="col-md-8 col-12">
                            <div class="row">
                                <div class="col-md-4">
                                    <p>{!! trans('dashboard.product.stock') !!} - <span class="text-success" id="stock_value">{{ $product->stock ?? trans('dashboard.product.unlimited_orders') }}</span></p>

                                </div>
                                @if ($product->stock && $product->stock <= (int)setting('quantity_expiry_alert'))
                                    <div class="col-md-8">
                                        <div class="input-group form-group position-relative has-icon-left input-divider-left">
                                            {!! Form::number("stock", $product->stock, ['class' => 'form-control','id' => 'stock']) !!}
                                            <div class="form-control-position">
                                                <i class="feather icon-hash"></i>
                                            </div>
                                            <div class="input-group-append" id="button-addon2">
                                                <a href="javascript:void(0)" class="btn btn-primary" onclick="updateProductStock(document.getElementById('stock'))" id="stock_btn">{!! trans('dashboard.product.update_stock') !!}</a>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                            </div>

                            </div>
                        <div class="col-md-4 col-12">
                            <div class="d-flex justify-content-end 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>
                    <div class="d-flex flex-column flex-sm-row">
                        <a href="{{ route('dashboard.product.edit',$product->id) }}" class="btn btn-block btn-primary mr-0 mr-sm-1 mb-1 mb-sm-0"><i class="feather icon-edit mr-25"></i>{!! trans('dashboard.general.edit') !!}</a>
                    </div>
                    <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-circle btn-outline-success mr-1 mb-1 text-bold-700">{{ $size }}</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-circle 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 -->
    <!-- Report section start -->
    <section id="bordered-media-object">
        <div class="divider divider-success">
            <div class="divider-text text-success font-medium-2">{!! trans('dashboard.product.reports') !!}</div>
        </div>
        <div class="row match-height">
            @forelse ($product->clientReports->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 $report)
                                <div class="media">
                                    <a class="media-left" href="{!! route('dashboard.client.show',optional($report->client)->id) !!}">
                                        <img src="{{ optional($report->client)->avatar }}" class="rounded-circle" alt="{{ optional($report->client)->fullname }}" height="64" width="64" />
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{ optional($report->client)->fullname }}</h4>
                                        <h6><small>{{ trans('dashboard.report_reason.report_reason') }}</small> : {{ optional($report->reportReason)->name }}</h6>
                                        @if ($report->message)
                                        <p style="height:100px; overflow-y:auto;">{{ $report->message }}</p>
                                        @endif
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

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

            </div>
            @endforelse
        </div>
    </section>
    <!-- Report 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->store)->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)
                                        <span><del>{{ $related_product->price }}</del></span>
                                        {{ $related_product->offer }}
                                        @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->images as $image)
                        <div class="col-md-4 col-6 user-latest-img">
                            <a href="{{ asset('storage/images/product/'.$image->image) }}" data-fancybox="gallery">
                                <img src="{{ asset('storage/images/product/'.$image->image) }}" 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
                    });
                }
            }
        });
    }

    function updateProductStock(stock) {
        var stock_value = stock.value;
        var btn = $('#stock_btn');
        var val = $('#stock_value');
        $.ajax({
            url: "{{ LaravelLocalization::localizeUrl('dashboard/ajax/update_product_stock/'.$product->id) }}",
            method: "POST",
            global : false,
            dataType: "json",
            data: {
                _token: '{{ csrf_token() }}',
                stock : stock_value
            },
            beforeSend: function(xhr) {
                console.log(xhr);
                btn.html('<div class="spinner-border text-success spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>');
            },
            success: function(data) {
                btn.html('{!! trans('dashboard.product.update_stock') !!}');
                if (data['value'] == 1) {
                    val.html(data['stock']);
                    toastr.success(data['message'], '', {
                        "progressBar": true
                    });
                } else {
                    toastr.danger(data['message'], '', {
                        "progressBar": true
                    });
                }
            }
        });
    }
</script>
@endsection