<form method="post" action="<?= site_url('casos/guardar'); ?>" id="formCaso">
	<input type="hidden" name="id" value="0">

	<div class="form-row">

		<!-- Email -->
		<div class="form-group col-md-6">
			<label>Email</label>
			<input type="email" name="email" class="form-control input-email" placeholder="Email del cliente">
			<input type="hidden" name="id_cliente" class="input-id-cliente">
		</div>

		<!-- Nombre -->
		<div class="form-group col-md-6">
			<label>Nombre</label>
			<input type="text" name="nombre" class="form-control input-cliente" placeholder="Nombre del cliente" required>
		</div>

	</div>

	<div class="form-row">

		<!-- Medio de contacto -->
		<div class="form-group col-md-6">
			<label>Medio de contacto</label>
			<select name="medio_contacto" class="form-control" required>
				<option value="">Seleccionar…</option>
				<option value="email">Email</option>
				<option value="telefono">Teléfono</option>
				<option value="whatsapp">WhatsApp</option>
				<option value="instagram">Instagram</option>
				<option value="pedido_web">Pedido web</option>
				<option value="formulario">Formulario</option>
				<option value="otro">Otro</option>
			</select>
		</div>

		<!-- Teléfono -->
		<div class="form-group col-md-6">
			<label>Teléfono</label>
			<input type="text" name="telefono_contacto" class="form-control" placeholder="Teléfono del cliente">
		</div>

	</div>

	<div class="form-row">

		<!-- Usuario red social -->
		<div class="form-group col-md-6">
			<label>Usuario red social</label>
			<input type="text" name="usuario_red_social" class="form-control" placeholder="Username de Instagram u otra red">
		</div>

		<!-- ID Venta / Pedido web -->
		<div class="form-group col-md-6">
			<label>ID Venta</label>
			<input type="number" name="id_venta" class="form-control" placeholder="ID de venta (VDM)">
		</div>

	</div>

	<div class="form-row">

		<!-- Responsable -->
		<div class="form-group col-md-6">
			<label>Responsable</label>
			<select name="id_usuario_responsable" class="form-control">
				<option value="">Sin asignar</option>
				<?php foreach ($usuarios_activos as $id => $nombre): ?>
					<option value="<?= $id ?>"><?= $nombre ?></option>
				<?php endforeach; ?>
			</select>
		</div>

		<!-- Estado -->
		<div class="form-group col-md-3">
			<label>Estado</label>
			<select name="estado" class="form-control">
				<option value="abierto">Abierto</option>
				<option value="espera_interna">Espera interna</option>
				<option value="espera_cliente">Espera cliente</option>
				<option value="resuelto">Resuelto</option>
			</select>
		</div>

		<!-- Fecha compromiso -->
		<div class="form-group col-md-3">
			<label>Fecha compromiso</label>
			<input type="date" name="fecha_compromiso" class="form-control">
		</div>

	</div>

	<div class="form-row">
		<!-- Título -->
		<div class="form-group col-md-12">
			<label>Título</label>
			<input type="text" name="titulo" class="form-control" placeholder="Resumen corto del problema" required>
		</div>
	</div>

	<div class="form-row">
		<!-- Descripción -->
		<div class="form-group col-md-12">
			<label>Descripción</label>
			<textarea name="descripcion" class="form-control" rows="4" placeholder="Describe el problema con más detalle" required></textarea>
		</div>
	</div>

	<div class="form-row">
		<div class="col-md-12 text-right">
			<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancelar</button>
			<button type="submit" id="btnCrearCaso" class="btn btn-primary btn-sm">Crear</button>
		</div>
	</div>

</form>

<script>
$(document).ready(function() {

	// Autocomplete de email para asociar cliente existente
	$('.input-email').autocomplete({
		source: function(request, response) {
			$('.input-cliente').val('');
			$('.input-id-cliente').val('');

			$.ajax({
				url: '<?= site_url("clientes/ac_emails"); ?>',
				dataType: "jsonp",
				data: { term: request.term },
				success: function(data) {
					response(data);
				}
			});
		},
		minLength: 2,
		select: function(event, ui) {
			$('.input-id-cliente').val(ui.item.id);
			$('.input-cliente').val(ui.item.nombre);
			$(this).blur();
		}
	});

$('#formCaso').submit(function(e){
	e.preventDefault();

	let $btn = $('#btnCrearCaso');
	$btn.prop('disabled', true).text('Guardando...');

	$.ajax({
		url: $(this).attr('action'),
		type: 'post',
		data: $(this).serialize(),
		dataType: 'json',
		success: function(res){
			if(res.status === 'success'){
				$('#modalCrearCaso').modal('hide');
				location.reload();
			} else {
				alert(res.message);
				$btn.prop('disabled', false).text('Crear');
			}
		},
		error: function(){
			alert('Error al guardar el caso');
			$btn.prop('disabled', false).text('Crear');
		}
	});
});

	// Limpiar al abrir el modal
	$('#modalCrearCaso').on('show.bs.modal', function () {
		limpiar_form();
	});

	// Limpiar al cerrar el modal
	$('#modalCrearCaso').on('hidden.bs.modal', function () {
		limpiar_form();
	});

});

function limpiar_form() {
	let form = $('#formCaso')[0]; // obtenemos el formulario
	form.reset(); // resetea todos los inputs

	// Reseteamos los campos ocultos específicos
	$('.input-id-cliente').val('');

	// Opcional: quitar clases o estados que agregamos en JS
	$('.input-email').removeClass('found not-found');
}
</script>
