@extends('web.layouts.main')
@section('content')
  <div class="heading-pg">
        <div class="container">
            <div class="inner">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url(getCurrentLocale().'/')}}">{{__('web.home')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page"> {{__('web.contactus')}} </li>
                    </ol>
                </nav>
                <h2> {{__('web.contactus')}} </h2>
            </div>
        </div>
        <img src="{{url('')}}/assets/web/images/line-heading-pg.png" alt="" class="line">
    </div>
    <main class="contact-pg">
        <!--Start contact-pg-->
        <section>
            <div class="container">
                <div class="text-center mb-5">
                    <h2><b>{{__('web.contact_now')}}</b></h2>
                    <p>{{__('web.contact_desc')}}</p>
                </div>
                <div class="row pt-4 mt-5">
                    <div class="col-lg-4">
                        <div class="contact-cards">
                            @foreach($branches as $row)
                            <button type="button" class="item " data-toggle="modal" data-target="#branchModal{{$row->id}}">
                                <img src="{{asset($row->image)}}" alt="" class="icon country-icon">
                                <div class="text">
                                    <h6 class="h_country"><b>{{branchname($row->id)}}  </b></h6>
                                    <p>{{branchaddress($row->id)}}</p>
                                </div>
                            </button>
                             @endforeach
                            
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="form-wrapper">
                            <h3 class="headline_form">{{__('web.send')}} <b>{{__('web.message')}}</b></h3>
                            <div class="col-lg-10 m-auto">
                                <form onsubmit="savedate(this)" method="post" action="{{url(getCurrentLocale().'/contacting')}}">
                                    @CSRF
                                    <div class="form-group">
                                        <input type="text" name="name" id="name" class="form-control" autocomplete="off" autofocus  />
                                        <label class="floating-label"> {{__('web.name')}}  </label>
                                    </div>
                                    <div class="form-group">
                                        <input type="email" name="email" id="email" class="form-control" autocomplete="off" autofocus  />
                                        <label class="floating-label"> {{__('web.email')}}   </label>
                                    </div>
                                    <div class="form-group">
                                        <textarea type="text" name="message" id="message"  class="form-control" rows="8" autocomplete="off" autofocus ></textarea>
                                        <label class="floating-label"> {{__('web.message')}}    </label>
                                    </div>
                                    <button class="submit-btn" ><i class="fab fa-telegram-plane"></i> {{__('web.send')}} </button>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </section>
        <!-- Modal login -->
        @foreach($branches as $row)
        <div class="modal branchModal fade" id="branchModal{{$row->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content ">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-body">
                        <h3 class="headline_form">{{__('web.branch')}} <b>{{branchname($row->id)}}</b></h3>
                        <div class="contact-cards mb-4">
                            <div class="row">
                                <div class="col-md-4 pr-0 pl-0">
                                    <div class="item">
                                        <img src="{{url('')}}/assets/web/images/icons/phone.svg" alt="" class="icon">
                                        <div class="text">
                                            <h6><b>{{__('web.phone')}} </b></h6>
                                            <p>{{$row->phone}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 pr-0 pl-0">
                                    <div class="item">
                                        <img src="{{url('')}}/assets/web/images/icons/email.svg" alt="" class="icon">
                                        <div class="text">
                                            <h6><b> {{__('web.email')}} </b></h6>
                                            <p>{{$row->email}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 pr-0 pl-0">
                                    <div class="item">
                                        <img src="{{url('')}}/assets/web/images/icons/map.svg" alt="" class="icon">
                                        <div class="text">
                                            <h6><b> {{__('web.address')}}  </b></h6>
                                            <p>{{branchaddress($row->id)}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="map-box">
                            <!-- <div class="bg_colored"></div> -->
                            
                            <iframe src="https://maps.google.com/maps?q={{$row->latlng}}&z=15&output=embed" width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowfullscreen="" loading="lazy"></iframe>

                            <a href="https://www.google.com/maps/search/?api=1&query={{$row->latlng}}" class="show-map"><i class="fab fa-telegram-plane"></i> {{__('web.showongoogle')}}</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
                           
                           @endforeach
        <div class="modal fade modal_login" id="modal_fail" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/alert.svg" alt="">
                        </div>
                        <h4>{{__('web.fill_inputs')}} </h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade modal_login" id="modal_success" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/checked.svg" alt="">
                        </div>
                        <h4 style="background-color:#d4edd9">{{__('web.success')}} </h4>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        
    </main>
@push('js')
<script>
    function savedate(elem){
          event.preventDefault();
   
         let action = $(elem).attr('action');
       
       let urls = action;
       
       let dataform = new FormData( $(elem)[0]);
        
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          contentType: false, 
          processData: false, 
          success:function(data)
          {
            
            $("#modal_success").modal('show');
            window.setTimeout(function(){location.reload()},1000)
               }
          ,error: function (data) {
              
              $('#modal_fail').modal('show');
              $('.is-invalid').removeClass('is-invalid');
   $.each(data.responseJSON.errors, function(key,value) {
     
     $('#'+key).addClass('is-invalid');
     
 }); 
 
 
 
}
        })


    }
</script>
@endpush
@stop