<?php
/**
 * Certificate Help Modal Partial
 *
 * Modal explaining how to obtain a digital certificate for VeriFactu.
 * Displayed when clicking help button.
 *
 * @package FreeFacTu
 * @since   1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<!-- Certificate Help Modal -->
<div id="freefactu-certificate-modal" class="freefactu-modal" style="display: none;">
	<div class="freefactu-modal-overlay"></div>
	<div class="freefactu-modal-container freefactu-modal-container--medium">
		<div class="freefactu-modal-header">
			<h2 class="freefactu-modal-title">
				<span class="freefactu-modal-title-icon"><span class="dashicons dashicons-awards"></span></span>
				<?php esc_html_e( '¿Cómo obtener un certificado digital?', 'freefactu' ); ?>
			</h2>
			<button type="button" class="freefactu-modal-close" aria-label="<?php esc_attr_e( 'Cerrar', 'freefactu' ); ?>">
				<span class="dashicons dashicons-no-alt"></span>
			</button>
		</div>
		
		<div class="freefactu-modal-body freefactu-certificate-modal__body">
			
			<p class="freefactu-certificate-modal__intro">
				<?php esc_html_e( 'Para firmar facturas electrónicas VeriFactu necesitas un certificado digital válido. Hay varias opciones:', 'freefactu' ); ?>
			</p>

			<!-- Option 1: FNMT Empresa -->
			<div class="freefactu-cert-option freefactu-cert-option--fnmt-empresa">
				<h4 class="freefactu-cert-option__title">
					<span class="freefactu-cert-step-badge freefactu-cert-step-badge--1">1</span>
					<?php esc_html_e( 'Certificado FNMT de Persona Jurídica (Empresas)', 'freefactu' ); ?>
				</h4>
				<p class="freefactu-cert-option__desc">
					<?php esc_html_e( 'Certificado oficial emitido por la Fábrica Nacional de Moneda y Timbre. Es el más común para empresas y autónomos con forma societaria.', 'freefactu' ); ?>
				</p>
				<div class="freefactu-cert-option__buttons">
					<a href="https://www.sede.fnmt.gob.es/certificados/certificado-de-representante" target="_blank" rel="noopener" class="button">
						<span class="dashicons dashicons-external freefactu-cert-btn-icon"></span>
						<?php esc_html_e( 'Solicitar en FNMT', 'freefactu' ); ?>
					</a>
				</div>
			</div>

			<!-- Option 2: Personal Certificate -->
			<div class="freefactu-cert-option freefactu-cert-option--fnmt-persona">
				<h4 class="freefactu-cert-option__title">
					<span class="freefactu-cert-step-badge freefactu-cert-step-badge--2">2</span>
					<?php esc_html_e( 'Certificado FNMT de Persona Física (Autónomos)', 'freefactu' ); ?>
					<span class="freefactu-cert-free-badge"><?php esc_html_e( 'Gratuito', 'freefactu' ); ?></span>
				</h4>
				<p class="freefactu-cert-option__desc">
					<?php esc_html_e( 'Si eres autónomo persona física, puedes usar tu certificado personal de ciudadano. Se obtiene gratuitamente.', 'freefactu' ); ?>
				</p>
				<div class="freefactu-cert-option__buttons">
					<a href="https://www.sede.fnmt.gob.es/certificados/persona-fisica" target="_blank" rel="noopener" class="button">
						<span class="dashicons dashicons-external freefactu-cert-btn-icon"></span>
						<?php esc_html_e( 'Solicitar certificado personal', 'freefactu' ); ?>
					</a>
				</div>
			</div>

			<!-- Option 3: DNIe -->
			<div class="freefactu-cert-option freefactu-cert-option--dnie">
				<h4 class="freefactu-cert-option__title">
					<span class="freefactu-cert-step-badge freefactu-cert-step-badge--3">3</span>
					<?php esc_html_e( 'DNI Electrónico (DNIe)', 'freefactu' ); ?>
				</h4>
				<p class="freefactu-cert-option__desc">
					<?php esc_html_e( 'Si tienes DNI electrónico, puedes exportar el certificado desde él. Necesitarás un lector de tarjetas.', 'freefactu' ); ?>
				</p>
				<div class="freefactu-cert-option__buttons">
					<a href="https://www.dnielectronico.es/PortalDNIe/" target="_blank" rel="noopener" class="button">
						<span class="dashicons dashicons-external freefactu-cert-btn-icon"></span>
						<?php esc_html_e( 'Información DNIe', 'freefactu' ); ?>
					</a>
				</div>
			</div>

			<!-- Option 4: Other CA -->
			<div class="freefactu-cert-option freefactu-cert-option--other">
				<h4 class="freefactu-cert-option__title">
					<span class="freefactu-cert-step-badge freefactu-cert-step-badge--4">4</span>
					<?php esc_html_e( 'Otras Autoridades de Certificación', 'freefactu' ); ?>
				</h4>
				<p class="freefactu-cert-option__desc">
					<?php esc_html_e( 'También puedes usar certificados de otras entidades reconocidas como Camerfirma, AC Firmaprofesional o DigitalSign.', 'freefactu' ); ?>
				</p>
				<div class="freefactu-cert-option__buttons freefactu-cert-option__buttons--flex">
					<a href="https://www.camerfirma.com/" target="_blank" rel="noopener" class="button">Camerfirma</a>
					<a href="https://www.firmaprofesional.com/" target="_blank" rel="noopener" class="button">Firmaprofesional</a>
				</div>
			</div>

			<!-- How to export -->
			<div class="freefactu-cert-option freefactu-cert-option--export">
				<h4 class="freefactu-cert-option__title">
					<span class="dashicons dashicons-download freefactu-cert-export-icon"></span>
					<?php esc_html_e( '¿Ya tienes certificado? Cómo exportarlo', 'freefactu' ); ?>
				</h4>
				<p class="freefactu-cert-option__desc">
					<?php esc_html_e( 'Si ya tienes el certificado instalado en tu navegador, debes exportarlo en formato .p12 o .pfx:', 'freefactu' ); ?>
				</p>
				<ol class="freefactu-cert-export-list">
					<li><?php esc_html_e( 'Abre la configuración de certificados de tu navegador', 'freefactu' ); ?></li>
					<li><?php esc_html_e( 'Selecciona el certificado y haz clic en "Exportar"', 'freefactu' ); ?></li>
					<li><?php esc_html_e( 'Elige formato PKCS#12 (.p12 o .pfx) con clave privada', 'freefactu' ); ?></li>
					<li><?php esc_html_e( 'Establece una contraseña segura (la necesitarás aquí)', 'freefactu' ); ?></li>
					<li><?php esc_html_e( 'Guarda el archivo y súbelo a esta página', 'freefactu' ); ?></li>
				</ol>
				<div class="freefactu-cert-option__buttons">
					<a href="https://www.sede.fnmt.gob.es/preguntas-frecuentes/exp-imp-y-elim-de-certificados" target="_blank" rel="noopener" class="button">
						<span class="dashicons dashicons-external freefactu-cert-btn-icon"></span>
						<?php esc_html_e( 'Guía de exportación para distintos navegadores', 'freefactu' ); ?>
					</a>
				</div>
			</div>
			
		</div>
		
		<div class="freefactu-modal-footer freefactu-environment-modal__footer">
			<button type="button" class="button button-primary freefactu-modal-close-btn">
				<?php esc_html_e( 'Entendido', 'freefactu' ); ?>
			</button>
		</div>
	</div>
</div>
