<?php
session_start();
require 'config.php';
if(!isset($_SESSION["usuario"])||$_SESSION["rol"]!=='ADMINISTRADOR'){header("Location: dashboard.php?vista=ordenes");exit;}
$usuario=$_SESSION["usuario"];$rol=$_SESSION["rol"];$sucursal=$_SESSION["sucursal"];
$id=(int)($_GET['id']??$_POST['id_orden_serv']??0);
if(!$id){header("Location: dashboard.php?vista=ordenes");exit;}

$o=$pdo->prepare("SELECT * FROM ordenes_de_servicio WHERE id_orden_serv=? LIMIT 1");
$o->execute([$id]);$orden=$o->fetch();
if(!$orden){header("Location: dashboard.php?vista=ordenes");exit;}

$eq=$pdo->prepare("SELECT * FROM refequipo WHERE id_orden_serv=? LIMIT 1");
$eq->execute([$id]);$equipo=$eq->fetch()?:[];

$accs=$pdo->prepare("SELECT * FROM refaccesorios WHERE id_orden_serv=?");
$accs->execute([$id]);$accesorios=$accs->fetchAll();

$yr=date('Y',strtotime($orden['fecha_creacion']??'now'));
$folio=$yr.'-'.str_pad($id,4,'0',STR_PAD_LEFT);

$msg='';$msgType='';
if($_SERVER['REQUEST_METHOD']==="POST" && isset($_POST['guardar_edicion'])){
    try{
        $pdo->beginTransaction();

        // Actualizar orden
        $pdo->prepare("UPDATE ordenes_de_servicio SET
            fecha_creacion=?,asesor_que_atiende=?,instrucciones_cliente=?,
            equipo_con_accesorios=?,estado=?,referenciado=?,ticket_anticipo=?
            WHERE id_orden_serv=?")
        ->execute([
            $_POST['fecha_creacion']??$orden['fecha_creacion'],
            $_POST['asesor_que_atiende']??$orden['asesor_que_atiende'],
            $_POST['instrucciones_cliente']??$orden['instrucciones_cliente'],
            $_POST['equipo_con_accesorios']??$orden['equipo_con_accesorios'],
            $_POST['estado']??$orden['estado'],
            $_POST['referenciado']??$orden['referenciado'],
            $_POST['ticket_anticipo']??$orden['ticket_anticipo'],
            $id
        ]);

        // Actualizar equipo
        if($equipo){
            $pdo->prepare("UPDATE refequipo SET
                tipo_de_equipo=?,marca_de_equipo=?,modelo_del_equipo=?,
                estado_fisico_de_recepcion=?,numero_de_serie_del_equipo=?,
                prende_completamente=?,password=?,argumento_de_la_falla=?,solicita_respaldo=?
                WHERE id_orden_serv=?")
            ->execute([
                $_POST['tipo_de_equipo']??$equipo['tipo_de_equipo'],
                $_POST['marca_de_equipo']??$equipo['marca_de_equipo'],
                $_POST['modelo_del_equipo']??$equipo['modelo_del_equipo'],
                $_POST['estado_fisico_de_recepcion']??$equipo['estado_fisico_de_recepcion'],
                $_POST['numero_de_serie_del_equipo']??$equipo['numero_de_serie_del_equipo'],
                $_POST['prende_completamente']??$equipo['prende_completamente'],
                $_POST['password']??$equipo['password'],
                $_POST['argumento_de_la_falla']??$equipo['argumento_de_la_falla'],
                $_POST['solicita_respaldo']??$equipo['solicita_respaldo'],
                $id
            ]);
        }

        // Accesorios: borrar y reinsertar
        $tieneAcc=$_POST['equipo_con_accesorios']??'NO';
        if($tieneAcc==='SI' && !empty($_POST['acc_nombre'])){
            $pdo->prepare("DELETE FROM refaccesorios WHERE id_orden_serv=?")->execute([$id]);
            $stA=$pdo->prepare("INSERT INTO refaccesorios (id_orden_serv,accesorio_recibido,numero_de_serie_de_accesorio) VALUES (?,?,?)");
            foreach($_POST['acc_nombre'] as $i=>$n){
                if(!empty(trim($n))) $stA->execute([$id,$n,$_POST['acc_serie'][$i]??'']);
            }
        } elseif($tieneAcc==='NO'){
            $pdo->prepare("DELETE FROM refaccesorios WHERE id_orden_serv=?")->execute([$id]);
        }

        $pdo->commit();
        $msg="✅ Orden $folio guardada correctamente.";$msgType='success';
        // Recargar
        $o->execute([$id]);$orden=$o->fetch();
        $eq->execute([$id]);$equipo=$eq->fetch()?:[];
        $accs->execute([$id]);$accesorios=$accs->fetchAll();
    }catch(Exception $e){
        $pdo->rollBack();
        $msg="❌ ".$e->getMessage();$msgType='error';
    }
}

$empleados=$pdo->query("SELECT CONCAT(primer_nombre,' ',primer_apellido) as nombre FROM alta_de_empleados WHERE STATUS<>'RENUNCIADO' ORDER BY primer_nombre")->fetchAll();
$sucursalesAll=$pdo->query("SELECT nombre FROM sucursales ORDER BY nombre")->fetchAll();
$marcas=$pdo->query("SELECT nombre_marcas FROM marcas ORDER BY nombre_marcas")->fetchAll();
$tipos=$pdo->query("SELECT nombre_de_equipos FROM tipos_de_equipo ORDER BY nombre_de_equipos")->fetchAll();
$accesoriosCat=$pdo->query("SELECT name FROM accesorios ORDER BY name")->fetchAll();
$estados=['EN REVISION','SERVICIO COTIZADO','CONFIRMADO','EN PROCESO','PAGADO','TERMINADO','ENTREGADO FINAL','CANCELADO'];
?><!DOCTYPE html>
<html lang="es"><head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Editar <?=$folio?> — PROCEIN 2026</title>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;800&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--azul:#1565C0;--azul2:#1E88E5;--acento:#29B6F6;--fondo:#EBF5FF;--blanco:#fff;--texto:#0D2A4A;--muted:#5A7FA8;--borde:#C5DDF9;--sidebar-w:230px;--rojo:#C62828}
html,body{min-height:100vh;background:var(--fondo);font-family:"Inter",sans-serif;color:var(--texto)}
body{display:flex}
.sidebar{width:var(--sidebar-w);min-height:100vh;background:#0D1B30;position:fixed;left:0;top:0;bottom:0;z-index:100;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.25)}
.sidebar-logo{padding:18px 16px 14px;border-bottom:1px solid rgba(41,182,246,.1);display:flex;align-items:center;gap:10px}
.sidebar-logo img{height:34px;filter:drop-shadow(0 0 6px rgba(41,182,246,.3))}
.sidebar-logo-text{font-family:"Exo 2",sans-serif;font-size:11px;font-weight:800;color:#fff;line-height:1.3}
.sidebar-logo-text span{color:var(--acento);font-size:9px;letter-spacing:2px;font-weight:600;display:block}
.sidebar-user{padding:10px 14px;background:rgba(41,182,246,.06);border-bottom:1px solid rgba(41,182,246,.08);display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--azul),var(--acento));display:flex;align-items:center;justify-content:center;font-family:"Exo 2",sans-serif;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.user-name{font-size:11px;font-weight:600;color:#E8F2FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:9px;color:var(--acento);letter-spacing:1px;text-transform:uppercase;font-weight:600}
.nav{flex:1;padding:10px 0}.nav-label{font-family:"Exo 2",sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(144,202,249,.35);padding:8px 14px 4px}
.menu-btn{width:100%;display:flex;align-items:center;gap:9px;padding:10px 14px;background:rgba(41,182,246,.1);border:none;color:#fff;font-family:"Exo 2",sans-serif;font-size:12px;font-weight:600;text-align:left}
.menu-btn .icon{width:28px;height:28px;border-radius:7px;background:rgba(41,182,246,.2);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.submenu{background:rgba(0,0,0,.15)}
.sub-item{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 42px;color:#6A8BAE;font-size:12px;text-decoration:none;border-left:2px solid transparent;margin-left:12px}
.sub-item:hover{background:rgba(41,182,246,.07);color:#C5E3FF}
.sub-item.active{color:var(--acento);border-left-color:var(--acento);background:rgba(41,182,246,.08)}
.sub-item i{font-size:10px;width:13px;color:var(--acento);opacity:.7}
.sidebar-footer{padding:10px 12px;border-top:1px solid rgba(41,182,246,.08)}
.logout-btn{width:100%;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;background:rgba(220,50,50,.08);border:1px solid rgba(220,50,50,.15);color:#FF7777;font-family:"Exo 2",sans-serif;font-size:11px;font-weight:600;cursor:pointer;text-decoration:none}
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{background:#fff;border-bottom:1px solid #D6ECFF;padding:11px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 10px rgba(21,101,192,.07);position:sticky;top:0;z-index:50;flex-wrap:wrap}
.topbar-title{font-family:"Exo 2",sans-serif;font-size:15px;font-weight:800;color:var(--azul)}
.topbar-title em{color:var(--acento);font-style:normal}
.btn-top{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;font-family:"Exo 2",sans-serif;border:1px solid var(--borde);cursor:pointer;background:#EBF5FF;color:var(--azul)}
.content{padding:20px;flex:1}
.msg{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px}
.success{background:#E8F5E9;border:1px solid #A5D6A7;color:#2E7D32}
.error{background:#FFEBEE;border:1px solid #EF9A9A;color:#C62828}
.section{background:#fff;border-radius:14px;border:1px solid var(--borde);margin-bottom:16px;overflow:hidden;box-shadow:0 2px 10px rgba(21,101,192,.06)}
.section-header{padding:12px 18px;background:linear-gradient(90deg,#EBF5FF,#F5FAFF);border-bottom:1px solid var(--borde);display:flex;align-items:center;gap:10px}
.section-title{font-family:"Exo 2",sans-serif;font-size:13px;font-weight:700;color:var(--azul)}
.section-body{padding:16px 18px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.form-grid.col2{grid-template-columns:1fr 1fr}
.form-grid.col3{grid-template-columns:1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
label{font-family:"Exo 2",sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
input[type=text],input[type=datetime-local],select,textarea{padding:10px 12px;background:#F5FAFF;border:1.5px solid var(--borde);border-radius:8px;color:var(--texto);font-size:14px;font-family:"Inter",sans-serif;outline:none;transition:border-color .2s;width:100%;-webkit-appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--azul2);background:#fff;box-shadow:0 0 0 3px rgba(30,136,229,.1)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A7FA8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;background-color:#F5FAFF}
textarea{resize:vertical;min-height:80px}
.field-readonly{padding:10px 12px;background:#EEF4FB;border:1.5px solid #D6ECFF;border-radius:8px;color:#5A7FA8;font-size:13px;min-height:42px;display:flex;align-items:center;gap:8px}
/* Toggle SI/NO */
.toggle-group{display:flex;gap:8px}
.toggle-opt{flex:1;padding:9px;border:1.5px solid var(--borde);border-radius:8px;text-align:center;cursor:pointer;font-family:"Exo 2",sans-serif;font-size:12px;font-weight:700;color:var(--muted);transition:all .2s;user-select:none}
.toggle-opt.si{border-color:#2E7D32;background:#E8F5E9;color:#2E7D32}
.toggle-opt.no{border-color:var(--rojo);background:#FFEBEE;color:var(--rojo)}
/* Accesorios */
.acc-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:8px}
.btn-add{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#EBF5FF;border:1.5px dashed var(--acento);border-radius:8px;color:var(--azul2);font-size:12px;font-weight:600;cursor:pointer;font-family:"Exo 2",sans-serif}
.btn-del{width:34px;height:34px;border-radius:7px;background:#FFEBEE;border:1px solid #FFCDD2;color:var(--rojo);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.btn-save{display:inline-flex;align-items:center;gap:9px;padding:13px 28px;background:linear-gradient(135deg,var(--azul),var(--azul2),var(--acento));background-size:200%;border:none;border-radius:10px;color:#fff;font-family:"Exo 2",sans-serif;font-size:14px;font-weight:700;letter-spacing:1.5px;cursor:pointer;box-shadow:0 4px 20px rgba(21,101,192,.3)}
.btn-cancel{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;border:1.5px solid var(--borde);background:#fff;color:var(--muted);font-family:"Exo 2",sans-serif;font-size:13px;font-weight:600;text-decoration:none}
@media(max-width:900px){.form-grid.col3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.form-grid.col2,.form-grid.col3{grid-template-columns:1fr}.acc-row{grid-template-columns:1fr auto}}
</style></head>
<body>
<aside class="sidebar">
  <div class="sidebar-logo">
    <img src="data:image/jpeg;base64,[encoded data, 19656 characters]" alt="VANTECC">
    <div class="sidebar-logo-text">PROCEIN 2026 PRO<span>CompuJuárez · Vantecc</span></div>
  </div>
  <div class="sidebar-user">
    <div class="user-avatar"><?=strtoupper(substr($usuario,0,1))?></div>
    <div style="min-width:0"><div class="user-name"><?=htmlspecialchars($usuario)?></div><div class="user-role"><?=htmlspecialchars($rol)?></div></div>
  </div>
  <nav class="nav">
    <div class="nav-label">Módulos</div>
    <div>
      <button class="menu-btn"><span class="icon"><i class="fas fa-laptop-code"></i></span>Servicios Técnicos</button>
      <div class="submenu">
        <a href="dashboard.php?vista=ordenes" class="sub-item active"><i class="fas fa-file-alt"></i> Órdenes de Servicio</a>
        <a href="dashboard.php?vista=anticipo" class="sub-item"><i class="fas fa-dollar-sign"></i> Registrar Anticipo</a>
        <a href="dashboard.php?vista=clientes" class="sub-item"><i class="fas fa-users"></i> Clientes</a>
      </div>
    </div>
  </nav>
  <div class="sidebar-footer"><a href="logout.php" class="logout-btn"><i class="fas fa-sign-out-alt"></i> Cerrar Sesión</a></div>
</aside>

<div class="main">
  <div class="topbar">
    <div class="topbar-title"><i class="fas fa-edit" style="color:var(--acento);margin-right:8px"></i>Editar Orden <em><?=htmlspecialchars($folio)?></em></div>
    <a href="ver_orden.php?id=<?=$id?>" class="btn-top" style="margin-left:auto"><i class="fas fa-eye"></i> Ver</a>
    <a href="dashboard.php?vista=ordenes" class="btn-top"><i class="fas fa-arrow-left"></i> Volver</a>
  </div>
  <div class="content">
    <?php if($msg): ?><div class="msg <?=$msgType?>"><?=$msg?></div><?php endif; ?>
    <form method="POST">
    <input type="hidden" name="guardar_edicion" value="1">
    <input type="hidden" name="id_orden_serv" value="<?=$id?>">

    <!-- CLIENTE (solo lectura - viene de clientes_tec) -->
    <div class="section">
      <div class="section-header"><i class="fas fa-user" style="color:var(--acento)"></i><span class="section-title">Cliente (solo lectura)</span></div>
      <div class="section-body">
        <div class="form-grid col2">
          <div class="form-group"><label>Nombre del Cliente</label>
            <div class="field-readonly"><i class="fas fa-user" style="color:var(--acento)"></i><?=htmlspecialchars($orden['nombre_cliente']??'—')?></div></div>
          <div class="form-group"><label>Email</label>
            <div class="field-readonly"><i class="fas fa-envelope" style="color:var(--acento)"></i><?=htmlspecialchars($orden['email_cliente_tec']??'—')?></div></div>
          <div class="form-group"><label>Teléfono</label>
            <div class="field-readonly"><i class="fas fa-phone" style="color:var(--acento)"></i><?=htmlspecialchars($orden['telefono_cliente']??'—')?></div></div>
          <div class="form-group"><label>Empresa</label>
            <div class="field-readonly"><i class="fas fa-building" style="color:var(--acento)"></i><?=htmlspecialchars($orden['empresa_referencia']??'—')?></div></div>
        </div>
        <p style="font-size:11px;color:var(--muted);margin-top:10px"><i class="fas fa-lock" style="margin-right:4px"></i>Los datos del cliente solo se editan desde el módulo Clientes.</p>
      </div>
    </div>

    <!-- DATOS DE LA ORDEN -->
    <div class="section">
      <div class="section-header"><i class="fas fa-cog" style="color:var(--acento)"></i><span class="section-title">Datos de la Orden</span></div>
      <div class="section-body">
        <div class="form-grid col3">
          <div class="form-group"><label>Fecha Creación</label>
            <input type="datetime-local" name="fecha_creacion" value="<?=date('Y-m-d\TH:i',strtotime($orden['fecha_creacion']??''))?>"></div>
          <div class="form-group"><label>Asesor que Atiende</label>
            <select name="asesor_que_atiende">
              <?php foreach($empleados as $e): ?>
              <option value="<?=htmlspecialchars($e['nombre'])?>" <?=$e['nombre']===$orden['asesor_que_atiende']?'selected':''?>><?=htmlspecialchars($e['nombre'])?></option>
              <?php endforeach; ?>
            </select></div>
          <div class="form-group"><label>Estado</label>
            <select name="estado">
              <?php foreach($estados as $est): ?>
              <option value="<?=htmlspecialchars($est)?>" <?=$est===$orden['estado']?'selected':''?>><?=htmlspecialchars($est)?></option>
              <?php endforeach; ?>
            </select></div>
          <div class="form-group"><label>Referenciado</label>
            <select name="referenciado">
              <option value="">— Sin referencia —</option>
              <?php foreach($sucursalesAll as $s): ?>
              <option value="<?=htmlspecialchars($s['nombre'])?>" <?=$s['nombre']===$orden['referenciado']?'selected':''?>><?=htmlspecialchars($s['nombre'])?></option>
              <?php endforeach; ?>
            </select></div>
          <div class="form-group"><label>Ticket Anticipo</label>
            <input type="text" name="ticket_anticipo" value="<?=htmlspecialchars($orden['ticket_anticipo']??'')?>"></div>
          <div class="form-group"><label>Sucursal</label>
            <div class="field-readonly"><i class="fas fa-store" style="color:var(--acento)"></i><?=htmlspecialchars($orden['sucursal']??'—')?></div></div>
          <div class="form-group full"><label>Instrucciones del Cliente</label>
            <textarea name="instrucciones_cliente"><?=htmlspecialchars($orden['instrucciones_cliente']??'')?></textarea></div>
        </div>
      </div>
    </div>

    <!-- EQUIPO -->
    <?php if($equipo): ?>
    <div class="section">
      <div class="section-header"><i class="fas fa-laptop" style="color:var(--acento)"></i><span class="section-title">Equipo Recibido</span></div>
      <div class="section-body">
        <div class="form-grid col3">
          <div class="form-group"><label>Tipo de Equipo</label>
            <select name="tipo_de_equipo">
              <?php foreach($tipos as $t): ?>
              <option value="<?=htmlspecialchars($t['nombre_de_equipos'])?>" <?=$t['nombre_de_equipos']===$equipo['tipo_de_equipo']?'selected':''?>><?=htmlspecialchars($t['nombre_de_equipos'])?></option>
              <?php endforeach; ?>
            </select></div>
          <div class="form-group"><label>Marca</label>
            <select name="marca_de_equipo">
              <?php foreach($marcas as $m): ?>
              <option value="<?=htmlspecialchars($m['nombre_marcas'])?>" <?=$m['nombre_marcas']===$equipo['marca_de_equipo']?'selected':''?>><?=htmlspecialchars($m['nombre_marcas'])?></option>
              <?php endforeach; ?>
            </select></div>
          <div class="form-group"><label>Modelo</label>
            <input type="text" name="modelo_del_equipo" value="<?=htmlspecialchars($equipo['modelo_del_equipo']??'')?>"></div>
          <div class="form-group"><label>No. Serie</label>
            <input type="text" name="numero_de_serie_del_equipo" value="<?=htmlspecialchars($equipo['numero_de_serie_del_equipo']??'')?>"></div>
          <div class="form-group"><label>Estado Físico</label>
            <input type="text" name="estado_fisico_de_recepcion" value="<?=htmlspecialchars($equipo['estado_fisico_de_recepcion']??'')?>"></div>
          <div class="form-group"><label>¿Prende?</label>
            <select name="prende_completamente">
              <?php foreach(['SI','NO','PARCIAL'] as $op): ?>
              <option value="<?=$op?>" <?=$op===$equipo['prende_completamente']?'selected':''?>><?=$op?></option>
              <?php endforeach; ?>
            </select></div>
          <div class="form-group"><label>Contraseña/Patrón</label>
            <input type="text" name="password" value="<?=htmlspecialchars($equipo['password']??'')?>"></div>
          <div class="form-group"><label>Solicita Respaldo</label>
            <select name="solicita_respaldo">
              <?php foreach(['NO','SI'] as $op): ?>
              <option value="<?=$op?>" <?=$op===$equipo['solicita_respaldo']?'selected':''?>><?=$op?></option>
              <?php endforeach; ?>
            </select></div>
          <div class="form-group full"><label>Argumento de la Falla</label>
            <textarea name="argumento_de_la_falla"><?=htmlspecialchars($equipo['argumento_de_la_falla']??'')?></textarea></div>
        </div>
      </div>
    </div>
    <?php endif; ?>

    <!-- ACCESORIOS -->
    <div class="section">
      <div class="section-header"><i class="fas fa-boxes" style="color:var(--acento)"></i><span class="section-title">Accesorios</span></div>
      <div class="section-body">
        <div class="form-group" style="margin-bottom:14px">
          <label>¿El equipo trae accesorios?</label>
          <div class="toggle-group">
            <div class="toggle-opt <?=$orden['equipo_con_accesorios']==='SI'?'si':''?>" id="togSI" onclick="setAcc('SI')"><i class="fas fa-check-circle" style="margin-right:5px"></i>SÍ</div>
            <div class="toggle-opt <?=$orden['equipo_con_accesorios']!=='SI'?'no':''?>" id="togNO" onclick="setAcc('NO')"><i class="fas fa-times-circle" style="margin-right:5px"></i>NO</div>
          </div>
          <input type="hidden" name="equipo_con_accesorios" id="hidAcc" value="<?=htmlspecialchars($orden['equipo_con_accesorios']??'NO')?>">
        </div>
        <div id="secAcc" style="display:<?=$orden['equipo_con_accesorios']==='SI'?'block':'none'?>">
          <div style="background:#F0F8FF;border:1px solid var(--borde);border-radius:10px;padding:14px">
            <div style="font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--azul);margin-bottom:10px"><i class="fas fa-list" style="margin-right:6px;color:var(--acento)"></i>Lista de Accesorios</div>
            <div id="listaAcc">
              <?php foreach($accesorios as $i=>$acc): ?>
              <div class="acc-row">
                <div>
                  <label style="margin-bottom:4px;display:block">Accesorio</label>
                  <select name="acc_nombre[]" style="width:100%">
                    <option value="">— Seleccionar —</option>
                    <?php foreach($accesoriosCat as $cat): ?>
                    <option value="<?=htmlspecialchars($cat['name'])?>" <?=$cat['name']===$acc['accesorio_recibido']?'selected':''?>><?=htmlspecialchars($cat['name'])?></option>
                    <?php endforeach; ?>
                  </select>
                </div>
                <div>
                  <label style="margin-bottom:4px;display:block">No. Serie / Descripción</label>
                  <input type="text" name="acc_serie[]" value="<?=htmlspecialchars($acc['numero_de_serie_de_accesorio']??'')?>" placeholder="S/N o descripción">
                </div>
                <button type="button" class="btn-del" onclick="this.parentElement.remove()"><i class="fas fa-trash"></i></button>
              </div>
              <?php endforeach; ?>
            </div>
            <button type="button" class="btn-add" onclick="agregarAcc()"><i class="fas fa-plus-circle"></i> Agregar accesorio</button>
          </div>
        </div>
      </div>
    </div>

    <!-- FOTOS EVIDENCIA (solo lectura) -->
    <?php
    $fotos=[];
    for($f=1;$f<=4;$f++){
        $col='evidencia_recibido_'.$f;
        if(!empty($equipo[$col])) $fotos[]=$equipo[$col];
    }
    if($fotos): ?>
    <div class="section">
      <div class="section-header"><i class="fas fa-camera" style="color:var(--acento)"></i><span class="section-title">Evidencia Fotográfica <span style="font-size:11px;font-weight:400;color:var(--muted)">(solo lectura)</span></span></div>
      <div class="section-body">
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px">
          <?php foreach($fotos as $i=>$fv): ?>
          <div>
            <img src="<?=htmlspecialchars($fv)?>" 
                 style="width:100%;height:130px;object-fit:cover;border-radius:10px;border:2px solid var(--borde);cursor:pointer;transition:transform .2s"
                 onclick="document.getElementById('lb').classList.add('open');document.getElementById('lbImg').src=this.src"
                 onerror="this.parentElement.style.display='none'"
                 alt="Evidencia <?=($i+1)?>"
                 onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform=''">
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
    <?php endif; ?>

    <!-- FIRMA (solo lectura) -->
    <?php if(!empty($orden['firma_cliente']) && strlen($orden['firma_cliente'])>10): ?>
    <div class="section">
      <div class="section-header"><i class="fas fa-signature" style="color:var(--acento)"></i><span class="section-title">Firma del Cliente <span style="font-size:11px;font-weight:400;color:var(--muted)">(solo lectura)</span></span></div>
      <div class="section-body">
        <div style="background:#F5FAFF;border:1.5px solid var(--borde);border-radius:10px;padding:12px;display:inline-block">
          <img src="<?=htmlspecialchars($orden['firma_cliente'])?>" 
               style="max-width:100%;max-height:180px;display:block;border-radius:6px;background:#fff"
               alt="Firma del cliente">
        </div>
        <p style="font-size:11px;color:var(--muted);margin-top:8px"><i class="fas fa-lock" style="margin-right:4px"></i>La firma no puede modificarse desde edición.</p>
      </div>
    </div>
    <?php endif; ?>

    <div style="display:flex;gap:12px;flex-wrap:wrap;padding-top:8px">
      <button type="submit" class="btn-save"><i class="fas fa-save"></i> Guardar Cambios</button>
      <a href="ver_orden.php?id=<?=$id?>" class="btn-cancel"><i class="fas fa-times"></i> Cancelar</a>
    </div>

    <!-- Lightbox fotos -->
    <div id="lb" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;align-items:center;justify-content:center" onclick="this.style.display='none'">
      <button style="position:absolute;top:14px;right:18px;color:#fff;font-size:28px;cursor:pointer;background:none;border:none" onclick="document.getElementById('lb').style.display='none'">&#10005;</button>
      <img id="lbImg" src="" style="max-width:92vw;max-height:90vh;border-radius:8px;object-fit:contain" alt="">
    </div>
    </form>
  </div>
</div>

<script>
const accesoriosCat = <?=json_encode(array_column($accesoriosCat,'name'))?>;

function setAcc(val){
  document.getElementById('hidAcc').value=val;
  document.getElementById('secAcc').style.display=val==='SI'?'block':'none';
  document.getElementById('togSI').className='toggle-opt'+(val==='SI'?' si':'');
  document.getElementById('togNO').className='toggle-opt'+(val==='NO'?' no':'');
  if(val==='SI' && document.getElementById('listaAcc').children.length===0) agregarAcc();
}

function agregarAcc(){
  const lista=document.getElementById('listaAcc');
  const div=document.createElement('div');
  div.className='acc-row';
  const opts=accesoriosCat.map(a=>`<option value="${a}">${a}</option>`).join('');
  div.innerHTML=`
    <div><label style="margin-bottom:4px;display:block;font-family:'Exo 2',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)">Accesorio</label>
      <select name="acc_nombre[]" style="width:100%;padding:10px 12px;background:#F5FAFF;border:1.5px solid var(--borde);border-radius:8px;font-size:14px;outline:none">
        <option value="">— Seleccionar —</option>${opts}
      </select></div>
    <div><label style="margin-bottom:4px;display:block;font-family:'Exo 2',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)">No. Serie</label>
      <input type="text" name="acc_serie[]" placeholder="S/N o descripción"
             style="width:100%;padding:10px 12px;background:#F5FAFF;border:1.5px solid var(--borde);border-radius:8px;font-size:14px;outline:none"></div>
    <button type="button" class="btn-del" onclick="this.parentElement.remove()"><i class="fas fa-trash"></i></button>`;
  lista.appendChild(div);
}
</script>
<?php include __DIR__."/theme.php"; ?>
</body></html>