@extends('layouts.app')
@section('content')
@push('metas')
<title>Adsate Network - Digital Marketing Agency</title>
<meta property="og:title" content="Adsate Network - Digital Marketing Agency" />
<meta name="twitter:title" content="Adsate Network - Digital Marketing Agency" />
<meta name="description" content="Adsate Network offers solutions to help any business with any budget reach its target market and increase revenue with trackable data." />
<meta property="og:description"  content="Adsate Network offers solutions to help any business with any budget reach its target market and increase revenue with trackable data." />
<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" />
@endpush
<section id="contacts-1" class="pb-50 inner-page-hero contacts-section division">				
    <div class="container">


        <!-- SECTION TITLE -->	
        <div class="row justify-content-center">	
            <div class="col-md-10 col-lg-9">
                <div class="section-title text-center mb-80">
                    <!-- Title -->	
                    <h2 class="s-52 w-700">Checkout</h2>	
                    <!-- Text -->	
                    <p class="p-lg">Securely pay with credit card, debit card, Google Pay or Link. All payment options are secured and hassle-free.</p>                        
                </div>	
            </div>
        </div>


        <!-- CONTACT FORM -->
         <div class="row justify-content-center">	
             <div class="col-md-11 col-lg-10 col-xl-8">
                 <div class="form-holder">
                    <form action="{{url('pay/service/'.$service->slug.'/'.$serviceItem->slug)}}" name="contactform" class="row contact-form" method="POST">
                           @csrf                                                 
                        <!-- Contact Form Input -->
                        <div class="col-md-12">
                            <p class="p-lg">Your Name: </p>
                            <span>Please enter your real name: </span>
                            <input type="text" name="name" class="form-control name" placeholder="Your Name*" required> 
                        </div>
                                    
                        <div class="col-md-12">
                            <p class="p-lg">Your Email Address: </p>
                            <span>Please carefully check your email address for accuracy</span>
                            <input type="text" name="email" class="form-control email" placeholder="Email Address*" required> 
                        </div>

                        <div class="col-md-12">
                            <p class="p-lg">Service: </p>
                            <span class="mb-2"><strong>{{$service->name}} - {{$serviceItem->name}}</strong></span>
                        </div>
                                                                            
                        <!-- Contact Form Button -->
                        <div class="col-md-12 mt-15 form-btn text-right">	
                            <button type="submit" class="btn btn--theme hover--theme submit">Pay ${{$serviceItem->price}} with debit/credit card</button>	
                        </div>
                                                                                                                
                        <!-- Contact Form Message -->
                        <div class="col-lg-12 contact-form-msg">
                            <span class="loading"></span>
                        </div>	
                                                                                
                    </form>	
                 </div>	
             </div>	
         </div>	   <!-- END CONTACT FORM -->


    </div>	   <!-- End container -->	
</section>
@endsection