<script src="<?php echo base_url(); ?>js/tinymce/tinymce.min.js"></script>
<ul class="list-group">
	<li class="list-group-item">
		<div class="row">
			<div class="col">
				<h4>Caso #<?= $caso['id']; ?> - <?= htmlspecialchars($caso['titulo']); ?></h4>
			</div>
			<div class="col text-right">
				<a href="<?= site_url('casos'); ?>" class="btn btn-secondary btn-sm">Volver a lista</a>
			</div>
		</div>
	</li>


	<li class="list-group-item">
		<div class="row">
			<div class="col-12 col-md-6">

				<!-- Información del cliente / contacto -->
				<div class="card mb-3">
					<div class="card-header">
						<strong>Contacto</strong>
					</div>
					<div class="card-body">
						<p><strong>Nombre:</strong> <?= htmlspecialchars($caso['nombre_contacto']); ?></p>
						<p><strong>Email:</strong> <?= htmlspecialchars($caso['email_contacto']); ?></p>
						<p><strong>Teléfono:</strong> <?= htmlspecialchars($caso['telefono_contacto']); ?></p>
						<p><strong>Medio de contacto:</strong> <?= $caso['medio_contacto']; ?></p>
						<?php if (!empty($caso['usuario_red_social'])) { ?>
							<p><strong>Usuario red social:</strong> <?= htmlspecialchars($caso['usuario_red_social']); ?></p>
						<?php } ?>
						<?php if (!empty($caso['id_venta'])) { ?>
							<p><strong>ID Venta:</strong> <?= $caso['id_venta'] ?: '<span class="text-muted">—</span>'; ?></p>
						<?php } ?>
					</div>
				</div>

				<!-- Información del caso -->
				<div class="card mb-3">
					<div class="card-header">
						<strong>Detalle del caso</strong>
					</div>
					<div class="card-body">
						<p>
							<strong>Creado por:</strong> 
							<?= $usuarios[$caso['id_user']] ?? 'Desconocido'; ?>
						</p>

						<p>
							<strong>Fecha creación:</strong> 
							<?= fechaHora($caso['created']); ?>
						</p>
						<p><strong>Estado:</strong>
							<?php
								switch ($caso['estado']) {
									case 'abierto': $badge='warning'; $texto='Abierto'; break;
									case 'espera_interna': $badge='warning'; $texto='Espera interna'; break;
									case 'espera_cliente': $badge='info'; $texto='Espera cliente'; break;
									case 'resuelto': $badge='success'; $texto='Resuelto'; break;
									default: $badge='secondary'; $texto=$caso['estado'];
								}
							?>
							<span class="estado-caso badge badge-<?= $badge; ?>"><?= $texto; ?></span>
						</p>
						<p><strong>Responsable:</strong> <span class="usuario-responsable"><?= $caso['id_usuario_responsable'] ? $usuarios[$caso['id_usuario_responsable']] : 'Sin asignar'; ?></span></p>
						<p><strong>Fecha compromiso:</strong>
							<span class="fecha-compromiso">
								<?= formatearFechaUI($caso['fecha_compromiso']); ?>
							</span>
						</p>
						<p><strong>Descripción:</strong><br>
							<?= nl2br(htmlspecialchars($caso['descripcion'])); ?>
						</p>
					</div>
				</div>
			</div>

			
			<div class="col-12 col-md-6">
				<!-- Acciones del caso -->
				<div class="card mb-3">
					<div class="card-header"><strong>Acciones</strong></div>
					<div class="card-body">

						<!-- Cambiar estado -->
						<form id="formCambiarEstado" data-url="<?= site_url('casos/cambiar_estado/'.$caso['id']); ?>">

							<div class="form-row align-items-end">
								<div class="col">
									<label class="small mb-1">Estado</label>
									<select name="estado" class="form-control form-control-sm">
										<option value="abierto" <?= $caso['estado']=='abierto'?'selected':''; ?>>Abierto</option>
										<option value="espera_interna" <?= $caso['estado']=='espera_interna'?'selected':''; ?>>Espera interna</option>
										<option value="espera_cliente" <?= $caso['estado']=='espera_cliente'?'selected':''; ?>>Espera cliente</option>
										<option value="resuelto" <?= $caso['estado']=='resuelto'?'selected':''; ?>>Resuelto</option>
									</select>
								</div>

								<div class="col-auto">
									<button class="btn btn-primary btn-sm" type="submit">
										Actualizar
									</button>
								</div>
							</div>
						</form>

						<!-- Asignar responsable -->
						<form id="formCambiarResponsable" data-url="<?= site_url('casos/cambiar_responsable/'.$caso['id']); ?>">
							<div class="form-row align-items-end">
								<div class="col">
									<label class="small mb-1">Responsable</label>
									<select name="id_usuario_responsable" class="form-control form-control-sm">
										<option value="">Sin asignar</option>
										<?php foreach ($usuarios as $id => $nombre): ?>
											<option value="<?= $id ?>" <?= $caso['id_usuario_responsable']==$id?'selected':''; ?>>
												<?= $nombre; ?>
											</option>
										<?php endforeach; ?>
									</select>
								</div>

								<div class="col-auto">
									<button class="btn btn-primary btn-sm" type="submit">
										Asignar
									</button>
								</div>
							</div>
						</form>

						<!-- Cambiar fecha compromiso -->
						<form id="formCambiarFecha" data-url="<?= site_url('casos/cambiar_fecha/'.$caso['id']); ?>" class="mt-2">
							<div class="form-row align-items-end">
								<div class="col-auto">
									<label class="small mb-1">Fecha compromiso</label>
									<input type="date"
										name="fecha_compromiso"
										class="form-control form-control-sm"
										value="<?= $caso['fecha_compromiso'] != '0000-00-00' ? $caso['fecha_compromiso'] : '' ?>">
								</div>

								<div class="col-auto">
									<button class="btn btn-primary btn-sm">
										Actualizar
									</button>
								</div>
							</div>
						</form>

						<!-- Formulario para agregar nota -->
						<form id="formNotaCaso" data-url="<?= site_url('casos/agregar_nota/' . $caso['id']); ?>">
							<div class="form-group mt-2 mb-0">
								<label class="small mb-1">Agregar nota</label>
								<textarea id="nuevaNota" name="nota" class="form-control" rows="3" placeholder="Agregar nota interna..."></textarea>
								<div class="text-right mt-1">
									<button class="btn btn-primary btn-sm mt-1">Agregar</button>
								</div>
							</div>
						</form>
					</div>
				</div>
				

				<!-- Notas internas / historial -->
				<div class="card mb-3">
					<div class="card-header"><strong>Notas / historial</strong></div>
					<div class="card-body" id="historial-caso">
						<!-- Aquí se cargarán los comentarios internos vía AJAX o al renderizar -->
						<?php if(!empty($caso['logs'])): ?>
							<?php foreach($caso['logs'] as $h): ?>
								<div class="mb-2 border-bottom pb-1">
									<small class="text-muted"><?= $users[$h['id_user']]; ?> - <?= date('d-m-Y H:i', strtotime($h['created'])); ?></small>
									<p class="mb-0"><?= $h['descripcion']; ?></p>
								</div>
							<?php endforeach; ?>
						<?php else: ?>
							<p class="text-muted mb-0">No hay notas registradas.</p>
						<?php endif; ?>
					</div>
				</div>
			</div>
		</div>
	</li>
</ul>

<script>
	const estadosCaso = {
		abierto: {
			badge: 'warning',
			texto: 'Abierto'
		},
		espera_interna: {
			badge: 'warning',
			texto: 'Espera interna'
		},
		espera_cliente: {
			badge: 'info',
			texto: 'Espera cliente'
		},
		resuelto: {
			badge: 'success',
			texto: 'Resuelto'
		}
	};


	$(document).ready(function() {
		$('#formNotaCaso').submit(function(e){
			e.preventDefault();
			var form = $(this);
			$.post(form.attr('action'), form.serialize(), function(resp){
				// Recargar historial
				$('#historial-caso').load('<?= site_url("casos/ver/".$caso["id"]." #historial-caso > *"); ?>');
				form.find('textarea').val('');
			});
		});

		$('#formCambiarEstado').on('submit', function(e){
			e.preventDefault();

			var form = $(this);
			var url  = form.data('url');

			$.post(url, form.serialize(), function(resp){
				if (!resp.ok) {
					alert(resp.msg || 'Error al cambiar estado');
					return;
				}

				if (resp.sin_cambios) {
					return;
				}

				// Aquí después podemos:
				// - actualizar badge
				if (resp.data && resp.data.valor_nuevo) {
					const estado = resp.data.valor_nuevo;
					const config = estadosCaso[estado];

					if (config) {
						const $badge = $('.estado-caso');

						// quitar clases badge-* anteriores
						$badge.removeClass(function (index, className) {
							return (className.match(/badge-\S+/g) || []).join(' ');
						});

						// agregar nueva clase y texto
						$badge
							.addClass('badge-' + config.badge)
							.text(config.texto);
					}
				}

				// prepend del nuevo log
				if (resp.data) {
					let html = renderLogItem(resp.data);
					$('#historial-caso').prepend(html);
				}
			}, 'json');
		});

		$('#formCambiarResponsable').on('submit', function(e){
			e.preventDefault();

			var form = $(this);
			var url  = form.data('url');

			$.post(url, form.serialize(), function(resp){
				if (!resp.ok) {
					alert(resp.msg || 'Error al cambiar responsable');
					return;
				}

				if (resp.sin_cambios) {
					return;
				}

				// Aquí después podemos:
				// - actualizar badge
				$('.usuario-responsable').text(resp.data.nombre_responsable) ;

				// prepend del nuevo log
				if (resp.data) {
					let html = renderLogItem(resp.data);
					$('#historial-caso').prepend(html);
				}
			}, 'json');
		});

		$('#formNotaCaso').on('submit', function(e){
			e.preventDefault();

			var form = $(this);
			var url  = form.data('url');

			$.post(url, form.serialize(), function(resp){
				if (!resp.ok) {
					alert(resp.msg || 'Error al agregar nota');
					return;
				}

				if (resp.sin_cambios) {
					return;
				}

				// Aquí después podemos:
				// - actualizar badge

				// prepend del nuevo log
				if (resp.data) {
					let html = renderLogItem(resp.data);
					$('#historial-caso').prepend(html);
				}
			}, 'json');
		});

		$('#formCambiarFecha').on('submit', function(e){
			e.preventDefault();

			var form = $(this);
			var url  = form.data('url');

			$.post(url, form.serialize(), function(resp){
				if (!resp.ok) {
					alert(resp.msg || 'Error al actualizar fecha');
					return;
				}

				if (resp.sin_cambios) {
					return;
				}

				$('.fecha-compromiso').html(formatearFechaUI(resp.data.valor_nuevo));

				// Prepend al historial (ideal)
				if (resp.html) {
					$('#historial-caso').prepend(resp.html);
				}
			}, 'json');
		});
	});


	function renderLogItem(log) {
		return `
			<div class="mb-2 border-bottom pb-1">
				<small class="text-muted">
					<?php echo $usuario; ?> - ${fecha(log.created)}
				</small>
				<p class="mb-0">${log.descripcion.replace(/\n/g, '<br>')}</p>
			</div>
		`;
	}


	tinymce.init({
        selector: "#nuevaNota",
        language: 'es',
        branding: false,
        menubar: false,
        plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'fullscreen',
            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
        ],
        toolbar: 'code forecolor bold italic underline link ' +
            'alignleft aligncenter alignright alignjustify ' +
            'bullist numlist table image media blocks help',
        automatic_uploads: true,
        file_picker_types: 'image',
        automatic_uploads: true,
        images_upload_url: '/tareas/cargar_imagen',
    });

</script>


<script>
    
</script>