@extends('layouts.app')


@section('content')


<div class="container">

    <div class="row m-2" >
        <div class="col display-5">
            Recipe Listing
        </div>
    </div>

    <div class="row mt-0 p-0 mx-2">
        <div class="col-xxl-12  p-4 rounded-1" style="background-color: #dddddd;">

            <div class="row ">

                <div class="col-lg-3 col-md-3  col-sm-12">
                    {!! $select_category_string !!}
                </div>
                <div class="col-lg-3 col-md-3  col-sm-12">
                    {!! $select_time_string !!}
                </div>
                <div class="col-lg-3 col-md-3  col-sm-12">
                    {!! $select_other_string !!}
                </div>
                <div class="col-lg-3 col-md-3  mt-4 col-sm-12 p-2">
                    <span class="">
                        <button class="btn btn-lsg btn-success" onclick="resetAll();">RESET ALL</button>
                    </span>
                </div>
            </div>
        </div>
    </div>


    <div id="data-wrapper" class="row mt-0 mx-0 px-0">
        <!-- 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>
    // initial page
    let page = 0;



    function resetAll()
    {
        $('#category_id').val("");
        $('#time_id').val("");

        page=1;
        infinteLoadMore(true)
    }



    function doLoadMore()
    {

        page=1;
        infinteLoadMore(true);
    }

    infinteLoadMore();
    page++;


    function infinteLoadMore(append=false)
    {

        let other_id       =   $("#other_id option:selected").val();
        let time_id        =   $("#time_id option:selected").val();
        let category_id    =   $("#category_id option:selected").val();

        $.ajax({
            url:  "{{ route('ajaxGetRecipes') }}? page=" + page,
            datatype: "html",
            type: "get",
            data    : {
                other_id : other_id,
                time_id  : time_id,
                category_id : category_id,
                _token:'{{ csrf_token() }}',
            },
            beforeSend: function () {
                  $('.auto-load').show();

                  $('#load_more').html('Loading...');

                 }
             })
            .done(function (response) {

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


                if (response['recipe_data'].length == 0)
                {
                    $("#data-wrapper").empty();
                    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
                {
                    // empty, then fade on the default html
                    $("#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']);

                }
                // scroll to bottom after
                window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })

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


@endsection