@extends('website.layouts.app')
@section('title','Gallery')
@section('content')
    <!-- start inner-banner -->
    <section class="contact-banner">
        <h1 class="font-weight-bold text-center">Contact Us</h1>
       
    </section>

    <!-- end inner-banner -->
    <!-- start contact -->
    <section class="contact-section">
        <div class="container">
          <div class="row">
            
                
            

            @php 
              $moreAddress = explode("|",$contact->more_address ?? ''); 
              //dd($moreAddress);
            @endphp
            @foreach($moreAddress as $adderss)
              <div class="col-md-12">
                  <div class="contact-content">
                    
                  
                      

                      <p >{!! $adderss ?? '' !!}</p>
                  </div>
              </div>
            @endforeach

              <!-- <div class="col-md-4">
                  <div class="contact-content">
                      <i class="fa fa-map-marker"></i>
                      <h3>Address</h3>
                      <p>{{ $contact->address ?? '' }}</p>
                  </div>
              </div>
              <div class="col-md-4">
                  <div class="contact-content">
                      <i class="fa fa-phone"></i>
                      <h3>Phone</h3>
                      <p>{{ $contact->phone ?? '' }}</p>
                  </div>
              </div> -->
          </div>
        </div>
    </section>


    
    <!-- end contact -->
    <!-- start map -->
    <section class="map container pb-5">
        <div class="row m-0">
            <div class="col-md-6 p-0">
                <iframe src="https://maps.google.com/maps?width=700&amp;height=440&amp;hl=en&amp;q=New%20Delhi+(Title)&amp;ie=UTF8&amp;t=&amp;z=10&amp;iwloc=B&amp;output=embed" class="w-100 border-0" height="100%"   allowfullscreen=""></iframe> 
            </div>
            <div class="col-md-6 p-0">
                <div class="p-3 theme-blue">
                        <h3 class="font-weight-bold text-white">Send A Message</h3>
                        <form class="contact_form  needs-validation" method="post" action="{{ action('WebsiteController\WebsiteController@sendemail') }}" id="add_form">
                          @csrf
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <!-- <label for="exampleInputName">Name</label> -->
                                    <input type="text" class="form-control" id="inputEmail4" placeholder="Name" name="name" required onkeypress="return alphanumeric(event)"> 
                                </div>
                                <div class="form-group col-md-6">
                                   <!--  <label for="exampleInputEmail1">Email</label> -->
                                    <input name="email" class="form-control" id="exampleInputEmail1" placeholder="Email" onkeydown="validate(this.value);"pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$" type="email" required>
                                   
                                </div>
                                <div class="form-group col-md-6">
                                    <!-- <label for="exampleInputNumber">Phone</label> -->
                                    <input type="tel" pattern="[0-9]+" inputmode="numeric" name="phone" class="form-control" id="exampleInputNumber" placeholder="Contact Number"  maxlength="10" onkeypress="return numbersplusonly(event)" required>
                                </div>
                                
                                <div class="form-group col-md-6">
                                   <!--  <label for="exampleInputSubject">Subject</label> -->
                                    <input name="subject" class="form-control" id="exampleInputSubject" placeholder="Subject" type="text" required>
                                </div>

                            <div class="form-group col-md-12">
                                <!-- <label for="exampleInputMessage">Message</label> -->
                                <textarea name="message" class="form-control" id="exampleInputMessage" placeholder="Message" rows="3" required></textarea>
                            </div>
                        </div>
                            <div class="white_submit"><button id="send" class="btn btn-white" type="submit"><img src="{{asset('website')}}/images/loader/ajax-loader.gif" alt="loader1" style="display:none; height:30px; width:auto;" id="loaderImg">Submit</button></div>
                            
                        </form>
            </div>
        </div>
        </div>
    </section>
    <!-- end map -->
@endsection

@section('js')



<script language="JavaScript">
            var ev = /^([_a-zA-Z0-9-]+)(\.[_a-zA-Z0-9-]+)*@([a-zA-Z0-9-]+\.)+([a-zA-Z]{2,3})$/;
            var x = document.getElementById("check");
            function validate(email){
            if(!ev.test(email))
                {
                    x.innerHTML = "Not a valid email";
                    x.style.color = "#ffd3d3"
                }
            else
                {
                    x.innerHTML = "Looks good!";
                    x.style.color = "#a5ffac"
                }
            }
        </script>

@endsection
@section('js')
<script type="text/javascript">
    
    $(document).on('submit', 'form#Contact', function(e) {
      e.preventDefault();
      var data = new FormData(this);
       $('img').show();
       $('button').prop("disabled",true);
//alert("hbhd"); 
      $.ajax({
          cache:false,
          contentType: false,
          processData: false,
          url:"{{action('WebsiteController\WebsiteController@sendemail')}}",
          method: $(this).attr("method"),
          dataType: "json",
          data: data,
          success: function(response) {
            $('img').show();     
            $('button').prop("disabled", false); 
            if (response.success == 200) {
                toastr.success(response.message); 
                setInterval(function(){
                      location.reload(true);
                    }, 3000);
                
            } else {
                toastr.error(response.message);
            }
          }
      }); 
});
</script>

@endsection