{% extends 'generic/_base.html' %}
{% load static %}
{% load form_helpers %}
{% load helpers %}
{% load django_htmx %}

{% block head %}
{{ block.super }}
<script src="{% static 'netbox_floorplan/vendors/fabric-js-6.0.2.js' %}"></script>
<script src="{% static 'netbox_floorplan/vendors/jquery-3.7.1.js' %}"></script>
<script src="{% static 'netbox_floorplan/vendors/htmx.min.js' %}"></script>

{% endblock head %}

{% block title %}
{{ obj }}
{% endblock title %}

{% block tabs %}
<ul class="nav nav-tabs px-3">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="edit-tabs-tab" data-bs-toggle="tab" data-bs-target="#edit-tabs"
            type="button" role="tab" aria-controls="edit-tabs" aria-selected="true">
            Edit
        </button>
    </li>
</ul>
{% endblock tabs %}

{% block content %}
{% load template_utils %}


<!--- start js vars -->
<input type="hidden" id="obj_pk" value="{{ obj.pk }}">
<input type="hidden" id="obj_name" value="{{ obj.name }}">
<input type="hidden" id="csrf" value="{{ csrf_token }}">
<input type="hidden" id="record_type" value="{{ record_type }}">
<input type="hidden" id="location_id" value="{{ location.id }}">
<input type="hidden" id="site_id" value="{{ site.id }}">
<!--- end js vars -->

<div class="tab-content">
    <div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
        <div id="draggable-area">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card">
                            <h5 class="card-header">Controls</h5>
                            <div class="card-body">
                                {% include 'netbox_floorplan/inc/pro_tips.html' %}
                                <form>
                                    <div class="mb-3">
                                        <div class="mb-1">
                                            <label class="form-label">Floorplan Dimensions</label>
                                        </div>
                                        <a type="button" class="btn btn-outline-info"
                                            onclick="set_dimensions()">Set Dimensions
                                        </a>
                                    </div>
                                    <div class="mb-3">
                                        <div class="mb-1">
                                            <label class="form-label">Floorplan Background</label>
                                        </div>
                                        <a type="button" class="btn btn-outline-info"
                                            onclick="set_background()">Set/Edit Background
                                        </a>
                                    </div>
                                    <div class="mb-3">
                                        <div class="mb-1">
                                            <label class="form-label">Rack/Device Add / Delete</label>
                                            <small class="form-text text-muted">
                                                <strong>Simple Rack/Device:</strong> Add a rack/device that shows name + status only<br>
                                                <strong>Advanced Rack/Device:</strong> Add a rack/device that shows name + status + role + tenant
                                            </small>
                                        </div>
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item">
                                                <button class="nav-link active" data-bs-toggle="tab" id="rack-tab"
                                                    data-bs-target="#rack-tabs" type="button" role="tab"
                                                    aria-controls="rack-tabs" aria-selected="true">Racks</button>
                                            </li>
                                            <li class="nav-item">
                                                <button class="nav-link" data-bs-toggle="tab" id="unrack-tab"
                                                    data-bs-target="#unrack-tabs" type="button" role="tab"
                                                    aria-controls="unrack-tabs" aria-selected="false">Un-Racked
                                                    Devices</button>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div class="tab-pane show active" id="rack-tabs" role="tabpanel"
                                                aria-labelledby="rack-tabs">
                                                <div class="card">
                                                    <div id="rack-card"
                                                        class="card-body htmx-container table-responsive">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="unrack-tabs" role="tabpanel"
                                                aria-labelledby="unrack-tabs">
                                                <div class="card">
                                                    <div id="unrack-card"
                                                        class="card-body htmx-container table-responsive">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-1">
                                            <label class="form-label">Supplimentary Object Add / Delete</label>
                                        </div>
                                        <a type="button" class="btn btn-outline-info" onclick="add_wall()">Add
                                            Wall
                                        </a>
                                        <a type="button" class="btn btn-outline-info" onclick="add_area()">Add
                                            Area
                                        </a>
                                        <a class="btn btn-outline-success" onclick="add_text()">
                                            Add Label
                                        </a>
                                        <a class="btn btn-outline-info tools disabled" onclick="lock_floorplan_object()" id="lock_button">Lock/Unlock Object
                                        </a>
                                        <a class="btn btn-outline-danger tools disabled"
                                            onclick="delete_floorplan_object()" id="remove_button">
                                            Delete
                                        </a>


                                    </div>
                                    <div class="mb-3">
                                        <a class="btn btn-outline-info tools disabled">
                                            Set Color
                                            <input type="color" id="selected_color" name="body" value="#000000"
                                                oninput="set_color(this.value)" class="tools disabled">
                                        </a>
                                    </div>
                                    <!-- Set color textbox for the rack text (Default #6EA8FE: blue)-->
                                    <div class="mb-3">
                                        <a class="btn btn-outline-info tools disabled">
                                            Set Text Color
                                            <input type="color" id="selected_text_color" name="text_color" value="#6EA8FE"
                                                oninput="set_text_color(this.value)" class="tools disabled">
                                        </a>
                                    </div>
                                    <!-- Buttons to show or hide the status, role, and tenant -->
                                    <div class="mb-3">
                                        <div class="mb-1">
                                            <label class="form-label">Rack/Device Display Options</label>
                                            <small class="form-text text-muted">Select a rack or device to change whether to show the following info<br></small>
                                            <small class="form-text text-muted"><b>Note: </b>Only works with Advanced racks/devices</small>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input tools disabled" type="checkbox" value="" id="show_status" checked
                                                onchange="toggle_text_visibility('status', this.checked)">
                                            <label class="form-check-label" for="show_status">
                                                Status
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input tools disabled" type="checkbox" value="" id="show_role" checked
                                                onchange="toggle_text_visibility('role', this.checked)">
                                            <label class="form-check-label" for="show_role">
                                                Role
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input tools disabled" type="checkbox" value="" id="show_tenant" checked
                                                onchange="toggle_text_visibility('tenant', this.checked)">
                                            <label class="form-check-label" for="show_tenant">
                                                Tenant
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="mb-1">
                                            <label class="form-label">Object Layer Control</label>
                                        </div>
                                        <a type="button" class="btn btn-outline-secondary tools disabled"
                                            onclick="bring_forward()"><i class="mdi mdi-plus"></i> Forward
                                        </a>
                                        <a class="btn btn-outline-secondary tools disabled"
                                            onclick="send_back()">
                                            <i class="mdi mdi-minus"></i> Backwards
                                        </a>
                                    </div>
                                    <div class="mb-3">
                                        <div class="mb-1">
                                            <label class="form-label">View & Zoom</label>
                                        </div>
                                        <input type='range' step='.01' max='2' min='0' onchange='set_zoom(this.value)'
                                            id="zoom">
                                        <a class="btn btn-outline-secondary" id="reset_zoom" href="#">
                                            Reset Zoom
                                        </a>
                                        <a class="btn btn-outline-secondary tools disabled"
                                            onclick="center_pan_on_slected_object()">
                                            <i class="mdi mdi-bullseye"></i> Center
                                        </a>
                                    </div>
                                    <div class="mb-3">
                                        <div class="mb-1">
                                            <label class="form-label"></label>
                                        </div>
                                        <a class="btn btn-primary" onclick="save_and_redirect()">
                                            Save
                                        </a>
                                        <a class="btn btn-outline-success float-end" id="export_svg">
                                            Export SVG
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-body" id="content-container">
                                <div id="drag_zone">
                                    <canvas id="canvas" style="border:1px solid #000000;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="control_unit_modal" tabindex="-1" aria-labelledby="control_unit_modal_label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="control_unit_modal_label">Set Floorplan Dimensions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex">
                    <div class="row">
                        <div class="input-group input-group-sm mb-3 col-6">
                            <span class="input-group-text" id="width_label">Width</span>
                            <input type="number" id="width_value" class="form-control" aria-label="Width"
                                aria-describedby="width_label" step="0.01"
                                value="{% if obj.width %}{% denormalize_measurement obj.measurement_unit obj.width %}{% endif %}">
                        </div>
                        <div class="mx-2"></div>
                        <div class="input-group input-group-sm mb-3 col-6">
                            <span class="input-group-text" id="height_label">Height</span>
                            <input type="number" class="form-control" aria-label="Height"
                                aria-describedby="height_label" id="height_value" step="0.01"
                                value="{% if obj.height %}{% denormalize_measurement obj.measurement_unit obj.height %}{% endif %}">
                        </div>
                        <select id="measurement_unit" class="netbox-static-select">
                            <option {% if obj.measurement_unit == 'ft' %}selected{% endif %} value="ft">Feet</option>
                            <option {% if obj.measurement_unit == 'm' %}selected{% endif %} value="m">Meters</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="update_dimensions()">Save
                    changes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="background_unit_modal" tabindex="-1" aria-labelledby="control_unit_modal_label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="control_unit_modal_label">Set Floorplan Background Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex">
                    <div class="row">
                        {% render_field form2.assigned_image %}
                    </div>
                </div>        

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="update_background()">Save
                    changes</button>
            </div>
        </div>
    </div>
</div>

<script type="module" src="{% static 'netbox_floorplan/floorplan/edit.js' %}"></script>

{% endblock content %}