{% extends 'base.html.twig' %}


{% block body_id 'welcomeadmin' %}
    
{% block title %}IFM Cameras{% endblock %}
    {% block stylesheets %}
        {{ parent() }}
        <link rel="stylesheet" href="{{ asset('static/css/welcome.css?v=20191230') }}">

    {% endblock %}
    {% block c4rg0_menuleft %}
    {% endblock %} 
{% block body %}
<style>
  /* .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; } */
    .pos-form {
        float: left;
        margin-left: 100px;
        display: none;
    }
    .example-wrapper {
        float: left;
    }
    .pos-form label {
        width: 68px;
    }
</style>

{% if detail_t == 2 %}
<h1>{{ 'Secure Camera'|trans }}</h1>
{% elseif detail_t == 1 %}
<h1>{{ 'Cloud Camera'|trans }} {{ detail_n }}</h1>
<img src="{{ asset('static/images/ifm_cam_O3D_LO.png') }}" alt="Cloud Camera"></img>
<div class="iot-information">{{ iot_info }}</div>
<div class="cloudcam-wrapper">
    {{ form_start(form, { 'attr' : { 'class': 'cam-form' } }) }} 
    {{ form_widget(form) }} 
    {{ form_end(form) }} 
</div>
{% else %}
<script>
function gotoPage(intid, id) {
    if ($("#id-directpos").is(':checked')) {
        $(".pos-form").show();
        $("#id-camid").html("ID: " + intid + " (" + id + ")");
        var o = $("#id-" + id);
        $("#id-rot").val(o.attr("dataR"));
        $("#id-X").val(o.attr("dataX"));
        $("#id-Y").val(o.attr("dataY"));
        $("#id-Z").val(o.attr("dataZ"));
        $("#id-ID").val(id);
        $("#id-IntID").val(intid);
    }
    else {
        location.href = "/{{ app.request.locale }}/admin/cloud/cam/1/" + intid;
    }
}

$(document).ready(function() {

    $('.pos-form #id-save').on('click', function() {
        $.ajax({
            url:'{{ (path('admin_cloud_cam_updatepos')) }}',
            type: "POST",
            dataType: "json",
            data: {
                "id": $("#id-ID").val(),
                "intid": $("#id-IntID").val(),
                "rot": $("#id-rot").val(),
                "x": $("#id-X").val(),
                "y": $("#id-Y").val(),
                "z": $("#id-Z").val()
            },
            async: true,
            success: function (data)
            {
                $("#id-camid").html("");
                $("#id-rot").val("");
                $("#id-X").val("");
                $("#id-Y").val("");
                $("#id-Z").val("");
                $("#id-ID").val("");
                $("#id-IntID").val("");
                $(".pos-form").hide();
                var o = $("#id-" + data.id);
                o.attr("dataR", data.r);
                o.attr("dataX", data.x);
                o.attr("dataY", data.y);
                o.attr("dataZ", data.z);
                alert(JSON.stringify(data));
            },
            error: function (data)
            {
            }
        });  
    });
    $('.pos-form #id-cancel').on('click', function() {
        $("#id-camid").html("");
        $("#id-rot").val("");
        $("#id-X").val("");
        $("#id-Y").val("");
        $("#id-Z").val("");
        $("#id-ID").val("");
        $("#id-IntID").val("");
        $(".pos-form").hide();
    });
});

</script>
<input type="checkbox" id="id-directpos" name="directpos" value="Y">{{ 'Cam positioning'|trans }}<br>
<div class="example-wrapper">
<img id="cloud-cam-map" src="{{ asset('static/images/TOP_C4RG0_Air_60Mc_LO3.png') }}" alt="ifm cameras" usemap="#cloud-cam-map"></img>
<map name="cloud-cam-map">
    <area shape="rect" coords="7, 670, 38, 702" href="/en/admin/cloud/cam/2/1" target="_self" alt="Sec 1" title="Secure Cam 1" />
    <area shape="rect" coords="4, 4, 35, 36" href="/en/admin/cloud/cam/2/2" target="_self" alt="Secur 3" title="Secure Cam 2" />
    <area shape="rect" coords="826, 672, 857, 704" href="/en/admin/cloud/cam/2/4" target="_self" alt="Sec 4" title="Secure Cam 4" />
    <area shape="rect" coords="827, 3, 858, 35" href="/en/admin/cloud/cam/2/3" target="_self" alt="Sec 3" title="Secure Cam 3" />
    {{ cam_map|raw }}
</map>
</div>
<div class="pos-form">
<span id="id-camid"></span><br />
<label for="id-rot">{{ "Rotation"|trans }}</label>
<input id="id-rot" type="text" value="" /><br />
<label for="id-X">{{ "Pos X"|trans }}</label>
<input id="id-X" type="text" value="" /><br />
<label for="id-Y">{{ "Pos Y"|trans }}</label>
<input id="id-Y" type="text" value="" /><br />
<label for="id-Z">{{ "Pos Z"|trans }}</label>
<input id="id-Z" type="text" value="" />
<input id="id-ID" type="hidden" value="" />
<input id="id-IntID" type="hidden" value="" />
<button id="id-save" type="button">{{ 'Save'|trans }}</button>
<button id="id-cancel" type="button">{{ 'Cancel'|trans }}</button>
</div>
{% endif %}
{% endblock %}