@extends('front.layouts.front')
@section('content')
    <!-- Start Section -->
    <section class="contact py-5 section-bg">
        @if (count($errors) > 0)
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <ul class="p-0 m-0" style="list-style: none;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if (session()->has('success'))
            <div class="alert alert-success">
                {{ session()->get('success') }}
            </div>
        @endif
        <div class="container">
            <form action="{{ route('storeContactUS') }}" class="form" method="POST">
                @csrf
                <h2 class="main-title">
                    اتصل بنا
                </h2>
                <div class="title">اترك لنا رسالة</div>
                <div class="boxes">
                    <div class="box">
                        <label for=""> الإسم </label>
                        <input type="text" name="name" class="form-control mb-3"
                            placeholder="قم بإدخال الاسم الأول واسم العائلة" />
                        <label for=""> البريد الإلكتروني </label>
                        <input type="email" name="email" class="form-control mb-3"
                            placeholder="الرجاء ادخال البريد الالكتروني الخاص بك" />
                        <label for=""> الرسالة <span class="sm">300 حرف على الأقل</span> </label>
                        <textarea name="message" id="" class="form-control mb-3" placeholder="أدخل رسالتك........."></textarea>
                        <button type="sumbit" class="btn-sub">
                            ارسال
                        </button>
                    </div>
                    <div class="box two">
                        <div class="item">
                            <i class="fas fa-map"></i>
                            <div class="text">
                                الخبر طريق خادم الحرمين الشريفين برج السالمية مكتب 606
                            </div>
                        </div>
                        <div class="item">
                            <i class="fas fa-phone"></i>
                            <bdi class="text">
                                +966465454
                            </bdi>
                        </div>
                        <div class="item">
                            <i class="fas fa-envelope"></i>
                            <bdi class="text">
                                example@example.com
                            </bdi>
                        </div>
                        <div class="social">
                            <a href="">
                                <i class="icon fa-brands fa-twitter"></i>
                            </a>
                            <a href="">
                                <i class="icon fa-brands fa-facebook-f"></i>
                            </a>
                            <a href="">
                                <i class="icon fa-brands fa-instagram"></i>
                            </a>
                            <a href="">
                                <i class="icon fa-brands fa-youtube"></i>
                            </a>
                        </div>
                        <div class="map">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d228792.25751386088!2d50.15735462290768!3d26.362774588833904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85f5560a12d3eeed%3A0x99291102777c79cb!2z2YPZiNmD2KjYqSDYp9mE2KrZgtmG2YrYqSDYqNix2YXYrNipINin2YTZhdmI2KfZgti5INmI2KfZhNiq2LfYqNmK2YLYp9iqINin2YTYsNmD2YrYqQ!5e0!3m2!1sar!2seg!4v1685716940568!5m2!1sar!2seg"
                                width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!-- End Section -->
@endsection