@extends('layouts.app')
@section('content')
@push('metas')
<title>{{$service->meta_title}}</title>
<meta property="og:title" content="{{$service->meta_title}}" />
<meta name="twitter:title" content="{{$service->meta_title}}" />
<meta name="description" content="{{$service->meta_desc}}" />
<meta property="og:description"  content="{{$service->meta_desc}}" />
<meta name="twitter:description" content="{{$service->meta_desc}}" />
<meta property="og:url" content="{{url('service/'.$service->slug)}}" />
<link rel="canonical" href="{{url('service/'.$service->slug)}}" />
<meta property="og:image" content="https://ik.imagekit.io/adsate/bg.jpg?updatedAt=1698147043202" />
<meta property="og:image:alt" content="https://ik.imagekit.io/adsate/bg.jpg?updatedAt=1698147043202" />
<meta property="fb:app_id" content="916682003074566" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image"
    content="https://ik.imagekit.io/adsate/bg.jpg?updatedAt=1698147043202&tr=w-1200%2Ch-675%2Cfo-auto" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Adsate Network" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@adsatenetwork" />
<meta name="twitter:creator" content="@adsatenetwork" />
<meta property="article:publisher" content="https://www.facebook.com/templatebuffet" />
<meta name="author" content="Adsate Network" />
<meta name="publisher" content="Adsate Network" />
@endpush
<section id="pricing-1" class="gr--whitesmoke pb-40 inner-page-hero pricing-section">
    <div class="container">


        <!-- SECTION TITLE -->	
        <div class="row justify-content-center">	
            <div class="col-md-10 col-lg-8">
                <div class="section-title mb-70">	

                    <!-- Title -->	
                    <h2 class="s-52 w-700">{{$service->name}}</h2>	

                    <!-- TOGGLE BUTTON -->
                    <div class="toggle-btn ext-toggle-btn toggle-btn-md mt-30">

                        <!-- Text -->	
                        <p class="color--grey">{{$service->short_desc}}</p>

                    </div>


                </div>	
            </div>
        </div>	<!-- END SECTION TITLE -->	


        <!-- PRICING TABLES -->
        <div class="pricing-1-wrapper">
            <div class="row row-cols-1 row-cols-md-3">
                @foreach ($services as $item)
                <div class="col">
                    <div id="pt-1-1" class="p-table pricing-1-table bg--white-100 block-shadow r-12 wow fadeInUp">


                        <!-- TABLE HEADER -->
                        <div class="pricing-table-header">

                            <!-- Title -->
                            <h5 class="s-24 w-700">{{$item->name}}</h5>

                            <!-- Price -->	
                            <div class="price">								
                                <sup class="color--black">$</sup>								
                                <span class="color--black">{{number_format($item->price, 2)}}</span>
                                <p class="color--grey">{{$item->short_desc}}</p>
                            </div>

                            <a href="{{url('service/checkout/'.$service->slug.'/'.$item->slug)}}" class="pt-btn btn r-04 btn--theme hover--theme">Purchase Now</a>
                            

                        </div>	<!-- END TABLE HEADER -->


                        <!-- PRICING FEATURES -->
                        <ul class="pricing-features color--black ico-10 ico--green mt-25">
                            @php
                                $data = json_decode($item->services);
                            @endphp


                            @foreach ($data as $feature)
                            <li><p><span class="flaticon-check"></span> {{$feature}}</p></li>
                            @endforeach
                        </ul>	

                        <a href="{{url('service/checkout/'.$service->slug.'/'.$item->slug)}}" class="pt-btn btn r-04 btn--theme hover--theme">Purchase Now</a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endsection