@extends('frontend::page')

@section('content')

@if(empty($link_query->image))
@php $link_query->image='no_image.png'; @endphp
@endif

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!--LISTVIEW STYLE START-->
<style>
.listview {
  list-style-type: none;
  padding: 0;
}

.listview li {
  position: relative;
  margin-bottom: 10px;
  width:100%;
}

.listview-item {
  position: relative;
  width:100%;
  display: block;
  padding: 10px;
  border-radius: 5px;
  background-color: #f1f1f1;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s ease;
}



.listview-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #333;
}

</style>
<!--LISTVIEW STYLE ENDS-->
<!--HERO BANNER START-->
<style>
    .hero-banner {
  position: relative;
  width: 100%;
  height: 300px;
  background: linear-gradient(to bottom, #ffffff, #ffffff);
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.col-md-9 {
  margin-top: 20px;
  text-align: center;
}

/* Optional: Adjust the styling of the content as needed */
.col-md-9 a {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}

.col-md-9 a:hover {
  text-decoration: underline;
}

</style>
<!--HERO BANNER ENDS-->

<!--CSS HEADER START-->
<style>
    .header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  width:100%;
}

.back-button {
  display: block;
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.header-title {
  margin: 0;
  font-size: 20px;
  text-align: center; /* Add this line */
}

@media (min-width: 768px) {
  .header {
    padding: 20px;
  }
  
  .back-button {
    display: none;
  }
}

</style>

<script>
    function goBack() {
  window.history.back();
}

</script>
<!--CSS HEADER ENDS-->


<!--ENCOURAGE BUTTON START-->
<style>
    .encourage_btn {
	background-color:#ffb700;
	border-radius:28px;
	border:1px solid #ffb700;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffb700;
}
.encourage_btn:hover {
	background-color:#ffb700;
}
.encourage_btn:active {
	position:relative;
	top:1px;
}

</style>

<!--ENCOURAGE BUTTON ENDS-->

<!-- Container -->

<!--SHOW OR HIDE ON MOBILE START-->
<style>
/* show only on desktop */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.mymobile {
display: none
}

</style>

<style type="text/css">

/*show only on mobile */

   .mobileShow { display: none;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>


<!--SHOW OR HIDE ON MOBILE ENDS-->


<!--PIE CHART DOUGHNUT VIEW START-->

<style>
    /**
 * 1. The `reverse` animation direction plays the animation backwards
 *    which makes it start at the stroke offset 100 which means displaying
 *    no stroke at all and animating it to the value defined in the SVG
 *    via the inline `stroke-dashoffset` attribute.
 * 2. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
.circle-chart__circle {
  animation: circle-chart-fill 2s reverse; /* 1 */ 
  transform: rotate(-90deg); /* 2, 3 */
  transform-origin: center; /* 4 */
}

/**
 * 1. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 2. Scaling mirrors the circle to make the stroke move right
 *    to mark a positive chart value.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
}

.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Layout styles only, not needed for functionality */
html {
  font-family: sans-serif;
  padding-right: 1em;
  padding-left: 1em;
}

.grid {
  display: grid;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 31em) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

<!--PIE CHART DOUGHNUT VIEW ENDS-->



<main class="container links mt-3">
    
<header class="header" style="position:fixed; width:105%; z-index:2; margin-left:-29px; margin-top:-18px;">
  <button class="back-button" onclick="goBack()"><svg xmlns="http://www.w3.org/2000/svg" style="margin-top:10px; margin-left:-18px;" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H6M12 5l-7 7 7 7"/></svg></button>
  <h1 class="header-title"><div style="margin-top:-25px;">{{ $data_to_pass['category_name'] }}</div></h1>
</header>
    <!-- Grid Row -->
    <div class="row">

        <!-- Grid Column -->
        <div class="col-md-9">
            

            @if(!empty($ad[4]))<div class="mb-3 text-center">{!! $ad[4] !!}</div>@endif
            <div style="height:38px;"></div>
            <!-- Search Box -->
            @include('frontend::inc.partials', ['type' => '1'])
            <!-- /Search Box -->


           <div class="mymobile" > <!--Show this only on desktop start HEADER-->
            @if ($settings['breadcrumbs'] == '1')
            <!-- Breadcrumbs -->
            <div class="breadcrumbs mb-3">
                <a href="{{ asset($language_prefix) }}">@lang('general.homepage')</a> <span class="sep">›</span> @isset($data_to_pass['parent_category_slug']) <a href="{{ asset($language_prefix.$settings['category_base']) }}/{{ $data_to_pass['parent_category_slug'] }}">{{ $data_to_pass['parent_category_name'] }}</a> <span class="sep">›</span> @endisset <a href="{{ asset($language_prefix.$settings['category_base']) }}/@isset($data_to_pass['parent_category_slug']){{ $data_to_pass['parent_category_slug'] }}/@endisset{{ $data_to_pass['category_slug'] }}">{{ $data_to_pass['category_name'] }}</a> <span class="sep">›</span> <a href="{{url()->current()}}">{{$link_query->title}}</a>
            </div>

            @if ($settings['schema_breadcrumbs'] == '1')
            {!! $breadcrumb_schema_data->toScript() !!}
            @endif
            <!-- /Breadcrumbs -->
            @endif
          </div><!--Show this status only on desktop end-->


            <div class="shadow-sm p-2 bg-white rounded mb-3">


                <!--hero banner start-->

                <div class="hero-banner" style="height:170px;">
  <img src="{{ asset('images/links') }}/{{ $link_query->image }}" class="img-fluid detail-icon" alt="{{ $link_query->title }}">
  <div class="hero-content">
      <div style="height:83px;"></div>
    <div class="col-md-9" >
      @isset($data_to_pass['parent_category_slug'])
        <a href="{{ asset($language_prefix.$settings['category_base']) }}/{{ $data_to_pass['parent_category_slug'] }}">{{ $data_to_pass['parent_category_name'] }}</a>
        <span class="sep">›</span>
      @endisset
      <a href="{{ asset($language_prefix.$settings['category_base']) }}/@isset($data_to_pass['parent_category_slug']){{ $data_to_pass['parent_category_slug'] }}/@endisset{{ $data_to_pass['category_slug'] }}">{{ $data_to_pass['category_name'] }} cause</a>
    </div>
  </div>
</div>

                <!--hero banner ends-->

                <div class="p-1">

                    <div class="row">
                        
                <div class="mymobile" > <!--Show this only on desktop start HEADER-->
                        <div class="col-md-3 d-none d-lg-inline-block"><b>@lang('general.title')</b></div>
                          
                        <div class="col-md-9"><span class="link-title-detail">{{ $link_query->title }}@if($link_query->featured_category == '1' OR $link_query->featured_home == '1')@endif @if($link_query->badge == '1')<i class="icon-check-circle title-badge" data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('general.badge_title')"></i>@endif</span></div>
                    </div>
               </div><!--Show this status only on desktop end--> 
                    
                    
                    <div class="row mt-3">
                        <div class="col-md-3"><b>@lang('general.description')</b></div>
                        <div class="col-md-9">{{ $link_query->description }}</div>
                    </div>

<!--LINKS TO JOIN START-->
                      <div class="row mt-3">
                          <hr/>
                        <div class="col-md-3"><b>Tap subscribe to encourage cause,access exciting activities, engage with people, bringing awareness to this cause directly from your Goodfeed.</b></div>
                        <div class="col-md-9"><a class="encourage_btn" href="@if ($link_query->bypass_redirect == '0'){{ asset($language_prefix.$settings['redirect_base']) }}/{{ $link_query->slug }}@else{{ $link_query->url }}@endif" target="_parent" class="site-url" @if ($link_query->bypass_redirect == '1'){!! $link_types[$link_query->bypass_type] !!}@endif>
                                @if(empty($link_query->visible_url))
                                {{ $link_query->url }}
                                @else
                                {{ $link_query->visible_url }}
                                @endif
                            </a>
                            <hr/>
                            </div>
                            
                    </div>
 <!--LINKS TO JOIN ENDS-->                   

<div class="mymobile" > <!--Show this only on desktop start HEADER-->
                    <div class="row mt-3">
                        <div class="col-md-3 my-auto"><b>@lang('general.site_icon')</b></div>
                        <div class="col-md-9 mt-1 mt-md-0"><img src="{{ asset('images/links') }}/{{ $link_query->image }}" class="img-fluid detail-icon" alt="{{ $link_query->title }}"></div>
                    </div>
</div><!--Show this status only on desktop end-->

                    <div class="row mt-3" style="display:none;">
                        <div class="col-md-3 my-auto"><b>@lang('general.rate_the_link')</b></div>
                        <div class="col-md-9 mt-1 mt-md-0">
                            <span class="vote_info"></span>
                            <div class="ratings" id="rating" data-rating-id="{{$link_query->id}}">
                                @for ($i = 1; $i <= 5; $i++) @if($i<=round($link_query->votes))
                                    <input type="radio" name="vote" class="rating" value="{{$i}}" checked="checked" />
                                    @else
                                    <input type="radio" name="vote" class="rating" value="{{$i}}" />
                                    @endif
                                    @endfor
                            </div>
                        </div>
                    </div>

                    @if ($link_query->hidden_content != null)
                    <div class="row mt-3">
                        <div class="col-md-3 my-auto"><b>@lang('general.hidden_content')</b></div>
                        <div class="col-md-9 mt-1 mt-md-0">
                            @auth
                            <div class="hidden-content-area">
                                {!! Purifier::clean($link_query->hidden_content, 'youtube') !!}
                            </div>
                            @else
                            <div class="hidden-content">
                                @lang('general.hidden_content_message', ['register_link' => asset($language_prefix.'member-area/register'), 'login_link' => asset($language_prefix.'member-area/login')])
                            </div>
                            @endauth
                        </div>
                    </div>
                    @endif

                    @if ($link_query->email != null)
                    <div class="row mt-3">
                        <div class="col-md-3"><b>@lang('general.email')</b></div>
                        <div class="col-md-9"><a href="mailto:{{ $link_query->email }}" class="email" data-bs-toggle="tooltip" data-bs-placement="right" title="@lang('general.send_email')">{{ $link_query->email }}</a></div>
                    </div>
                    @endif

                    @if ($link_query->phone_number != null)
                    <div class="row mt-3">
                        <div class="col-md-3"><b>@lang('general.phone_number')</b></div>
                        <div class="col-md-9"><a href="tel:{{ $link_query->phone_number }}" class="phone-number" data-bs-toggle="tooltip" data-bs-placement="right" title="@lang('general.call_now')">{{ $link_query->phone_number }}</a>@if ($settings['show_phone_number_country_code'] == '1') ({{ $data_to_pass['phone_country_code'] }})@endif</div>
                    </div>
                    @endif

                    @if ($link_query->address != null)
                    <div class="row mt-3">
                        <div class="col-md-3"><b>@lang('general.address')</b></div>
                        <div class="col-md-9">{{ $link_query->address }}</div>
                    </div>
                    @endif

                    @if ($other_contacts['facebook_url']['url'] != null || $other_contacts['twitter_url']['url'] != null || $other_contacts['instagram_url']['url'] != null || $other_contacts['linkedin_url']['url'] != null || $other_contacts['telegram_url']['url'] != null || $other_contacts['whatsapp_number']['number'] != null)
                    <div class="row mt-3">
                        <div class="col-md-3 my-auto"><b>@lang('general.other_contacts')</b></div>
                        <div class="col-md-9 mt-1 mt-md-0 social-media-profiles">
                            @if ($other_contacts['facebook_url']['url'] != null)<a href="{{$other_contacts['facebook_url']['url']}}" target="_blank"><i class="icon-facebook"></i></a>@endif
                            @if ($other_contacts['twitter_url']['url'] != null)<a href="{{$other_contacts['twitter_url']['url']}}" target="_blank"><i class="icon-twitter"></i></a>@endif
                            @if ($other_contacts['instagram_url']['url'] != null)<a href="{{$other_contacts['instagram_url']['url']}}" target="_blank"><i class="icon-instagram"></i></a>@endif
                            @if ($other_contacts['linkedin_url']['url'] != null)<a href="{{$other_contacts['linkedin_url']['url']}}" target="_blank"><i class="icon-linkedin"></i></a>@endif
                            @if ($other_contacts['whatsapp_number']['number'] != null)<a href="https://wa.me/{{$other_contacts['whatsapp_number']['number']}}" target="_blank"><i class="icon-whatsapp"></i></a>@endif
                            @if ($other_contacts['telegram_url']['url'] != null)<a href="{{$other_contacts['telegram_url']['url']}}" target="_blank"><i class="icon-paper-plane"></i></a>@endif
                        </div>
                    </div>
                    @endif
                    
        <!--FEATURE LINKS START-->
                    @if (!empty($deep_link_data['link_1']['url'] && $deep_link_data['link_1']['title']) || !empty($deep_link_data['link_2']['url'] && $deep_link_data['link_2']['title']) || !empty($deep_link_data['link_3']['url'] && $deep_link_data['link_3']['title']))
                    <div class="row mt-3">
                        <div class="col-md-3 my-auto"><b>@lang('general.more_from_this_site')</b></div>
                        <div class="col-md-9">
                        <ul class="listview">
                         @foreach($deep_link_data as $title)
                         @if ($title['url'] != null && $title['title'] != null)
                         <li>
                             <a href="{{$title['url']}}" target="_blank" class="site-url listview-item" {!! $link_types[$title['type']] !!}>
                            {{$title['title']}}
                            </a>
                         </li>
                        @endif
                        @endforeach
                        </ul>
                     </div>
                      @endisset
          <!--FEATURE LINKS ENDS-->           
                     
        
                    
                    
                    
            <!--Piechart start-->    
            
                    @if ($settings['show_page_views'] == '1')
                    <div class="grid">
  <section>
    <h2>Engagement Stats</h2>
    <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <circle class="circle-chart__circle" stroke="#feb21e" stroke-width="2" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <g class="circle-chart__info">
        <text class="circle-chart__percent" x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="8">{{$link_query->page_views == '0' ? 1 : $link_query->page_views}}</text>
        <text class="circle-chart__subline" x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="2">PAGE VIEWS</text>
      </g>
    </svg>
  </section>

  
</div>
  @endif
   <!--piechart ends-->                 
                    
                    

                    @if ($link_query->bypass_redirect == '0' && $settings['show_clicks'] == '1')
                    <div class="row mt-3">
                        <div class="col-md-3"><b>@lang('general.link_clicks')</b></div>
                        <div class="col-md-9">{{ $link_query->clicks }}</div>
                    </div>
                    @endif

                    @if ($settings['show_qr_code'] == '1')
                    <div class="row mt-3">
                        <div class="col-md-3 my-auto"><b>@lang('general.visit_with_qr_code')</b></div>
                        <div class="col-md-9 mt-1 mt-md-0"><img src="{{ asset(DNS2D::getBarcodePNGPath(url()->current(), 'QRCODE', 5, 5, '255,255,255', $link_query->slug)) }}" class="qr-code"></div>
                    </div>
                    @endif

                    <div class="row mt-3">
                        <div class="col-md-3 my-auto"><b>@lang('general.share')</b></div>
                        <div class="col-md-9 mt-1 mt-md-0">
                            <div class="row social-media m-0">
                                <div class="col-md-1 col facebook"><a onclick="sm_share('https://www.facebook.com/sharer/sharer.php?u={{url()->current()}}','Facebook','600','300');" href="javascript:void(0);"><i class="icon-facebook ml-2"></i></a></div>
                                <div class="col-md-1 col twitter"><a onclick="sm_share('http://twitter.com/share?text={{str_replace("'", "\'", $link_query->title)}}&url={{url()->current()}}','Twitter','600','450');" href="javascript:void(0);"><i class="icon-twitter ml-2"></i></a></div>
                                <div class="col-md-1 col linkedin"><a onclick="sm_share('https://www.linkedin.com/sharing/share-offsite/?url={{url()->current()}}','Linkedin','600','450');" href="javascript:void(0);"><i class="icon-linkedin ml-2"></i></a></div>
                                <div class="col-md-1 col telegram"><a onclick="sm_share('https://t.me/share/url?url={{url()->current()}}&text={{str_replace("'", "\'", $link_query->title)}}','Telegram','600','450');" href="javascript:void(0);"><i class="icon-paper-plane ml-2"></i></a></div>
                                <div class="col-md-1 col whatsapp"><a onclick="sm_share('https://api.whatsapp.com/send?text={{str_replace("'", "\'", $link_query->title)}} {{url()->current()}}','WhatsApp','700','600');" href="javascript:void(0);"><i class="icon-whatsapp ml-2"></i></a></div>
                                <div class="col-md-1 col email"><a href="mailto:?subject={{ $link_query->title }}&amp;body={{url()->current()}}"><i class="icon-envelope ml-2"></i></a></div>
                            </div>
                        </div>
                    </div>

                    @if ($settings['allow_widget_embed'] == '1')
                    <div class="row mt-3">
                        <div class="col-md-3"><b>@lang('general.add_to_your_site')</b><a data-bs-toggle="collapse" href="#show-iframe" role="button" aria-expanded="false" aria-controls="show-iframe" class="widget-preview mb-1 mb-md-0">@lang('general.preview_widget')</a>
                        </div>
                        <div class="col-md-9 mt-1 mt-md-0">
                            <div class="widget-selectable">
                                &lt;iframe src=&quot;{{ asset($language_prefix.'widget/'.$link_query->id.'') }}&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; width=&quot;125&quot; height=&quot;125&quot;&gt;&lt;/iframe&gt;
                            </div>
                            <div class="collapse" id="show-iframe">
                                <iframe src="{{ asset($language_prefix.'widget/'.$link_query->id.'') }}" class="mt-3" frameborder="0" scrolling="no" width="125" height="125"></iframe>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if ($settings['enable_report_form'] == '1')
                    <div class="row mt-3">
                        <div class="col-md-3"><b>@lang('general.report')</b></div>
                        <div class="col-md-9 mt-1 mt-md-0"><a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#MyModal"><i class="icon-warning"></i> @lang('general.report_a_problem')</a></div>
                    </div>
                    @endif

                    <div class="ratings" id="rating" data-rating-id="1277"></div>

                    <div class="review-title mt-3 pt-3">@lang('general.user_reviews')<a href="#" class="add-comment btn btn-success float-end">@lang('general.add_comment_review')</a>
                        <div class="stars">
                            @for ($i = 1; $i <= 5; $i++) @if($i<=round($link_query->votes))
                                <span class="icon-star checked"></span>
                                @else
                                <span class="icon-star"></span>
                                @endif
                                @endfor
                        </div>
                    </div>

                    <div class="mt-2">@lang('general.based_on', ['total_votes' => $link_query->total_votes, 'total_reviews' => $data_to_pass['total_reviews']])</div>


                    <div class="user-ratings p-0 container mt-3">

                        @foreach ($comment_order as $rating => $total_rating )

                        @php $data_to_pass['total_reviews'] ? $bar_length=(100/$data_to_pass['total_reviews'])*$total_rating : $bar_length='0'; @endphp

                        <div class="row">
                            <div class="d-flex">
                                <div class="rating">{{ trans_choice('general.star', $rating) }}</div>
                                <div class="col mx-md-4 mx-3">
                                    <div class="progress" data-bar-width="{{$bar_length}}">
                                        <div class="progress-bar"></div>
                                    </div>
                                </div>
                                <div class="votes w-25px">{{$total_rating}}</div>
                            </div>
                        </div>

                        @endforeach

                    </div>

                    <div class="user-reviews">

                        @if ($link_reviews->isEmpty())
                        <div class="alert alert-warning show mt-1 mb-0" role="alert">@lang('general.no_reviews_yet')</div>
                        @endif

                        @foreach ($link_reviews as $comment)

                        <div class="review mt-2">
                            <p class="title">"{{{$comment->title}}}"</p>
                            <div class="row">
                                <div class="col-6">
                                    <p class="name">{{{$comment->name}}}</p>
                                </div>
                                <div class="col-6">
                                    <div class="stars float-end">
                                        @for ($i = 1; $i <= 5; $i++) @if($i<=round($comment->rating))
                                            <span class="icon-star checked"></span>
                                            @else
                                            <span class="icon-star"></span>
                                            @endif
                                            @endfor
                                    </div>
                                </div>
                            </div>
                            <p class="date" data-bs-toggle="tooltip" data-bs-placement="right" title="{{\Carbon\Carbon::parse($comment->created_at)->translatedFormat('F d, Y H:i:s')}}">
                                {{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</p>

                            <p class="comment">{{{$comment->comment}}}</p>
                        </div>

                        @endforeach

                        @if (count($link_reviews) > '3')
                        <div class="rm-link show-more">@lang('general.show_more')</div>
                        @endif

                        <div class="comment-box" id="comment-section" data-fill-all-fields="@lang('general.fill_all_fields')">

                            <form id="comment-form">

                                <div class="review-title mt-3 mb-2 pt-3" id="review-title" data-show-more="@lang('general.show_more')" data-show-less="@lang('general.show_less')">
                                    @lang('general.add_comment_review')</div>

                                <input type="hidden" name="link_id" value="{{$link_query->id}}" />

                                <div class="mb-3">
                                    <label for="name">@lang('general.your_name'): <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control mt-2" id="name" name="name" required>
                                </div>

                                <div class="mb-3">
                                    <label for="title">@lang('general.comment_title'): <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control mt-2" id="title" name="title" required>
                                </div>

                                <div class="mb-3">
                                    <label for="email">@lang('general.your_email'): <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control mt-2" id="email" name="email" required>
                                    <small id="emailHelp" class="form-text text-muted">@lang('general.email_notification')</small>
                                </div>

                                <div class="mb-3">
                                    <label for="comment">@lang('general.your_comment'): <span class="text-danger">*</span></label>
                                    <textarea class="form-control mt-2" rows="5" id="comment" name="comment" maxlength="1000" required></textarea>
                                </div>

                                <div class="mb-3">
                                    <label for="rating">@lang('general.your_rating'): <span class="text-danger">*</span></label>
                                    <div class="user_ratings mt-1">
                                        <input type="radio" id="user_rating" name="user_rating" value="1">
                                        <input type="radio" id="user_rating" name="user_rating" value="2">
                                        <input type="radio" id="user_rating" name="user_rating" value="3">
                                        <input type="radio" id="user_rating" name="user_rating" value="4">
                                        <input type="radio" id="user_rating" name="user_rating" value="5" checked>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>

                            </form>

                            <button type="submit" class="btn mt-2 comment-button" onclick="form_control()">@lang('general.submit')</button>

                            <div id="comment_result">
                                <div class="alert alert-warning show mt-3 mb-0" role="alert">
                                    @lang('general.comment_rules')</div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>

            @if(!empty($ad[3]))<div class="mb-3 text-center">{!! $ad[3] !!}</div>@endif

        </div>
        <!-- /Grid Column -->

        <!-- Grid Column -->
        <div class="col-md-3 text-center mb-3">
            @if ($settings['sticky_ads_right_column'] == '1')<div class="sticky-top sticky-top-15">@endif
                @if(!empty($ad[5]))<div class="mb-3">{!! $ad[5] !!}</div>@endif
                @if ($settings['sticky_ads_right_column'] == '1')</div>@endif
        </div>
        <!-- /Grid Column -->

    </div>
    <!-- /Grid Row -->

</main>
<!-- /Container -->

@if ($settings['enable_report_form'] == '1')

<!-- Report Form -->

<div class="modal align-middle" id="MyModal">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">@lang('general.report_a_problem')</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="icon-close"></i>
                </button>
            </div>

            <div class="modal-body submission-box pt-1 pb-1" id="report-submission-section" data-error="@lang('general.error')" data-recaptcha-error="@lang('general.recaptcha_error')">

                <form id="report-submission-form">

                    <div class="mt-3">
                        <input type="text" class="form-control" id="name" name="name" placeholder="@lang('general.name')" required>
                    </div>

                    <div class="mt-3">
                        <input type="email" class="form-control" id="email" name="email" placeholder="@lang('general.email')" required>
                    </div>

                    <div class="mt-3">
                        <select title="@lang('general.select_a_reason')" id="reason" name="reason" class="form-select">
                            <option selected="selected" disabled="disabled">@lang('general.select_a_reason')</option>
                            @foreach($report_reasons as $reason)
                            <option value="{{$reason}}">{{$reason}}</option>
                            @endforeach
                        </select>
                    </div>

                    @if ($settings['enable_google_recaptcha'] == '1')
                    <div class="g-recaptcha mt-3" data-sitekey="{{ $settings['google_recaptcha_site_key'] }}"></div>
                    @endif

                    <div id="report-submission-result" class="mb-3"></div>

                    <div class="modal-footer pt-0 pe-0">
                        <button type="button" class="btn submit-button m-0 mt-1" onclick="report_submission_form()">@lang('general.submit')</button>
                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

<!-- /Report Form -->

<footer id="fixedFooter">
    <div class="footer-content">
      <button id="openModalButton" class="btn btn-primary">Read More</button>
      <div class="additional-content" style="padding:20px; height:300px;">
      <p>This content is only visible when the footer slides up.</p>
    </div>
    </div>
    
  </footer>






@endif

@endsection