@extends('layouts.app')

@section('content')
<section class="content-header">

@include('flash::message')

<div class="clearfix"></div>
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Advertisement Details</h1>
            </div>
            <div class="col-sm-6 text-right">
                <button data-id="{{$ads->id}}" class="btn btn-primary mr-3" data-toggle="modal"  onclick="addAddress(this)" data-backdrop="static" data-keyboard="false" data-target="#add-address">Target Address</button>
                <a class="btn btn-default" href="{{ route('ads.index') }}">
                    Back
                </a>

            </div>
        </div>
    </div>
</section>

<div class="content px-3">
    <div class="card">
        <div class="card-body">
            <div class="row">
                @include('ads.show_fields')
                @include('ads.address')
            </div>
        </div>
    </div>
</div>


<script>
    function addAddress(e) {
        var id = $(e).attr("data-id");
        $('#ads_id').val(id);
        $('#add-address').show();
    }
    $(document).on('submit', '#add_address', function(e) {
        e.preventDefault()
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            }
        });
        $.ajax({
            url: "{{route('address-add')}}",
            type: 'POST',
            dataType: 'json',
            data: {
                ads_id: $('#ads_id').val(),
                address: $('#address').val(),
                radius:$('#radius').val(),
                latitude: $('#latitude').val(),
                longitude: $('#longitude').val(),
            },

            success: function(result) {
                $('#add-address').hide();
                $("#add_address").trigger("reset");
                location.reload();
            },
            error: function(data) {
                $('.error').html(' ');
                $.each(data.responseJSON.errors, function(id, msg) {
                    console.log(data.responseJSON.errors);
                    $('#error_' + id).html(msg);

                })
            }

        })
    });

    $(document).ready(function() {
        var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            $('#latitude').val(place.geometry.location.lat());
            $('#longitude').val(place.geometry.location.lng());
        });
        $(".modal").on("hidden.bs.modal", function() {
            $("#add_address").trigger("reset");
        });
    });

    var pacContainerInitialized = false;
    $('#address').keypress(function() {
        if (!pacContainerInitialized) {
            $('.pac-container').css('z-index', '9999');
            pacContainerInitialized = true;
        }
    });
</script>
@endsection