{{ template "headersCDN.html" . }}


<style>
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
max-width: 600px;
border-radius: 8px;
}
.action-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 10px;
}
.action-item input[type="radio"] {
display: none;
}
.action-item label {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
border: 2px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.action-item input[type="radio"]:checked + label {
border-color: #4f46e5;
background-color: #eef2ff;
}
.action-item i {
font-size: 24px;
margin-bottom: 5px;
}
.action-item span {
font-size: 12px;
text-align: center;
}
.active {
	background: green;
	color: white;
}
.active * {
	color: white;
}
</style>

<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div class="px-4 py-6 sm:px-0">
	<div class="my-6">
		<img src="/cdn/design/logos/scan-black.png" alt="" class="block dark:hidden h-8" />
		<img src="/cdn/design/logos/scan-white.png" alt="" class="hidden dark:block h-8" />
	</div>

	<div class="lg:flex lg:space-x-6">
	<!-- NFC Link Management Section -->
	<div class="lg:w-1/2 mb-6 lg:mb-0">
		<div class="bg-white shadow sm:rounded-lg">
		<div class="px-4 py-5 sm:p-6">
			<h2 class="text-lg leading-6 font-medium text-gray-900 mb-4">Gestion des liens NFC</h2>
			
			<div id="nfcLinksList" class="space-y-4">
			<!-- NFC links will be dynamically inserted here -->
			</div>
			
			<button onclick="openModal('new')" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
			+ Nouvelle action
			</button>
		</div>
		</div>
	</div>

	<!-- Right side content (unchanged) -->
	</div>
</div>
</main>

<!-- Modal -->
<div id="nfcModal" class="modal">
<div class="modal-content text-black">
	<h2 id="modalTitle" class="text-lg font-medium text-gray-900 mb-4"></h2>
	<form id="nfcForm">
	<div class="mb-4">
		<label class="block text-sm font-medium text-gray-700 mb-2">Type d'action</label>
		<div class="action-grid">
		<div class="action-item">
			<input type="radio" id="contactCard" name="actionType" value="contactCard">
			<label for="contactCard">
			<i class="fas fa-address-card"></i>
			<span>CARD.PM</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="leadsForm" name="actionType" value="leadsForm">
			<label for="leadsForm">
			<i class="fas fa-clipboard-list"></i>
			<span>FORM.PM</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="profile" name="actionType" value="profile">
			<label for="profile">
			<i class="fas fa-user"></i>
			<span>Profile</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="url" name="actionType" value="url">
			<label for="url">
			<i class="fas fa-link"></i>
			<span>URL</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="event" name="actionType" value="event">
			<label for="event">
			<i class="fas fa-calendar-alt"></i>
			<span>Event</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="qrCode" name="actionType" value="qrCode">
			<label for="qrCode">
			<i class="fas fa-qrcode"></i>
			<span>QR-Code</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="email" name="actionType" value="email">
			<label for="email">
			<i class="fas fa-envelope"></i>
			<span>Email</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="deeplink" name="actionType" value="deeplink">
			<label for="deeplink">
			<i class="fas fa-external-link-alt"></i>
			<span>Deeplink</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="whatsapp" name="actionType" value="whatsapp">
			<label for="whatsapp">
			<i class="fab fa-whatsapp"></i>
			<span>WhatsApp</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="sms" name="actionType" value="sms">
			<label for="sms">
			<i class="fas fa-sms"></i>
			<span>SMS</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="call" name="actionType" value="call">
			<label for="call">
			<i class="fas fa-phone"></i>
			<span>Call</span>
			</label>
		</div>
		<div class="action-item">
			<input type="radio" id="eMenu" name="actionType" value="eMenu">
			<label for="eMenu">
			<i class="fas fa-utensils"></i>
			<span>eMenu</span>
			</label>
		</div>
		</div>
	</div>
	<div class="mb-4">
		<label for="actionName" class="block text-sm font-medium text-gray-700">Nom de l'action</label>
		<input type="text" id="actionName" name="actionName" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
	</div>
	<div class="mb-4">
		<label for="actionUrl" class="block text-sm font-medium text-gray-700">URL de l'action</label>
		<input type="text" id="actionUrl" name="actionUrl" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
	</div>
	<div class="flex justify-end">
		<button type="button" onclick="closeModal()" class="mr-2 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
		Annuler
		</button>
		<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
		Enregistrer
		</button>
	</div>
	</form>
</div>
</div>

<script>
// Initialize nfcLinks from localStorage or use default if not available
let nfcLinks = JSON.parse(localStorage.getItem('nfcLinks')) || [
	{ id: 1, status: 'active', type: 'contactCard', name: 'My CARD.PM', url: 'https://card.pm/demo' },
	{ id: 2, status: '', type: 'url', name: 'PM.STUDIO', url: 'https://pm.studio/about' },
	{ id: 3, status: '', type: 'email', name: 'Email Support', url: 'mailto:support@card.pm' }
];

function renderNfcLinks() {
	const listContainer = document.getElementById('nfcLinksList');
	listContainer.innerHTML = '';
	nfcLinks.forEach(link => {
	const linkElement = document.createElement('div');
	linkElement.className = 'flex items-center justify-between p-3 bg-gray-100 rounded-lg '+link.status;
	linkElement.innerHTML = `
		<div>
		<p class="text-sm font-medium text-gray-700">${link.name}</p>
		<p class="text-xs text-gray-500">${link.url}</p>
		</div>
		<button onclick="openModal('edit', ${link.id})" class="text-indigo-600 hover:text-indigo-800">
		<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
		</svg>
		</button>
	`;
	listContainer.appendChild(linkElement);
	});
}

function openModal(mode, id = null) {
	const modal = document.getElementById('nfcModal');
	const form = document.getElementById('nfcForm');
	const title = document.getElementById('modalTitle');

	if (mode === 'edit') {
	const link = nfcLinks.find(l => l.id === id);
	title.textContent = 'Modifier l\'action';
	document.querySelector(`input[name="actionType"][value="${link.type}"]`).checked = true;
	form.elements.actionName.value = link.name;
	form.elements.actionUrl.value = link.url;
	form.dataset.mode = 'edit';
	form.dataset.id = id;
	} else {
	title.textContent = 'Nouvelle action';
	form.reset();
	form.dataset.mode = 'new';
	delete form.dataset.id;
	}

	modal.style.display = 'block';
}

function closeModal() {
	const modal = document.getElementById('nfcModal');
	modal.style.display = 'none';
}

document.getElementById('nfcForm').addEventListener('submit', function(e) {
	e.preventDefault();
	const form = e.target;
	const formData = new FormData(form);
	const newLink = {
	type: formData.get('actionType'),
	name: formData.get('actionName'),
	url: formData.get('actionUrl')
	};

	if (form.dataset.mode === 'edit') {
	const id = parseInt(form.dataset.id);
	const index = nfcLinks.findIndex(l => l.id === id);
	nfcLinks[index] = { ...nfcLinks[index], ...newLink };
	} else {
	newLink.id = Date.now();
	nfcLinks.push(newLink);
	}

	localStorage.setItem('nfcLinks', JSON.stringify(nfcLinks));
	renderNfcLinks();
	closeModal();
});

// Initial render
renderNfcLinks();
</script>


{{ template "footer.html" . }}