@extends('web.layouts.container')
@section('breadcrumb')
    <nav class="nav-breadcrumb" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{__('contacts.inner_page')}}</li>
        </ol>
    </nav>
@endsection

@section('content')

    <main>
        <!--start contact-->
        <section class="contact">
            <div class="container">
                <div class="contact-carousel owl-carousel owl-theme">
                    <a href="tel:{{$phone}}">
                        <div class="item">
                            <div class="card text-center wow zoomIn" data-wow-duration="2s" >
                                <div class="icon">
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                                <h6>{{__('contacts.phone')}}</h6>
                                <p>{{$phone}}</p>
                            </div>
                        </div>
                    </a>
                    <div class="item">
                        <div class="card text-center wow zoomIn" data-wow-duration="2s" data-wow-delay=".5s">
                            <div class="icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <h6>{{__('contacts.address')}}</h6>
                            <p>{{$address}}</p>
                        </div>
                    </div>
                    <a href="mailto:{{$email}}">
                        <div class="item">
                            <div class="card text-center wow zoomIn" data-wow-duration="2s" data-wow-delay="1s">
                                <div class="icon">
                                    <i class="far fa-envelope"></i>
                                </div>
                                <h6>{{__('contacts.email')}}</h6>
                                <p>{{$email}}</p>
                            </div>
                        </div>
                    </a>
                    <div class="item">
                        <div class="card text-center wow zoomIn" data-wow-duration="2s" data-wow-delay="1.5s">
                            <div class="icon">
                                <i class="far fa-clock"></i>
                            </div>
                            <h6>{{__('contacts.time_work')}}</h6>
                            <p>24/{{$time_work}}</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 m-auto">
                        <div class="contact-form wow fadeInUp" data-wow-duration="3s">
                            <div class="text text-center">
                                <span>{{__('contacts.contact_with_us_now')}}</span>
                                <h5>{{__('contacts.send_any_question')}}</h5>
                            </div>
                            <div class="alert alert-danger text-center ajaxError d-none"></div>
                            <div class="alert alert-success text-center ajaxSuccess d-none"></div>
                            <form action="{{route('contactUs.store')}}" method="post" class="contact_us_form">
                                @csrf()
                                <div class="row pt-4">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                                        <div class="form-group">
                                            <input type="text" name="name" class="form-control" autocomplete="off" autofocus required />
                                            <label class="floating-label">{{__('users.name')}}</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="email" name="email" class="form-control" autocomplete="off" autofocus required />
                                            <label class="floating-label">{{__('users.email')}}</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="tel" name="phone" class="form-control" autocomplete="off" autofocus required />
                                            <label class="floating-label">{{__('users.phone')}}</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="text" name="message_title" class="form-control" autocomplete="off" autofocus required />
                                            <label class="floating-label">{{__('contacts.message_subject')}}</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <textarea name="message" class="form-control" rows="7" placeholder="اكتب رسالتك ..."></textarea>
                                        </div>
                                    </div>
                                </div>
                                <button class="submit-btn contact_us_button" type="submit">{{__('contacts.send_your_message')}}</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
            <div class="map wow fadeIn" data-wow-duration="2s">
                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7300238.1786410175!2d30.254350000000002!3d26.69425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2seg!4v1603805674725!5m2!1sen!2seg" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
            </div>
        </section>
    </main>

@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.navs-container').addClass('page-heading')
        })
    </script>
@endsection