@extends('layouts.main')
@section('content')
<!--================Breadcrumb Area =================-->
<section class="breadcrumb_area">
    <div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background=""></div>
    <div class="container">
        <div class="page-cover text-center">
            <h2 class="page-cover-tittle">{{__("contact.title")}}</h2>
            <ol class="breadcrumb">
                <li><a href="#">{{__("contact.breadcrumb")}}</a></li>
            </ol>
        </div>
    </div>
</section>
<!--================Breadcrumb Area =================-->

<!--================Contact Area =================-->
<section class="contact_area section_gap" style="background: url('/image/contact/contact-background.jpg') no-repeat fixed; background-size: cover; padding-top: 50px;">
    <div class="container white_background">
        <div class="gmap_canvas">
            <iframe width="100%" height="500" id="gmap_canvas" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d921.1322842346052!2d17.061886029210402!3d-22.559304760586887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1c0b1bc42dcfb3a7%3A0x918f7c9b2551834c!2sNamwel%20Tour%20Safaris!5e0!3m2!1sen!2sna!4v1596526819168!5m2!1sen!2sna" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
        </div>
        <br>
        <div class="row">
            <div class="col-md-4">
                <div class="contact_info">
                    <div class="info_item">
                        <i class="lnr lnr-home"></i>
                        <h6>Ara Street 7695</h6>
                        <p>Dorado Valley<br>{{__("contact.po_box")}} 23805<br>{{__("contact.city_country")}}</p>
                    </div>
                    <div class="info_item">
                        <i class="lnr lnr-phone-handset"></i>
                        <h6><a href="#">+264 (0) 61 244 697</a></h6>
                        <p>{{__("contact.mon_fri")}}</p>
                    </div>
                    <br>
                    <div class="info_item">
                        <i class="lnr lnr-envelope"></i>
                        <h6><a href="#">info@tour-safaris.namwel.com.na</a></h6>
                        <p>{{__("contact.send")}}</p>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <form class="row contact_form" action="/contact/store" method="POST">
                    @csrf
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" id="name" name="name" placeholder="{{__("contact.name")}}">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" id="email" name="email" placeholder="{{__("contact.email")}}">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="subject" name="subject" placeholder="{{__("contact.subject")}}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" >
                            <textarea class="form-control" name="message" id="message" rows="6" placeholder="{{__("contact.message")}}"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="number" class="form-control" id="" name="check" placeholder="{{__("contact.prove")}}" min="2" max="5" required>
                        </div>
                    </div>
                    <div class="col-md-12 text-right">
                        <button type="submit" value="submit" class="btn theme_btn button_hover">{{__("contact.send_button")}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!--================Contact Area =================-->

@endsection