<?php $__env->startSection('title', 'Materias y Asignaciones'); ?>
<?php $__env->startSection('page-title', 'Materias y Asignación de Docentes'); ?>

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

<div class="grid grid-2" style="gap:24px;align-items:start;">

    
    <div>
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
            <h3 style="font-size:15px;font-weight:700;">Materias / Cursos (<?php echo e($materias->count()); ?>)</h3>
            <button onclick="document.getElementById('modal-mat').style.display='flex'" class="btn btn-primary btn-sm">
                <i class="fas fa-plus"></i> Nueva Materia
            </button>
        </div>

        <div class="card">
            <div class="table-wrapper">
                <table>
                    <thead><tr><th>Materia</th><th>Código</th><th>Nivel</th><th>H/sem</th><th>Asignaciones</th><th style="text-align:center;">Acc.</th></tr></thead>
                    <tbody>
                    <?php $__empty_1 = true; $__currentLoopData = $materias; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td>
                                <div style="display:flex;align-items:center;gap:10px;">
                                    <div style="width:10px;height:10px;border-radius:50%;background:<?php echo e($m->color); ?>;flex-shrink:0;"></div>
                                    <span style="font-weight:600;"><?php echo e($m->nombre); ?></span>
                                </div>
                            </td>
                            <td style="font-family:monospace;font-size:12px;"><?php echo e($m->codigo); ?></td>
                            <td><span class="badge badge-secondary" style="font-size:11px;"><?php echo e(ucfirst($m->nivel)); ?></span></td>
                            <td style="text-align:center;font-weight:700;"><?php echo e($m->horas_semanales); ?>h</td>
                            <td style="text-align:center;"><?php echo e($m->asignaciones_count); ?></td>
                            <td>
                                <div style="display:flex;gap:5px;justify-content:center;">
                                    <button onclick="editarMateria(<?php echo e($m->id); ?>,'<?php echo e(addslashes($m->nombre)); ?>','<?php echo e($m->codigo); ?>','<?php echo e($m->nivel); ?>',<?php echo e($m->horas_semanales); ?>,'<?php echo e($m->color); ?>')"
                                        class="btn btn-sm btn-secondary btn-icon"><i class="fas fa-edit"></i></button>
                                    <form method="POST" action="<?php echo e(route('materias.destroy', $m)); ?>" onsubmit="return confirm('¿Desactivar?')">
                                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                        <button class="btn btn-sm btn-danger btn-icon <?php echo e(!$m->activo ? 'btn-secondary' : ''); ?>">
                                            <i class="fas fa-<?php echo e($m->activo ? 'eye-slash' : 'eye'); ?>"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr><td colspan="6" style="text-align:center;padding:32px;color:var(--muted);">Sin materias</td></tr>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    
    <div>
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
            <h3 style="font-size:15px;font-weight:700;">Asignaciones <?php echo e($anio); ?> (<?php echo e($asignaciones->count()); ?>)</h3>
            <button onclick="document.getElementById('modal-asig').style.display='flex'" class="btn btn-primary btn-sm">
                <i class="fas fa-plus"></i> Asignar Docente
            </button>
        </div>

        <div class="card">
            <div style="max-height:480px;overflow-y:auto;">
                <?php $__empty_1 = true; $__currentLoopData = $asignaciones; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $a): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div style="display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);">
                    <div style="width:10px;height:10px;border-radius:50%;background:<?php echo e($a->materia->color ?? '#3b82f6'); ?>;flex-shrink:0;"></div>
                    <div style="flex:1;min-width:0;">
                        <div style="font-weight:600;font-size:13px;"><?php echo e($a->materia->nombre ?? '—'); ?></div>
                        <div style="font-size:11px;color:var(--muted);">
                            <?php echo e($a->seccion->grado->nombre ?? ''); ?> · Sec. <?php echo e($a->seccion->nombre ?? ''); ?>

                        </div>
                        <div style="font-size:11px;color:var(--primary-l);margin-top:2px;">
                            <i class="fas fa-user-tie"></i> <?php echo e($a->personal->nombre_completo ?? '—'); ?>

                        </div>
                    </div>
                    <form method="POST" action="<?php echo e(route('asignaciones.destroy', $a)); ?>">
                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                        <button class="btn btn-sm btn-danger btn-icon"><i class="fas fa-unlink"></i></button>
                    </form>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div style="padding:32px;text-align:center;color:var(--muted);">Sin asignaciones para <?php echo e($anio); ?></div>
                <?php endif; ?>
            </div>
        </div>
    </div>

</div>


<div id="modal-mat" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;align-items:center;justify-content:center;">
    <div style="background:white;border-radius:16px;padding:28px;width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3);">
        <div style="display:flex;justify-content:space-between;margin-bottom:20px;">
            <h3 id="modal-mat-title" style="font-size:16px;font-weight:700;">Nueva Materia</h3>
            <button onclick="document.getElementById('modal-mat').style.display='none'" style="background:none;border:none;font-size:18px;cursor:pointer;">✕</button>
        </div>
        <form id="form-mat" method="POST" action="<?php echo e(route('materias.store')); ?>">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="_method" id="mat-method" value="POST">
            <div class="grid grid-2">
                <div class="form-group">
                    <label class="form-label">Nombre *</label>
                    <input type="text" name="nombre" id="mat-nombre" class="form-control" required placeholder="Matemáticas">
                </div>
                <div class="form-group">
                    <label class="form-label">Código *</label>
                    <input type="text" name="codigo" id="mat-codigo" class="form-control" required placeholder="MAT01">
                </div>
            </div>
            <div class="grid grid-2">
                <div class="form-group">
                    <label class="form-label">Nivel</label>
                    <select name="nivel" id="mat-nivel" class="form-control">
                        <option value="todos">Todos</option>
                        <option value="inicial">Inicial</option>
                        <option value="primaria">Primaria</option>
                        <option value="secundaria">Secundaria</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Horas semanales</label>
                    <input type="number" name="horas_semanales" id="mat-horas" class="form-control" min="1" value="4">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Color identificador</label>
                <div style="display:flex;gap:8px;flex-wrap:wrap;">
                    <?php $__currentLoopData = ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#06b6d4','#ec4899','#f97316','#84cc16','#64748b']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <label style="cursor:pointer;">
                        <input type="radio" name="color" value="<?php echo e($c); ?>" style="display:none;" <?php echo e($c==='#3b82f6'?'checked':''); ?>>
                        <div style="width:28px;height:28px;border-radius:8px;background:<?php echo e($c); ?>;border:3px solid transparent;" onclick="marcarColor(this,'<?php echo e($c); ?>')"></div>
                    </label>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px;">
                <button type="button" onclick="document.getElementById('modal-mat').style.display='none'" class="btn btn-secondary">Cancelar</button>
                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Guardar</button>
            </div>
        </form>
    </div>
</div>


<div id="modal-asig" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;align-items:center;justify-content:center;">
    <div style="background:white;border-radius:16px;padding:28px;width:480px;box-shadow:0 20px 60px rgba(0,0,0,.3);">
        <div style="display:flex;justify-content:space-between;margin-bottom:20px;">
            <h3 style="font-size:16px;font-weight:700;">Asignar Docente a Materia/Sección</h3>
            <button onclick="document.getElementById('modal-asig').style.display='none'" style="background:none;border:none;font-size:18px;cursor:pointer;">✕</button>
        </div>
        <form method="POST" action="<?php echo e(route('asignaciones.store')); ?>">
            <?php echo csrf_field(); ?>
            <div class="form-group">
                <label class="form-label">Docente *</label>
                <select name="personal_id" class="form-control" required>
                    <option value="">Seleccionar docente...</option>
                    <?php $__currentLoopData = $docentes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $d): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($d->id); ?>"><?php echo e($d->nombre_completo); ?> — <?php echo e($d->especialidad ?? 'Sin especialidad'); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Materia *</label>
                <select name="materia_id" class="form-control" required>
                    <option value="">Seleccionar materia...</option>
                    <?php $__currentLoopData = $materias->where('activo',true); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($m->id); ?>"><?php echo e($m->nombre); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Sección *</label>
                <select name="seccion_id" class="form-control" required>
                    <option value="">Seleccionar sección...</option>
                    <?php $__currentLoopData = $secciones; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($s->id); ?>"><?php echo e($s->grado->nombre); ?> — Sec. <?php echo e($s->nombre); ?> (<?php echo e(ucfirst($s->turno)); ?>)</option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Año Escolar</label>
                <select name="anio_escolar" class="form-control">
                    <?php for($y=date('Y');$y>=2020;$y--): ?>
                    <option value="<?php echo e($y); ?>" <?php echo e($anio==$y?'selected':''); ?>><?php echo e($y); ?></option>
                    <?php endfor; ?>
                </select>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px;">
                <button type="button" onclick="document.getElementById('modal-asig').style.display='none'" class="btn btn-secondary">Cancelar</button>
                <button type="submit" class="btn btn-primary"><i class="fas fa-check"></i> Asignar</button>
            </div>
        </form>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
const matRouteBase = "<?php echo e(url('materias')); ?>";
function editarMateria(id,nombre,codigo,nivel,horas,color) {
    document.getElementById('modal-mat-title').textContent = 'Editar Materia';
    document.getElementById('form-mat').action = matRouteBase + '/' + id;
    document.getElementById('mat-method').value  = 'PUT';
    document.getElementById('mat-nombre').value  = nombre;
    document.getElementById('mat-codigo').value  = codigo;
    document.getElementById('mat-nivel').value   = nivel;
    document.getElementById('mat-horas').value   = horas;
    document.getElementById('modal-mat').style.display = 'flex';
}
function marcarColor(el, color) {
    document.querySelectorAll('[name="color"]').forEach(r => r.closest('label').querySelector('div').style.border = '3px solid transparent');
    el.style.border = '3px solid #1e3a8a';
    document.querySelector(`input[value="${color}"]`).checked = true;
}
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\CRMyERP\crm-colegio\resources\views/materias/index.blade.php ENDPATH**/ ?>