{% extends 'user_panel/default/base.html' %}

{% block content %}

<script>
    var user_id = "/api/users/{{ user_id }}/";
</script>
<div class="row">
<div class="col-md-10 col-md-offset-1">

    <a href="#" onclick="showModal2()">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-lg-offset-3" >
            <div class="box  opacity" >
                <div class="box-icon">
                    <span class="fa fa-4x fa-html5"></span>
                </div>
                <div class="info">
                    <h4 class="text-center"><!-- Button trigger modal -->
                      Add beacon
                    </h4>
                </div>
            </div>
        </div>
</a>

    </div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
    <script>
        $(document).ready(function(){
            show_beacons_list();
        });
    </script>
    <div id="container2__">

    </div>
</div>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add</h4>
      </div>
      <div class="modal-body" id="modal-content">

      </div>
      <div class="modal-footer" id="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add to category</button>
      </div>
    </div>
  </div>
</div>

<script>
    function showModal2(){

    $("#myModal").modal("show");
    $("#modal-content").html('<form action="/login/" method="post" class="form-signin">\
                <p><input id="name" type="text" class="form-control" placeholder="Name" required autofocus name="name"></p>\
                <p><input id="desc" type="text" class="form-control" placeholder="Description" required autofocus name="desc"></p>\
                <p><input id="uuid" type="text" class="form-control" placeholder="UUID" required autofocus name="uuid"></p>\
                <p><input id="long" type="text" class="form-control" placeholder="Longitude" required autofocus name="long"></p>\
                <p><input id="lat" type="text" class="form-control" placeholder="Latitude" required autofocus name="lat"></p>\
    </form>');

    $("#modal-footer").html('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\
        <button type="button" class="btn btn-primary" id="addProjectBtn">Add beacon</button>');

    $("#addProjectBtn").off("click");
    $("#addProjectBtn").on("click", function(){
    var name = $("#name").val();
    var desc = $("#desc").val();
    var uuid = $("#uuid").val();
    var long = $("#long").val();
    var lat = $("#lat").val();
    var data = {
        "beacon_manager": null,
        "name": name,
        "uuid": uuid,
        "description": desc,
        "longitude": long,
        "latitude": lat,
    };

        $.ajax({
            url: "/api/beacons/",
            type: 'POST',
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function(result) {
                var data = {
                    "beacon": result.url,
                    "sites": []
                }
                $.ajax({
                    url: "/api/beacon_managers/",
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: "application/json",
                    success: function(result_beacon){ return function(result) {
                        result_beacon['beacon_manager'] = result.url;
                        $.ajax({
                            url: result_beacon.url,
                            type: 'PUT',
                            data: JSON.stringify(result_beacon),
                            contentType: "application/json",
                            success: function(result) {
                                document.location.reload()
                            }
                        });
                    }}(result)
                });

            }
        });
    });
}
</script>
</div>
    </div>

{% endblock content %}