@extends('layout_web.layouts')

@section('content')
    <!--=====================================-->
    <!--=       Breadcrumb Area Start      =-->
    <!--=====================================-->
@section('content')
    <!-- Display validation errors, if any -->

    <div class="edu-breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-inner">
                <div class="page-title">
                    <h1 class="title">Contact Us</h1>
                </div>
                <ul class="edu-breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>

                    <li class="separator"><i class="icon-angle-right"></i></li>
                    <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
                </ul>
            </div>
        </div>
        <ul class="shape-group">
            <li class="shape-1">
                <span></span>
            </li>
            <li class="shape-2 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-13.png') }}"
                    alt="shape"></li>
            <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('web/assets/images/about/shape-15.png') }}"
                    alt="shape"></li>
            <li class="shape-4">
                <span></span>
            </li>
            <li class="shape-5 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-07.png') }}"
                    alt="shape"></li>
        </ul>
    </div>

    <!--=====================================-->
    <!--=       Contact Me Area Start       =-->
    <!--=====================================-->
    <section class="contact-us-area">
        <div class="container">
            <div class="row g-5">
                <div class="col-xl-4 col-lg-6">
                    <div class="contact-us-info">
                        <h3 class="heading-title">{{ getConfigData('title_en') }}</h3>
                        <ul class="address-list">
                            <li>
                                <h5 class="title">Address</h5>
                                <p>{{ getConfigData('address_en') }}</p>
                            </li>
                            <li>
                                <h5 class="title">Email</h5>
                                <p><a href="mailto:Memic@example.com">{{ getConfigData('email') }}</a></p>
                            </li>
                            <li>
                                <h5 class="title">Phone</h5>
                                <p><a href="tel:+123456789">{{ getConfigData('phone') }}</a></p>
                            </li>
                        </ul>
                        <ul class="social-share">
                            <li><a href="{{ getConfigData('share') }}"><i class="icon-share-alt"></i></a></li>
                            <li><a href="{{ getConfigData('facebook') }}"><i class="icon-facebook"></i></a></li>
                            <li><a href="{{ getConfigData('twitter') }}"><i class="icon-twitter"></i></a></li>
                            <li><a href="{{ getConfigData('linkedin') }}"><i class="icon-linkedin2"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="offset-xl-2 col-lg-6">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    <div class="contact-form form-style-2">
                        <div class="section-title">
                            <h4 class="title">Get In Touch</h4>
                            <p>Fill out this form for booking a consultant advising session.</p>
                        </div>
                        <form action="{{ route('web.contact_us.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row row--10">
                                <div class="form-group col-12">
                                    <input type="text" name="Username" id="contact-name" placeholder="Your name"
                                        required>
                                </div>
                                <div class="form-group col-12">
                                    <input type="email" name="email" id="contact-email" placeholder="Enter your email"
                                        required>
                                </div>
                                <div class="form-group col-12">
                                    <input type="tel" name="phone" id="contact-phone" placeholder="Phone number"
                                        required>
                                </div>
                                <div class="form-group col-12">
                                    <textarea name="message" id="contact-message" cols="30" rows="4" placeholder="Your message" required></textarea>
                                </div>
                                <div class="form-group col-12">
                                    <button class="rn-btn edu-btn btn-medium submit-btn" name="submit"
                                        type="submit">Submit Message</button>
                                </div>
                            </div>
                        </form>



                        <ul class="shape-group">
                            <li class="shape-1 scene"><img data-depth="1"
                                    src="{{ asset('web/assets/images/about/shape-13.png') }}" alt="Shape"></li>
                            <li class="shape-2 scene"><img data-depth="-1"
                                    src="{{ asset('web/assets/images/counterup/shape-02.png') }}" alt="Shape"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=====================================-->
    <!--=      Google Map Area Start        =-->
    <!--=====================================-->
    <div class="google-map-area">
        <div class="mapouter">
            <div class="gmap_canvas">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13819.156472220375!2d31.277632246299675!3d30.014211079372828!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x145838c986e8461f%3A0x785aa187f3f8ca14!2sAl%20Muqattam%20City%2C%20Al%20Abageyah%2C%20El%20Mokattam%2C%20Cairo%20Governorate%204414131!5e0!3m2!1sen!2seg!4v1716823284736!5m2!1sen!2seg"
                    width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </div>
@endsection