<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MassiveUsersWindow.aspx.cs" Inherits="PDI.Web.MassiveUsersWindow" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Carga Masiva de Usuarios</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
	<style>
		body, html {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			font-size: 14px;
			margin: 0;
			padding: 0;
			background-color: #fafafa;
			color: #333;
		}

		.window-container {
			padding: 20px 24px;
			max-width: 750px;
			margin: 0 auto;
		}

		h3 {
			color: #5a1a3a;
			margin: 0 0 16px;
			font-size: 1.1rem;
		}

		.upload-wrapper {
			border: 2px dashed #dfe4ea;
			padding: 20px;
			text-align: center;
			background-color: #fff;
			border-radius: 8px;
			transition: border-color 0.2s, background-color 0.2s;
		}

		.upload-wrapper:hover {
			border-color: #6D214F;
			background-color: #faf5f8;
		}

		.info-label {
			display: block;
			margin: 12px 0;
			padding: 10px 14px;
			background: #fef9e7;
			border-left: 4px solid #f39c12;
			font-size: 0.85rem;
			color: #7d6608;
			border-radius: 0 4px 4px 0;
		}

		.info-label i {
			margin-right: 6px;
		}

		.format-info {
			margin: 10px 0;
			padding: 10px 14px;
			background: #eaf2f8;
			border-left: 4px solid #3498db;
			font-size: 0.82rem;
			color: #2c3e50;
			border-radius: 0 4px 4px 0;
		}

		.format-info strong {
			display: block;
			margin-bottom: 4px;
		}

		.btn-alta {
			width: 100%;
			padding: 10px 16px;
			background: #5a1a3a;
			color: #fff;
			border: none;
			border-radius: 5px;
			font-size: 0.95rem;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.2s;
			font-family: inherit;
			margin-top: 8px;
		}

		.btn-alta:hover {
			opacity: 0.9;
		}

		.btn-alta:disabled {
			background: #999;
			cursor: not-allowed;
		}

		.status-label {
			display: block;
			margin-top: 10px;
			font-size: 0.85rem;
			font-style: italic;
		}

		.results-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.82rem;
			margin-top: 14px;
		}

		.results-table th {
			background: #5a1a3a;
			color: #fff;
			padding: 6px 8px;
			text-align: left;
			font-weight: 600;
		}

		.results-table td {
			padding: 5px 8px;
			border-bottom: 1px solid #eee;
		}

		.results-table tr:hover {
			background-color: #f8f4f6;
		}

		.result-ok { color: #28a745; }
		.result-err { color: #dc3545; }
		.result-skip { color: #f39c12; }

		.summary {
			margin-top: 12px;
			padding: 10px 14px;
			background: #eafaf1;
			border-left: 4px solid #28a745;
			font-size: 0.85rem;
			border-radius: 0 4px 4px 0;
		}

		.summary.has-errors {
			background: #fdecea;
			border-left-color: #dc3545;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<div class="window-container">
			<h3><i class="fas fa-users"></i> Carga Masiva de Usuarios</h3>

			<div class="info-label">
				<i class="fas fa-info-circle"></i>
				A los usuarios dados de alta se les asignar&aacute;n autom&aacute;ticamente los roles <strong style="display:inline;">CONSULTA</strong> y <strong style="display:inline;">ESCANEAR</strong>.
			</div>

			<div class="format-info">
				<strong><i class="fas fa-file-excel"></i> Formato del archivo XLSX:</strong>
				Columna A: <b>NOMBRE</b> (nombre completo) &nbsp;|&nbsp;
				Columna B: <b>SIGLAS</b> (Unidad Administrativa) &nbsp;|&nbsp;
				Columna C: <b>CORREO</b> (email)
				<br />La primera fila se toma como encabezado y se ignora.
			</div>

			<asp:Panel ID="pnlUpload" runat="server">
				<div class="upload-wrapper">
					<asp:FileUpload ID="fileUpload1" runat="server" accept=".xlsx" />
				</div>
				<asp:Button ID="btnDarDeAlta" runat="server" Text="Dar de alta" CssClass="btn-alta"
					OnClick="btnDarDeAlta_Click" OnClientClick="this.disabled=true;this.value='Procesando...';"
					UseSubmitBehavior="false" />
			</asp:Panel>

			<asp:Label ID="lblStatus" runat="server" CssClass="status-label" />
			<asp:Literal ID="litResults" runat="server" />
		</div>
	</form>
</body>
</html>
