@extends('backend.layouts.master')

@section('header')
       <link rel="stylesheet" href="{{ asset('backend/js/plugins/dropzonejs/dropzone.min.css') }}">

@endsection

@section('footer')
    <script src="{{ asset('backend/js/plugins/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('backend/js/plugins/dropzonejs/dropzone.min.js') }}"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHgEk3sWHBEh1T_eF9XGeUt3QZHZPqN1o"></script>
    <script src="{{ asset('backend/js/plugins/gmapsjs/gmaps.min.js') }}"></script>
    <script type="text/javascript">
        var geocoder = new google.maps.Geocoder();

        function geocodePosition(pos) {
          geocoder.geocode({
            latLng: pos
          }, function(responses) {
            if (responses && responses.length > 0) {
              updateMarkerAddress(responses[0].formatted_address);
            } else {
              updateMarkerAddress('Cannot determine address at this location.');
            }
          });
        }

        function updateMarkerStatus(str) {
          document.getElementById('markerStatus').innerHTML = str;
        }

        function updateMarkerPosition(latLng) {
          document.getElementById('info').innerHTML = [
            latLng.lat(),
            latLng.lng()
          ].join(', ');
          $("#latitude").val(latLng.lat());
          $("#longitude").val(latLng.lng());
        }

        function updateMarkerAddress(str) {
          document.getElementById('address').innerHTML = str;
              $("#maps_address").val(str);

        }

        function initialize() {
          var latLng = new google.maps.LatLng({{ $advert->latitude }}, {{ $advert->longitude }});
          var map = new google.maps.Map(document.getElementById('mapCanvas'), {
            zoom: 14,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          var marker = new google.maps.Marker({
            position: latLng,
            title: 'Konum ',
            map: map,
            draggable: true
          });
          
          // Update current position info.
          updateMarkerPosition(latLng);
          geocodePosition(latLng);
          
          google.maps.event.addListener(marker, 'dragstart', function() {
            updateMarkerAddress('Bekleniyor...');
          });
          google.maps.event.addListener(marker, 'drag', function() {
            updateMarkerStatus('Konumlandırılıyor...');
            updateMarkerPosition(marker.getPosition());
          });
          google.maps.event.addListener(marker, 'dragend', function() {
            updateMarkerStatus('Tamamlandı');
            geocodePosition(marker.getPosition());
          });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style>
        #mapCanvas {
            width: 100%;
            height: 300px;
        }
    </style>
    <script>
      $('#city').change(function () {
          var optionSelected = $(this).find("option:selected");
          var value  = optionSelected.val();
          $.get('{{ url('api/city') }}/' + value,{},function(output){
            $("#state option").remove();
            $("#state").append(output);
          });
      });
      $('#state').change(function () {
          var optionSelected = $(this).find("option:selected");
          var value  = optionSelected.val();
          $.get('{{ url('api/state') }}/' + value,{},function(output){
            $("#street option").remove();
            $("#street").append(output);
          });
      });
    </script>
@endsection

@section('content')

    <main id="main-container">
        <!-- Page Header -->
        <div class="content bg-gray-lighter">
            <div class="row items-push">
                <div class="col-sm-7">
                    <h1 class="page-heading">
                        Ofisler <small>Ofis Listesi</small>
                    </h1>
                </div>
                <div class="col-sm-5 text-right hidden-xs">
                    <ol class="breadcrumb push-10-t">
                        <li>Ofisler</li>
                        <li><a class="link-effect" href="{{ route('office.index') }}">Office Listesi</a></li>
                        <li>Bilgi Güncelle</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END Page Header -->

        <!-- Page Content -->
        <div class="content content-narrow">

            <!-- Mega Form -->
            <h2 class="content-heading">OFİS BİLGİLERİ</h2>


            <div class="block block-bordered">
                <div class="block-content">

                    {!! Form::model($advert, array('route' => ['advert.update', $advert->id], 'class' => 'form-horizontal push-10-t push-10', 'files' => true)) !!}

                    @include('backend.advert.form')

                    {!! Form::close() !!}

                </div>
                <!-- END Mega Form -->
            </div>
            <!-- END Page Content -->
    </main>
@endsection