@extends('layouts.app')

@section('content')


<div class="container mt-5">
        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4 text-center text">
            @foreach($business as $businessInfo)
                <input type="hidden" id="gmb_url" value="{{$businessInfo->social_media['google']}}">
                @endforeach
                <h3>Please provide rating on our work!</h3>
                <p>please take a moment to give us stars. Your responses will help us serve you better in the future.
                </p>
            <div class = "con ">
                <!-- fa fa-star is used to create star icon -->
                <i class = "fa fa-star" style="cursor:pointer;font-size:25px" aria-hidden = "true" id = "st1"></i>
               <i class = "fa fa-star" style="cursor:pointer;font-size:25px" aria-hidden = "true" id = "st2"></i>
               <i class = "fa fa-star" style="cursor:pointer;font-size:25px" aria-hidden = "true" id = "st3"></i>
               <i class = "fa fa-star" style="cursor:pointer;font-size:25px" aria-hidden = "true" id = "st4"></i>
               <i class = "fa fa-star" style="cursor:pointer;font-size:25px" aria-hidden = "true" id = "st5"></i>
               </div>
            </div>
            <div class="col-lg-4"></div>
        </div>
        <div class='row'>
            <div class='col-sm-12 col-md-4'></div>
            <div class='col-sm-12 col-md-4'>
                <form action='https://businessreviewsmanagement.com/scotts-solar-system/email.php' method='POST' class='custom-review-form'>
                      <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input name='email' type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                      </div>
                     <div class="form-group my-2">
                    <label for="exampleFormControlTextarea1">Message</label>
                    <textarea name='message' class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                  </div>
                      <button type="submit" class="my-2 btn btn-primary">Submit</button>
                    </form>
            </div>
                        <div class='col-sm-12 col-md-4'></div>
        </div>
    </div>
                
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
        crossorigin="anonymous"></script>
        <script>
            jQuery(function(){
           
           jQuery("#st1").hover(function() {
                         jQuery(".fa-star").css("color", "black");
                         jQuery("#st1").css("color", "#e54508");
           
                     });
                     jQuery("#st2").hover(function() {
                         jQuery(".fa-star").css("color", "black");
                         jQuery("#st1, #st2").css("color", "#e54508");
           
                     });
                     jQuery("#st3").hover(function() {
                         jQuery(".fa-star").css("color", "black")
                         jQuery("#st1, #st2, #st3").css("color", "#e54508");
           
                     });
                     jQuery("#st4").hover(function() {
                         jQuery(".fa-star").css("color", "black");
                         jQuery("#st1, #st2, #st3, #st4").css("color", "#e54508");
           
                     });
                     jQuery("#st5").hover(function() {
                         (".fa-star").css("color", "black");
                         jQuery("#st1, #st2, #st3, #st4, #st5").css("color", "#e54508");
           
                     });
              jQuery("#st3,#st2,#st1").click(function() {
                         jQuery(".custom-review-form").show();
           
                     });
                  jQuery("#st4,#st5").click(function() {
                      jQuery(".custom-review-form").hide();
                      var gmb_url = jQuery('#gmb_url').val();
                         window.location.replace(gmb_url);
           
                     });
             });
        </script>
@endsection