<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="ubicacionTecnicos.aspx.vb" Inherits="website.samm_web.forms_general_ubicacionTecnicos" MasterPageFile="~/master/master/mas_FomularioSinGrillaNoAjax.master" %>

<%@ Register Src="~/controles/general/popup.ascx" TagName="popup" TagPrefix="uc1" %>
<%@ Register Src="~/controles/general/bocadillo.ascx" TagName="bocadillo" TagPrefix="boc" %>

<asp:Content ID='content5' runat='server'  ContentPlaceHolderID='cph_tituloPagina'>
    <asp:Label ID='lbl_tituloPagina' runat='server' CssClass='lbl_titulo'></asp:Label>
</asp:Content>

<asp:Content ContentPlaceHolderID="cph_general" runat="server">

    <style>
        .ubicacion-page {
            display: flex;
            height: 80vh;
        }

        .ubicacion-page-left {
            width: 20vw;
            padding: 0px 10px 10px 10px;
            overflow-y: auto;
            border-right: 1px solid #ccc;
            overflow-y: auto;
            float: left;
            background-color: #f4f4f4;
            box-sizing: border-box;
        }

        .ubicacion-page-right {
            flex: 1;
            padding: 10px;
            width: 75vw;
        }

        .ubicacion-page .person-link {
            display: block;
            margin-bottom: 8px;
            color: blue;
            cursor: pointer;
        }

        .person-link.selected {
            background-color: #d0e7ff;
            font-weight: bold;
            border-radius: 4px;
        }

        .ubicacion-page-sticky-title {
            position: sticky;
            top: 0;
            background-color: #f4f4f4;
            padding: 10px 0;
            margin: 0;
            font-size: 1.2em;
            border-bottom: 1px solid #ccc;
            z-index: 1;
        }
    </style>
    <script type="text/javascript">
        function updateMap(lat, lng, isValid) {
            var query;
            var iframe;

            if (lat != '' && lng != '' && isValid == 1) {
                query = "q=" + lat.replace(",", ".") + "," + lng.replace(",", ".") + "&";
            }
            else {
                query = '';
            }

            iframe = document.getElementById("mapFrame");
            iframe.src = "https://www.google.com/maps?" + query + "z=12&output=embed";
        }

        function selectPerson(element) {
            document.querySelectorAll('.person-link.selected').forEach(function (el) {
                el.classList.remove('selected');
            });

            element.classList.add('selected');
        }

        function handlePersonClick(event, element, lat, lng, isValid, text) {
            updateMap(lat, lng, isValid);
            selectPerson(element);
            s_mostrarBocadillo(event, text);
        }

        window.addEventListener('DOMContentLoaded', () => {
            const leftPanel = document.querySelector('.ubicacion-page-left');

            if (leftPanel) {
                leftPanel.addEventListener('scroll', () => {
                    ocultar_bocadillo();
                });
            }
        });

        document.addEventListener('click', function (event) {
            if (event.target.classList.contains('person-link')) {
                document.getElementById("tbl_bocadillo").style.cssText += "top: " + event.clientY + "px; left:" + event.clientX + "px;";
            }
        });

    </script>

    <div class="ubicacion-page">
        <div class="ubicacion-page-left">
            <h2 class="ubicacion-page-sticky-title">Tecnicos</h2>
            <br />
            <asp:Repeater ID="rptPeople" runat="server">
                <ItemTemplate>
                    <span class="person-link"
                        onclick='handlePersonClick(
                            event, 
                            this, 
                            "<%# Eval("latitud") %>",
                            "<%# Eval("longitud") %>",
                            "<%# iif(Eval("ubicacion_codigo").ToString() <> samcore.Utilitario.Localizacion.ConstantesGeolocalizacion.t_str_localizacionInvalida, 1, 0) %>",
                            "<%# Eval("mensaje") %>")'>

                        <span style="display: inline-block; width: 20px;">

                            <svg runat="server" Visible='<%# Not Eval("latitud") Is DBNull.Value And Not Eval("ubicacion_codigo").ToString() = samcore.Utilitario.Localizacion.ConstantesGeolocalizacion.t_str_localizacionInvalida %>'
                                xmlns="http://www.w3.org/2000/svg"
                                width="14" height="14" viewBox="0 0 384 512" fill="#d00"
                                style="vertical-align: middle;">
                                <path d="M168 0C75.1 0 0 75.1 0 168c0 87.3 139.1 271.7 151.1 287.4 2.8 3.8 7.2 6.6 12.1 7.5s9.9-.3 14-3.3c3.4-2.4 6-5.7 7.7-9.4C188.2 439.7 336 255.3 336 168 336 75.1 260.9 0 168 0zm0 240c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z" />
                            </svg>

                            <svg runat="server" Visible='<%# Eval("ubicacion_codigo").ToString() = samcore.Utilitario.Localizacion.ConstantesGeolocalizacion.t_str_localizacionInvalida %>'
                                width="14" height="14" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                                style="vertical-align: middle;">
                                <circle cx="12" cy="12" r="10" stroke="#FF0000" stroke-width="2" fill="none" />
                                <line x1="8" y1="8" x2="16" y2="16" stroke="#FF0000" stroke-width="2" stroke-linecap="round" />
                                <line x1="16" y1="8" x2="8" y2="16" stroke="#FF0000" stroke-width="2" stroke-linecap="round" />
                            </svg>

                        </span>

                        <%# Eval("nombre") %>
                    </span>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <div class="ubicacion-page-right">
            <iframe id="mapFrame"
                width="100%" height="100%" frameborder="0" style="border: 0"
                src="https://www.google.com/maps?z=2&output=embed"
                allowfullscreen
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>

    <boc:bocadillo ID="Bocadillo" runat="server" />
</asp:Content>
