
<?php $__env->startSection('title', 'Hoja de Tiempo — ' . $hojaTiempo->empleado->nombre); ?>

<?php $__env->startPush('styles'); ?>
<style>
    /* Sin sidebar solo para empleados — SST/supervisor mantienen sidebar */
    <?php if(!Auth::user()->puedeVerReportes() && !Auth::user()->esSupervisor()): ?>
    .sidebar-wrap { display: none !important; }
    .main-content  { margin-left: 0 !important; }
    <?php endif; ?>

    .grilla-wrapper {
        width:100%; display:block; overflow-x:auto; overflow-y:auto;
        max-height:65vh; -webkit-overflow-scrolling:touch; position:relative;
    }
    .tabla-grilla { font-size:.78rem; border-collapse:separate; border-spacing:0; }
    .tabla-grilla th { white-space:nowrap; vertical-align:middle; text-align:center; }
    .tabla-grilla td { vertical-align:middle; padding:3px 4px; }

    /* Columna CC fija */
    .tabla-grilla th.th-cc,
    .tabla-grilla td.th-cc {
        position:sticky; left:0; z-index:3; min-width:140px; max-width:170px;
        background:#fff; border-right:2px solid #1a4f8a !important; font-size:.75rem;
    }
    .tabla-grilla thead th { position:sticky; top:0; z-index:2; background:#343a40; color:#fff; }
    .tabla-grilla thead th.th-cc { z-index:4; background:#343a40; color:#fff; }
    .tabla-grilla tfoot td { position:sticky; bottom:0; z-index:2; background:#e8f5e9; font-weight:700; }
    .tabla-grilla tfoot td.th-cc { z-index:3; background:#e8f5e9; }

    .th-dia     { width:44px; min-width:44px; }
    .th-totales { background:#e8f5e9 !important; color:#1b5e20; }
    .td-festivo { background:#fff3e0 !important; }
    .td-domingo { background:#fce4ec !important; }
    .td-sabado  { background:#c8e6c9 !important; }

    /* Identificar S / D / Festivo también en los TÍTULOS (encabezado) */
    .tabla-grilla thead th.td-festivo { background:#ffe0b2 !important; color:#bf360c !important; }
    .tabla-grilla thead th.td-domingo { background:#f8bbd0 !important; color:#880e4f !important; }
    .tabla-grilla thead th.td-sabado  { background:#a5d6a7 !important; color:#1b5e20 !important; }
    .tabla-grilla thead th .dia-num { font-weight:800; font-size:.82rem; }
    .tabla-grilla thead th .dia-letra { font-weight:800; font-size:.7rem; letter-spacing:.5px; }
    .tabla-grilla thead th.td-festivo .dia-letra,
    .tabla-grilla thead th.td-domingo .dia-letra,
    .tabla-grilla thead th.td-sabado  .dia-letra { text-decoration:underline; }
    /* Títulos del pie (TOTAL DÍA) y de totales más oscuros/notables */
    .tabla-grilla tfoot td.th-cc { color:#1b5e20; font-weight:800; }
    .tabla-grilla thead th.th-totales { color:#fff !important; background:#1b5e20 !important; font-weight:800; }

    /* Día que excede el tope de horas */
    .total-dia-cell.sobre-tope { background:#ffcdd2 !important; color:#b71c1c; font-weight:800; }
    .input-h.sobre-tope { border-color:#d32f2f !important; background:#ffebee !important; }

    .tabla-grilla tr.fila-exenta td.th-cc { background:#e3f2fd; }

    .input-h {
        width:40px; border:1px solid #ccc; border-radius:3px;
        text-align:center; padding:2px 1px; font-size:.78rem; background:transparent;
    }
    .input-h:focus { border-color:#1a4f8a; outline:none; box-shadow:0 0 0 2px #1a4f8a22; }
    .input-h.changed { background:#fffde7; border-color:#f9a825; }
    .tr-total { background:#e8f5e9; font-weight:700; }
    .btn-comentario { padding:0 2px; font-size:.68rem; line-height:1; }
    .has-comentario { color:#f57c00; }

    /* Fila agregar CC */
    .fila-agregar td { background:#f8f9fa; border-top:2px dashed #ccc !important; }
    .btn-agregar-cc {
        background:none; border:1px dashed #1a4f8a; color:#1a4f8a;
        border-radius:6px; padding:3px 12px; font-size:.78rem; cursor:pointer;
        display:inline-flex; align-items:center; gap:4px; transition:.15s;
    }
    .btn-agregar-cc:hover { background:#e8f0fd; }
    .select-cc-inline {
        border:1px solid #1a4f8a; border-radius:6px; padding:3px 8px;
        font-size:.78rem; max-width:220px; display:none;
    }

    @media(max-width:767px){
        .tabla-grilla { font-size:.7rem; }
        .tabla-grilla th.th-cc,.tabla-grilla td.th-cc { min-width:100px; max-width:120px; font-size:.68rem; }
        .input-h { width:34px; font-size:.7rem; padding:1px; }
        .th-dia { width:36px; min-width:36px; }
        .grilla-wrapper { max-height:58vh; }
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>

<?php
    // Solo mostrar filas de CCs que ya tienen entradas
    $ccsConEntradas = $grilla['centros_costo']->filter(
        fn($cc) => $grilla['entradas']->has($cc->id)
    );
    // Todos los CCs disponibles → JSON para el dropdown
    $ccsTodosJson = $grilla['centros_costo']->map(fn($cc) => [
        'id'       => $cc->id,
        'nombre'   => $cc->nombre,
        'es_exento'=> (bool)$cc->es_exento,
    ])->values();
    // Fechas con info de día para el JS
    $fechasJson = collect($grilla['fechas'])->map(function($f) use ($grilla) {
        $cal  = $grilla['calendario']->get($f);
        $dow  = $cal ? (int)$cal->dia_semana : \Carbon\Carbon::parse($f)->dayOfWeek;
        $fest = $cal ? (bool)$cal->es_festivo : false;
        return ['fecha'=>$f, 'dow'=>$dow, 'fest'=>$fest, 'dia'=>\Carbon\Carbon::parse($f)->day];
    })->values();
    $readonly = $hojaTiempo->estado === 'aprobado';
    $diasSem = ['D','L','M','X','J','V','S'];
    // Equivalentes: pesos sólo para supervisores; horas para los demás usuarios
    $isSup = Auth::user()->esSupervisor();
    $equivCC = $resumen['distribucion']->keyBy('id');
?>


<div class="d-flex justify-content-between align-items-start mb-3 no-print flex-wrap gap-2">
    <div>
        <h5 class="mb-0">
            <a href="<?php echo e(route('hojas-tiempo.index', ['periodo_id'=>$hojaTiempo->periodo_id])); ?>"
               class="text-decoration-none me-2"><i class="bi bi-arrow-left"></i></a>
            <span class="d-none d-md-inline">Hoja de Tiempo — </span>
            <strong><?php echo e($hojaTiempo->empleado->nombre); ?></strong>
        </h5>
        <small class="text-muted">
            C.C: <?php echo e($hojaTiempo->empleado->cedula); ?>

            &nbsp;|&nbsp; <?php echo e($hojaTiempo->periodo->nombre_completo); ?>

            &nbsp;|&nbsp;
            <?php $ec = ['borrador'=>'secondary','enviado'=>'warning','aprobado'=>'success'][$hojaTiempo->estado]; ?>
            <span class="badge bg-<?php echo e($ec); ?>"><?php echo e(strtoupper($hojaTiempo->estado)); ?></span>
        </small>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <?php if(!$readonly): ?>
        <button id="btnGuardar" class="btn btn-sm btn-primary">
            <i class="bi bi-save me-1"></i><span class="d-none d-sm-inline">Guardar</span>
        </button>
        <?php endif; ?>
        <?php if(Auth::user()->esSupervisor()): ?>
            <?php if($hojaTiempo->estado === 'enviado'): ?>
            <form action="<?php echo e(route('hojas-tiempo.aprobar', $hojaTiempo)); ?>" method="POST" class="d-inline">
                <?php echo csrf_field(); ?> <button class="btn btn-sm btn-success"><i class="bi bi-check-lg"></i></button>
            </form>
            <?php endif; ?>
            <?php if(in_array($hojaTiempo->estado, ['enviado','aprobado'])): ?>
            <form action="<?php echo e(route('hojas-tiempo.devolver', $hojaTiempo)); ?>" method="POST" class="d-inline">
                <?php echo csrf_field(); ?>
                <button class="btn btn-sm btn-outline-secondary"
                        onclick="return confirm('¿Devolver a borrador?')">
                    <i class="bi bi-arrow-counterclockwise"></i>
                </button>
            </form>
            <?php endif; ?>
            
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="bi bi-trash"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <form action="<?php echo e(route('hojas-tiempo.limpiar', $hojaTiempo)); ?>" method="POST">
                            <?php echo csrf_field(); ?>
                            <button class="dropdown-item text-warning"
                                    onclick="return confirm('¿Limpiar todas las entradas? La hoja vuelve a borrador.')">
                                <i class="bi bi-eraser me-1"></i> Limpiar entradas
                            </button>
                        </form>
                    </li>
                    <li>
                        <form action="<?php echo e(route('hojas-tiempo.eliminar', $hojaTiempo)); ?>" method="POST">
                            <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                            <button class="dropdown-item text-danger"
                                    onclick="return confirm('¿ELIMINAR esta hoja de tiempo? Esta acción no se puede deshacer.')">
                                <i class="bi bi-trash3 me-1"></i> Eliminar hoja
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        <?php endif; ?>
    </div>
</div>


<?php if(!Auth::user()->esSupervisor()): ?>
<?php
    $banners = [
        'borrador'=>['bg'=>'#e3f2fd','border'=>'#1565c0','ico'=>'bi-pencil-fill','color'=>'#1565c0',
            'msg'=>'Tu hoja está en borrador. Registra tus horas y usa <strong>Guardar</strong> cuando termines.'],
        'enviado' =>['bg'=>'#fff9c4','border'=>'#f57f17','ico'=>'bi-hourglass-split','color'=>'#f57f17',
            'msg'=>'Tu hoja fue enviada y está <strong>pendiente de aprobación</strong>. No puedes editarla.'],
        'aprobado'=>['bg'=>'#e8f5e9','border'=>'#2e7d32','ico'=>'bi-check-circle-fill','color'=>'#2e7d32',
            'msg'=>'Tu hoja ha sido <strong>aprobada</strong>. No requiere ninguna acción adicional.'],
    ];
    $b = $banners[$hojaTiempo->estado] ?? null;
?>
<?php if($b): ?>
<div class="mb-3 px-3 py-2 rounded-3 d-flex align-items-start gap-2"
     style="background:<?php echo e($b['bg']); ?>;border-left:4px solid <?php echo e($b['border']); ?>">
    <i class="bi <?php echo e($b['ico']); ?> mt-1" style="color:<?php echo e($b['color']); ?>;font-size:16px;flex-shrink:0"></i>
    <span style="font-size:14px;color:#333"><?php echo $b['msg']; ?></span>
</div>
<?php endif; ?>
<?php endif; ?>


<?php
    $hoy = \Carbon\Carbon::today()->format('Y-m-d');
    $horasHoy = 0;
    foreach($grilla['centros_costo'] as $_cc) {
        $_e = $grilla['entradas']->get($_cc->id, collect())->get($hoy);
        $horasHoy += $_e ? $_e->horas : 0;
    }
    $dentroDelPeriodo = $hoy >= $hojaTiempo->periodo->fecha_inicio->format('Y-m-d')
                     && $hoy <= $hojaTiempo->periodo->fecha_fin->format('Y-m-d');
    $esHabilHoy = !in_array(\Carbon\Carbon::today()->dayOfWeek, [0, 6]);
    $esFestivoHoy = \App\Models\Calendario::where('fecha', $hoy)->where('es_festivo', true)->exists();
?>
<?php if(!$readonly && $dentroDelPeriodo && $esHabilHoy && !$esFestivoHoy && $horasHoy == 0): ?>
<div class="alert mb-3 d-flex align-items-start gap-2 no-print"
     style="background:#fff3e0;border-left:4px solid #f57c00;border-radius:8px;padding:12px 16px">
    <i class="bi bi-clock-history mt-1" style="color:#f57c00;font-size:18px;flex-shrink:0"></i>
    <div>
        <strong style="color:#e65100">
            No ha registrado horas hoy (<?php echo e(\Carbon\Carbon::today()->isoFormat('dddd D [de] MMMM')); ?>).
        </strong><br>
        <span style="font-size:13px;color:#555">
            Recuerde diligenciar su hoja de tiempo <strong>diariamente</strong>.
            Agregue los centros de costo donde trabajó hoy e ingrese las horas correspondientes.
        </span>
    </div>
</div>
<?php endif; ?>


<div class="row g-2 mb-3">
    <div class="col-6 col-md-3">
        <div class="card text-center p-2">
            <div class="fs-4 fw-bold text-primary" id="stat-total"><?php echo e(number_format($resumen['total_horas'],1)); ?></div>
            <div class="text-muted" style="font-size:.72rem">Total horas</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center p-2">
            <div class="fs-4 fw-bold text-success" id="stat-productivas"><?php echo e(number_format($resumen['horas_productivas'],1)); ?></div>
            <div class="text-muted" style="font-size:.72rem">Productivas</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center p-2">
            <div class="fs-4 fw-bold text-info" id="stat-exentas"><?php echo e(number_format($resumen['horas_exentas'],1)); ?></div>
            <div class="text-muted" style="font-size:.72rem">Exentas</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center p-2">
            <div class="fs-4 fw-bold text-secondary">
                <?php echo e(number_format($resumen['horas_base'],0)); ?> h
            </div>
            <div class="text-muted" style="font-size:.72rem">Horas base del período</div>
        </div>
    </div>
</div>


<div id="avisoTope" class="alert alert-danger d-none align-items-start gap-2 no-print py-2 px-3" role="alert">
    <i class="bi bi-exclamation-triangle-fill mt-1"></i>
    <span id="avisoTopeTxt"></span>
</div>
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-grid me-1"></i> Ingreso de Horas</span>
        <span class="small fw-normal d-none d-sm-flex gap-1">
            <span class="badge" style="background:#fff3e0;color:#e65100">■ Festivo</span>
            <span class="badge" style="background:#fce4ec;color:#880e4f">■ Dom</span>
            <span class="badge" style="background:#c8e6c9;color:#1b5e20">■ Sáb</span>
        </span>
    </div>
    <div class="grilla-wrapper">
        <table class="table table-bordered tabla-grilla mb-0" id="tablaGrilla">
            <thead>
                <tr class="table-dark">
                    <th class="th-cc">CENTRO DE COSTO</th>
                    <?php $__currentLoopData = $grilla['fechas']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fecha): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $cal    = $grilla['calendario']->get($fecha);
                        $dow    = $cal ? $cal->dia_semana : \Carbon\Carbon::parse($fecha)->dayOfWeek;
                        $esFest = $cal ? $cal->es_festivo : false;
                        $thCls  = $esFest ? 'td-festivo' : ($dow===0 ? 'td-domingo' : ($dow===6 ? 'td-sabado' : ''));
                    ?>
                    <th class="th-dia <?php echo e($thCls); ?>" title="<?php echo e($fecha); ?>">
                        <div class="dia-num"><?php echo e(\Carbon\Carbon::parse($fecha)->day); ?></div>
                        <div class="dia-letra"><?php echo e($diasSem[$dow]); ?><?php echo e($esFest ? '*' : ''); ?></div>
                    </th>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <th class="th-totales" style="min-width:46px">TOT</th>
                    <th class="th-totales" style="min-width:40px">%</th>
                    <th class="th-totales" style="min-width:60px"><?php echo e($isSup ? 'Equiv $' : 'Equiv (h)'); ?></th>
                </tr>
            </thead>
            <tbody id="tbodyGrilla">
                
                <?php $__currentLoopData = $ccsConEntradas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $totalCC    = 0;
                    $entradasCC = $grilla['entradas']->get($cc->id, collect());
                ?>
                <tr class="<?php echo e($cc->es_exento ? 'fila-exenta' : ''); ?>"
                    data-cc="<?php echo e($cc->id); ?>" data-exento="<?php echo e($cc->es_exento ? '1' : '0'); ?>">
                    <td class="th-cc">
                        <span class="fw-semibold"><?php echo e($cc->nombre); ?></span>
                        <?php if($cc->es_exento): ?> <span class="badge badge-exento">ex</span> <?php endif; ?>
                        <?php $obsCC = ($grilla['observaciones'] ?? collect())->get($cc->id); ?>
                        <button type="button"
                                class="btn btn-link p-0 btn-obs-cc <?php echo e($obsCC ? 'has-obs' : ''); ?>"
                                data-cc="<?php echo e($cc->id); ?>" data-ccnombre="<?php echo e($cc->nombre); ?>"
                                title="Observación de uso del centro de costo"
                                style="font-size:.85rem;line-height:1;color:<?php echo e($obsCC ? '#e65100' : '#aaa'); ?>">
                            <i class="bi bi-journal-text"></i>
                        </button>
                    </td>
                    <?php $__currentLoopData = $grilla['fechas']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fecha): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $cal2    = $grilla['calendario']->get($fecha);
                        $dow2    = $cal2 ? $cal2->dia_semana : \Carbon\Carbon::parse($fecha)->dayOfWeek;
                        $esFest2 = $cal2 ? $cal2->es_festivo : false;
                        $tdCls   = $esFest2 ? 'td-festivo' : ($dow2===0 ? 'td-domingo' : ($dow2===6 ? 'td-sabado' : ''));
                        $entrada = $entradasCC->get($fecha);
                        $horas   = $entrada ? $entrada->horas : 0;
                        $totalCC += $horas;
                        $entId   = $entrada ? $entrada->id : null;
                    ?>
                    <td class="<?php echo e($tdCls); ?> text-center" data-fecha="<?php echo e($fecha); ?>">
                        <input type="number" step="0.1" min="0" max="24"
                               class="input-h hora-input"
                               data-cc="<?php echo e($cc->id); ?>" data-fecha="<?php echo e($fecha); ?>" data-entrada="<?php echo e($entId); ?>"
                               value="<?php echo e($horas > 0 ? $horas : ''); ?>"
                               <?php echo e($readonly ? 'readonly' : ''); ?>>
                        <?php if($entId): ?>
                        <button type="button"
                                class="btn btn-link btn-comentario p-0 btn-coment <?php echo e($entrada && $entrada->comentarios->count() ? 'has-comentario' : ''); ?>"
                                data-entrada="<?php echo e($entId); ?>" title="Comentario">
                            <i class="bi bi-chat-dots"></i>
                        </button>
                        <?php endif; ?>
                    </td>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <td class="th-totales text-center fw-bold total-cc" data-cc="<?php echo e($cc->id); ?>">
                        <?php echo e($totalCC > 0 ? number_format($totalCC,1) : ''); ?>

                    </td>
                    <td class="th-totales text-center pct-cc" data-cc="<?php echo e($cc->id); ?>">—</td>
                    <?php $eq = $equivCC->get($cc->id); ?>
                    <td class="th-totales text-center equiv-cc" data-cc="<?php echo e($cc->id); ?>">
                        <?php if($isSup): ?>
                            <?php echo e($eq ? '$ '.number_format($eq['equivalente_real'],0,'.',',') : '—'); ?>

                        <?php else: ?>
                            <?php echo e($totalCC > 0 ? number_format($totalCC,1).' h' : '—'); ?>

                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                
                <?php if(!$readonly): ?>
                <tr class="fila-agregar" id="filaAgregar">
                    <td class="th-cc" colspan="<?php echo e(count($grilla['fechas']) + 4); ?>">
                        <button class="btn-agregar-cc" id="btnMostrarSelect">
                            <i class="bi bi-plus-circle"></i> Agregar centro de costo
                        </button>
                        <select class="select-cc-inline" id="selectCC">
                            <option value="">— Seleccionar CC —</option>
                        </select>
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>

            <tfoot>
                <tr class="tr-total">
                    <td class="th-cc fw-bold">TOTAL DÍA</td>
                    <?php $__currentLoopData = $grilla['fechas']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fecha): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $totalDia = 0;
                        foreach($grilla['centros_costo'] as $cc2) {
                            $e2 = $grilla['entradas']->get($cc2->id, collect())->get($fecha);
                            $totalDia += $e2 ? $e2->horas : 0;
                        }
                    ?>
                    <td class="text-center total-dia-cell" data-fecha="<?php echo e($fecha); ?>">
                        <?php echo e($totalDia > 0 ? number_format($totalDia,1) : ''); ?>

                    </td>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <td class="text-center fw-bold" id="grand-total"><?php echo e(number_format($resumen['total_horas'],1)); ?></td>
                    <td colspan="2"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>


<?php if($resumen['distribucion']->count()): ?>
<div class="card mb-3">
    <div class="card-header"><i class="bi bi-pie-chart me-1"></i> Distribución por Centro de Costo</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Centro de Costo</th>
                        <th class="text-end">Horas</th>
                        <th class="text-end">%</th>
                        <th class="text-end"><?php echo e($isSup ? 'Equivalente ($)' : 'Equivalente (h)'); ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $resumen['distribucion']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dist): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td><?php echo e($dist['nombre']); ?></td>
                        <td class="text-end"><?php echo e(number_format($dist['horas'],2)); ?></td>
                        <td class="text-end"><?php echo e(number_format($dist['porcentaje'],2)); ?>%</td>
                        <td class="text-end">
                            <?php if($isSup): ?>
                                $ <?php echo e(number_format($dist['equivalente_real'],0,'.',',')); ?>

                            <?php else: ?>
                                <?php echo e(number_format($dist['horas'],1)); ?> h
                            <?php endif; ?>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?php endif; ?>


<div class="modal fade" id="modalComentario" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-chat-dots me-1"></i> Comentarios</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="lista-comentarios" class="mb-3"></div>
                <?php if(!$readonly): ?>
                <div class="input-group">
                    <input type="text" id="txt-comentario" class="form-control" placeholder="Agregar comentario...">
                    <button class="btn btn-primary" id="btn-enviar-comentario"><i class="bi bi-send"></i></button>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalObsCC" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title"><i class="bi bi-journal-text me-1"></i>
                    Observación — <span id="obs-cc-nombre"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <textarea id="txt-obs-cc" class="form-control" rows="4" maxlength="1000"
                          placeholder="Describa el uso de este centro de costo en el período..."
                          <?php echo e($readonly ? 'readonly' : ''); ?>></textarea>
                <div class="form-text">Vacío = elimina la observación. Máx. 1000 caracteres.</div>
            </div>
            <?php if(!$readonly): ?>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-sm btn-primary" id="btn-guardar-obs-cc">
                    <i class="bi bi-save me-1"></i> Guardar
                </button>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>

</div>


<div class="tab-pane fade" id="tabCompensatorios">
<div class="card mb-3" style="border-top-left-radius:0">
    <div class="card-header">
        <i class="bi bi-arrow-left-right me-1"></i> Compensatorios
    </div>
    <div class="card-body">
        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <div class="card text-center p-3 border-success">
                    <div class="fs-3 fw-bold text-success" id="comp-ganadas">
                        <?php echo e(number_format($resumen['horas_festivos'] ?? 0, 1)); ?> h
                    </div>
                    <div class="text-muted small">Horas ganadas<br>(Dom / Festivos trabajados)</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center p-3 border-info">
                    <div class="fs-3 fw-bold text-info" id="comp-tomadas">—</div>
                    <div class="text-muted small">Horas tomadas<br>(Compensatorios usados)</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center p-3">
                    <div class="fs-3 fw-bold" id="comp-saldo">—</div>
                    <div class="text-muted small">Saldo compensatorios</div>
                </div>
            </div>
        </div>

        <p class="text-muted small mb-3">
            <i class="bi bi-info-circle me-1"></i>
            Registra los días compensatorios tomados seleccionando la fecha y las horas.
            Para agregar, usa el botón <strong>"+ Agregar centro de costo"</strong> en la pestaña Horas
            y selecciona el CC <em>Compensatorio</em> (marcado como exento).
        </p>

        
        <?php
            $diasEspeciales = [];
            foreach($grilla['fechas'] as $fec) {
                $cal = $grilla['calendario']->get($fec);
                $dow = $cal ? (int)$cal->dia_semana : \Carbon\Carbon::parse($fec)->dayOfWeek;
                $fest = $cal ? (bool)$cal->es_festivo : false;
                if ($dow === 0 || $fest) {
                    $totalFec = 0;
                    foreach($grilla['centros_costo'] as $cc3) {
                        $e3 = $grilla['entradas']->get($cc3->id, collect())->get($fec);
                        $totalFec += $e3 ? $e3->horas : 0;
                    }
                    if ($totalFec > 0) {
                        $diasEspeciales[] = [
                            'fecha' => $fec,
                            'tipo'  => $fest ? 'Festivo' : 'Domingo',
                            'horas' => $totalFec,
                        ];
                    }
                }
            }
        ?>

        <?php if(count($diasEspeciales)): ?>
        <h6 class="mb-2">Dom / Festivos con horas registradas:</h6>
        <table class="table table-sm table-bordered">
            <thead class="table-light">
                <tr>
                    <th>Fecha</th><th>Tipo</th><th class="text-end">Horas trabajadas</th>
                </tr>
            </thead>
            <tbody>
                <?php $__currentLoopData = $diasEspeciales; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $de): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr>
                    <td><?php echo e(\Carbon\Carbon::parse($de['fecha'])->isoFormat('ddd D MMM')); ?></td>
                    <td><span class="badge <?php echo e($de['tipo']==='Festivo' ? 'bg-warning text-dark' : 'bg-danger'); ?>"><?php echo e($de['tipo']); ?></span></td>
                    <td class="text-end fw-bold"><?php echo e(number_format($de['horas'],1)); ?> h</td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
        <?php else: ?>
        <div class="alert alert-light text-muted">No hay domingos ni festivos trabajados en este período.</div>
        <?php endif; ?>
    </div>
</div>
</div>

</div>

<?php $__env->startPush('scripts'); ?>
<script>
const CSRF    = document.querySelector('meta[name="csrf-token"]').content;
const HOJA_ID = <?php echo e($hojaTiempo->id); ?>;
const URL_ENT = `/hojas-tiempo/${HOJA_ID}/entrada`;
const URL_LOTE= `/hojas-tiempo/${HOJA_ID}/lote`;
const READONLY = <?php echo e($readonly ? 'true' : 'false'); ?>;
const IS_SUP   = <?php echo e($isSup ? 'true' : 'false'); ?>;
const MAX_DIA  = <?php echo e((int)($resumen['max_horas_dia'] ?? 8)); ?>;
const MAX_SAB  = <?php echo e((int)($resumen['max_horas_sabado'] ?? 2)); ?>;
const VALIDAR_SAB = <?php echo e(($resumen['validar_sabados'] ?? true) ? 'true' : 'false'); ?>;
let currentEntradaId = null;

// ── Datos del servidor ──────────────────────────────────
const TODOS_CC = <?php echo json_encode($ccsTodosJson, 15, 512) ?>;
const FECHAS   = <?php echo json_encode($fechasJson, 15, 512) ?>;

// CCs ya mostrados en tabla
const ccUsados = new Set(
    [...document.querySelectorAll('tr[data-cc]')].map(tr => parseInt(tr.dataset.cc))
);

// ── Dropdown "Agregar CC" ───────────────────────────────
const btnMostrar = document.getElementById('btnMostrarSelect');
const selectCC   = document.getElementById('selectCC');

function poblarSelect() {
    selectCC.innerHTML = '<option value="">— Seleccionar CC —</option>';
    TODOS_CC.filter(cc => !ccUsados.has(cc.id)).forEach(cc => {
        const opt = document.createElement('option');
        opt.value = cc.id;
        opt.textContent = cc.nombre + (cc.es_exento ? ' (exento)' : '');
        opt.dataset.exento = cc.es_exento ? '1' : '0';
        selectCC.appendChild(opt);
    });
}

btnMostrar?.addEventListener('click', function() {
    poblarSelect();
    btnMostrar.style.display = 'none';
    selectCC.style.display   = 'inline-block';
    selectCC.focus();
});

selectCC?.addEventListener('change', function() {
    const id = parseInt(this.value);
    if (!id) return;
    const cc = TODOS_CC.find(c => c.id === id);
    if (!cc) return;
    agregarFilaCC(cc);
    selectCC.style.display   = 'none';
    btnMostrar.style.display = 'inline-flex';
    this.value = '';
});

selectCC?.addEventListener('blur', function() {
    if (!this.value) {
        this.style.display   = 'none';
        btnMostrar.style.display = 'inline-flex';
    }
});

function agregarFilaCC(cc) {
    if (ccUsados.has(cc.id)) return;
    ccUsados.add(cc.id);

    const clsRow = cc.es_exento ? 'fila-exenta' : '';
    const tr = document.createElement('tr');
    tr.className = clsRow;
    tr.dataset.cc     = cc.id;
    tr.dataset.exento = cc.es_exento ? '1' : '0';

    // Celda CC
    let html = `<td class="th-cc"><span class="fw-semibold">${cc.nombre}</span>`;
    if (cc.es_exento) html += ` <span class="badge badge-exento">ex</span>`;
    html += ` <button type="button" class="btn btn-link p-0 btn-obs-cc" data-cc="${cc.id}" data-ccnombre="${cc.nombre}"
                title="Observación de uso del centro de costo" style="font-size:.85rem;line-height:1;color:#aaa">
                <i class="bi bi-journal-text"></i></button>`;
    html += `</td>`;

    // Celdas de días
    FECHAS.forEach(f => {
        const cls = f.fest ? 'td-festivo' : (f.dow===0 ? 'td-domingo' : (f.dow===6 ? 'td-sabado' : ''));
        html += `<td class="${cls} text-center" data-fecha="${f.fecha}">
            <input type="number" step="0.1" min="0" max="24"
                   class="input-h hora-input"
                   data-cc="${cc.id}" data-fecha="${f.fecha}" data-entrada=""
                   value="">
        </td>`;
    });

    // Totales
    html += `<td class="th-totales text-center fw-bold total-cc" data-cc="${cc.id}"></td>`;
    html += `<td class="th-totales text-center pct-cc" data-cc="${cc.id}">—</td>`;
    html += `<td class="th-totales text-center equiv-cc" data-cc="${cc.id}">—</td>`;
    tr.innerHTML = html;

    // Insertar ANTES de la fila de agregar
    const filaAgregar = document.getElementById('filaAgregar');
    document.getElementById('tbodyGrilla').insertBefore(tr, filaAgregar);

    // Bind inputs de la nueva fila
    tr.querySelectorAll('.hora-input').forEach(bindInput);

    // Foco en primer input
    tr.querySelector('.hora-input')?.focus();
}

// ── Datos para validación de topes ──────────────────────
const VHORA = <?php echo e((float)($hojaTiempo->empleado->valor_hora_real ?? 0)); ?>;
const FECHA_INFO = {};
FECHAS.forEach(f => { FECHA_INFO[f.fecha] = { dow: f.dow, fest: f.fest }; });

function capDelDia(fecha) {
    const info = FECHA_INFO[fecha];
    if (!info) return null;
    if (info.fest || info.dow === 0) return null;       // Festivo / Domingo: sin tope (compensatorio)
    if (info.dow === 6) return VALIDAR_SAB ? MAX_SAB : null; // Sábado
    return MAX_DIA;                                      // Lunes a viernes
}

// ── Recálculo local instantáneo (sin red) ───────────────
function recomputarLocal() {
    // Productivas = suma de filas NO exentas
    let productivas = 0, totalGeneral = 0;
    document.querySelectorAll('tr[data-cc]').forEach(tr => {
        let sum = 0;
        tr.querySelectorAll('.hora-input').forEach(i => sum += parseFloat(i.value) || 0);
        totalGeneral += sum;
        if (tr.dataset.exento !== '1') productivas += sum;

        const ct = document.querySelector(`.total-cc[data-cc="${tr.dataset.cc}"]`);
        if (ct) ct.textContent = sum > 0 ? sum.toFixed(1) : '';
        // Equivalente: horas para empleados, pesos para supervisores
        const eq = document.querySelector(`.equiv-cc[data-cc="${tr.dataset.cc}"]`);
        if (eq) {
            if (IS_SUP) eq.textContent = sum > 0 ? '$ ' + Math.round(sum * VHORA).toLocaleString('es-CO') : '—';
            else        eq.textContent = sum > 0 ? sum.toFixed(1) + ' h' : '—';
        }
    });
    // Porcentajes (solo filas no exentas)
    document.querySelectorAll('tr[data-cc]').forEach(tr => {
        const pc = document.querySelector(`.pct-cc[data-cc="${tr.dataset.cc}"]`);
        if (!pc) return;
        if (tr.dataset.exento === '1') { pc.textContent = '—'; return; }
        let sum = 0;
        tr.querySelectorAll('.hora-input').forEach(i => sum += parseFloat(i.value) || 0);
        pc.textContent = productivas > 0 && sum > 0 ? ((sum / productivas) * 100).toFixed(1) + '%' : '—';
    });
    // Totales por día + grand total
    let gran = 0;
    document.querySelectorAll('.total-dia-cell').forEach(cel => {
        const fecha = cel.dataset.fecha;
        let sum = 0;
        document.querySelectorAll(`.hora-input[data-fecha="${fecha}"]`).forEach(i => sum += parseFloat(i.value) || 0);
        gran += sum;
        cel.textContent = sum > 0 ? sum.toFixed(1) : '';
    });
    const gt = document.getElementById('grand-total');
    if (gt) gt.textContent = totalGeneral.toFixed(1);
    document.getElementById('stat-total').textContent = totalGeneral.toFixed(1);
    document.getElementById('stat-productivas').textContent = productivas.toFixed(1);
    document.getElementById('stat-exentas').textContent = (totalGeneral - productivas).toFixed(1);

    chequearTopes();
}

// ── Validación de topes por día ─────────────────────────
function chequearTopes() {
    const excedidos = [];
    document.querySelectorAll('.total-dia-cell').forEach(cel => {
        const fecha = cel.dataset.fecha;
        const cap = capDelDia(fecha);
        const total = parseFloat(cel.textContent) || 0;
        const sobre = cap !== null && total > cap + 0.001;
        cel.classList.toggle('sobre-tope', sobre);
        // Resaltar inputs del día excedido
        document.querySelectorAll(`.hora-input[data-fecha="${fecha}"]`).forEach(i => {
            i.classList.toggle('sobre-tope', sobre);
        });
        if (sobre) {
            const d = new Date(fecha + 'T00:00:00');
            excedidos.push(`${d.getDate()}/${d.getMonth() + 1} (máx ${cap} h)`);
        }
    });
    const aviso = document.getElementById('avisoTope');
    const txt   = document.getElementById('avisoTopeTxt');
    if (excedidos.length) {
        txt.innerHTML = `Está excediendo las horas equivalentes de labor en: <strong>${excedidos.join(', ')}</strong>.`;
        aviso.classList.remove('d-none');
        aviso.classList.add('d-flex');
    } else {
        aviso.classList.add('d-none');
        aviso.classList.remove('d-flex');
    }
}

// ── Guardado en LOTE (un solo request) ──────────────────
let saveTimer = null;

function bindInput(input) {
    input.addEventListener('input', function() {
        if (READONLY) return;
        this.classList.add('changed');
        recomputarLocal();                 // refresco visual inmediato
        clearTimeout(saveTimer);
        saveTimer = setTimeout(guardarLote, 1200);  // autosave silencioso
    });
}
document.querySelectorAll('.hora-input').forEach(bindInput);

async function guardarLote(showSpinner = false) {
    if (READONLY) return;
    clearTimeout(saveTimer);
    const cambiados = [...document.querySelectorAll('.hora-input.changed')];
    if (!cambiados.length) return;

    const btn = document.getElementById('btnGuardar');
    if (showSpinner && btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
    }

    const entradas = cambiados.map(i => ({
        centro_costo_id: i.dataset.cc,
        fecha: i.dataset.fecha,
        horas: parseFloat(i.value) || 0
    }));

    try {
        const res = await fetch(URL_LOTE, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
            body: JSON.stringify({ entradas })
        });
        const data = await res.json();
        if (data.success) {
            cambiados.forEach(i => i.classList.remove('changed'));
            // Resumen autoritativo del servidor
            document.getElementById('stat-total').textContent       = parseFloat(data.resumen.total_horas).toFixed(1);
            document.getElementById('stat-productivas').textContent = parseFloat(data.resumen.horas_productivas).toFixed(1);
            document.getElementById('stat-exentas').textContent     = parseFloat(data.resumen.horas_exentas).toFixed(1);
        } else if (data.error) {
            alert(data.error);
        }
    } catch (e) {
        alert('No se pudo guardar. Verifique su conexión e intente nuevamente.');
    } finally {
        if (btn) {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-save me-1"></i><span class="d-none d-sm-inline">Guardar</span>';
        }
    }
}

document.getElementById('btnGuardar')?.addEventListener('click', () => guardarLote(true));

// Cálculo inicial al cargar (porcentajes, equivalentes, topes)
recomputarLocal();

// ── Comentarios ─────────────────────────────────────────
const modalComent = new bootstrap.Modal(document.getElementById('modalComentario'));

document.querySelectorAll('.btn-coment').forEach(btn => {
    btn.addEventListener('click', function() {
        currentEntradaId = this.dataset.entrada;
        cargarComentarios(currentEntradaId);
        modalComent.show();
    });
});

async function cargarComentarios(id) {
    const res  = await fetch(`/entradas/${id}/comentarios`);
    const list = await res.json();
    document.getElementById('lista-comentarios').innerHTML = list.length
        ? list.map(c => `<div class="border-bottom pb-2 mb-2">
            <div class="fw-semibold small">${c.autor} <span class="text-muted">${c.fecha}</span></div>
            <div>${c.comentario}</div></div>`).join('')
        : '<p class="text-muted small">Sin comentarios aún.</p>';
}

document.getElementById('btn-enviar-comentario')?.addEventListener('click', async function() {
    const txt = document.getElementById('txt-comentario').value.trim();
    if (!txt || !currentEntradaId) return;
    await fetch(`/entradas/${currentEntradaId}/comentar`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ comentario: txt })
    });
    document.getElementById('txt-comentario').value = '';
    cargarComentarios(currentEntradaId);
});

// ── Observaciones por centro de costo ───────────────────
const OBS_CC = <?php echo json_encode(($grilla['observaciones'] ?? collect())->map(fn($o) => $o->observacion), 15, 512) ?>;
const URL_OBS = "<?php echo e(route('hojas-tiempo.observacion-cc', $hojaTiempo)); ?>";
const modalObs = new bootstrap.Modal(document.getElementById('modalObsCC'));
let currentObsCC = null;

function bindObsBtn(btn) {
    btn.addEventListener('click', function() {
        currentObsCC = this.dataset.cc;
        document.getElementById('obs-cc-nombre').textContent = this.dataset.ccnombre;
        document.getElementById('txt-obs-cc').value = OBS_CC[currentObsCC] || '';
        modalObs.show();
    });
}
document.querySelectorAll('.btn-obs-cc').forEach(bindObsBtn);

document.getElementById('btn-guardar-obs-cc')?.addEventListener('click', async function() {
    if (!currentObsCC) return;
    const txt = document.getElementById('txt-obs-cc').value.trim();
    this.disabled = true;
    const res = await fetch(URL_OBS, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ centro_costo_id: currentObsCC, observacion: txt })
    });
    const data = await res.json();
    this.disabled = false;
    if (data.success) {
        if (txt) { OBS_CC[currentObsCC] = txt; } else { delete OBS_CC[currentObsCC]; }
        const btn = document.querySelector(`.btn-obs-cc[data-cc="${currentObsCC}"]`);
        if (btn) btn.style.color = txt ? '#e65100' : '#aaa';
        modalObs.hide();
    } else if (data.error) {
        alert(data.error);
    }
});
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/evolucionamos/public_html/ges-chronos/app/hoja-tiempo/resources/views/hojas-tiempo/show.blade.php ENDPATH**/ ?>