<?php
/**
 * FORMATO: DERIVACIÓN / INTERCONSULTA INTERNA (PREMIUM)
 * Permite derivar pacientes a otros colegas del sistema con estilo visual.
 */
?>
<style>
    :root {
        --deriva-primary: #673AB7;
        --deriva-secondary: #9575CD;
        --deriva-accent: #FF4081;
        --deriva-bg: #F3E5F5;
        --deriva-text: #311B92;
        --deriva-border: #D1C4E9;
    }

    .deriva-container {
        font-family: 'Outfit', 'Inter', sans-serif;
        color: var(--deriva-text);
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(103, 58, 183, 0.05);
        overflow: hidden;
    }

    .deriva-header {
        background: linear-gradient(135deg, var(--deriva-primary) 0%, var(--deriva-secondary) 100%);
        color: white;
        padding: 25px;
        text-align: center;
        position: relative;
    }

    .deriva-header h2 { margin: 0; font-size: 24px; font-weight: 700; }
    .deriva-header p { margin: 5px 0 0; opacity: 0.8; font-size: 14px; }

    .deriva-body { padding: 30px; }

    .deriva-card {
        background: #fafafa;
        border: 2px dashed var(--deriva-border);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 25px;
        transition: all 0.3s ease;
    }

    .deriva-card:hover {
        border-style: solid;
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .deriva-label {
        font-weight: 700;
        font-size: 13px;
        color: var(--deriva-primary);
        text-transform: uppercase;
        margin-bottom: 8px;
        display: block;
    }

    /* PRIORIDADES */
    .priority-selector {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
    }

    .priority-item {
        flex: 1;
        text-align: center;
        padding: 12px;
        border-radius: 8px;
        border: 2px solid #eee;
        cursor: pointer;
        transition: all 0.2s;
        font-weight: bold;
        font-size: 13px;
    }

    .priority-item input { display: none; }
    
    .p-baja:hover, .priority-item.active.p-baja { background: #E8F5E9; border-color: #4CAF50; color: #2E7D32; }
    .p-media:hover, .priority-item.active.p-media { background: #FFF3E0; border-color: #FF9800; color: #E65100; }
    .p-alta:hover, .priority-item.active.p-alta { background: #FFEBEE; border-color: #F44336; color: #B71C1C; }

    .dr-list {
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 5px;
    }

    .dr-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .dr-item:hover { background: #f5f5f5; }
    .dr-item input { margin-right: 12px; transform: scale(1.2); }
    .dr-avatar {
        width: 35px;
        height: 35px;
        background: var(--deriva-bg);
        color: var(--deriva-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-weight: bold;
    }

    .deriva-textarea {
        width: 100%;
        border: 1px solid var(--deriva-border);
        border-radius: 8px;
        padding: 15px;
        font-size: 14px;
        resize: vertical;
        min-height: 100px;
    }

    .deriva-textarea:focus {
        outline: none;
        border-color: var(--deriva-primary);
        box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.1);
    }

    .btn-derivar {
        background: var(--deriva-primary);
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 16px;
        width: 100%;
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
        box-shadow: 0 4px 15px rgba(103, 58, 183, 0.3);
    }

    .btn-derivar:hover {
        background: #512DA8;
        transform: translateY(-2px);
    }
</style>

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

    <div class="deriva-container">
        <div class="deriva-header">
            <h2>DERIVACIÓN E INTERCONSULTA</h2>
            <p>Conecta con tus colegas y asegura el mejor seguimiento para tu paciente</p>
        </div>

        <?php include 'partials/patient_header.php'; ?>

        <div class="deriva-body">
            
            <div class="row">
                <!-- SELECCIÓN DE COLEGAS -->
                <div class="col-md-6">
                    <div class="deriva-card">
                        <span class="deriva-label"><i class="fa fa-user-md"></i> 1. Selecciona Colega(s)</span>
                        <div class="input-group" style="margin-bottom: 10px;">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            <input type="text" id="search_dr" class="form-control" placeholder="Buscar médico por nombre o especialidad...">
                        </div>
                        <div class="dr-list" id="colleagues_list">
                            <div class="text-center" style="padding:20px;"><i class="fa fa-spinner fa-spin"></i> Cargando especialistas...</div>
                        </div>
                        <p style="font-size: 11px; color: #888; margin-top: 10px;">* Puedes seleccionar uno o varios médicos para esta derivación.</p>
                    </div>
                </div>

                <!-- PRIORIDAD Y MOTIVO -->
                <div class="col-md-6">
                    <div class="deriva-card">
                        <span class="deriva-label"><i class="fa fa-flag"></i> 2. Nivel de Urgencia</span>
                        <div class="priority-selector">
                            <label class="priority-item p-baja">
                                <input type="radio" name="prioridad" value="baja"> 🟢 BAJA
                            </label>
                            <label class="priority-item p-media active">
                                <input type="radio" name="prioridad" value="media" checked> 🟡 MEDIA
                            </label>
                            <label class="priority-item p-alta">
                                <input type="radio" name="prioridad" value="alta"> 🔴 ALTA
                            </label>
                        </div>

                        <span class="deriva-label"><i class="fa fa-commenting"></i> 3. Motivo de Derivación</span>
                        <textarea class="deriva-textarea" name="motivo_derivacion" placeholder="Escribe aquí los hallazgos clínicos y el porqué de la derivación..."></textarea>
                    </div>

                    <button type="button" class="btn-derivar" id="btn_enviar_derivacion" onclick="guardarTodoYFinalizar()">
                        <i class="fa fa-paper-plane"></i> ENVIAR DERIVACIÓN INTERNA
                    </button>
                </div>
            </div>

        </div>
    </div>
</form>

<script>
    $(document).ready(function() {
        // Cargar lista de médicos
        loadColleagues();

        // Manejo de prioridad UI
        $(".priority-item").click(function() {
            $(".priority-item").removeClass("active");
            $(this).addClass("active");
        });

        // Buscador de médicos
        $("#search_dr").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#colleagues_list .dr-item").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

    function loadColleagues() {
        // Obtenemos médicos desde ajax/atencion.php?op=get_especialistas o similar
        $.post("../ajax/usuario.php?op=listar_medicos_derivacion", function(data) {
            try {
                var drs = JSON.parse(data);
                var html = "";
                drs.forEach(function(dr) {
                    var inicial = dr.nombre.charAt(0).toUpperCase();
                    html += '<label class="dr-item">' +
                        '<input type="checkbox" name="medicos_destino[]" value="' + dr.idusuario + '">' +
                        '<div class="dr-avatar">' + inicial + '</div>' +
                        '<div>' +
                            '<strong>' + dr.nombre + '</strong><br>' +
                            '<small class="text-muted">' + (dr.especialidad || 'Médico General') + '</small>' +
                        '</div>' +
                    '</label>';
                });
                $("#colleagues_list").html(html);
            } catch(e) {
                $("#colleagues_list").html('<div class="alert alert-danger">Error al cargar médicos</div>');
            }
        });
    }
</script>
