@extends('website.layouts.master')
@section('content')
    <!-- ================================================= -->
    <!-- Start Banar -->
    <div class="banar text-center">
        <div class="info" data-aos-delay="200" data-aos-duration="800" data-aos="fade-up">
            <i class="fas fa-headphones phone"></i>
            <h1 class="mt-4">{{trans('sidebar.contact_us')}}</h1>
        </div>
    </div>
    <!-- End Banar -->
    <!-- ================================================= -->
    <!-- Start Contact -->
    <div class="contact mt-5">
        <div class="container mb-5">
            <div class="row">
                <div class="col-lg-6 mb-lg-0 mb-5">
                    <div class="info">
                        <ul>
                            <li data-aos-delay="200" data-aos-duration="800" data-aos="zoom-in">
                                <i class="fas fa-map-marker-alt"></i>
                        {{setting('address',app()->getLocale())}}
                            </li>
                            <li data-aos-delay="200" data-aos-duration="800" data-aos="zoom-in">
                                <i class="fas fa-phone-square"></i>
                        {{trans('sidebar.management')}}: {{setting('management',app()->getLocale())}}
                            </li>
                            <li data-aos-delay="200" data-aos-duration="800" data-aos="zoom-in">
                                <i class="fas fa-headphones-alt"></i>
                        {{trans('sidebar.customer_support')}}: {{setting('support',app()->getLocale())}}
                            </li>
                            <li data-aos-delay="200" data-aos-duration="800" data-aos="zoom-in">
                                <i class="fas fa-envelope"></i>
                        {{trans('sidebar.email')}} {{setting('website_email',app()->getLocale())}}
                            </li>
                        </ul>
                        <h4 data-aos-delay="200" data-aos-duration="800" data-aos="fade-in">{{trans('sidebar.follow_us')}}</h4>
                        <hr>
                        <a href="{{asset(setting('instagram',app()->getLocale()))}}">
                            <img src="{{asset('website/images/instagram.png')}}" alt="">
                        </a>
                        <a href="{{asset(setting('facebook',app()->getLocale()))}}">
                            <img src="{{asset('website/images/facebook.png')}}" alt="">
                        </a>
                        <a href="{{asset(setting('twitter',app()->getLocale()))}}">
                            <img src="{{asset('website/images/twitter.png')}}" alt="">
                        </a>
                        <a href="{{asset(setting('youtube',app()->getLocale()))}}">
                            <img src="{{asset('website/images/youtube.png')}}" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <form action="{{route('contact_us')}}" method="post">
                        {{csrf_field()}}

                        <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="name">{{trans('sidebar.full_name')}}</label>
                        <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="fade-up">
                            <input required id="name" type="text" class="form-control" name="name">
                        </div>

                        <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="mail">{{trans('sidebar.email')}}</label>
                        <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="fade-up">
                            <input required id="mail" type="email" class="form-control" name="email">
                        </div>

                        <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="num">{{trans('sidebar.phone')}}</label>
                        <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="fade-up">
                            <input required id="num" type="text" class="form-control" name="phone">
                        </div>

                        <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="text">{{trans('sidebar.message')}}</label>
                        <div class="form-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="fade-up">
                            <textarea required class="form-control" id="text" rows="5" name="message"></textarea>
                        </div>

                        <button type="submit" class="submit">{{trans('sidebar.send')}}</button>

                    </form>
                </div>
            </div>
        </div>
        <iframe class="w-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d67318.91187035551!2d29.931798214248676!3d31.20506317723584!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14f5c38a0562fe85%3A0xa34cc632ec23e7!2z2YXZg9iq2KjYqSDYp9mE2KXYs9mD2YbYr9ix2YrYqSDYp9mE2KzYr9mK2K_YqQ!5e0!3m2!1sar!2seg!4v1657013523008!5m2!1sar!2seg" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    <!-- End Contact -->
    <!-- ================================================= -->
@endsection