@extends('layouts.main')



@section('content')

 


 <section id="blog1">



    <h2 id=name class="heading">{{ $recipe->Name }}</h2>



 <p class="at" id="ata" style="text-align: center;">Please, click here to start talking to me :) <img onclick="setInterval(startDictation, 3000)" src="{{ asset('images/mic.png') }}" /></p>

     <div class="ra">


    <!-- DON'T FORGET TO PUT INGREDIENTS HERE -->

<a name="ingredients"></a>

 <h3 class="ta"> Ingredients </h3>

 <br/>

     
    @foreach($ingredient as $key=>$i)

        <p class="at"> &mdash; {{substr($i,0,25)}} ...</p>





    @endforeach

</div>

 </section>





    <!-- Search Form -->

        <!-- search form for "start" word -->

        <form id="labnol" method="get" action="#1">

        </form>



        <!-- search form for "next" word -->

        <form id="labnol2" method="get" action="#{{$c}}">

            <div class="speech">

                <input type="hidden" name="q" id="transcript" placeholder="Speak" />

                <input type='hidden' id='calc' name="c" value="{{$c}}"/>

            </div>

        </form>



        <!-- search form for "ingredients" word -->

         <form id="labnol3" method="get" action="#ingredients">

            <input type="hidden" name="q" id="transcript2" placeholder="Speak" />

            <input type='hidden' id='calc' name="c" value="{{$c}}"/>

        </form>



        <!-- search form for "previous" word -->

         <form id="labnol4" method="get" action="#{{$c-1}}">

             <input type="hidden" name="q" id="transcript3" placeholder="Speak" />

             <input type='hidden' id='calc' name="c" value="{{$c}}"/>

         </form>



    <!-- HTML5 Speech Recognition API -->

    <script>



       var myVar = setInterval(startDictation, 5000);

        function startDictation() {

            if (window.hasOwnProperty('webkitSpeechRecognition')) {

                var recognition = new webkitSpeechRecognition();



                recognition.continuous = false;

                recognition.interimResults = false;



                recognition.lang = "en-US";

                recognition.start();



                recognition.onresult = function(e) {

                    document.getElementById('transcript').value

                            = e.results[0][0].transcript;



                    document.getElementById('transcript2').value

                            = e.results[0][0].transcript;



                    document.getElementById('transcript3').value

                            = e.results[0][0].transcript;



                    //recognition.stop();

                    if(e.results[0][0].transcript == "start"){



                        document.getElementById('labnol').submit();

                    }

                    else if (e.results[0][0].transcript == "next") {

                        document.getElementById('labnol2').submit();

                    }

                    else if (e.results[0][0].transcript == "previous") {

                        document.getElementById('labnol2').submit();

                    }

                    else if (e.results[0][0].transcript == "ingredients"){

                        document.getElementById('labnol3').submit();

                    }

                    else if (e.results[0][0].transcript == "recipe"){

                        document.getElementById('labnol4').submit();

                    }



                };



                recognition.onerror = function(e) {

                    recognition.stop();

                }



            }

        }



    </script>



<section id="about-us1">

 <h3 class="ta heading"> <span>Steps </span> </h3>

 <br/>

  @foreach($step as $key=>$s)

        <a href="#{{$key+1}}" class="atq">{{$key+1 }}) {{substr($s,0,25)}} ... </a>

        <br/>

    @endforeach



</section>



    <!-- STEPS START HERE -->



    @foreach($step as $key=>$s)

        <!-- hidden anchor to get to this step-->

        <a name="{{$key+1}}"></a>

        <!-- actual step -->

            <div class="row">

                <!-- Step text -->

                <div class="col-md-4"><p class="atw"> {{$key+1 }}) {{$s}}</p> </div>

                <!-- Step image or video -->

                <div id='image' class="col-md-8">

                    


                    <img class='img-responsive' src="{{url('/')}}/img/{{trim($img[$key])}}" style="float: right;"/>

                </div>

            </div>

            <br/>

        <!-- END of actual step -->



        <!-- go to Previous step button-->



            <form id="nextbtn" method="get" action="#{{$c}}" style="display: inline-block;">

                <div class="speech">

                    <input type='hidden' name="q" value="previous"/>

                    <input type='hidden' id='calc' name="c" value="{{$c}}"/>

                    <input type="submit" class="btn btn-default previous" value="Previous"/>

                </div>

            </form>









         <!-- go to Next step button-->

         <form id="nextbtn" method="get" action="#{{$c}}" style="display: inline-block;float: right;">

             <div class="speech">

                 <input type='hidden' name="q" value="next"/>

                 <input type='hidden' id='calc' name="c" value="{{$c}}"/>

                 <input type="submit" class="btn btn-default previous" value="Next"/>

             </div>

         </form>



 <hr/>

    @endforeach



     <!-- go Back to the recipes page button-->

    <div><a href="{{url('/home')}}"><button type="button" class="btn btn-default">Back</button></a></div>



    <!-- STEPS END HERE -->

@endsection