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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
	<style>
		.usr-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
		.usr-table th { background: var(--wine-dark, #5a1a3a); color: #fff; padding: 8px 10px; text-align: left; font-weight: 600; white-space: nowrap; }
		.usr-table td { padding: 6px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
		.usr-table tr:hover { background-color: #f8f4f6; }
		.usr-table tr.inactive { opacity: 0.5; }
		.usr-siglas { display: inline-block; background: var(--wine-dark, #5a1a3a); color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 0.75rem; font-weight: bold; min-width: 40px; text-align: center; }
		.usr-role-badge { display: inline-block; background: #e8e0e5; color: var(--wine-dark, #5a1a3a); padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; margin-right: 3px; }
		.usr-actions a { margin-right: 6px; cursor: pointer; font-size: 0.85rem; text-decoration: none; padding: 4px 8px; border-radius: 3px; }
		.usr-actions .btn-edit { color: #0d6efd; }
		.usr-actions .btn-edit:hover { background: #e3f2fd; }
		.usr-actions .btn-roles { color: #6f42c1; }
		.usr-actions .btn-roles:hover { background: #f3e8ff; }
		.usr-actions .btn-delete { color: #dc3545; }
		.usr-actions .btn-delete:hover { background: #fce4ec; }
		.usr-username { font-family: monospace; font-size: 0.8rem; color: #666; }

		/* Modal */
		.usr-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9000; }
		.usr-modal-overlay.active { display: flex; align-items: center; justify-content: center; }
		.usr-modal { background: #fff; border-radius: 8px; padding: 24px; width: 520px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.3); position: relative; z-index: 9001; }
		.usr-modal h4 { margin: 0 0 16px; color: var(--wine-dark, #5a1a3a); }
		.usr-modal label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85rem; color: #555; }
		.usr-modal input[type="text"], .usr-modal select { width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; -webkit-appearance: menulist; appearance: menulist; }
		.usr-modal-buttons { text-align: right; margin-top: 16px; }
		.usr-modal-buttons button { padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; margin-left: 8px; }
		.usr-modal-buttons .btn-save { background: var(--wine-dark, #5a1a3a); color: #fff; }
		.usr-modal-buttons .btn-save:hover { opacity: 0.9; }
		.usr-modal-buttons .btn-cancel { background: #e0e0e0; color: #333; }
		.usr-modal-buttons .btn-cancel:hover { background: #ccc; }
		.usr-btn-new { margin-bottom: 12px; padding: 8px 16px; background: var(--wine-dark, #5a1a3a); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
		.usr-btn-new:hover { opacity: 0.9; }

		/* Roles modal */
		.roles-container { display: flex; gap: 16px; margin-top: 8px; }
		.roles-list { flex: 1; border: 1px solid #ddd; border-radius: 4px; min-height: 180px; max-height: 250px; overflow-y: auto; padding: 0; }
		.roles-list h5 { margin: 0; padding: 8px 12px; background: #f5f5f5; font-size: 0.8rem; color: #555; border-bottom: 1px solid #ddd; }
		.roles-list label { display: block; padding: 6px 12px; cursor: pointer; font-size: 0.85rem; font-weight: normal; margin: 0; }
		.roles-list label:hover { background: #f8f4f6; }
		.roles-list input[type="checkbox"] { margin-right: 8px; }
		.usr-row-field { display: flex; gap: 12px; }
		.usr-row-field > div { flex: 1; }
	</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-users" class="settings-content-pane active">
					<h3>Usuarios</h3>
					<button type="button" class="usr-btn-new" onclick="openUserModal()"><i class="fas fa-plus"></i> Nuevo usuario</button>
					<button type="button" class="usr-btn-new" style="background:#fff;color:var(--wine-dark,#5a1a3a);border:1.5px solid var(--wine-dark,#5a1a3a);" onclick="var w=window.open('MassiveUsersWindow.aspx','_blank','width=800,height=650,scrollbars=yes,resizable=yes');if(w){var t=setInterval(function(){if(w.closed){clearInterval(t);location.reload();}},500);}"><i class="fas fa-file-excel"></i> Carga masiva (XLSX)</button>
					<asp:Literal ID="litUsers" runat="server" />
				</div>
			</div>
		</div>
	</section>

	<!-- User Add/Edit Modal -->
	<div id="userModal" class="usr-modal-overlay">
		<div class="usr-modal">
			<h4 id="userModalTitle">Nuevo Usuario</h4>
			<asp:HiddenField ID="hfUserId" runat="server" Value="" />
			<div class="usr-row-field">
				<div>
					<label>Nombre</label>
					<asp:TextBox ID="txtFirstname" runat="server" MaxLength="50" />
				</div>
				<div>
					<label>Apellido Paterno</label>
					<asp:TextBox ID="txtLastname" runat="server" MaxLength="50" />
				</div>
			</div>
			<div class="usr-row-field">
				<div>
					<label>Apellido Materno</label>
					<asp:TextBox ID="txtLastname2" runat="server" MaxLength="50" />
				</div>
				<div>
					<label>Tel&eacute;fono</label>
					<asp:TextBox ID="txtPhone" runat="server" MaxLength="20" />
				</div>
			</div>
			<label>Correo</label>
			<asp:TextBox ID="txtEmail" runat="server" MaxLength="100" />
			<label>Unidad Administrativa</label>
			<asp:Literal ID="litUADropdown" runat="server" />
			<div class="usr-modal-buttons">
				<button type="button" class="btn-cancel" onclick="closeUserModal()">Cancelar</button>
				<asp:Button ID="btnSaveUser" runat="server" Text="Guardar" CssClass="btn-save" OnClick="btnSaveUser_Click" />
			</div>
		</div>
	</div>

	<!-- Roles Modal -->
	<div id="rolesModal" class="usr-modal-overlay">
		<div class="usr-modal">
			<h4 id="rolesModalTitle">Roles del usuario</h4>
			<asp:HiddenField ID="hfRolesUserId" runat="server" Value="" />
			<div class="roles-container">
				<div class="roles-list">
					<h5>Roles disponibles</h5>
					<asp:Literal ID="litRolesCheckboxes" runat="server" />
				</div>
			</div>
			<div class="usr-modal-buttons">
				<button type="button" class="btn-cancel" onclick="closeRolesModal()">Cancelar</button>
				<asp:Button ID="btnSaveRoles" runat="server" Text="Guardar Roles" CssClass="btn-save" OnClick="btnSaveRoles_Click" />
			</div>
		</div>
	</div>

	<script type="text/javascript">
		function openUserModal(id, firstname, lastname, lastname2, phone, email, uaId) {
			document.getElementById('userModalTitle').innerText = id ? 'Editar Usuario' : 'Nuevo Usuario';
			document.getElementById('<%= hfUserId.ClientID %>').value = id || '';
			document.getElementById('<%= txtFirstname.ClientID %>').value = firstname || '';
			document.getElementById('<%= txtLastname.ClientID %>').value = lastname || '';
			document.getElementById('<%= txtLastname2.ClientID %>').value = lastname2 || '';
			document.getElementById('<%= txtPhone.ClientID %>').value = phone || '';
			document.getElementById('<%= txtEmail.ClientID %>').value = email || '';
			var ddl = document.getElementById('ddlUA');
			if (ddl && uaId) {
				for (var i = 0; i < ddl.options.length; i++) {
					if (ddl.options[i].value == uaId) { ddl.selectedIndex = i; break; }
				}
			} else if (ddl) { ddl.selectedIndex = 0; }
			document.getElementById('userModal').classList.add('active');
		}

		function closeUserModal() {
			document.getElementById('userModal').classList.remove('active');
		}

		function openRolesModal(userId, userName) {
			document.getElementById('rolesModalTitle').innerText = 'Roles: ' + userName;
			document.getElementById('<%= hfRolesUserId.ClientID %>').value = userId;
			// Need to postback to load the roles
			__doPostBack('LoadRoles', userId);
		}

		function closeRolesModal() {
			document.getElementById('rolesModal').classList.remove('active');
		}

		function confirmDelete(userId, name) {
			if (confirm('\u00bfEliminar al usuario "' + name + '"? Esta acci\u00f3n no se puede deshacer.')) {
				__doPostBack('DeleteUser', userId);
			}
		}
	</script>
</asp:Content>
