@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>
                        @if(isset($product->main_category_id) && !empty($product->main_category_id))
                            <span class="fa fa-angle-right"></span> <a href="{{url('school-list') }}">{{ $product->main_category_name }}</a>
                        @endif
                        @if(isset($product->second_level_category_id) && !empty($product->second_level_category_id))
                            <span class="fa fa-angle-right"></span> <a href="{{ url('home?school_id='.$product->second_level_category_id) }}">{{ $product->second_level_category_name }}</a>
                        @endif
                        @if(isset($product->third_level_category_id) && !empty($product->third_level_category_id))
                              <span class="fa fa-angle-right"></span> <a href="{{ url('product-list/'.$product->third_level_category_id.'/3') }}">{{ $product->third_level_category_name }}</a>
                        @endif
                        @if(isset($product->fourth_level_category_id) && !empty($product->fourth_level_category_id))
                              <span class="fa fa-angle-right"></span> <a href="{{ url('product-list/'.$product->fourth_level_category_id.'/4') }}">{{ $product->fourth_level_category_name }}</a>
                        @endif 
                        <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 id="sync3" class="owl-carousel">

                             @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" data-name="{{ $product->name_en }}" data-img="{{ $product->image1 }}" data-price="{{ $product->price }}" data-variant-en="{{ $product->variant_en }}"  data-discounted-price="{{ $product->discounted_price }}" data-product="{{ $product->product_id }}">

                        <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="vendor_id" id="vendor_id" value="{{$product->vendor_id}}">

                        <h6 class="pt-3 mb-0">
                                                                 @foreach($product->group_variants as $variant)
                                                                    @endforeach

                                @if($count == 1)
                                    @foreach($product->group_variants as $variant)
                                        <p>{{$variant->group_variant_name}}</p>
                                    @endforeach
                                @endif

                                @if($count > 1)
                                    <select required id="variant" class="variant">
                                        @foreach($product->group_variants as $variant)
                                            <option  data-url="{{ url('school/product-details/'.$variant->id.'/'.$variant->group_name_slug) }}" value="{{$variant->id}}" @if($product->id == $variant->id) selected @endif>
                                            {{ $variant->group_variant_name }}
                                            </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['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

                        <div class="quantity plus_minus">
                            <span  class="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="{{ $qty }}">
                            <span class="plus"><i class="fa fa-plus"></i></span>
                        </div>

                       {{--  <div class="qty col-12 col-lg-3 d-lg-flex  align-items-lg-center d-inline-block">
                            <span class="minus"><i class="fa fa-minus"></i></span>
                            <input type="number" class="count" name="qty" id="qty_count" value="{{ $qty }}" 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 addToCart " 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="{{ url('product-details/'.$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="{{ url('product-details/'.$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="{{ url('product-details/'.$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('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 = $('.count_new').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(err_msg);
            }
            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