@extends('front.layouts.app')
@section('content')
    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg" style="background-image: url(front/assets/images/backgrounds/page-header-bg.jpg)">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route('arabiaMobiles.home')}}">Home</a></li>
                    <li><span>/</span></li>
                    <li class="active">Contact</li>
                </ul>
                <h2>Contact us</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Contact Details Start-->
    <section class="contact-details">
        <div class="container">
            <div class="row">
                @if(request()->session()->has('success'))
                    <div class="alert alert-warning text-center mb-5">
                        Thank you! ... Your message has been sent!
                    </div>
                @endif
                <div class="col-xl-7 col-lg-6">
                    <div class="contact-details__img">
                        <div class="section-title text-center">
                            <div class="section-title__tagline-box">
                                <span class="section-title__tagline">For Support</span>
                                <div class="section-title-shape">
                                    {{--<img src="{{asset('front/assets/images/shapes/section-title-shape.png')}}" alt="">--}}
                                </div>
                            </div>
                            <h2 class="section-title__title">Feel free to write</h2>
                        </div>
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="contact-page__form">
                                    <form method="POST" action="{{route('arabiaMobiles.sendMessage')}}">
                                        @csrf
                                        <div class="row">
                                            <div class="col-xl-6">
                                                <div class="comment-form__input-box">
                                                    <input type="text" placeholder="Your name" required name="name">
                                                </div>
                                            </div>
                                            <div class="col-xl-6">
                                                <div class="comment-form__input-box">
                                                    <input type="email" placeholder="Email address" name="email">
                                                </div>
                                            </div>
                                            <div class="col-xl-6">
                                                <div class="comment-form__input-box">
                                                    <input type="text" placeholder="Phone number" required name="phone_number">
                                                </div>
                                            </div>
                                            <div class="col-xl-6">
                                                <div class="comment-form__input-box">
                                                    <input type="text" placeholder="Subject" name="subject">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xl-12">
                                                <div class="comment-form__input-box">
                                                    <input type="text" placeholder="IMEI" name="imei">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xl-12">
                                                <div class="comment-form__input-box text-message-box">
                                                    <textarea name="message" required placeholder="Comment ..."></textarea>
                                                </div>
                                                <div class="comment-form__btn-box">
                                                    <button type="submit" class="thm-btn comment-form__btn">Send a
                                                        message
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-5 col-lg-6">
                    <div class="contact-details__right">
                        <div class="section-title text-left">
                            <div class="section-title__tagline-box">
{{--                                <span class="section-title__tagline">Contact with us</span>--}}
                                <div class="section-title-shape">
                                    {{--                                    <img src="{{asset('front/assets/images/shapes/section-title-shape.png')}}" alt="">--}}
                                </div>
                            </div>
                            <h2 class="section-title__title">Get in touch with us</h2>
                        </div>
                        {{--                        <p class="contact-details__text">Lorem ipsum dolor sit amet, consectetur notted adipis not icing elit sed do eiusmod tempor incididunt.</p>--}}
                        <ul class="list-unstyled contact-details__info">
                            <li>
                                <div class="icon">
                                    <span class="icon-telephone"></span>
                                </div>
                                <div class="text">
                                    <p>Phone</p>
                                    <a href="tel:9611880850">
                                        +961 1 880 850</a>
                                    <br/>
                                    <a href="tel:96179176111">
                                        +961 79 176 111</a>
                                </div>
                            </li>
                            <li>
                                <div class="icon">
                                    <span class="icon-email"></span>
                                </div>
                                <div class="text">
                                    <p>Email</p>
                                    <a href="mailto:needhelp@notech.com">info@arabiamobiles.com</a>
                                </div>
                            </li>
                            <li>
                                <div class="icon">
                                    <span class="icon-pin"></span>
                                </div>
                                <div class="text">
                                    <p>Address</p>
                                    <span>Jdeideh, Lebanon</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Contact Details End-->

    <!--Google Map Start-->
    <section class="google-map-two">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3311.8061993502606!2d35.56053937517006!3d33.89464472603649!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151f17b4337c11cd%3A0x94b888cd93f35284!2sArabia%20Mobiles!5e0!3m2!1sen!2s!4v1726832987228!5m2!1sen!2s"
            class="google-map__two-box" allowfullscreen></iframe>

    </section>
    <!--Google Map End-->
@endsection