@extends('layouts.app')



@section('content')




    <div id="recipe2" class="container ">
        <div class="row">
            <div class="col-md-12 offset-md-0 ">
                <div class="row my-4 p-2 mx-0 g-0 border rounded  shadow-sm text-start">

                    <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 p-2">

                        <div class="text-primary d-print-none">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item" ><a href="/recipes">Recipes</a></li>
                                    <li class="breadcrumb-item" ><a href="/recipes/{{$category_id}}">{{$category_name}}</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">{{$recipe_name}}</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="text-primary text-muted d-print-none">
                            <span class="">Nov 12, 2022</span> by <a href="#">{{$author}}</a>
                        </div>

                        <h1 class="my-3 fw-bold">{{ $recipe_name }}</h1>

                        <div class="fs-5 mt-2 fw-bolder">
                            Summary
                        </div>
                        <p class="my-1 fs-5 ">{!! $recipe_summary !!} </p>

                        <!-- buttons -->
                        <div class="col-sm-12 mb-0 mx-0 px-0 d-print-none">
                            <div class=" text-centers">
                                <button class="my-2 me-3 btn btn-lg rounded-1 btn-success" style="min-width:110px;" onclick="printDiv('recipe2')"><i class="fa-solid fa-print"></i>&nbsp;PRINT</button>
                                <a class="my-2 me-3  btn btn-lg rounded-1 btn-success" style="min-width:110px;"
                                   TARGET="_blank" href="http://pinterest.com/pin/create/button/?url=http://rainbowplantlife.com&media=https://cdn.pixabay.com/photo/2016/12/12/01/33/factory-1900663_960_720.jpg&description=my description of my stuff
                           "><i class="fa-brands fa-pinterest-p"></i>&nbsp;PIN</a>

                                <button class="my-2 me-3  btn  btn-lg  rounded-1 btn-danger  toggle-heart" style="min-width:110px;" data-recipe_id="{{ $recipe_id }}" data-state="{{$favourite_heart_state}}"><i class="fa-heart {!! $favourite_heart_icon  !!} "></i>&nbsp;SAVE </button>
                                <button class="my-2 me-3  btn  btn-lg  rounded-1 btn-success" style="min-width:110px;"><i class="fa-solid fa-envelope"></i>&nbsp;EMAIL </button>
                            </div>
                        </div>



                        <div class="row my-3 pt-3">
                            <div class="col-md-2 col-sm-12">
                                <span class="fw-bolder">Prep Time:</span>
                                <span class="">{{ $prep_time }}</span>
                                <hr class="d-md-inline-block d-md-none">
                            </div>

                            <div class="col-sm-1 d-sm-inline-block border-end border-dark"></div>
                            <div class="col-md-2 col-sm-12">
                                <span class="fw-bolder">Cook Time:</span>
                                <span class="">{{ $cook_time }}</span>
                                <hr class="d-md-inline-block d-md-none">
                            </div>

                            <div class="col-sm-1  d-sm-inline-block border-end border-dark"></div>
                            <div class="col-md-2 col-sm-12">
                                <span class="fw-bolder">Total Time:</span>
                                <span class="">{{ $total_time }}</span>
                                <hr class="d-md-inline-block d-md-none">
                            </div>

                            <div class="col-sm-1  d-sm-inline-block border-end border-dark"></div>
                            <div class="col-md-2 col-sm-12 px-2" onclick="doJumpToReview()">
                                <span class="fw-bolder d-block text-nowrap">Votes</span>
                               {!!  $rating !!}




                                <hr class="d-md-inline-block d-md-none">
                            </div>
                        </div>


                    </div>

                        <div class="d-print-none col-xxl-6 col-xl-6 col-lg-6  col-md-12 col-sm-12 p-2">
                        <div class=" img-hover-zoom img-hover-zoom--quick-zoom " style="overflow: hidden;position:relative;">
                            <img class="img-fluid" src="{{ asset($recipe_image) }}"  alt="{{ $recipe_name }} image" >
                            <a href="#" class=" position-absolute top-0 start-0 m-3 text-white toggle-heart" data-recipe_id="{{ $recipe_id }}" data-state="{{$favourite_heart_state}}" ><i class="fa-3x fa-heart {!! $favourite_heart_icon  !!} " title="Toggle Bookmark"></i></a>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-12">
                            <div class="fs-5 mt-1 fw-bolder">
                                Description
                            </div>
                            <p class="my-1 fs-5 mb-3">
                                {!! $recipe_description !!}
                            </p>
                            <hr>

                        </div>
                    </div>








                    <div class="row">

                        <!-- scale and units -->
                    <div class="col-xxl-12 d-print-none">
                        <div class=" fs-5 fw-bolder mb-0">
                            <div class="row mb-0">
                                <div class="col-sm-12 col-md-3">
                                    Servings: <span class="recipe_servings">{{ $servings }}</span>
                                </div>
                                <div class="col-sm-12 col-md-4 mt-1 pe-4 text-center">

                                    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">

                                        {!!  $servings_string !!}


                                    </div>

                                </div>
                            </div>
                        </div>

                        <hr>
                    </div>

                    <!-- ingredients -->
                    <div class="col-xxl-12">

                        <div class="col-3 fs-5 fw-bolder">
                            Ingredients
                        </div>

                        <span id="recipe_ingredients">
                        {!! $ingredients_string[0] !!}

                        </span>

                    </div>


                    <!-- instructions -->
                    <div id="instructions" class="col-sm-12">
                        <hr>
                        <div class="fs-5 fw-bolder">
                            Instructions
                        </div>

                        {!! $recipe_step_string !!}


                        @if (AUTH::check() )

                            @if (AUTH::id() === 1)

                            <button class="btn  py-2 px-3 btn-danger  " type='button' id="submit" onclick="doDelete()">Delete</button>

                            @endif
                        @endif

                    </div>

                        <span class="d-print-none">

                    <!-- review -->
                   @if(Auth::check())
                             @if( !$reviewed )
                            <div class="col-sm-12">
                        <hr>
                        <div class="fs-5 fw-bolder">
                            Review & Comment
                        </div>
                        <div class="form-group row">
                            <!-- not really needed --->
                            <input type="hidden" name="recipe_id" value="{{ $recipe_id }}">
                            <div class="col">
                                <div class="rate">
                                    <input type="radio" id="star5" class="rate" name="rating" value="5"/>
                                    <label for="star5" title="rate 5">5 stars</label>
                                    <input type="radio" id="star4" class="rate" name="rating" value="4"/>
                                    <label for="star4" title="rate 4">4 stars</label>
                                    <input type="radio" id="star3" class="rate" name="rating" value="3"/>
                                    <label for="star3" title="rate 3">3 stars</label>
                                    <input type="radio" id="star2" class="rate" name="rating" value="2">
                                    <label for="star2" title="rate 2">2 stars</label>
                                    <input type="radio" id="star1" class="rate" name="rating" value="1"/>
                                    <label for="star1" title="rate 1">1 star</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mt-4">
                            <div class="col">
                                <textarea class="form-control" name="comment" id="comment" rows="6 " placeholder="Comment" maxlength="200"></textarea>
                            </div>
                        </div>
                        <div class="mt-3 text-right">
                            <!-- could be changeable ti 'update' -->
                            <button class="btn  py-2 px-3 btn-success  " type='button' id="submit" onclick="doSubmitReview()">Submit Review
                            </button>
                        </div>
                    </div>
                            @endif
                   @endif
                        <div class="mt-3">
                       {!!  $comments_string !!}
                        </div>
                    </div>
                </div>

            <!-- we have a star rating -->
            @if(!empty($value->star_rating))
                <div class="container">
                    <div class="row">
                        <div class="col mt-4">
                            <div class="col-3 fs-5 fw-bolder">
                                Ingredients
                            </div>
                            <div class="form-group row">
                                <input type="hidden" name="booking_id" value="{{ $value->id }}">
                                <div class="col">
                                    <div class="rated">
                                        @for($i=1; $i<=$value->star_rating; $i++)
                                            {{-- <input type="radio" id="star{{$i}}" class="rate" name="rating" value="5"/> --}}
                                            <label class="star-rating-complete" title="text">{{$i}} stars</label>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row mt-4">
                                <div class="col">
                                    <p>{ $value->comments }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="row p-5 m-5">

                </div>
            @endif

            </span>






            <style>
                .rate {
                    float: left;
                    height: 46px;
                    padding: 0 10px;
                }
                .rate:not(:checked) > input {
                    position:absolute;
                    display: none;
                }
                .rate:not(:checked) > label {
                    float:right;
                    width:1em;
                    overflow:hidden;
                    white-space:nowrap;
                    cursor:pointer;
                    font-size:30px;
                    color:#ccc;
                }
                .rated:not(:checked) > label {
                    float:right;
                    width:1em;
                    overflow:hidden;
                    white-space:nowrap;
                    cursor:pointer;
                    font-size:30px;
                    color:#ccc;
                }
                .rate:not(:checked) > label:before {
                    content: '★ ';
                }
                .rate > input:checked ~ label {
                    color: #ffc700;
                }
                .rate:not(:checked) > label:hover,
                .rate:not(:checked) > label:hover ~ label {
                    color: #deb217;
                }
                .rate > input:checked + label:hover,
                .rate > input:checked + label:hover ~ label,
                .rate > input:checked ~ label:hover,
                .rate > input:checked ~ label:hover ~ label,
                .rate > label:hover ~ input:checked ~ label {
                    color: #c59b08;
                }
                .star-rating-complete{
                    color: #c59b08;
                }
                .rating-container .form-control:hover, .rating-container .form-control:focus{
                    background: #fff;
                    border: 1px solid #ced4da;
                }
                .rating-container textarea:focus, .rating-container input:focus {
                    color: #000;
                }
                .rated {
                    float: left;
                    height: 46px;
                    padding: 0 10px;
                }
                .rated:not(:checked) > input {
                    position:absolute;
                    display: none;
                }
                .rated:not(:checked) > label {
                    float:right;
                    width:1em;
                    overflow:hidden;
                    white-space:nowrap;
                    cursor:pointer;
                    font-size:30px;
                    color:#ffc700;
                }
                .rated:not(:checked) > label:before {
                    content: '★ ';
                }
                .rated > input:checked ~ label {
                    color: #ffc700;
                }
                .rated:not(:checked) > label:hover,
                .rated:not(:checked) > label:hover ~ label {
                    color: #deb217;
                }
                .rated > input:checked + label:hover,
                .rated > input:checked + label:hover ~ label,
                .rated > input:checked ~ label:hover,
                .rated > input:checked ~ label:hover ~ label,
                .rated > label:hover ~ input:checked ~ label {
                    color: #c59b08;
                }
            </style>











        <!-- Script to print the content of a div -->
        <script>


            let ingredients_string  =  @json($ingredients_string);
            let servings_multiplier =  $("input[name='servings_multiplier']:checked").val();
            $(".recipe_servings").html(servings_multiplier);
            $("#recipe_ingredients").html(ingredients_string[servings_multiplier-1]);

            function printDiv(divName) {
                let printContents = document.getElementById(divName).innerHTML;
                let originalContents = document.body.innerHTML;
                document.body.innerHTML = printContents;
                window.print();
                document.body.innerHTML = originalContents;
            }


            // handles the ajax for clicking
            $('.btn-check').on('click',function(){
                let servings_multiplier =  $("input[name='servings_multiplier']:checked").val();
                $(".recipe_servings").html(servings_multiplier);
                $("#recipe_ingredients").html(ingredients_string[servings_multiplier-1]);
            });




            // handle the rating
            function doSubmitReview()
            {
                @if(Auth::check())

                let rating      =  $("input[name='rating']:checked").val();
                let comment     =  $('#comment').val();

                $.ajax({
                    url:  "{{ route('ajaxReviewRecipe') }}",
                    datatype: "html",
                    type: "post",
                    data    : {
                        recipe_id : {{ $recipe_id }},
                        rating : rating,
                        comment : comment,
                        _token:'{{ csrf_token() }}',
                    },
                    beforeSend: function () {
                        $('#submit').html('Submitting...');
                    }
                    })
                    .done(function (response)
                    {
                      // test for errors here....
                      if (response['error'])
                      {
                          doConfirm(response['title'],response['message'],response['link'],response['link_text']);
                      }
                      else
                      {

                          if (response['refresh'])
                          {
                              $.alert({
                                  type: "green",
                                  title: response['title'],
                                  content: response['message'],
                                  onClose: function(){

                                      location.reload();
                                  }

                              });
                          }
                          else
                          {
                              $.alert({
                                  type: "green",
                                  title: response['title'],
                                  content: response['message'],

                              });
                              $('#submit').html('Submit Review');

                          }

                      }
                   })
                    .fail(function (jqXHR, ajaxOptions, thrownError) {
                        console.log('Server error occurred');
                    });

                @else
                    doConfirm('Sorry','You need to <b>login</b> to be able to do this',"{{ route('login') }}",'login');
                 @endif


            }

            function doRedirectPage()
            {
                alert('r')
                window.location.reload(false);
            }


            function doJumpToReview()
            {
    //            $('#instructions').scrollTop(0);
 //               window.scrollTo({top: 1110, behavior: 'smooth'});
  //              $('html, body').animate({ scrollTop: $('#instructions').offset().top }, 'fasle')

 //               id  =   "instructions";
//                let etop = $('#' + id).offset().top;
        //        $(document).scrollTop( $('#instructions').offset().top());
            }







            // handle the rating
            function doDelete()
            {


                $.ajax({
                    url:  "{{ route('ajaxDeleteRecipe') }}",
                    datatype: "html",
                    type: "post",
                    data    : {
                        recipe_id : {{ $recipe_id }},
                        _token:'{{ csrf_token() }}',
                    },
                    beforeSend: function () {
                        $('#submit').html('Submitting...');
                    }
                })
                    .done(function (response)
                    {
                        // test for errors here....
                        if (response['error'])
                        {
                            doConfirm(response['title'],response['message'],response['link'],response['link_text']);
                        }
                        else
                        {
                            window.location =   "/recipes"

                        }
                    })
                    .fail(function (jqXHR, ajaxOptions, thrownError) {
                        console.log('Server error occurred');
                    });



            }

        </script>





        <style>



            .strikethrough:checked + label{
                text-decoration:line-through
            }

            .checkbox-lg .form-check-input{
                top: .8rem;
                scale: 1.4;
                margin-right: 0.7rem;
            }

            .checkbox-lg .form-check-label {
                vertical-align: text-top;
                display: inline;

            }

            .checkbox-xl .form-check-input {
                top: 1.2rem;
                scale: 1.7;
                margin-right: 0.8rem;
            }

            .checkbox-xl .form-check-label {
                padding-top: 19px;
            }


        </style>




        <!-- Modal -->
        <div   class="modal modal-xl fade " id="exampleModalLabelS" tabindex="-1" aria-labelledby="exampleModalLabelS" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabelS">Search Results</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row ">


                                <div class="mt-5 row ">

                                        @livewire('search-header')

                                </div>

                            @livewireScripts

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

                    </div>
                </div>

            </div>

        </div>



@endsection