@extends("layout.layout")

@section("content")
<div class="hero-section inner-page">
    <div class="wave">

        <svg width="1920px" height="265px" viewBox="0 0 1920 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
                    <path d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
                </g>
            </g>
        </svg>

    </div>

    <div class="container">
        <div class="row align-items-center">
            <div class="col-12">
                <div class="row justify-content-center">
                    <div class="col-md-7 text-center hero-text">
                        <h1 data-aos="fade-up" data-aos-delay="">Get in touch</h1>
                        <p class="mb-5" data-aos="fade-up" data-aos-delay="100"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="site-section">
    <div class="container">
        <div class="row mb-5 align-items-end">
            <div class="col-md-6" data-aos="fade-up">

                <h2>Contact Form</h2>
                <h3 class="section-heading mssg text-center">{{ session('mssg') }}</h3>
            </div>

        </div>

        <div class="row">
            <div class="col-md-4 ml-auto order-2" data-aos="fade-up">
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <strong class="d-block mb-1">Address</strong>
                        <span>Plot 6248 Jacaranda Road, Ridgeway, Lusaka, Zambia.</span>
                    </li>
                    <li class="mb-3">
                        <strong class="d-block mb-1">Local</strong>
                        <a href="tel:+260953029453"><span>
                                <p><i class="fas fa-phone"></i> <span>+26095 302 9453</p>
                            </span>
                        </a>
                    </li>
                    <li class="mb-3">
                        <strong class="d-block mb-1">international</strong>
                        <a href="tel:+27870955303"><span>
                                <p><i class="fas fa-phone-alt"></i>+2787 302 9453</p>
                            </span>
                        </a>
                    </li>
                    <li class="mb-3">
                        <strong class="d-block mb-1">Email</strong>
                        <a href="mailto:info@chrilantech.com"><span>
                                <p><i class="fas fa-envelope-open-text"></i>info@chrilantech.com</p>
                            </span>
                        </a>
                    </li>
                    <li class="mb-3">
                        <strong class="d-block mb-1">Working Hours</strong>
                        <span>08:30-17:00</span>
                    </li>
                </ul>
            </div>

            <div class="col-md-6 mb-5 mb-md-0" data-aos="fade-up">
                <form action="/home" method="POST" role="form" class="php-email-form">

                    <div class="row">

                        <div class="col-md-6 form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" class="form-control" id="name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                        </div>

                        <div class="col-md-6 form-group">
                            <label for="name">Email</label>
                            <input type="email" class="form-control" name="email" id="email" data-rule="email" data-msg="Please enter a valid email" />
                        </div>
                        <!--
                        <div class="col-md-12 form-group">
                            <label for="name">Business type</label>
                            <select class="form-control selectpicker" name="business[]" id="business" data-live-search="true" multiple>
                                <optgroup label="Picnic">
                                    <option value="">Mustard</option>
                                    <option value="">Ketchup</option>
                                    <option value="">Relish</option>
                                </optgroup>
                                <optgroup label="Camping">
                                    <option value="">Tent</option>
                                    <option value="">Flashlight</option>
                                    <option value="">Toilet Paper</option>
                                </optgroup>
                            </select>
                        </div>
-->
                        <div class="col-md-6 form-group">
                            <label for="name">Plan</label>
                            <select class="form-control selectpicker" name="plan" id="plan">
                                <option value="Free">Free</option>
                                <option value="Annual">Annual</option>
                                <option value="Monthly">Monthly</option>
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="name">Contact</label>
                            <input type="tel" class="form-control" name="contact" id="contact" data-rule="email" data-msg="Please enter a valid email" />
                        </div>
                        <div class="col-md-12 form-group">
                            <label for="name">Message</label>
                            <textarea class="form-control" name="contact" cols="20" rows="10" data-rule="required" data-msg="Please write something for us"></textarea>
                        </div>
                        
                        <div class="col-md-6 form-group">
                            <input type="submit" class="btn btn-primary d-block w-100" value="Send Message">
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
@endsection