@extends('web.layouts.main')
@section('content')

 <main>
        <!--start about header-->
        <section class="pg-header contact-header">
            <div class="text text-center">
                <h4 class="mb-0">اتصل بنا</h4>
            </div>
        </section>
        <!--start contact pg-->
        <section class="contact-pg">
            <div class="container">
                <div class="row">
                    <div class="branches-carousel owl-carousel owl-theme">
                        @foreach($branches as $row)
                        <div class="item">
                            <div class="text">
                                <h6 class="mb-3">{{$row->name}}</h6>
                                <p><b> العنوان:</b>{{$row->address}}  </p>
                                <p><b> الهاتف:</b> {{$row->phone}}</p>
                                <p><b>أقسام الفرع:</b> 
                                @foreach(specialties($row->id) as $key) @if($key != '0')-@endif{{$key->name}} @endforeach
                                </p>
                                <a href="#map{{$row->id}}" id="loc1">المزيد</a>
                            </div>
                            <div class="map" id="map{{$row->id}}">
                                <iframe width="100%" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=mansoura%20egypt+(My%20Business%20Name)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
                            </div>
                        </div>
                        @endforeach
                    </div>

                </div>
                <div class="row mt-5">
                    <div class="col-lg-12 m-auto">
                          @if ($errors->any())
      <div class="alert alert-danger">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div>
  @endif
   @if(Session::has('success'))
<p class="alert {{ Session::get('alert-class', 'alert-success') }}">{{ Session::get('success') }}</p>
@endif
                        <div class="contact-inner">
                            <div class="text text-center">
                                <h4>تواصل معنا بشكل أسرع</h4>
                                <p>يمكنك إرسال شكوي أو إقتراح وسيتم التواصل معك</p>
                            </div>
                            <form id="formcontacts" method="post" onsubmit="contacts()" action="{{url('/contacts')}}">
                                @CSRF
                                 <div id="success" style="display : none" class="alert alert-success">
                           
                        </div>
                        <div id="error" style="display : none" class="alert alert-danger">
                           
                        </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input name="name" class="form-control" placeholder="الإسم">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input name="email" class="form-control" placeholder="البريد الالكتروني">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input name="phone" class="form-control" placeholder="رقم الهاتف">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input name="subject" class="form-control" placeholder="الموضوع">
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <textarea name="message" rows="7" class="form-control" placeholder="رسالتك"></textarea>
                                        </div>
                                    </div>
                                    <button type="submit" class="submit-btn">إرسال</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
   
   @push('js')
   <script>
        function contacts(){
        event.preventDefault(); 
       var action = $('#formcontacts').attr('action');
       var urls = action;
       var dataform = $('#formcontacts').serialize();
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           
              $('#error').css("display", "none");
              $('#success').css("display", "block");
            $('#success').html('تم ارسال رسالتك بنجاح');
             location.reload();
             
          }
          ,error:function(data) {
             
              $('#success').css("display", "none");
              $('#error').html('');
    $('#error').css("display", "block");
   
   $.each(data.responseJSON.errors, function(value) {
     $('#error').append('<div class="col-12">'+value+'</div');
     
     
 }); 
 
}
        })
        }
    </script>
   @endpush

@stop