IMMREX7

@extends('students.student_layout')
@section('content')
<div class="row clearfix ecommerce-page">
    <div class="col-sm-12">
    <div class="card action_bar">
                    <div class="body">
                        <div class="row clearfix">
                            <form action="{{url('student/canteen')}}" method="get" class="col-12" style="display:flex;">
                                <div  class="col-lg-5 col-md-5 col-6">
                                    <div class="input-group search">
                                        <input type="text" class="form-control" name="search" placeholder="Search...">
                                        <span class="input-group-addon">
                                            <i class="zmdi zmdi-search"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-lg-1 col-md-2 col-3">
                                    <button class="btn btn-primary btn-round">Search</button>                               
                                </div>
                            
                            <div class="col-lg-6 col-md-5 col-3 text-right">
                            <a href="{{url('student/canteen-receipts')}}" class="btn btn-primary btn-sm waves-effect">View Purchases</a>
                                <div class="btn-group hidden-sm-down" role="group">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-neutral dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="zmdi zmdi-filter-list"></i>
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu pullDown">
                                            <li>
                                                <a href="{{url('student/canteen')}}">Show All</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
        <div class="row">       
        @foreach($products as $product)
        <div class="col-lg-3 col-md-4 col-sm-12">
            <div class="card product_item">
                <div class="body">
                    <div class="cp_img">
                        @if(isset($product->productImage))
                            <img src="{{ asset('storage/schools/'.$product->idSchool.'/foods/'.$product->productImage)}}" alt="Product" class="img-fluid">
                        @else
                            <img src="{{ asset('storage/schools/'.$product->idSchool.'/'.$school->schoolLogo)}}" alt="Product" class="img-fluid" style="width: 240px;">
                        @endif
                        
                        <div class="hover">
                            <a href="javascript:void(0);" class="btn btn-primary btn-sm waves-effect js-notification" data-id="{{$product->idProduct}}" data-action="add" data-text="Item added to your cart" data-placement-from="top" data-placement-align="left" data-animate-enter="" data-animate-exit="" data-color-name="bg-purple"><i class="zmdi zmdi-shopping-cart"></i></a>
                            <a href="javascript:void(0);" class="btn btn-primary btn-sm waves-effect js-notification" data-id="{{$product->idProduct}}" data-action="minus" data-text="Item removed from the cart" data-placement-from="top" data-placement-align="left" data-animate-enter="" data-animate-exit="" data-color-name="alert-danger"><i class="zmdi zmdi-minus"></i></a>
                        </div>
                        
                    </div>
                    <div class="product_details" style="padding-top: 100%;">
                        @if(isset($cart[$product->idProduct]))
                        <div class="badge badge-info" data-qty="{{$cart[$product->idProduct]}}" id="qty_{{$product->idProduct}}" style="font-size: 15px;">Qty : {{$cart[$product->idProduct]}}</div>
                        @else
                        <div class="badge badge-info" data-qty="0" id="qty_{{$product->idProduct}}" style="font-size: 15px;"></div>
                        @endif
                        <h5><a href="ec-product-detail.html">{{$product->productName}}</a></h5>
                        <ul class="product_price list-unstyled">
                            <li class="new_price">Rs. {{$product->salePrice}}</li>
                        </ul>
                    </div>
                </div>
            </div>                
        </div>
        @endforeach
        </div>
    </div>
</div>    
@stop  
@section('script') 
<script src="{{asset('/plugins/bootstrap-notify/bootstrap-notify.js')}}"></script>
<script>
    $(function () {
    $('.js-notification').on('click', function () {
        
        var placementFrom = $(this).data('placement-from');
        var placementAlign = $(this).data('placement-align');
        var animateEnter = $(this).data('animate-enter');
        var animateExit = $(this).data('animate-exit');
        var colorName = $(this).data('color-name');
        var text = $(this).data('text');
        var qty = $(this).data('qty');

        var requestPayload = JSON.stringify({
            idProduct: $(this).data('id'),
            action : $(this).data('action')
        });
        var requestOptions = {
          method: "POST",
          headers: {
            "X-CSRF-TOKEN": "{{csrf_token()}}",
            "Content-Type": "application/json",
          },
          body: requestPayload,
        };
        fetch("{{url('student/canteen-cart')}}", requestOptions)
          .then((response) => response.json())
          .then((result) => {
            if(result.result == 1){
                if(result.count != null)
                $("#cart_icon").attr('value',result.count);
                else $("#cart_icon").attr('value',"0");

                if(result.qty == 0)
                $("#qty_"+$(this).data('id')).empty();
                if(result.qty > 0 && result.qty < 4)
                $("#qty_"+$(this).data('id')).html('Qty : '+result.qty)

                if(result.qty > 3){
                    text = "You have already added all of the allowed items.";
                }
                showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit);
            }
          })
          .catch((error) => console.log("error", error));
    });
});

function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
    if (colorName === null || colorName === '') { colorName = 'bg-black'; }
    if (text === null || text === '') { text = 'Turning standard Bootstrap alerts'; }
    if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
    if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
    var allowDismiss = true;

    $.notify({
        message: text
    },
        {
            type: colorName,
            allow_dismiss: allowDismiss,
            newest_on_top: true,
            timer: 1000,
            placement: {
                from: placementFrom,
                align: placementAlign
            },
            animate: {
                enter: animateEnter,
                exit: animateExit
            },
            template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-35" : "") + '" role="alert">' +
            '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
            '<span data-notify="icon"><i class="zmdi zmdi-shopping-cart"></i></span> ' +
            '<span data-notify="title">{1}</span> ' +
            '<span data-notify="message">{2}</span>' +
            '<div class="progress" data-notify="progressbar">' +
            '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
            '</div>' +
            '<a href="{3}" target="{4}" data-notify="url"></a>' +
            '</div>'
        });
}
</script>   
@stop