@extends('layouts.app')


@section('content')


<div class="container">

    <div class="row mt-4" >
        <div class="col display-5">
            Favourites
        </div>
    </div>

    <div id="data-wrapper" class="row mt-0 mx-1">
        <!-- Results -->
    </div>
    <!-- Data Loader -->
    <div class="auto-load text-center">
        <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             x="0px" y="0px" height="100" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                <path fill="#000"
                      d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                                      from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                </path>
            </svg>
    </div>


</div>


<script>
    let page = 0;
    function doLoadMore()
    {
        page=1;
        infinteLoadMore(true);
    }

    infinteLoadMore();
    page++;


    function infinteLoadMore(append=false)
    {

        $.ajax({
            url:  "{{ route('ajaxGetFavouriteRecipes') }}? page=" + page,
            datatype: "html",
            type: "get",
            data    : {

                _token:'{{ csrf_token() }}',
            },
            beforeSend: function () {
                $('.auto-load').show();
            }
        })
            .done(function (response) {

                $('.auto-load').hide();
                $('#load_more').remove();


                if (response['recipe_data'].length == 0)
                {
                    return;
                }


                $('#load_more').remove();
                if (append === false)
                {
                    // append and fade on the default html
                    $(response['recipe_data']).hide().appendTo("#data-wrapper").fadeIn(750);

                    page++;
                }
                else
                {
                    $("#data-wrapper").empty();
                    $(response['recipe_data']).hide().appendTo("#data-wrapper").fadeIn(750);
                    page++;
                }

                // only load more if we have more date to load next time
                if (response['load_more'])
                {
                    $("#data-wrapper").append(response['load_more']);

                }

            })
            .fail(function (jqXHR, ajaxOptions, thrownError) {
                console.log('Server error occured');
            });
    }
</script>


@endsection