<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="SettingsUnidadesAdministrativas.aspx.cs" Inherits="PDI.Web.SettingsUnidadesAdministrativas" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
	<style>
		.ua-tree-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
		.ua-tree-table th { background: var(--wine-dark, #5a1a3a); color: #fff; padding: 8px 12px; text-align: left; font-weight: 600; }
		.ua-tree-table td { padding: 6px 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
		.ua-tree-table tr:hover { background-color: #f8f4f6; }
		.ua-tree-table tr.inactive { opacity: 0.5; }
		.ua-indent { display: inline-block; width: 24px; }
		.ua-toggle { cursor: pointer; color: var(--wine-dark, #5a1a3a); font-weight: bold; margin-right: 4px; display: inline-block; width: 16px; text-align: center; }
		.ua-siglas { display: inline-block; background: var(--wine-dark, #5a1a3a); color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 0.75rem; font-weight: bold; margin-right: 8px; min-width: 50px; text-align: center; }
		.ua-nombre { font-weight: 500; }
		.ua-actions a, .ua-actions button { margin-right: 6px; cursor: pointer; font-size: 0.85rem; text-decoration: none; border: none; background: none; padding: 4px 8px; border-radius: 3px; }
		.ua-actions .btn-add { color: #28a745; }
		.ua-actions .btn-add:hover { background: #e8f5e9; }
		.ua-actions .btn-edit { color: #0d6efd; }
		.ua-actions .btn-edit:hover { background: #e3f2fd; }
		.ua-actions .btn-delete { color: #dc3545; }
		.ua-actions .btn-delete:hover { background: #fce4ec; }

		/* Modal styles */
		.ua-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9000; }
		.ua-modal-overlay.active { display: flex; align-items: center; justify-content: center; }
		.ua-modal { background: #fff; border-radius: 8px; padding: 24px; width: 500px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.3); position: relative; z-index: 9001; }
		.ua-modal h4 { margin: 0 0 16px; color: var(--wine-dark, #5a1a3a); }
		.ua-modal label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85rem; color: #555; }
		.ua-modal input[type="text"], .ua-modal input[type="number"] { width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; -webkit-appearance: auto; appearance: auto; }
		.ua-modal-buttons { text-align: right; margin-top: 16px; }
		.ua-modal-buttons button { padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; margin-left: 8px; }
		.ua-modal-buttons .btn-save { background: var(--wine-dark, #5a1a3a); color: #fff; }
		.ua-modal-buttons .btn-save:hover { opacity: 0.9; }
		.ua-modal-buttons .btn-cancel { background: #e0e0e0; color: #333; }
		.ua-modal-buttons .btn-cancel:hover { background: #ccc; }
		.ua-btn-new-root { margin-bottom: 12px; padding: 8px 16px; background: var(--wine-dark, #5a1a3a); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
		.ua-btn-new-root:hover { opacity: 0.9; }
	</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
	<section id="page-settings" class="page">
		<h2>Configuraci&oacute;n</h2>
		<div class="settings-container">
			<asp:Literal ID="litSettingsMenu" runat="server" />
			<div class="settings-content">
				<div id="content-ua" class="settings-content-pane active">
					<h3>Unidades Administrativas</h3>
					<button type="button" class="ua-btn-new-root" onclick="openAddModal(null, '')"><i class="fas fa-plus"></i> Nueva unidad ra&iacute;z</button>
					<asp:Literal ID="litTree" runat="server" />
				</div>
			</div>
		</div>
	</section>

	<!-- Add/Edit Modal -->
	<div id="uaModal" class="ua-modal-overlay">
		<div class="ua-modal">
			<h4 id="modalTitle">Nueva Unidad Administrativa</h4>
			<asp:HiddenField ID="hfEditId" runat="server" Value="" />
			<asp:HiddenField ID="hfParentId" runat="server" Value="" />
			<label>Nombre completo</label>
			<asp:TextBox ID="txtNombre" runat="server" MaxLength="250" />
			<label>Nombre corto</label>
			<asp:TextBox ID="txtNombreCorto" runat="server" MaxLength="100" />
			<label>Siglas</label>
			<asp:TextBox ID="txtSiglas" runat="server" MaxLength="20" />
			<label>Posici&oacute;n (orden)</label>
			<asp:TextBox ID="txtPosicion" runat="server" TextMode="Number" Text="0" />
			<div class="ua-modal-buttons">
				<button type="button" class="btn-cancel" onclick="closeModal()">Cancelar</button>
				<asp:Button ID="btnSave" runat="server" Text="Guardar" CssClass="btn-save" OnClick="btnSave_Click" />
			</div>
		</div>
	</div>

	<script type="text/javascript">
		function openAddModal(parentId, parentName) {
			document.getElementById('modalTitle').innerText = parentId ? 'Nueva sub-unidad de: ' + parentName : 'Nueva Unidad Administrativa (ra\u00edz)';
			document.getElementById('<%= hfEditId.ClientID %>').value = '';
			document.getElementById('<%= hfParentId.ClientID %>').value = parentId || '';
			document.getElementById('<%= txtNombre.ClientID %>').value = '';
			document.getElementById('<%= txtNombreCorto.ClientID %>').value = '';
			document.getElementById('<%= txtSiglas.ClientID %>').value = '';
			document.getElementById('<%= txtPosicion.ClientID %>').value = '0';
			document.getElementById('uaModal').classList.add('active');
		}

		function openEditModal(id, nombre, nombreCorto, siglas, posicion) {
			document.getElementById('modalTitle').innerText = 'Editar: ' + siglas;
			document.getElementById('<%= hfEditId.ClientID %>').value = id;
			document.getElementById('<%= hfParentId.ClientID %>').value = '';
			document.getElementById('<%= txtNombre.ClientID %>').value = nombre;
			document.getElementById('<%= txtNombreCorto.ClientID %>').value = nombreCorto;
			document.getElementById('<%= txtSiglas.ClientID %>').value = siglas;
			document.getElementById('<%= txtPosicion.ClientID %>').value = posicion;
			document.getElementById('uaModal').classList.add('active');
		}

		function closeModal() {
			document.getElementById('uaModal').classList.remove('active');
		}

		function toggleChildren(id) {
			var rows = document.querySelectorAll('tr[data-parent-path*=",' + id + ',"]');
			var toggle = document.getElementById('toggle-' + id);
			var isCollapsed = toggle.innerText === '\u25B6';
			rows.forEach(function (row) {
				row.style.display = isCollapsed ? '' : 'none';
			});
			toggle.innerText = isCollapsed ? '\u25BC' : '\u25B6';
		}

		function confirmDeactivate(id, siglas) {
			if (confirm('\u00bfDesactivar "' + siglas + '" y todas sus sub-unidades?')) {
				__doPostBack('Deactivate', id);
			}
		}
	</script>
</asp:Content>
