@extends('front.includes.master')
@if (\App::getLocale() == 'ar')
    <style>
        .page-header,.entry-main-content,.detail-info ,.custom{
            direction: rtl;
            text-align: right;
        }
    
        #map {
    height: 650px;
    width: 100%;
}
.shart{float: inline-start;}

    </style>
@endif
@section('main-content')

@section('main-content')
@if(Session::has('success'))
<div class="message-box with-icon sucess">
    <div class="icon-box"><span class="icon fa fa-check"></span></div>
    <p>{{ Session::get('success') }}</p>
    <button class="close-btn"><span class="fa fa-times"></span></button>
</div>
@endif
@if(Session::has('error'))
<div class="message-box with-icon error">
    <div class="icon-box"><span class="icon fa fa-ban"></span></div>
    <p>{{ Session::get('error') }}</p>
    <button class="close-btn"><span class="fa fa-times"></span></button>
</div>
@endif

    <!-- Slider Area -->
    <div class="page-header breadcrumb-wrap">
      <div class="container">
          <div class="breadcrumb">
              <a href="{{route('front')}}" rel="nofollow">{{ __('admin.web.Home') }}</a>
              <span></span> {{ __('admin.web.Find us') }}
          </div>
      </div>
  </div>
  
 
  <section class="mt-50 mb-50">
    <div class="container custom">
        <div class="row">
            <div class="single-header mb-50 text-center">
                <h1 class="font-xxl text-brand">أين تجدنا</h1>
            </div>
            <div class="col-12 mb-3 d-print-none">
                <div class="d-print-none mb-4" id="mapView">
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="section-border pt-50 pb-50">
    <div class="container">
           
        <div class="row">
            <div class="col-md-6 mb-4 mb-md-0 text-center">
                <h4 class="mb-15 text-brand">{{ __('admin.web.Phones') }}</h4>
               
                <span style="font-size: 17px" title="Phone"> <i class="fi-rs-smartphone"></i> {{$contact->phone1}} </span><br>
                <span style="font-size: 17px" title="Phone"> <i class="fi-rs-smartphone"></i> {{$contact->phone2}} </span><br>
            </div>
            <div class="col-md-6 mb-4 mb-md-0 text-center">
                <h4 class="mb-15 text-brand">{{ __('admin.web.Emails') }}</h4>
                <span style="font-size: 17px" title="Phone"> <i class="fi-rs-envelope"></i>  </span> <span>{{$contact->email1}}</span><br>
                <span style="font-size: 17px" title="Phone"> <i class="fi-rs-envelope"></i> </span> <span>{{$contact->email2}}</span><br>
            </div>
            
        </div>
    </div>
</section>
<section class="pt-50 pb-50">
    <div class="container">
        <div class="row">
            <div class="col-xl-8 col-lg-10 m-auto">
                <div class="contact-from-area padding-20-row-col wow FadeInUp">
                    <h3 class="mb-10 text-center">{{ __('admin.web.Contact us') }}</h3>
                    <form class="contact-form-style text-center" id="contact-form" action="{{route('contact.store')}}" method="post">
                        @csrf

                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <div class="input-style mb-20">
                                    <input class="text-center" name="name" placeholder="{{ __('admin.web.Your name') }}" type="text">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="input-style mb-20">
                                    <input class="text-center"  name="email" placeholder="{{ __('admin.web.Your email') }}" type="email">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="input-style mb-20">
                                    <input class="text-center" name="phone" placeholder="{{ __('admin.web.Your phone') }}" type="tel">
                                </div>
                            </div>
                         
                            <div class="col-lg-12 col-md-12">
                                <div class="textarea-style mb-30">
                                    <textarea  class="text-center" name="message" placeholder="{{ __('admin.web.Your message') }}"></textarea>
                                </div>
                                <button class="submit submit-auto-width" type="submit">{{ __('admin.web.Contact us') }}</button>
                            </div>
                        </div>
                    </form>
                    <p class="form-messege"></p>
                </div>
            </div>
        </div>
    </div>
</section>


<script>
                function initMap() {
                    var findUs = {!! json_encode($findUs) !!};
    var prev_infowindow = false;
    var icon = '';
    var lat = null;
    var lng = null;


    findUs.forEach(function (supplier) {
       
            if (lat == null && lng == null) {
                lat = supplier.latitude;
                lng = supplier.longitude;
            }
    });

    var options = {
        center: {
            lat: parseFloat(lat),
            lng: parseFloat(lng)
        },
        zoom: 3,
    };
    var map = new google.maps.Map(document.getElementById("map"), options);

    findUs.forEach(function (supplier) {

            icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';

        if (supplier.latitude) {
            addMarker({
                id: supplier.id,
                coords: {
                    lat: parseFloat(supplier.latitude),
                    lng: parseFloat(supplier.longitude)
                },
                name: supplier.name,
                phone: supplier.phone,
                latitude: supplier.latitude,
                longitude: supplier.longitude,
                iconImage: icon
            })
        }
    });

    function addMarker(props) {
        var idTrans='رقم الهاتف';
        var marker = new google.maps.Marker({
            position: props.coords,
            map: map
        })
        if (props.iconImage) {
            marker.setIcon(props.iconImage)
        }

        if (props.latitude) {
            var infoWindow = new google.maps.InfoWindow({
                content: "<div class=\"card card-custom\">" +
                    "            <div class=\"card-header\">" +
                    "                <div class=\"card-title\">" +
                    "                    <h3 class=\"card-label\"><small>" + props.name + "</small></h3>" +
                    "                </div>" +
                    "            </div>" +
                    "            <div class=\"card-body\">" +
                    "                <table>" +
                    "                    <tr>" +
                    "                        <td class='pr-5'>" + idTrans + "</td>" +
                    "                        <td>" + props.phone + "</td>" +
                    "                    </tr>" +
                    "                </table>" +
                    "            </div>" +
                    "            <div class=\"card-footer\">" +
                    "              <div class='text-left'>" +
                    "                <span>" +
                    "                    <i class=\"fas fa-map-marker\"></i>" + " " + props.longitude + "," + props.latitude +
                    "                </span>" +
                    "              </div>" +
                    "            </div>" +
                    "        </div>"
            });
            marker.addListener('click', function () {
                if (prev_infowindow) {
                    prev_infowindow.close();
                }
                prev_infowindow = infoWindow;
                infoWindow.open(map, marker)
            });
        }
    }
}

            </script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAf9ad-i0jt6lUod_34JA_ywQJNGOV7s4w&language={{App::getLocale()}}&callback=initMap"
type="text/javascript"></script>

 @endsection