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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
	<style>
		.tag-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
		.tag-table th { background: var(--wine-dark, #5a1a3a); color: #fff; padding: 8px 12px; text-align: left; font-weight: 600; }
		.tag-table td { padding: 6px 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
		.tag-table tr:hover { background-color: #f8f4f6; }
		.tag-actions a { margin-right: 6px; cursor: pointer; font-size: 0.85rem; text-decoration: none; padding: 4px 8px; border-radius: 3px; }
		.tag-actions .btn-edit { color: #0d6efd; }
		.tag-actions .btn-edit:hover { background: #e3f2fd; }
		.tag-actions .btn-delete { color: #dc3545; }
		.tag-actions .btn-delete:hover { background: #fce4ec; }
		/* Modal */
		.tag-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9000; }
		.tag-modal-overlay.active { display: flex; align-items: center; justify-content: center; }
		.tag-modal { background: #fff; border-radius: 8px; padding: 24px; width: 400px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
		.tag-modal h4 { margin: 0 0 16px; color: var(--wine-dark, #5a1a3a); }
		.tag-modal label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85rem; color: #555; }
		.tag-modal input[type="text"] { width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
		.tag-modal-buttons { text-align: right; margin-top: 16px; }
		.tag-modal-buttons button { padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; margin-left: 8px; }
		.tag-modal-buttons .btn-save { background: var(--wine-dark, #5a1a3a); color: #fff; }
		.tag-modal-buttons .btn-save:hover { opacity: 0.9; }
		.tag-modal-buttons .btn-cancel { background: #e0e0e0; color: #333; }
		.tag-modal-buttons .btn-cancel:hover { background: #ccc; }
		.tag-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; }
		.tag-btn-new: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-badges" class="settings-content-pane active">
					<h3>Administrar Tags</h3>
					<button type="button" class="tag-btn-new" onclick="openTagModal()"><i class="fas fa-plus"></i> Nuevo tag</button>
					<asp:Literal ID="litTags" runat="server" />
				</div>
			</div>
		</div>
	</section>

	<!-- Tag Add/Edit Modal -->
	<div id="tagModal" class="tag-modal-overlay">
		<div class="tag-modal">
			<h4 id="tagModalTitle">Nuevo Tag</h4>
			<asp:HiddenField ID="hfTagId" runat="server" Value="" />
			<label>Nombre</label>
			<asp:TextBox ID="txtTagName" runat="server" MaxLength="100" />
			<div class="tag-modal-buttons">
				<button type="button" class="btn-cancel" onclick="closeTagModal()">Cancelar</button>
				<asp:Button ID="btnSaveTag" runat="server" Text="Guardar" CssClass="btn-save" OnClick="btnSaveTag_Click" />
			</div>
		</div>
	</div>

	<script type="text/javascript">
		function openTagModal(id, name) {
			document.getElementById('tagModalTitle').innerText = id ? 'Editar Tag' : 'Nuevo Tag';
			document.getElementById('<%= hfTagId.ClientID %>').value = id || '';
			document.getElementById('<%= txtTagName.ClientID %>').value = name || '';
			document.getElementById('tagModal').classList.add('active');
		}

		function closeTagModal() {
			document.getElementById('tagModal').classList.remove('active');
		}

		function confirmDeleteTag(tagId, tagName) {
			if (confirm('\u00bfEliminar el tag "' + tagName + '"?')) {
				__doPostBack('DeleteTag', tagId);
			}
		}
	</script>
</asp:Content>
