<h2 class="page-title">Crear Estado de Trámite</h2>
<p class="text-muted">Ingrese los datos del estado en el formulario.</p>
<div class="row">
    <div class="col-md-12">
        <div class="card shadow mb-4">
            <div class="card-header">
                <strong class="card-title">Formulario</strong>
            </div>
            <div class="card-body">
                <form action="<?= BASE_ACTION ?>states" method="POST">
                    <div class="form-group">
                        <label for="description">Descripción</label>
                        <input type="text" class="form-control" name="description" id="description" placeholder="Ej. Normal, Advertencia, Urgente" required>
                    </div>
                    <div class="form-group">
                        <label for="color">Color</label>
                        <input type="color" class="form-control" name="color" id="color" required>
                    </div>
                    <div class="form-group">
                        <label for="start_percentage">Porcentaje Inicio (%)</label>
                        <input type="number" class="form-control" name="start_percentage" id="start_percentage" min="0" max="100" required>
                    </div>

                    <div class="form-group">
                        <label for="end_percentage">Porcentaje Fin (%)</label>
                        <input type="number" class="form-control" name="end_percentage" id="end_percentage" min="0" max="9999" required>
                    </div>
                    
                    <div class="d-flex justify-content-start">
                        <a href="<?= BASE_HREF ?>states" class="btn btn-secondary mr-2">Cancelar</a>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll("input[required], select[required], textarea[required]").forEach(function (input) {
            let label = document.querySelector(`label[for="${input.id}"]`);
            if (label && !label.innerHTML.includes("*")) {
                label.innerHTML += ' <span class="text-danger">*</span>';
            }
        });
    });
</script>

<script>
    document.getElementById('description').addEventListener('input', function (event) {
        event.target.value = event.target.value.toUpperCase();
    });
</script>