<?php
/**
 * FORMATO: HISTORIA CLÍNICA DE ORTODONCIA (PREMIUM)
 * Basado en estándares internacionales y requerimientos específicos.
 */
?>
<style>
    :root {
        --orto-primary: #1A237E;
        --orto-secondary: #3949AB;
        --orto-accent: #00BCD4;
        --orto-bg: #F5F7FA;
        --orto-text: #2C3E50;
        --orto-border: #D1D9E6;
    }

    .orto-container {
        font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
        color: var(--orto-text);
        background: white;
        padding: 0;
        border-radius: 8px;
    }

    .orto-header {
        background: linear-gradient(135deg, var(--orto-primary) 0%, var(--orto-secondary) 100%);
        color: white;
        padding: 20px;
        border-radius: 8px 8px 0 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .orto-header h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .orto-header p {
        margin: 5px 0 0;
        opacity: 0.9;
        font-size: 14px;
    }

    .orto-section {
        margin-bottom: 25px;
        border: 1px solid var(--orto-border);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    .orto-section-title {
        background: #f8f9fa;
        padding: 12px 15px;
        font-weight: 700;
        font-size: 15px;
        color: var(--orto-primary);
        border-bottom: 1px solid var(--orto-border);
        display: flex;
        align-items: center;
    }

    .orto-section-title i {
        margin-right: 10px;
    }

    .orto-body {
        padding: 20px;
    }

    .orto-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px 15px;
    }

    .orto-col {
        padding: 0 10px;
        flex: 1;
        min-width: 200px;
    }

    .orto-col-12 { width: 100%; flex: 0 0 100%; }
    .orto-col-6 { width: 50%; flex: 0 0 50%; }
    .orto-col-4 { width: 33.33%; flex: 0 0 33.33%; }
    .orto-col-3 { width: 25%; flex: 0 0 25%; }

    .orto-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #546E7A;
        margin-bottom: 6px;
        text-transform: uppercase;
    }

    .orto-input, .orto-select, .orto-textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--orto-border);
        border-radius: 6px;
        font-size: 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
        color: var(--orto-text);
    }

    .orto-input:focus, .orto-textarea:focus {
        outline: none;
        border-color: var(--orto-accent);
        box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
    }

    .orto-textarea {
        resize: vertical;
        min-height: 80px;
    }

    /* ODONTOGRAMA ORTODONTICO STYLES */
    .odonto-grid {
        display: flex;
        justify-content: center;
        gap: 20px;
        background: #fdfdfd;
        padding: 20px;
        border-radius: 8px;
    }

    .tooth-box {
        width: 45px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .tooth-num {
        font-size: 12px;
        font-weight: bold;
        color: var(--orto-primary);
    }

    .tooth-status {
        width: 100%;
        height: 25px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: white;
        font-size: 10px;
        text-align: center;
        padding: 2px;
        cursor: pointer;
    }

    .tooth-status:hover {
        background: #f0f0f0;
    }

    .status-bracket { background-color: #E3F2FD; color: #1976D2; border-color: #2196F3; }
    .status-banda { background-color: #F3E5F5; color: #7B1FA2; border-color: #9C27B0; }
    .status-tubo { background-color: #E8F5E9; color: #2E7D32; border-color: #4CAF50; }
    .status-ausente { background-color: #ECEFF1; color: #455A64; border-color: #607D8B; text-decoration: line-through; }

    /* SIGNOS VITALES TABLE */
    .orto-table {
        width: 100%;
        border-collapse: collapse;
    }

    .orto-table th, .orto-table td {
        border: 1px solid var(--orto-border);
        padding: 10px;
        text-align: left;
    }

    .orto-table th {
        background: #f8f9fa;
        font-size: 12px;
    }

    .status-badge {
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: bold;
    }

    .badge-primary { background: #E3F2FD; color: #1976D2; }
</style>

<form name="formulario_ortodoncia" id="formulario_ortodoncia" method="POST">
    <input type="hidden" name="idatencion" id="idatencion" value="<?php echo $_POST['idatencion'] ?? ''; ?>">
    <input type="hidden" name="tipo_formato" value="HISTORIA_ORTODONCIA">

    <div class="orto-container">
        <!-- HEADER -->
        <div class="orto-header">
            <h2>INFORME CLÍNICO DE ORTODONCIA</h2>
            <p>Diagnóstico, Planificación y Seguimiento Especializado</p>
        </div>

        <!-- DATOS DEL PACIENTE -->
        <?php include 'partials/patient_header.php'; ?>

        <div class="orto-body">
            
            <!-- 1. CONTEXTO CLÍNICO -->
            <div class="orto-section">
                <div class="orto-section-title"><i class="fa fa-info-circle"></i> 1. CONTEXTO CLÍNICO</div>
                <div class="orto-body">
                    <div class="orto-row">
                        <div class="orto-col-6">
                            <label class="orto-label">Motivo de Consulta</label>
                            <textarea class="orto-textarea" name="orto_motivo" placeholder="¿Por qué busca tratamiento de ortodoncia?"></textarea>
                        </div>
                        <div class="orto-col-6">
                            <label class="orto-label">Antecedentes y Hábitos</label>
                            <textarea class="orto-textarea" name="orto_habitos" placeholder="Succión digital, respiración bucal, bruxismo, etc."></textarea>
                        </div>
                    </div>
                    <div class="orto-row">
                        <div class="orto-col-4">
                            <label class="orto-label">Evaluación Facial</label>
                            <select class="orto-select" name="orto_perfil">
                                <option value="recto">Perfil Recto</option>
                                <option value="convexo">Perfil Convexo</option>
                                <option value="concavo">Perfil Cóncavo</option>
                            </select>
                        </div>
                        <div class="orto-col-4">
                            <label class="orto-label">Simetría Facial</label>
                            <select class="orto-select" name="orto_simetria">
                                <option value="simetrico">Simétrico</option>
                                <option value="asimetrico">Asimétrico</option>
                            </select>
                        </div>
                        <div class="orto-col-4">
                            <label class="orto-label">Tipo de Sonrisa</label>
                            <input type="text" class="orto-input" name="orto_sonrisa" placeholder="Ej: Gingival, Media, Baja">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. DIAGNÓSTICO ORTODÓNTICO -->
            <div class="orto-section">
                <div class="orto-section-title"><i class="fa fa-stethoscope"></i> 2. DIAGNÓSTICO ESPECIALIZADO</div>
                <div class="orto-body">
                    <div class="orto-row">
                        <div class="orto-col-4">
                            <label class="orto-label">Clase Molar (Der/Izq)</label>
                            <div style="display:flex; gap:5px;">
                                <input type="text" class="orto-input" name="clase_molar_der" placeholder="Der">
                                <input type="text" class="orto-input" name="clase_molar_izq" placeholder="Izq">
                            </div>
                        </div>
                        <div class="orto-col-4">
                            <label class="orto-label">Clase Canina (Der/Izq)</label>
                            <div style="display:flex; gap:5px;">
                                <input type="text" class="orto-input" name="clase_canina_der" placeholder="Der">
                                <input type="text" class="orto-input" name="clase_canina_izq" placeholder="Izq">
                            </div>
                        </div>
                        <div class="orto-col-2">
                            <label class="orto-label">Overjet (mm)</label>
                            <input type="number" step="0.1" class="orto-input" name="orto_overjet">
                        </div>
                        <div class="orto-col-2">
                            <label class="orto-label">Overbite (%)</label>
                            <input type="number" step="1" class="orto-input" name="orto_overbite">
                        </div>
                    </div>
                    <div class="orto-row">
                        <div class="orto-col-12">
                            <label class="orto-label">Diagnóstico Principal (Maloclusión)</label>
                            <textarea class="orto-textarea" name="orto_diag_principal" rows="2"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. ODONTOGRAMA ORTODÓNTICO -->
            <div class="orto-section">
                <div class="orto-section-title"><i class="fa fa-th"></i> 3. MAPEO DENTAL Y APARATOLOGÍA</div>
                <div class="orto-body">
                    <p style="font-size: 11px; color: #666; margin-bottom: 15px;">Indique el estado actual o aparatología instalada en cada pieza:</p>
                    
                    <!-- Arcada Superior -->
                    <div class="orto-row" style="justify-content:center; margin-bottom: 20px;">
                        <?php 
                        $teeth_up = [18,17,16,15,14,13,12,11, 21,22,23,24,25,26,27,28];
                        foreach($teeth_up as $num): ?>
                            <div class="tooth-box">
                                <span class="tooth-num"><?php echo $num; ?></span>
                                <select name="tooth_status_<?php echo $num; ?>" class="tooth-status">
                                    <option value="presente">Sano</option>
                                    <option value="bracket">Bracket</option>
                                    <option value="tubo">Tubo</option>
                                    <option value="banda">Banda</option>
                                    <option value="ausente">Ausente</option>
                                    <option value="indicado">Ind. Ext.</option>
                                </select>
                            </div>
                            <?php if($num == 11) echo '<div style="width:20px;"></div>'; ?>
                        <?php endforeach; ?>
                    </div>

                    <!-- Arcada Inferior -->
                    <div class="orto-row" style="justify-content:center;">
                        <?php 
                        $teeth_down = [48,47,46,45,44,43,42,41, 31,32,33,34,35,36,37,38];
                        foreach($teeth_down as $num): ?>
                            <div class="tooth-box">
                                <select name="tooth_status_<?php echo $num; ?>" class="tooth-status">
                                    <option value="presente">Sano</option>
                                    <option value="bracket">Bracket</option>
                                    <option value="tubo">Tubo</option>
                                    <option value="banda">Banda</option>
                                    <option value="ausente">Ausente</option>
                                    <option value="indicado">Ind. Ext.</option>
                                </select>
                                <span class="tooth-num"><?php echo $num; ?></span>
                            </div>
                            <?php if($num == 41) echo '<div style="width:20px;"></div>'; ?>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- 4. PLAN DE TRATAMIENTO -->
            <div class="orto-section">
                <div class="orto-section-title"><i class="fa fa-calendar-check-o"></i> 4. PLAN DE TRATAMIENTO</div>
                <div class="orto-body">
                    <div class="orto-row">
                        <div class="orto-col-4">
                            <label class="orto-label">Tipo de Aparatología</label>
                            <select class="orto-select" name="plan_aparatologia">
                                <option value="brackets_metalicos">Brackets Metálicos</option>
                                <option value="brackets_esteticos">Brackets Estéticos (Zafiro/Cerámica)</option>
                                <option value="autoligado">Autoligado</option>
                                <option value="invisalign">Alineadores (Invisalign/etc)</option>
                                <option value="ortopedia">Ortopedia Funcional</option>
                            </select>
                        </div>
                        <div class="orto-col-4">
                            <label class="orto-label">Duración Estimada</label>
                            <input type="text" class="orto-input" name="plan_duracion" placeholder="Ej: 18 - 24 meses">
                        </div>
                        <div class="orto-col-4">
                            <label class="orto-label">Frecuencia de Controles</label>
                            <input type="text" class="orto-input" name="plan_frecuencia" value="Cada 4 semanas">
                        </div>
                    </div>
                    <div class="orto-row">
                        <div class="orto-col-12">
                            <label class="orto-label">Objetivos del Tratamiento</label>
                            <textarea class="orto-textarea" name="plan_objetivos" placeholder="Ej: Corregir apiñamiento, cerrar diastemas, mejorar oclusión..."></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 5. EVOLUCIÓN Y NOTAS -->
            <div class="orto-section">
                <div class="orto-section-title"><i class="fa fa-line-chart"></i> 5. SEGUIMIENTO Y EVOLUCIÓN</div>
                <div class="orto-body">
                    <textarea class="orto-textarea" name="orto_evolucion" rows="4" placeholder="Registre los avances de la cita actual..."></textarea>
                </div>
            </div>

        </div>

        <!-- BOTON GUARDAR -->
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="guardar_orto" style="margin-top:20px;">
            <button class="btn btn-primary btn-lg" type="submit" style="background: var(--orto-primary); border:none; padding: 15px 40px; font-weight:700;">
                <i class="fa fa-save"></i> GUARDAR HISTORIA DE ORTODONCIA
            </button>
        </div>
    </div>
</form>

<script>
    $(document).ready(function() {
        // Dinamizar colores del odontograma al cambiar select
        $(document).on('change', '.tooth-status', function() {
            var val = $(this).val();
            $(this).removeClass('status-bracket status-banda status-tubo status-ausente');
            if(val !== 'presente') {
                $(this).addClass('status-' + val);
            }
        });
    });
</script>
