{% extends 'generic/object_retrieve.html' %}
{% load static %}
{% block extra_tab_content %}
    <div class="tab-pane active" id="location-floor-plan" role="tabpanel">
        <div class="panel panel-default">
            <div class="panel-heading lfp-toolbar">
                <strong>Location Floor Plan Map</strong>
                {% if has_edit_permission %}
                    <div id="lfp-toolbar-view" class="lfp-toolbar-group lfp-hidden">
                        <button id="btn-lfp-edit" class="btn btn-primary btn-sm"><i class="mdi mdi-pencil"></i> Edit Map</button>
                    </div>
                    <div id="lfp-toolbar-edit" class="lfp-toolbar-group lfp-hidden">
                        <button id="btn-lfp-add-loc" class="btn btn-secondary btn-sm"><i class="mdi mdi-map-marker-plus"></i> Add Location</button>
                        <button id="btn-lfp-add-rack" class="btn btn-secondary btn-sm"><i class="mdi mdi-server-plus"></i> Add Rack</button>
                        <button id="btn-lfp-delete-map" class="btn btn-danger btn-sm"><i class="mdi mdi-delete"></i> Delete Map</button>
                        <button id="btn-lfp-replace-bg" class="btn btn-secondary btn-sm"><i class="mdi mdi-image-edit"></i> Replace Background</button>
                        <input type="file"
                               id="lfp-replace-bg"
                               class="lfp-hidden"
                               accept="image/png,image/jpeg,image/svg+xml">
                        <button id="btn-lfp-save" class="btn btn-primary btn-sm"><i class="mdi mdi-content-save"></i> Save</button>
                        <button id="btn-lfp-cancel" class="btn btn-secondary btn-sm"><i class="mdi mdi-cancel"></i> Cancel</button>
                    </div>
                {% endif %}
            </div>
            <div class="panel-body p-0">
                <!-- Inherited Alert -->
            <div id="lfp-inherited-alert" class="alert alert-info m-3 lfp-hidden" role="alert">
                <i class="mdi mdi-information-outline"></i> Inherited map &mdash; read-only from this location. Edit it from the location that owns the map.
            </div>
            <!-- Loading -->
                <div id="lfp-loading" class="text-center lfp-panel-padding">
                    <p class="text-muted">Loading map...</p>
                </div>
                <!-- Error -->
                <div id="lfp-error" class="text-center lfp-panel-padding lfp-hidden">
                    <p id="lfp-error-message" class="text-danger"></p>
                    <button id="btn-lfp-reload" class="btn btn-primary mt-2">Reload</button>
                </div>
                <!-- No map upload state -->
                <div id="lfp-no-map" class="text-center lfp-panel-padding lfp-hidden">
                    <p class="text-muted mb-3">No physical map exists for this location.</p>
                    {% if has_edit_permission %}
                        <div class="lfp-create-box text-left">
                            <h5>Create Map</h5>
                            <div class="form-group lfp-create-background">
                                <label for="lfp-map-bg">Background Image (Optional)</label>
                                <input type="file"
                                       id="lfp-map-bg"
                                       class="form-control"
                                       accept="image/png,image/jpeg,image/svg+xml">
                            </div>
                            <p id="lfp-image-dimensions-note" class="text-muted small lfp-hidden" aria-live="polite">
                                The selected image will set the map dimensions.
                            </p>
                            <div id="lfp-custom-dimensions-toggle" class="form-check form-switch lfp-create-dimensions-toggle lfp-hidden">
                                <input id="lfp-custom-dimensions" class="form-check-input" type="checkbox">
                                <label class="form-check-label" for="lfp-custom-dimensions">Use custom dimensions</label>
                            </div>
                            <div id="lfp-custom-dimensions-fields" class="row lfp-create-dimension-fields">
                                <div class="col-sm-6 form-group">
                                    <label for="lfp-map-width">Logical Width</label>
                                    <input type="number" id="lfp-map-width" class="form-control" min="1" value="1000" required>
                                </div>
                                <div class="col-sm-6 form-group">
                                    <label for="lfp-map-height">Logical Height</label>
                                    <input type="number" id="lfp-map-height" class="form-control" min="1" value="1000" required>
                                </div>
                            </div>
                            <button id="btn-lfp-create-map" class="btn btn-primary lfp-create-submit">Create</button>
                        </div>
                    {% endif %}
                </div>
                <!-- Map Container -->
                <div id="location-floor-plan-map" class="lfp-map-container lfp-hidden"></div>
            </div>
        </div>
    </div>
    <!-- Modals -->
<div class="modal fade" id="lfp-picker-modal" tabindex="-1" aria-labelledby="lfp-picker-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lfp-picker-title">Select Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="overflow: visible;">
                <form id="lfp-picker-form">
                    <div class="mb-3">
                        <label for="id_target" id="lfp-picker-label" class="form-label fw-bold">Available Items</label>
                        {{ placement_picker_form.target }}
                        {% if placement_picker_form.target.help_text %}
                            <span class="help-block">{{ placement_picker_form.target.help_text }}</span>
                        {% endif %}
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="lfp-picker-place" class="btn btn-primary" disabled>Place</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="lfp-alert-modal" tabindex="-1" aria-labelledby="lfp-alert-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lfp-alert-title">Alert</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="lfp-alert-message" class="mb-0"></p>
            </div>
            <div class="modal-footer">
                <button type="button" id="lfp-alert-dismiss" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="lfp-confirm-modal" tabindex="-1" aria-labelledby="lfp-confirm-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lfp-confirm-title">Confirm</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="lfp-confirm-message" class="mb-0"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="lfp-confirm-yes" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="lfp-conflict-modal" tabindex="-1" aria-labelledby="lfp-conflict-title" aria-describedby="lfp-conflict-message" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lfp-conflict-title">Map changed by another user</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Keep editing"></button>
            </div>
            <div class="modal-body">
                <p id="lfp-conflict-message" class="mb-0">Another user saved changes to this map first. Reloading will discard your unsaved local changes and show the latest map.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button>
                <button type="button" id="lfp-conflict-reload" class="btn btn-primary">Reload latest map</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="lfp-color-modal" tabindex="-1" aria-labelledby="lfp-color-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lfp-color-title">Shape Color</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="lfp-color-input" class="form-label">Placement color</label>
                    <input type="text"
                           id="lfp-color-input"
                           class="form-control"
                           data-coloris
                           value="#0d6efd"
                           autocomplete="off">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="lfp-color-reset">Reset to default</button>
                <button type="button" class="btn btn-primary" id="lfp-color-save">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="lfp-replace-background-modal" tabindex="-1" aria-labelledby="lfp-replace-background-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lfp-replace-background-title">Replace Background</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
            </div>
            <div class="modal-body">
                <p class="mb-2">Current map dimensions: <strong id="lfp-replace-current-dimensions"></strong></p>
                <p class="mb-3">Selected image dimensions: <strong id="lfp-replace-image-dimensions"></strong></p>
                <div class="form-check form-switch mb-3">
                    <input id="lfp-replace-custom-dimensions" class="form-check-input" type="checkbox">
                    <label class="form-check-label" for="lfp-replace-custom-dimensions">Use custom dimensions</label>
                </div>
                <div id="lfp-replace-custom-dimension-fields" class="row lfp-hidden">
                    <div class="col-sm-6 form-group">
                        <label for="lfp-replace-map-width">Logical Width</label>
                        <input type="number" id="lfp-replace-map-width" class="form-control" min="1" max="1000000" required>
                    </div>
                    <div class="col-sm-6 form-group">
                        <label for="lfp-replace-map-height">Logical Height</label>
                        <input type="number" id="lfp-replace-map-height" class="form-control" min="1" max="1000000" required>
                    </div>
                </div>
                <div class="form-check mt-3">
                    <input id="lfp-replace-scale-placements" class="form-check-input" type="checkbox" checked>
                    <label class="form-check-label" for="lfp-replace-scale-placements">Scale existing placements to the new dimensions</label>
                </div>
                <p class="text-muted small mt-3 mb-0">Replacing the background reloads the saved map and discards any unsaved placement edits.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="lfp-replace-background-confirm" class="btn btn-primary">Replace Background</button>
            </div>
        </div>
    </div>
</div>
    <link rel="stylesheet"
          href="{% static 'location_floor_plan/vendor/leaflet.css' %}">
    <link rel="stylesheet"
          href="{% static 'location_floor_plan/vendor/leaflet-geoman.css' %}">
    <link rel="stylesheet"
          href="{% static 'location_floor_plan/vendor/coloris.min.css' %}">
    <link rel="stylesheet"
          href="{% static 'location_floor_plan/css/location_floor_plan.css' %}">
{% endblock %}
{% block javascript %}
    {{ block.super }}
    <script src="{% static 'location_floor_plan/vendor/leaflet.js' %}"></script>
    <script src="{% static 'location_floor_plan/vendor/leaflet-geoman.min.js' %}"></script>
    <script src="{% static 'location_floor_plan/vendor/coloris.min.js' %}"></script>
    {{ lfp_permissions|json_script:"lfp-permissions" }}
    {{ object.id|json_script:"lfp-location-id" }}
    {{ api_resolved_url|json_script:"lfp-api-resolved-url" }}
    {{ api_map_list_url|json_script:"lfp-api-map-list-url" }}
    {{ lfp_csrf_token|json_script:"lfp-csrf-token" }}
    <script src="{% static 'location_floor_plan/js/location_floor_plan.js' %}"></script>
{% endblock %}