@extends('front.layouts.app')
@section('css')

@endsection
@section('content')

<main class="inner-page">
    <!-- /////////////////////////////// contact ///////////////////////////////// -->
    <section id="contactUs" class="sec-p-y overflow-hidden">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              
              <div class="cont-wr d-flex align-items-center h-100">
                <div>
                    <div class="sec-title">
                        <div class="blue">
                          <img src="/new-assets/pic/left.png" alt="">
                          <span>{{__('front.home-Keep On Touch')}}</span>
                        </div>
                        <div class="big-text">
                          {{__('front.home-Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical')}}
                        </div>
                    </div>
                  <div class="infos">
                    <div class="info-item">
                      <span class="i-wr"><i data-feather="mail"></i></span>
                      <div>
                        <a href="mail://{{getSettingValue('email')}}" class="val">{{getSettingValue('email')}}</a>
                      </div>
                    </div>
                    <div class="info-item">
                      <span class="i-wr"><i data-feather="phone-call"></i></span>
                      <div>
                        <a href="tel://{{getSettingValue('phone')}}" class="val">{{getSettingValue('phone')}}</a>
                      </div>
                    </div>
                    
                    <div class="info-item">
                        <span class="i-wr"><i data-feather="map-pin"></i></span>
                        <div class="val">
                          {{getSettingValue('address_'.app()->getLocale())}}
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <form method="post" action="{{route('page.contact')}}" class="form-style wow animate__animated animate__fadeInUp" id="checkformValid">
                  @csrf
                <h3>{{__('front.home-Contact With Us')}}</h3>
                @include('vendor.errors')
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <input type="text" name="name" required class="form-control" placeholder="{{__('front.contact-Your Name')}}">
                    @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                    @enderror
                  </div>
                  <div class="form-group col-md-6">
                    <input type="tel" name="phone" required class="form-control phone-inp" id="" placeholder="{{__('front.contact-Phone Number')}}">
                                  @error('phone')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                @enderror
                  </div>
                  <div class="form-group col-12">
                    <input type="email" name="email" required class="form-control" placeholder="{{__('front.contact-Your Email')}}">
                                    @error('email')
                              <span class="invalid-feedback" role="alert">
                                  <strong>{{ $message }}</strong>
                              </span>
                      @enderror
                  </div>
                  <div class="form-group col-6">
                    <select class="form-control" name="department">
                      <option>{{__('front.home-Select Department')}}</option>
                      @foreach (departments() as $key => $item)
                                    <option value="{{$item}}">{{$item}}</option>
                                @endforeach
                    </select>
                  </div>
                  <div class="form-group col-6">
                    <select class="form-control" name="subject">
                      <option>{{__('front.home-Select Service')}}</option>
                      @foreach (services() as $key => $item)
                                    <option value="{{$item}}">{{$item}}</option>
                                @endforeach
                    </select>
                  </div>
                  <div class="form-group col-md-12">
                    <textarea name="message" required class="form-control" placeholder="{{__('front.contact-Your Message')}}" rows="4"></textarea>
                                @error('message')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                @enderror
                  </div>
                  <div class="col-12">
                    <button type="submit" class="btn-style light-green wide">
                      {{__('front.home-Send')}}
                      <i data-feather="arrow-right"></i>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="container mt-5">
          <div class="map">
            {!! getSettingValue('address_map') !!}
            {{-- <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d57995.757103492084!2d46.670236!3d24.701641!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1725185660656!5m2!1sen!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> --}}
          </div>

                    
        </div>
      </section>
</main>

@endsection
@section('js')


<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_19R-RfPoOgLDoeM2olDmVjm_S08BV4I&callback=initMap">
</script>
<script>
function initMap() {
    const riyadhLocation = { lat: 24.7136, lng: 46.6753 };
    const dammamLocation = { lat: 26.3927, lng: 50.1077 };

    const map1 = new google.maps.Map(document.getElementById("map1"), {
        zoom: 12,
        center: riyadhLocation,
    });

    const map2 = new google.maps.Map(document.getElementById("map2"), {
        zoom: 12,
        center: dammamLocation,
    });

    new google.maps.Marker({
        position: riyadhLocation,
        map: map1,
    });

    new google.maps.Marker({
        position: dammamLocation,
        map: map2,
    });
}
</script>
@endsection