@extends('partials.main')

@section('css')
    <!-- color scheme -->
    <link id="colors" href="assets/css/colors/scheme-01.css" rel="stylesheet" type="text/css" >
@endsection

@section('content')
        <!-- content begin -->
        <div class="no-bottom no-top" id="content">
            <div id="top"></div>
            <!-- section begin -->
            <section id="subheader" class="jarallax">
                <img src="{{ URL::asset('assets/images/background/subheader-contact.webp') }}" class="jarallax-img" alt="">
                <div class="container z-1000">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="subtitle wow fadeInUp mb-3">Do you have</div>
                        </div>
                        <div class="col-lg-6">
                            <h2 class="wow fadeInUp mb20" data-wow-delay=".2s">Any questions?</h2>
                        </div>                 
                    </div>
                </div>
            </section>
            <!-- section close -->

            <section>
                <div class="container position-relative z1000">
                    <div class="row">

                        <div class="col-lg-10 offset-lg-1">

                            <p class="lead">
                            Please read our <a href="faq">faq page</a> first. 
                            If you got any questions, please do not hestitae to send us a message.
                            </p>


                            <form name="contactForm" id="contact_form" class="position-relative z1000" method="post" action="#">
                                <div class="row gx-4">
                                    <div class="col-lg-6 mb10">
                                        <div class="field-set">
                                            <span class="d-label">Name</span>
                                            <input type="text" name="Name" id="name" class="form-control" placeholder="Your Name" required>
                                        </div>

                                        <div class="field-set">
                                            <span class="d-label">Email</span>
                                            <input type="text" name="Email" id="email" class="form-control" placeholder="Your Email" required>
                                        </div>

                                        <div class="field-set">
                                            <span class="d-label">Phone</span>
                                            <input type="text" name="phone" id="phone" class="form-control" placeholder="Your Phone" required>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-6">
                                        <div class="field-set mb20">
                                            <span class="d-label">Message</span>
                                            <textarea name="message" id="message" class="form-control" placeholder="Your Message" required></textarea>
                                        </div>
                                    </div>
                                </div>
                                    
                                
                                <div class="g-recaptcha" data-sitekey="insert-sitekey-here"></div>
                                <div id='submit' class="mt20">
                                    <input type='submit' id='send_message' value='Send Message' class="btn-main">
                                </div>

                                <div id="success_message" class='success'>
                                    Your message has been sent successfully. Refresh this page if you want to send more messages.
                                </div>
                                <div id="error_message" class='error'>
                                    Sorry there was an error sending your form.
                                </div>
                            </form>

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

        </div>
        <!-- content close -->
        <!-- footer begin -->
        <footer>
            <div class="container">
                <div class="row gx-5">
                    <div class="col-lg-4">
                        <img src="{{ URL::asset('assets/images/logo.png') }}" alt="" >
                        <div class="spacer-20"></div>
                        <p>Lorem ipsum culpa tempor tempor eu laboris adipisicing sunt excepteur enim laborum officia eiusmod laborum sint do aliqua incididunt est aute deserunt in elit non sed ut velit ullamco aliquip. Nulla cupidatat elit amet sed labore ut et consequat nostrud laboris aliqua ex est fugiat quis aliqua duis quis esse dolor laboris non duis sunt.</p>
                    </div>
                    <div class="col-lg-4">
                        <div class="row">
                            <div class="col-lg-6 col-sm-6">
                                <div class="widget">
                                    <h5>Game Server</h5>
                                    <ul>
                                        <li><a href="#">Thunder and City</a></li>
                                        <li><a href="#">Mystic Racing Z</a></li>
                                        <li><a href="#">Silent Wrath</a></li>
                                        <li><a href="#">Funk Dungeon</a></li>
                                        <li><a href="#">Galactic Oddsey</a></li>
                                        <li><a href="#">Warfare Legend</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-6">
                                <div class="widget">
                                    <h5>Pages</h5>
                                    <ul>
                                        <li><a href="#">Game Server</a></li>
                                        <li><a href="#">Knowledgebase</a></li>
                                        <li><a href="#">About Us</a></li>
                                        <li><a href="#">Affliates</a></li>
                                        <li><a href="#">Locations</a></li>
                                        <li><a href="#">News</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="widget">
                            <h5>Newsletter</h5>
                            <form action="blank.php" class="row form-dark" id="form_subscribe" method="post" name="form_subscribe">
                                <div class="col text-center">
                                    <input class="form-control" id="txt_subscribe" name="txt_subscribe" placeholder="enter your email" type="text" > <a href="#" id="btn-subscribe"><i class="arrow_right bg-color-secondary"></i></a>
                                    <div class="clearfix"></div>
                                </div>
                            </form>
                            <div class="spacer-10"></div>
                            <small>Your email is safe with us. We don't spam.</small>
                            <div class="spacer-30"></div>
                            <div class="widget">
                                <h5>Follow Us on</h5>
                                <div class="social-icons">
                                    <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                                    <a href="#"><i class="fa-brands fa-twitter"></i></a>
                                    <a href="#"><i class="fa-brands fa-discord"></i></a>
                                    <a href="#"><i class="fa-brands fa-tiktok"></i></a>
                                    <a href="#"><i class="fa-brands fa-youtube"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subfooter">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="de-flex">
                                <div class="de-flex-col">
                                    <a href="index">
                                        Copyright 2024 - Playhost by Designesia
                                    </a>
                                </div>
                                <ul class="menu-simple">
                                    <li><a href="#">Terms &amp; Conditions</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer close -->
    </div>
    @endsection

    <!-- Javascript Files
    ================================================== -->
    @section('js')
    <script src='https://www.google.com/recaptcha/api.js' async defer></script>
    <script src="assets/js/form.js"></script>
    <script src="assets/js/recaptcha.js"></script>
@endsection