@extends($theme.'.layouts.admin')
@section('content')
<section class="shop-single section-padding pt-0">
    <div class="container">
        <section class="p-3 mb-1 page-header">
            <div class="pl-3">
                <div class="row">
                    <div class="col-md-8 pl-0">
                        <a href="{{ URL::to('/') }}"><strong><span class="fa fa-home"></span> @lang('messages.Home')</strong></a>
                        <span class="fa fa-angle-right"></span> <a href="{{ url('product-list',['category_id'=>'products','level'=>'all']) }}">Products</a>
                        <span class="fa fa-angle-right"></span> <a href="javascript:;">{{ $product->name_en}}</a>
                    </div>
                </div>
            </div>
        </section>
        <div class="col-lg-12">
            <div class="row prod-block bg-white">
                <div class="col-md-6">
                    <div class="shop-detail-left">
                        <div class="shop-detail-slider">
                            <div class="product-header">
                                <span class="badge badge-success" id="badge-{{$product->id}}">{{$product->discount_label}}</span>
                                                                <span class="non-veg text-danger mdi mdi-circle"></span>
                                                            </div>
                            <div id="sync3" class="owl-carousel owl-theme">
                                {{--<div class="sp-wrap">--}}
                                    @if(!empty($product->image1))
                                    <div class="item">
                                        <a href="{{$product->image1}}">
                                            <img alt="" src="{{$product->image1}}" id="img-fluid" class="img-fluid img-center">
                                        </a>
                                    </div>
                                    @endif
                                    @if(!empty($product->image2))
                                    <div class="item">
                                        <a href="{{$product->image2}}">
                                            <img alt="" src="{{$product->image2}}" class="img-fluid img-center">
                                        </a>
                                    </div>
                                    @endif
                                    @if(!empty($product->image3))
                                    <div class="item">
                                        <a href="{{$product->image3}}">
                                            <img alt="" src="{{$product->image3}}" class="img-fluid img-center">
                                        </a>
                                    </div>
                                    @endif
                                    @if(!empty($product->image4))
                                    <div class="item">
                                        <a href="{{$product->image4}}">
                                            <img alt="" src="{{$product->image4}}" class="img-fluid img-center">
                                        </a>
                                    </div>
                                    @endif
                                {{--</div>--}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="shop-detail-right">
                        <h6 class="cat-name">
                        {{$product->main_category_name}}
                        </h6>
                        <h2>
                        {{$product->name_en}}
                        </h2>
                        {{-- <h6 class="text-danger">
                        Estimated Delivery : {{ $deliveryTime }}
                        </h6> --}}
                        <input type="hidden" name="customer_id" id="customer_id" value="{{ Session::get('CustomerId') }}">
                        <input type="hidden" name="product_id" id="product_id" value="{{$product->product_id}}">
                        <input type="hidden" name="warehouse_product_id" id="warehouse_product_id" value="{{$product->id}}">
                        <input type="hidden" name="vendor_id" id="vendor_id" value="{{$product->vendor_id}}">
                        <h6 class="pt-3 mb-0">
                        @if(count($product->group_variants) == 1)
                        @foreach($product->group_variants as $variant)
                        <p>{{$variant->product_color}} @if($variant->product_size) ({{$variant->product_size}}) @endif</p>
                        @endforeach
                        @else
                        <select required id="variant-{{$product->id}}" data-warehouse-product="{{ $product->id }}" class="variant">
                            @foreach($product->group_variants as $variant)
                            <option data-url="{{ route('products.detail',['id' => $variant->id,'group_name_slug'=>$product->group_name_slug]) }}" value="{{$variant->id}}" @if($product->id == $variant->id) selected @endif>
                                {{$variant->product_color}}({{$variant->product_size}}) - @lang('messages.Rs') {{$variant->discounted_price}}
                            </option>
                            @endforeach
                        </select>
                        @endif
                        </h6>
                        @php
                        $total_price = $product->price;
                        if($product->discount_type == 'amount'){
                        $total_price = $product->price - $product->discount_amount;
                        } else if($product->discount_type == 'percentage'){
                        $percenatge = ($product->price/100)*$product->discount_percentage;
                        $total_price = $product->price - $percenatge;
                        }
                        @endphp
                        @if($total_price != $product->price)
                        <h5 class="mrp">MRP :
                        <span class="regular-price" id="regular-price"><i class="mdi mdi-tag-outline"></i>@lang('messages.Rs') {{$product->price}}</span>
                        </h5>
                        <h5>Offer Price :
                        <span class="offer-price mb-0 pt-1" id="offer-price"><span class="">@lang('messages.Rs') {{ $total_price }}</span></span>
                        @else
                        <span class="offer-price mb-0 pt-1" id="offer-price"><span class="">@lang('messages.Rs') {{ $product->price }}</span></span>
                        @endif
                        </h5>
                        @php
                        $quantity = 0;
                        $product_id = $product->id;
                        @endphp
                        @if(!empty($cart_list))
                        @foreach($cart_list as $cart)
                        @if($cart['warehouse_product_id'] == $product_id)
                        @php $quantity = $cart['qty']; @endphp
                        @endif
                        @endforeach
                        @endif
                        @if($quantity > 0)
                        @php $style =""; $cart_style ="display:none"; @endphp
                        @else
                        @php $style ="display:none"; $cart_style ="border-radius: 100px !important;"; @endphp
                        @endif
                        <br><br>
                        {{-- <div class="quantity plus_minus"  data-warehouse-product="{{ $product->id }}" data-product="{{ $product->product_id }}" style="{{ $style }}">
                            <span  class="minus" onclick="updateqty(this,'minus')"><i class="fa fa-minus"></i></span>
                            <input type="number" class="count_new qty" min="0" pattern="\d*"  onkeypress="restrictMinus(event);"  name="qty" value="{{ $quantity }}" data-product="{{ $product->product_id }}">
                            <span class="plus" onclick="updateqty(this,'plus')"><i class="fa fa-plus"></i></span>
                        </div> --}}
                        <div class="quantity plus_minus">
                            <span  class="minus"><i class="fa fa-minus"></i></span>
                            <input type="number" class="count count_new qty" name="qty" id="qty_count" value="{{ $qty }}" pattern="\d*" onkeypress="restrictMinus(event);">
                            <span class="plus"><i class="fa fa-plus"></i></span>
                        </div>
                        <button type="button" style="{{$cart_style }}" data-id="{{ $product->id }}" data-name="{{ $product->name_en }}" data-price="{{ $product->price }}" data-discounted-price="{{ $product->discounted_price }}" data-sub-category="{{ $product->second_level_category_name }}" data-image="{{ $product->image1 }}" data-product-size="{{ $product->product_size }}"  data-qty="1" data-gst-amount="{{ $product->gst_amount}}" data-gst-percent="{{ $product->gst_percent }}" data-group-name-slug="{{ $product->group_name_slug }}" class="mr-4 btn btn-dark" id="add_cart" onclick=""><i class="icon-shopping-bag "></i> @if($show_add_cart_btn) ADD TO CART @else UPDATE TO CART @endif</button>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="short-description">
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                                <h4>@lang('messages.Description')</h4>
                                <p class="p-2">{{ $product->description_en}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<div class="product_area product_style2 mt-50">
<div class="container-fluid">
<div class="row">
    <div class="col-12">
        <div class="section_title md-3">
            <h3>Generic Products – Not School Specific <a class="text-primary" href="{{ url('product-list',['category_id'=>'products','level'=>'all']) }}">See All</a></h3>
        </div>
    </div>
</div>
<div class="col-12 product_style2_ocntainer container pb-5 mb-5 wow slideInUp animated">
    <div class="row product_carousel product2_column5  ">
        @forelse($genric_products as $product)
        <div class="item">
            <div class="product_items">
                <article class="single_product">
                    <figure>
                        <div class="product_thumb">
                            <a class="primary_img" href="{{ route('products.detail',[$product->id,$product->group_name_slug]) }}"><img src="{{ $product->image1 }}" alt=""></a>
                            @if(!empty($product->discount_label))
                            <div class="label_product">
                                <span class="label_sale">{{$product->discount_label}}</span>
                            </div>
                            @endif
                        </div>
                        <figcaption class="product_content">
                        <h4 class="product_name"><a href="{{ route('products.detail',[$product->id,$product->group_name_slug]) }}" class="product-detail-{{$product->id}}">{{ $product->name_en }}
                        </a></h4>
                        @if(!empty($product->discount_label))
                        <div class="price_box">
                            <span class="current_price">{{ env("CURRENCY_CODE") }} {{$product->discounted_price}}</span>
                            <span class="old_price">{{ env("CURRENCY_CODE") }} {{$product->price}}</span>
                        </div>
                        @else
                        <div class="price_box">
                            <span class="current_price">{{ env("CURRENCY_CODE") }} {{$product->price}}</span>
                        </div>
                        @endif
                        </figcaption>
                        <div class="action_links text-center mt-3 ">
                            <a href="{{ route('products.detail',[$product->id,$product->group_name_slug]) }}" class="mr-4 btn btn-dark" title="Add to cart "><i
                            class="icon-shopping-bag "></i> Buy Now</a>
                                                        @if(!empty(Session::get('token')) && $product->is_favourite == 1)
                            <i class="icon-heart select favProducts" data-product="{{ $product->product_id }}" data-warehouse-product="{{ $product->id }}"  data-status="0"></i>
                            @elseif(!empty(Session::get('token')) && $product->is_favourite == 0)
                            <i class="icon-heart favProducts" data-product="{{ $product->product_id }}" data-warehouse-product="{{ $product->id }}"  data-status="1"></i>
                            @else
                            <i class="icon-heart favProducts" ></i>
                            @endif
                        </div>
                    </figure>
                </article>
            </div>
        </div>
        @empty
        <h4> products not available </h4>
        @endforelse
    </div>
</div>
</div>
</div>
</div>
</section>
<script src="{{ URL::asset($theme.'/assets/js/vendor/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript">

$('.plus').click(function() {
    var qty = $('.count_new').val(); 
    qty ++;
    $('.count_new').val(qty);
});

$('.minus').click(function() {
    var qty = $('.count_new').val();
    if(qty != 1) {
        qty --;
    }
    $('.count_new').val(qty);
});

$(document).on('click', '#add_cart', function() {
    buttonDisabled();
    var qty = $('#qty_count').val();
    var id = $(this).attr('data-id');
    var name = $(this).attr('data-name');
    var image = $(this).attr('data-image');
    var price = $(this).attr('data-price');
    var gst_amount = $(this).attr('data-gst-amount');
    var gst_percent = $(this).attr('data-gst-percent');
    var discounted_price = $(this).attr('data-discounted-price');
    var sub_category = $(this).attr('data-sub-category');
    var product_size = $(this).attr('data-product-size');
    var group_name_slug = $(this).attr('data-group-name-slug');
    var token = $('meta[name="csrf-token"]').attr('content');

    var url = '{{ route("cart.update") }}';
    var data = {'qty' : qty, 'id' : id, 'name' : name, 'price' : price, 'discounted_price' : discounted_price, 'sub_category' : sub_category, 'product_size' : product_size, 'image' : image, 'gst_percent' : gst_percent, 'gst_amount' : gst_amount, 'group_name_slug' : group_name_slug};

    $.ajax({
        url: url,
        headers: {'X-CSRF-TOKEN': token},
        data: data,
        type: 'POST',
        datatype: 'json',
        beforeSend: function() {
            $('#add_cart').html('<i class="fa fa-spinner fa-spin"></i>');
            $('#add_cart').addClass('buttonload');
            $('#add_cart').attr('disabled', true);
        },
        success: function (resp) {
            if (resp.http_code != 200) {
                toastr.error(resp.message);
            }
            if (resp.http_code == 200) {
                $('#add_cart').attr('disabled', false);
                $('#add_cart').text('UPDATE TO CART');
                toastr.success(resp.message);
                buttonEnabled();
                $('#cart_bar_div').html(resp.data);
            }
        },
        error: function (err) {

        }
    });

});
$('.variant').change(function() {
    var url = $('option:selected', this).attr('data-url');
    $(location).attr('href',url);
});


$(document).on('click', '.favProducts', function (e) {
    e.preventDefault();
    var customer_id = $('#customer_id').val();
    if (customer_id <= 0) {
        if (confirm('Please Login')) {
            window.location.replace("{{url('/')}}");
            return false;
        }
    } else {
        var token = $('meta[name="csrf-token"]').attr('content');
        var status = $(this).attr("data-status");
        var product_id = $(this).attr('data-product');
        var warehouse_product_id = $(this).attr('data-warehouse-product');
        var vendor_id = $(this).attr('data-vendor');
        //var vendor_id = '1';
        var data = {
            'product_id': product_id,
            'status': status,
            'warehouse_product_id': warehouse_product_id,
            'vendor_id': vendor_id
        };
        var url = '{{url('update-fav')}}';
        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: data,
            type: 'POST',
            datatype: 'JSON',
            success: function (resp) {
                if (resp.http_code == 400) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    window.location.reload();
                } else if (resp.http_code == 500) {
                    toastr.success(resp.message);
                }
            }
        });
    }
});
function restrictMinus(e) {
    var inputKeyCode = e.keyCode ? e.keyCode : e.which;
    if (inputKeyCode != null) {
        if (inputKeyCode == 45) e.preventDefault();
    }
}
// $(".owl-carousel").owlCarousel();
</script>

<style>

#sync3.owl-carousel .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}

#sync3.owl-carousel .owl-item .item{
    display: flex;
    justify-content: center;
    align-content: center;
}


/*#sync1 .item img{
    min-width: 500px;
    max-width: 500px;
    margin: 0px auto;
    display: table;
}*/
/*remove arrow in number field*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
</style>
@endsection