@extends('frontend.layouts.default-blog')
@section('content')

<section class="header-section">
  <div class="container">
    <h2 class="section-title fs-1 text-start mb-2">{{$blog->title}}</h2>
    <p>{{\Carbon\Carbon::parse($blog->created_at)->format('F d, Y')}} • By <i>{{$blog->author}}</i></p>
  </div>
</section>

<section class="section blog-detail">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        {!! $blog->description !!}
      </div>
      
      <div class="col-md-4 sidebar">
        @if(count($popular)>0)
        <div class="sidebar-box mb-4">
          <h2>Popular Blogs</h2>
          @foreach($popular as $populr)
          <div class="row d-flex align-items-center mb-2">
            <div class="col-md-4">
              <img src="{{ url('storage/uploads/blogs/'.$populr->image) }}" alt="Blog Image" class="img-fluid">
            </div>
            <div class="col-md-8">
              <a href="blog-details/{{$populr->slug}}"><h5>{{$populr->title}}</h5></a>
            </div>
          </div>
          @endforeach
        </div>
        @endif

        <!--<div class="form-box sticky-top">
          <div class="row">
            <div class="col-md-12">
              <h5 class="mb-3">Sign up for a free trial to access all of the exam topic booklets on KayScience</h5>
            </div>
            <form method="POST" id="myform"  action="https://script.google.com/macros/s/AKfycbzL0luPnzupDWapKbWTSYOlHwU32PGk0_52NLhIvn03Mmmjr4u4GiR7-zXE26eJrA8O/exec" target="hidden-form">  
              @csrf
              <div class="col-md-12 col-sm-12">
                
                <input type="hidden" name="sheetName" value="Blog">
                <div class="row">
                  <div class="col-md-12 mb-2">
                  <input class="form-control" type="text" name="Name" id="Name" placeholder="Please enter your name." required>
                  </div>
                  <div class="col-md-12 mb-2">
                  <input class="form-control" type="email" name="Email" id="Email" placeholder="Please enter your email address." required>
                  </div>
                  <div class="col-md-12 d-flex align-items-center">
                  <button class="btn btn-blue w-100" type="submit" id="mybutton" >Download Now</button>
                  </div>
                </div>
              </div>
            </form>
          
            <iframe style="display:none" name="hidden-form"></iframe>
            <iframe style="display:none" name="hidden-form2"></iframe>
          </div>
        </div>-->

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

@push('inner-scripts')
<script>
$('#mybutton').on('click',function(e){
    e.preventDefault();
    email = document.getElementById('Email').value;
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
  {
    $(".loader").show();
    document.getElementById('myform').submit();
    const myTimeout1 = setTimeout(function (){
      document.getElementById("myform").action ="https://hooks.zapier.com/hooks/catch/6067618/b8k22bu/";
      document.getElementById("myform").target ="hidden-form2";
      document.getElementById('myform').submit();
      const myTimeout = setTimeout(function (){
        $(".loader").hide();
        window.location.href = "{{url('/thankyou')}}"
      }, 2000);
    }, 2000);
    
  }
  else
  {
      alert("Not a valid email");
  }
})

</script>
@endpush
@endsection