000

@extends('front.layout_alt')

@section('page_title', 'Single Product')

@section('content')
<section class="single-product">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                
            </div>
            <div class="col-md-6">
                <ol class="product-pagination text-right">
                    
                </ol>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-md-5">
                <div class="single-product-slider">
                    <div id="carousel-custom" class="carousel slide" data-ride="carousel">
                        <div class="carousel-outer">
                            <div class="carousel-inner">
                                @foreach($result['product_images'] as $key => $productImage)
                                    <div class="item {{ $key === 0 ? 'active' : '' }}">
                                        <img src="{{ asset('storage/media/' . $productImage->images) }}" alt="" data-zoom-image="{{ asset('images/shop/single-products/' . $productImage->images) }}" />
                                    </div>
                                @endforeach
                            </div>
                            <a class="left carousel-control" href="#carousel-custom" data-slide="prev">
                                <i class="tf-ion-ios-arrow-left"></i>
                            </a>
                            <a class="right carousel-control" href="#carousel-custom" data-slide="next">
                                <i class="tf-ion-ios-arrow-right"></i>
                            </a>
                        </div>
                        <ol class="carousel-indicators mCustomScrollbar meartlab">
                            @foreach($result['product_images'] as $key => $productImage)
                                <li data-target="#carousel-custom" data-slide-to="{{ $key }}" class="{{ $key === 0 ? 'active' : '' }}">
                                    <img src="{{ asset('storage/media/' . $productImage->images) }}" alt="" />
                                </li>
                            @endforeach
                        </ol>
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="single-product-details">
                    <h2>{{ $result['product'][0]->name }}</h2>
                    <p class="sku">SKU: {{ $result['product_attr'][$result['product'][0]->id][0]->sku }}</p>
                    <p class="mrp" style="text-decoration: line-through;">MRP: {{ $result['product_attr'][$result['product'][0]->id][0]->mrp }}</p>
                    <p class="product-price">Price: {{ $result['product_attr'][$result['product'][0]->id][0]->price }}</p>
                    <p class="product-description mt-20">{{ $result['product'][0]->desc }}</p>
                    <p class="aa-product-avilability">Availability: <span>In stock</span></p>

@if($result['product'][0]->lead_time != '')
                    <p class="lead_time">{{ $result['product'][0]->lead_time }}</p>
                    @endif

<div class="product-quantity">
                        <span>Quantity:</span>
                        <div class="product-quantity-slider">
                            <select id="qty_input" name="qty">
                                @for($i = 1; $i < 11; $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>

<div class="single-product-details" style="margin-top: 20px;">
                        <span>Color:</span>
                        <ul class="color-swatches" id="color-options">
                            @if(isset($result['product_attr'][$result['product'][0]->id]))
                                @foreach($result['product_attr'][$result['product'][0]->id] as $attr)
                                    @if($attr->color != '')
                                    <li data-color="{{ $attr->color }}" data-img-src="{{ asset('storage/media/'.$attr->attr_image) }}">
                                        <a href="javascript:void(0)" class="swatch-{{ strtolower($attr->color) }} product_color" onclick="change_product_color_image('{{ asset('storage/media/'.$attr->attr_image) }}', '{{ $attr->color }}')">
                                            
                                        </a>
                                    </li>
                                    @endif
                                @endforeach
                            @endif
                        </ul>
                    </div>

<a class="btn btn-main mt-20" href="javascript:void(0)" onclick="add_to_cart('{{ $result['product'][0]->id }}', '{{ $result['product_attr'][$result['product'][0]->id][0]->color_id }}')">Add To Cart</a>
                    <div id="add_to_cart_msg"></div>
                </div>
            </div>
        </div>
        <div class="aa-product-details-bottom">
            <ul class="nav nav-tabs" id="myTab2">
                <li><a href="#description" data-toggle="tab">Description</a></li>
                <li><a href="#technical_specification" data-toggle="tab">Technical Specification</a></li>
                <li><a href="#uses" data-toggle="tab">Uses</a></li>
                <li><a href="#warranty" data-toggle="tab">Warranty</a></li>
                <li><a href="#review" data-toggle="tab">Reviews</a></li>
            </ul>

<div class="tab-content">
                <div class="tab-pane fade in active" id="description">
                    {!! $result['product'][0]->desc !!}
                </div>
                <div class="tab-pane fade" id="technical_specification">
                    {!! $result['product'][0]->technical_specification !!}
                </div>
                <div class="tab-pane fade" id="uses">
                    {!! $result['product'][0]->uses !!}
                </div>
                <div class="tab-pane fade" id="warranty">
                    {!! $result['product'][0]->warranty !!}
                </div>
                <div class="tab-pane fade" id="review">
                    <div class="aa-product-review-area">
                        @if(isset($result['product_review'][0]))    
                            <h4>{{ count($result['product_review']) }} Review(s) for {{ $result['product'][0]->name }}</h4>
                            <ul class="aa-review-nav">
                                @foreach($result['product_review'] as $list)
                                    <li>
                                        <div class="media">
                                            <div class="media-body">
                                                <h4 class="media-heading"><strong>{{ $list->name }}</strong> - <span>{{ \Carbon\Carbon::parse($list->added_on)->format('d M Y') }}</span></h4>
                                                <div class="aa-product-rating">
                                                    <span class="rating_txt">{{ $list->rating }}</span>
                                                </div>
                                                <p>{{ $list->review }}</p>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <h2>No review found</h2>
                        @endif
                        <form id="frmProductReview" class="aa-review-form">
                            <h4>Add a review</h4>
                            <div class="aa-your-rating">
                                <p>Your Rating</p>
                                <select class="form-control" name="rating" required>
                                    <option value="">Select Rating</option>
                                    <option>Worst</option>
                                    <option>Bad</option>
                                    <option>Good</option>
                                    <option>Very Good</option>
                                    <option>Fantastic</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="message">Your Review</label>
                                <textarea class="form-control" rows="3" name="review" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-default aa-review-submit">Submit</button>
                            <input type="hidden" name="product_id" value="{{ $result['product'][0]->id }}" />
                            @csrf
                        </form>
                        <div class="review_msg"></div>
                    </div>
                </div>
            </div>
        </div>
</section>
<form id="frmAddToCart">
    <input type="hidden" id="color_id" name="color_id"/>
    <input type="hidden" id="pqty" name="pqty"/>
    <input type="hidden" id="product_id" name="product_id"/>
    @csrf
</form>

if (colors.length === 1) {
        $('#color_id').val(colors[0]);
    }
});

function change_product_color_image(img, color) {
    $('#color_id').val(color);
    $('.single-product-slider img').attr('src', img);
}

function add_to_cart(id, color_id) {
    $('#add_to_cart_msg').html('');
    var qty = $('#qty_input').val();

if (!color_id) {
        $('#add_to_cart_msg').html('<div class="alert alert-danger fade in alert-dismissible mt10"><a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>Please select color</div>');
        return;
    }

$('#product_id').val(id);
    $('#pqty').val(qty);

$.ajax({
        url: '/add_to_cart',
        data: $('#frmAddToCart').serialize(),
        type: 'post',
        success: function(result) {
            var totalPrice = 0;

if (result.msg == 'not_available') {
                alert(result.data);
            } else {
                if (result.totalItem == 0) {
                    $('.aa-cart-notify').html('0');
                    $('.aa-cartbox-summary').remove();
                } else {
                    $('.aa-cart-notify').html(result.totalItem);
                    var html = '<ul>';
                    $.each(result.data, function(arrKey, arrVal) {
                        totalPrice += (parseInt(arrVal.qty) * parseInt(arrVal.price));
                        html += '<li><a class="" href="#"><img src="' + PRODUCT_IMAGE + '/' + arrVal.image + '" alt="img"></a><div class="media-heading"><h4><a href="#">' + arrVal.name + '</a></h4><p>' + arrVal.qty + ' * Rs ' + arrVal.price + '</p></div></li>';
                    });
                    html += '<li><span class="">Total</span><span class="">Rs ' + totalPrice + '</span></li>';
                    html += '<li><a href="{{ route('cart') }}" class="btn btn-small">View Cart</a></li>';
                    html += '<li><a href="{{ url('checkout') }}" class="btn btn-small btn-solid-border">Checkout</a></li>';
                    $('.aa-cartbox-summary').html(html);
                }
            }
        }
    });
}

jQuery('#frmProductReview').submit(function(e){
    e.preventDefault();
    jQuery.ajax({
        url: '/product_review_process',
        data: jQuery('#frmProductReview').serialize(),
        type: 'post',
        success: function(result) {
            if (result.status == "success") {
                jQuery('.review_msg').html(result.msg);
                jQuery('#frmProductReview')[0].reset();
                setInterval(function(){
                    window.location.href = window.location.href;
                }, 3000);
            } else if (result.status == "error") {
                jQuery('.review_msg').html(result.msg);
            }
        }
    });
});
</script>
@endsection