@extends('layouts.app')

@section('titulo', 'Crear Parte de Trabajo')

@section('contenido')
    <form action="{{ route('partes.store') }}" method="POST" id="parteForm">
        @csrf

        <div class="mb-4">
            <h6 class="text-muted border-bottom pb-2 mb-3">
                <i class="fas fa-map-marker-alt me-2"></i>
                Información del Lugar
            </h6>
            <div class="row g-3">
                <div class="col-md-6">
                    <label for="lugar_id" class="form-label">Lugar de trabajo *</label>
                    <select class="form-select" id="lugar_id" name="lugar_id" required>
                        <option value="">Seleccionar lugar...</option>
                        @foreach($lugares as $lugar)
                            <option value="{{ $lugar->id }}" {{ (string) old('lugar_id', '') === (string) $lugar->id ? 'selected' : '' }}>{{ $lugar->nombre }}</option>
                        @endforeach
                    </select>
                    <p class="small text-muted mt-1 mb-0">Dirección y población se guardan automáticamente según el lugar elegido.</p>
                </div>
                <div class="col-md-6">
                    <label for="fecha_parte" class="form-label">Fecha del parte *</label>
                    <input type="date" class="form-control" id="fecha_parte" name="fecha" required
                           value="{{ old('fecha', $fechaParteDefault) }}">
                </div>
            </div>
            <div class="row mt-3">
                {{-- Obra/Proyecto pasa a Opciones avanzadas --}}
            </div>
        </div>

        <div id="parte-bloque-trabajadores-y-mas" class="d-none">
        <div class="mb-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 border-bottom pb-2 mb-3">
                <h6 class="text-muted mb-0">
                    <i class="fas fa-users me-2"></i>
                    Seleccionar Trabajadores
                </h6>
            </div>
            <p class="small text-muted mb-2">Los trabajos pendientes se filtran por el lugar del parte.</p>
            <div class="mb-3">
                <label for="buscar-trabajador-select2" class="form-label">Buscar y añadir trabajador</label>
                <select id="buscar-trabajador-select2" class="form-select" data-buscar-url="{{ url('/partes/trabajadores/buscar') }}">
                    <option value=""></option>
                </select>
                <div class="small text-muted mt-1">Escribe al menos 2 caracteres y selecciona un resultado para añadirlo.</div>
            </div>
            <div class="mb-3">
                <div class="small text-muted mb-2">Trabajadores del grupo de trabajo pendientes</div>
                <div id="trabajadores-pendientes-container" class="d-flex flex-wrap gap-2"></div>
            </div>
            <div class="mb-3">
                <div class="small text-muted mb-2">Trabajadores seleccionados</div>
                <div id="trabajadores-seleccionados-container" class="d-flex flex-wrap gap-2"></div>
                <div id="trabajadores-hidden-inputs"></div>
            </div>
        </div>

        <div class="mb-4 d-none" id="trabajos-card">
            <h6 class="text-muted border-bottom pb-2 mb-3 d-flex flex-wrap align-items-center gap-2">
                <span><i class="fas fa-list me-2"></i>Trabajos pendientes de los trabajadores</span>
                <span class="badge bg-secondary rounded-pill" id="contador-trabajos" title="Registros incluidos en el parte">0</span>
            </h6>
            <div id="trabajos-container"></div>
        </div>

        <div class="mb-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 border-bottom pb-2 mb-3">
                <h6 class="text-muted mb-0">
                    <i class="fas fa-tools me-2"></i>
                    Materiales del Parte
                </h6>
                <button type="button" class="btn btn-sm btn-outline-primary" id="agregarMaterial">
                    <i class="fas fa-plus me-1"></i>
                    Agregar Material Adicional
                </button>
            </div>
            <div id="materiales-container"></div>
        </div>
        </div>

        <div class="mb-3">
            <a href="#" id="toggle-opciones-avanzadas" class="text-decoration-none">
                Opciones avanzadas
            </a>
            <div id="opciones-avanzadas-panel" class="border rounded p-3 mt-2 d-none">
                <div class="row g-3 mb-3">
                    <div class="col-12">
                        <label for="obra_id" class="form-label">Obra / Proyecto (opcional)</label>
                        <select class="form-select" id="obra_id" name="obra_id">
                            <option value="">— Sin obra —</option>
                        </select>
                        <div class="small text-muted mt-1">Se muestran las obras activas del lugar seleccionado.</div>
                    </div>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-12">
                        <label for="observaciones" class="form-label">Observaciones</label>
                        <textarea class="form-control" id="observaciones" name="observaciones" rows="3" placeholder="Observaciones adicionales sobre el trabajo...">{{ old('observaciones') }}</textarea>
                    </div>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="opt_parte_conjunto" name="opt_parte_conjunto" value="1">
                    <label class="form-check-label" for="opt_parte_conjunto">
                        Generar parte conjunto
                    </label>
                    <div class="small text-muted">Crea un único parte con la plantilla seleccionada.</div>
                </div>
                <div class="mt-2 d-none" id="panel-plantilla-conjunto">
                    <label class="form-label">Plantilla (conjunto)</label>
                    <select class="form-select" id="plantilla_conjunto_id" name="plantilla_conjunto_id">
                        <option value="">Seleccionar plantilla...</option>
                    </select>
                </div>

                <hr class="my-3">

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="opt_parte_por_empresa" name="opt_parte_por_empresa" value="1">
                    <label class="form-check-label" for="opt_parte_por_empresa">
                        Generar parte por empresa
                    </label>
                    <div class="small text-muted" id="texto-parte-por-empresa">Si hay trabajadores de varias empresas, podrás escoger plantilla por empresa.</div>
                </div>
                <div class="mt-2 d-none" id="panel-plantillas-por-empresa"></div>

                <input type="hidden" name="modo_parte" id="modo_parte" value="auto">
            </div>
        </div>

        <div class="d-flex justify-content-between flex-wrap gap-2 pt-3 border-top">
            <a href="{{ route('partes.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>
                Cancelar
            </a>
            <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                <i class="fas fa-save me-1"></i>
                Crear Parte
            </button>
        </div>
    </form>

<!-- Template para trabajadores -->
<template id="trabajador-template">
    <div class="row mb-3 trabajador-item">
        <div class="col-md-8">
            <label class="form-label">Trabajador</label>
            <select class="form-select trabajador-select" name="trabajadores[{index}][id]" required>
                <option value="">Seleccionar trabajador...</option>
                @foreach($trabajadores as $trabajador)
                    <option value="{{ $trabajador->id }}">
                        {{ $trabajador->nombre }} {{ $trabajador->primer_apellido }} {{ $trabajador->segundo_apellido }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4 d-flex align-items-end">
            <button type="button" class="btn btn-outline-danger btn-sm eliminar-trabajador d-none" tabindex="-1" aria-hidden="true">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </div>
</template>

<!-- Template para materiales adicionales -->
<template id="material-template">
    <div class="row mb-3 material-item material-adicional">
        <div class="col-md-3">
            <label class="form-label">Material</label>
            <select class="form-select" name="materiales_adicionales[{index}][material_id]" required>
                <option value="">Seleccionar material...</option>
                @foreach($materiales as $material)
                    <option value="{{ $material->id }}">{{ $material->nombre }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label">Cantidad</label>
            <input type="number" class="form-control" name="materiales_adicionales[{index}][cantidad]" min="1" required>
        </div>
        <div class="col-md-3">
            <label class="form-label">Observaciones</label>
            <input type="text" class="form-control" name="materiales_adicionales[{index}][observaciones]" placeholder="Observaciones opcionales">
        </div>
        <div class="col-md-2">
            <label class="form-label">Trabajador</label>
            <input type="text" class="form-control" value="Adicional" readonly>
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <button type="button" class="btn btn-outline-danger btn-sm eliminar-material">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </div>
</template>
@endsection

@section('boton')
    <div class="ms-auto">
        <a href="{{ route('partes.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            Volver a Partes
        </a>
    </div>
@endsection

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/es.js"></script>
<script>
function escapeHtml(text) {
    if (text == null || text === '') return '';
    const d = document.createElement('div');
    d.textContent = text;
    return d.innerHTML;
}
document.addEventListener('DOMContentLoaded', function() {
    const sugerenciaAutomatica = @json($sugerenciaAutomatica ?? false);
    const sugerenciaRegistrosUrl = @json(route('partes.sugerencia_registros_dia'));
    @php
        $plantillasDisponibles = ($plantillas ?? collect())
            ->map(function ($p) {
                return [
                    'id' => (int) $p->id,
                    'empresa_id' => (int) $p->empresa_id,
                    'empresa' => $p->empresa?->nombre_comercial ?? '',
                    'nombre' => $p->nombre,
                    'es_default' => (bool) $p->es_default,
                ];
            })
            ->values();
    @endphp
    const plantillasDisponibles = @json($plantillasDisponibles);

    let materialIndex = 0;
    let trabajosSeleccionados = new Set();
    let materialesTrabajos = new Map(); // Mapa para almacenar materiales por trabajo
    let trabajadoresSeleccionados = new Set(); // Set para almacenar trabajadores seleccionados
    let todosLosTrabajos = new Map(); // Mapa para almacenar trabajos por trabajador
    
    const materialesContainer = document.getElementById('materiales-container');
    const materialTemplate = document.getElementById('material-template');
    const agregarMaterialBtn = document.getElementById('agregarMaterial');
    const submitBtn = document.getElementById('submitBtn');
    const lugarSelect = document.getElementById('lugar_id');
    const obraSelect = document.getElementById('obra_id');
    const fechaParteInput = document.getElementById('fecha_parte');
    const parteBloqueTrabajadores = document.getElementById('parte-bloque-trabajadores-y-mas');
    const trabajadoresPendientesContainer = document.getElementById('trabajadores-pendientes-container');
    const trabajadoresSeleccionadosContainer = document.getElementById('trabajadores-seleccionados-container');
    const trabajadoresHiddenInputs = document.getElementById('trabajadores-hidden-inputs');
     const trabajosCard = document.getElementById('trabajos-card');
     const trabajosContainer = document.getElementById('trabajos-container');
     const contadorTrabajos = document.getElementById('contador-trabajos');
    let trabajadoresPendientes = new Map(); // id -> nombre
    let trabajadoresSeleccionadosInfo = new Map(); // id -> nombre
    let empresasDetectadas = new Set(); // empresa_id detectadas en registros seleccionados
    let empresaPorTrabajo = new Map();  // trabajo_id -> empresa_id

    const toggleOpcionesAvanzadas = document.getElementById('toggle-opciones-avanzadas');
    const panelOpcionesAvanzadas = document.getElementById('opciones-avanzadas-panel');
    const optConjunto = document.getElementById('opt_parte_conjunto');
    const optPorEmpresa = document.getElementById('opt_parte_por_empresa');
    const modoParteInput = document.getElementById('modo_parte');
    const panelPlantillaConjunto = document.getElementById('panel-plantilla-conjunto');
    const selPlantillaConjunto = document.getElementById('plantilla_conjunto_id');
    const panelPlantillasPorEmpresa = document.getElementById('panel-plantillas-por-empresa');
    const textoPartePorEmpresa = document.getElementById('texto-parte-por-empresa');

    async function cargarObrasPorLugar() {
        if (!obraSelect) return;
        const lugarId = lugarSelect && lugarSelect.value;
        obraSelect.innerHTML = '<option value="">— Sin obra —</option>';
        if (!lugarId) return;
        try {
            const url = @json(route('api.obras_por_lugar')) + '?lugar_id=' + encodeURIComponent(lugarId);
            const res = await fetch(url, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }});
            if (!res.ok) return;
            const data = await res.json();
            (data.obras || []).forEach(function (o) {
                const opt = document.createElement('option');
                opt.value = String(o.id);
                opt.textContent = String(o.label || '');
                obraSelect.appendChild(opt);
            });
        } catch (e) {
            console.error('Error cargando obras:', e);
        }
    }

    function setModoParte(modo) {
        if (modoParteInput) modoParteInput.value = modo;
    }

    function renderPlantillasDemo() {
        if (selPlantillaConjunto) {
            selPlantillaConjunto.innerHTML = '<option value=\"\">Seleccionar plantilla...</option>';
            plantillasDisponibles.forEach(function (p) {
                const opt = document.createElement('option');
                opt.value = String(p.id);
                opt.textContent = (p.empresa ? (p.empresa + ' — ') : '') + (p.nombre || '');
                selPlantillaConjunto.appendChild(opt);
            });
        }
    }

    function renderPlantillasPorEmpresa() {
        if (!panelPlantillasPorEmpresa) return;
        panelPlantillasPorEmpresa.innerHTML = '';

        const empresas = Array.from(empresasDetectadas.values()).sort();
        empresas.forEach(function (empresaId) {
            const bloque = document.createElement('div');
            bloque.className = 'mb-2';

            const label = document.createElement('label');
            label.className = 'form-label';

            const plantillaEmpresa = plantillasDisponibles.find(p => String(p.empresa_id) === String(empresaId));
            const empresaNombre = plantillaEmpresa ? plantillaEmpresa.empresa : ('Empresa #' + String(empresaId));
            label.textContent = 'Plantilla para ' + empresaNombre;

            const sel = document.createElement('select');
            sel.className = 'form-select';
            sel.name = `plantillas_por_empresa[${empresaId}]`;
            sel.innerHTML = '<option value=\"\">Seleccionar plantilla...</option>';

            plantillasDisponibles
                .filter(p => String(p.empresa_id) === String(empresaId))
                .forEach(function (p) {
                    const opt = document.createElement('option');
                    opt.value = String(p.id);
                    opt.textContent = p.nombre || '';
                    if (p.es_default) opt.textContent += ' (por defecto)';
                    sel.appendChild(opt);
                });

            bloque.appendChild(label);
            bloque.appendChild(sel);
            panelPlantillasPorEmpresa.appendChild(bloque);
        });
    }

    function actualizarOpcionesAvanzadasUI() {
        const nEmpresas = empresasDetectadas.size;
        if (optPorEmpresa) {
            const puede = nEmpresas > 1;
            optPorEmpresa.disabled = !puede;
            if (!puede && optPorEmpresa.checked) optPorEmpresa.checked = false;
            if (textoPartePorEmpresa) {
                textoPartePorEmpresa.textContent = puede
                    ? 'Detectadas varias empresas. Elige plantilla por empresa.'
                    : 'No disponible: solo hay trabajadores de una empresa en los registros seleccionados.';
            }
        }

        if (optConjunto && optConjunto.checked) {
            if (optPorEmpresa) optPorEmpresa.checked = false;
            setModoParte('conjunto');
            if (panelPlantillaConjunto) panelPlantillaConjunto.classList.remove('d-none');
            if (panelPlantillasPorEmpresa) panelPlantillasPorEmpresa.classList.add('d-none');
        } else if (optPorEmpresa && optPorEmpresa.checked) {
            if (optConjunto) optConjunto.checked = false;
            setModoParte('por_empresa');
            if (panelPlantillaConjunto) panelPlantillaConjunto.classList.add('d-none');
            if (panelPlantillasPorEmpresa) panelPlantillasPorEmpresa.classList.remove('d-none');
            renderPlantillasPorEmpresa();
        } else {
            setModoParte('auto');
            if (panelPlantillaConjunto) panelPlantillaConjunto.classList.add('d-none');
            if (panelPlantillasPorEmpresa) panelPlantillasPorEmpresa.classList.add('d-none');
        }
    }

    if (toggleOpcionesAvanzadas && panelOpcionesAvanzadas) {
        toggleOpcionesAvanzadas.addEventListener('click', function (e) {
            e.preventDefault();
            panelOpcionesAvanzadas.classList.toggle('d-none');
        });
    }
    if (optConjunto) optConjunto.addEventListener('change', actualizarOpcionesAvanzadasUI);
    if (optPorEmpresa) optPorEmpresa.addEventListener('change', actualizarOpcionesAvanzadasUI);
    if (lugarSelect) lugarSelect.addEventListener('change', cargarObrasPorLugar);

    renderPlantillasDemo();

    function pintarTrabajadoresPendientes() {
        if (!trabajadoresPendientesContainer) return;
        if (trabajadoresPendientes.size === 0) {
            trabajadoresPendientesContainer.innerHTML = '<span class="text-muted small">Ninguno</span>';
            return;
        }
        trabajadoresPendientesContainer.innerHTML = '';
        trabajadoresPendientes.forEach(function (nombre, id) {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'badge bg-secondary border-0';
            btn.style.cursor = 'pointer';
            btn.dataset.userId = String(id);
            btn.dataset.userNombre = String(nombre || '');
            btn.title = 'Volver a añadir trabajador';
            btn.innerHTML = '<i class="fas fa-plus me-1"></i>' + escapeHtml(nombre || 'Trabajador');
            trabajadoresPendientesContainer.appendChild(btn);
        });
    }

    function anadirTrabajadorAPendientes(trabajadorId, trabajadorNombre) {
        if (!trabajadorId) return;
        trabajadoresPendientes.set(String(trabajadorId), String(trabajadorNombre || 'Trabajador'));
        pintarTrabajadoresPendientes();
    }

    function renderTrabajadoresSeleccionados() {
        if (trabajadoresSeleccionadosContainer) {
            if (trabajadoresSeleccionadosInfo.size === 0) {
                trabajadoresSeleccionadosContainer.innerHTML = '<span class="text-muted small">Ninguno</span>';
            } else {
                trabajadoresSeleccionadosContainer.innerHTML = '';
                trabajadoresSeleccionadosInfo.forEach(function (nombre, id) {
                    const wrapper = document.createElement('span');
                    wrapper.className = 'badge bg-primary d-inline-flex align-items-center gap-2';

                    const nameSpan = document.createElement('span');
                    nameSpan.textContent = nombre || 'Trabajador';
                    wrapper.appendChild(nameSpan);

                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'btn btn-sm btn-link p-0 text-white';
                    btn.style.lineHeight = '1';
                    btn.style.textDecoration = 'none';
                    btn.dataset.quitarTrabajadorId = String(id);
                    btn.title = 'Quitar trabajador';
                    btn.innerHTML = '<i class="fas fa-times"></i>';
                    wrapper.appendChild(btn);

                    trabajadoresSeleccionadosContainer.appendChild(wrapper);
                });
            }
        }

        if (trabajadoresHiddenInputs) {
            trabajadoresHiddenInputs.innerHTML = '';
            let idx = 0;
            trabajadoresSeleccionados.forEach(function (tid) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = `trabajadores[${idx}][id]`;
                input.value = String(tid);
                trabajadoresHiddenInputs.appendChild(input);
                idx++;
            });
        }
    }

    async function seleccionarTrabajador(userId, nombreCompleto, cargarTrabajos) {
        const tid = String(userId || '');
        if (!tid) return;
        if (trabajadoresSeleccionados.has(tid)) {
            return;
        }
        trabajadoresSeleccionados.add(tid);
        trabajadoresSeleccionadosInfo.set(tid, String(nombreCompleto || 'Trabajador'));
        renderTrabajadoresSeleccionados();
        if (cargarTrabajos) {
            await cargarTrabajosTrabajador(tid);
        }
        actualizarTrabajosVista();
        aplicarEstiloFilasSeleccionadas();
        actualizarBotonSubmit();
    }

    // Función para cargar trabajos del trabajador (filtrados por lugar del parte)
    async function cargarTrabajosTrabajador(trabajadorId) {
        if (!trabajadorId) return;

        const lugarId = lugarSelect && lugarSelect.value;
        if (!lugarId) {
            todosLosTrabajos.set(trabajadorId, []);
            return;
        }

        try {
            let url = '/partes/trabajador/' + trabajadorId + '/trabajos?lugar_id=' + encodeURIComponent(lugarId);
            if (fechaParteInput && fechaParteInput.value) {
                url += '&fecha=' + encodeURIComponent(fechaParteInput.value);
            }
            const response = await fetch(url, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            });
            if (!response.ok) {
                console.error('Error al cargar trabajos:', response.status);
                todosLosTrabajos.set(trabajadorId, []);
                return;
            }
            const trabajos = await response.json();
            todosLosTrabajos.set(trabajadorId, trabajos);
        } catch (error) {
            console.error('Error al cargar trabajos:', error);
        }
    }

    // Función para actualizar vista de trabajos
    function actualizarTrabajosVista() {
        if (trabajadoresSeleccionados.size === 0) {
            trabajosCard.classList.add('d-none');
            return;
        }

        let todosLosTrabajosArray = [];

        // Recopilar todos los trabajos y información de trabajadores
        trabajadoresSeleccionados.forEach(trabajadorId => {
            const trabajos = todosLosTrabajos.get(trabajadorId) || [];
            const trabajadorNombre = trabajadoresSeleccionadosInfo.get(String(trabajadorId)) || 'Trabajador';

            trabajos.forEach(trabajo => {
                trabajo.trabajador_id = trabajadorId;
                trabajo.trabajador_nombre = trabajadorNombre;
            });

            todosLosTrabajosArray = todosLosTrabajosArray.concat(trabajos);
        });

        if (todosLosTrabajosArray.length > 0) {
            mostrarTrabajos(todosLosTrabajosArray);
            trabajosCard.classList.remove('d-none');
        } else {
            trabajosContainer.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-inbox fa-2x text-muted mb-3"></i>
                    <p class="text-muted">Los trabajadores seleccionados no tienen trabajos pendientes</p>
                </div>
            `;
            trabajosCard.classList.remove('d-none');
            if (contadorTrabajos) contadorTrabajos.textContent = '0';
        }
    }

    // Función para mostrar trabajos
    function mostrarTrabajos(trabajos) {
        // Reconstruimos el mapa id->empresa cada vez que renderizamos.
        empresaPorTrabajo = new Map();
        trabajos.forEach(function (t) {
            const eid = t && t.user ? t.user.empresa_id : null;
            if (eid != null) {
                empresaPorTrabajo.set(String(t.id), String(eid));
            }
        });

        let html = `
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll" class="form-check-input">
                            </th>
                            <th>Trabajador</th>
                            <th>Fecha</th>
                            <th>Horario</th>
                            <th>Lugar</th>
                            <th>Descripción</th>
                            <th>Materiales</th>
                            <th class="text-center" style="min-width: 9.5rem">Parte</th>
                        </tr>
                    </thead>
                    <tbody>
        `;

        trabajos.forEach(trabajo => {
            const materialesCount = trabajo.materiales_utilizados ? trabajo.materiales_utilizados.length : 0;
            const empresaId = (trabajo && trabajo.user && trabajo.user.empresa_id != null) ? String(trabajo.user.empresa_id) : '';
            html += `
                <tr data-trabajo-row-id="${trabajo.id}">
                    <td>
                        <input type="checkbox" name="registros_trabajo[]" 
                               value="${trabajo.id}" 
                               class="form-check-input trabajo-checkbox"
                               data-trabajo-id="${trabajo.id}"
                               data-trabajador-id="${trabajo.trabajador_id}"
                               data-empresa-id="${empresaId}">
                    </td>
                    <td>
                        <span class="badge bg-primary">${trabajo.trabajador_nombre}</span>
                    </td>
                    <td>${new Date(trabajo.fecha).toLocaleDateString('es-ES')}</td>
                    <td>
                        ${escapeHtml(trabajo.horario_resumen || '—')}
                        <br>
                        <small class="text-muted">
                            ${typeof trabajo.horas_laborales === 'number' ? trabajo.horas_laborales.toFixed(2) : '0.00'} h
                        </small>
                    </td>
                    <td>${trabajo.lugar ? trabajo.lugar.nombre : 'Sin lugar'}</td>
                    <td>
                        <span class="text-truncate d-inline-block" style="max-width: 200px;" 
                              title="${trabajo.descripcion_trabajo}">
                            ${trabajo.descripcion_trabajo}
                        </span>
                    </td>
                    <td>
                        ${materialesCount > 0 ? 
                            `<span class="badge bg-info">${materialesCount} materiales</span>` : 
                            '<span class="text-muted">Sin materiales</span>'
                        }
                    </td>
                    <td class="align-middle text-center">
                        <span class="badge bg-success badge-incluido-parte d-none">Incluido en Parte</span>
                    </td>
                </tr>
            `;
        });

        html += `
                    </tbody>
                </table>
            </div>
        `;

        trabajosContainer.innerHTML = html;

        document.querySelectorAll('.trabajo-checkbox').forEach(checkbox => {
            const tid = String(checkbox.dataset.trabajoId);
            checkbox.checked = trabajosSeleccionados.has(tid);
            checkbox.addEventListener('change', manejarSeleccionTrabajo);
        });

        const selectAllCheckbox = document.getElementById('selectAll');
        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', toggleSelectAll);
        }

        aplicarEstiloFilasSeleccionadas();
        recalcularEmpresasDetectadas();
    }

    function recalcularEmpresasDetectadas() {
        empresasDetectadas = new Set();
        trabajosSeleccionados.forEach(function (rid) {
            const eid = empresaPorTrabajo.get(String(rid));
            if (eid) empresasDetectadas.add(String(eid));
        });
    }

    function quitarTrabajador(trabajadorId) {
        const tid = String(trabajadorId || '');
        if (!tid) return;

        const nombre = trabajadoresSeleccionadosInfo.get(tid) || 'Trabajador';

        // Deseleccionar trabajos y limpiar materiales de ese trabajador
        const trabajos = todosLosTrabajos.get(tid) || [];
        trabajos.forEach(function (t) {
            const rid = String(t.id);
            if (trabajosSeleccionados.has(rid)) {
                deseleccionarTrabajo(rid);
            }
        });

        // Quitar del set/map y quitar la fila superior
        trabajadoresSeleccionados.delete(tid);
        trabajadoresSeleccionadosInfo.delete(tid);
        renderTrabajadoresSeleccionados();
        todosLosTrabajos.delete(tid);

        // Añadir a pendientes
        anadirTrabajadorAPendientes(tid, nombre);

        actualizarTrabajosVista();
        aplicarEstiloFilasSeleccionadas();
        actualizarBotonSubmit();
    }

         // Función para manejar selección de trabajo
     function manejarSeleccionTrabajo(event) {
         const trabajoId = String(event.target.dataset.trabajoId);
         const isChecked = event.target.checked;

         if (isChecked) {
             trabajosSeleccionados.add(trabajoId);
             agregarMaterialesTrabajo(trabajoId);
         } else {
             trabajosSeleccionados.delete(trabajoId);
             eliminarMaterialesTrabajo(trabajoId);
         }

         recalcularEmpresasDetectadas();
         aplicarEstiloFilasSeleccionadas();
         actualizarBotonSubmit();
     }

     /** Una sola tabla: fila en verde y badge cuando el registro va incluido en el parte. */
     function aplicarEstiloFilasSeleccionadas() {
         document.querySelectorAll('#trabajos-container tbody tr[data-trabajo-row-id]').forEach(function (tr) {
             const id = String(tr.dataset.trabajoRowId);
             const incluido = trabajosSeleccionados.has(id);
             tr.classList.toggle('table-success', incluido);
             const badge = tr.querySelector('.badge-incluido-parte');
             if (badge) {
                 badge.classList.toggle('d-none', !incluido);
             }
         });
         if (contadorTrabajos) {
             contadorTrabajos.textContent = String(trabajosSeleccionados.size);
         }
     }

     function deseleccionarTrabajo(trabajoId) {
         const id = String(trabajoId);
         trabajosSeleccionados.delete(id);
         eliminarMaterialesTrabajo(id);

         const checkbox = document.querySelector('.trabajo-checkbox[data-trabajo-id="' + id + '"]');
         if (checkbox) {
             checkbox.checked = false;
         }

         aplicarEstiloFilasSeleccionadas();
         actualizarBotonSubmit();
     }

    // Función para agregar materiales de un trabajo
    async function agregarMaterialesTrabajo(trabajoId) {
        try {
            // Encontrar el trabajo en todos los trabajos cargados
            let trabajo = null;
            let trabajadorId = null;
            
            for (const [tId, trabajos] of todosLosTrabajos) {
                const foundTrabajo = trabajos.find(t => t.id == trabajoId);
                if (foundTrabajo) {
                    trabajo = foundTrabajo;
                    trabajadorId = tId;
                    break;
                }
            }
            
            if (trabajo && trabajo.materiales_utilizados) {
                const materialesTrabajo = [];
                const trabajadorNombre = trabajo.trabajador_nombre || 'Trabajador';
                
                trabajo.materiales_utilizados.forEach(material => {
                    const materialId = `trabajo_${trabajoId}_material_${material.id}`;
                    materialesTrabajo.push(materialId);
                    
                    const materialHtml = `
                        <div class="row mb-3 material-item material-trabajo" data-trabajo-id="${trabajoId}" data-material-id="${materialId}">
                            <div class="col-md-3">
                                <label class="form-label">Material</label>
                                <input type="text" class="form-control" value="${material.material ? material.material.nombre : 'Material no encontrado'}" readonly>
                                <input type="hidden" name="materiales_trabajo[${materialIndex}][material_id]" value="${material.material_id}">
                                <input type="hidden" name="materiales_trabajo[${materialIndex}][trabajo_id]" value="${trabajoId}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Cantidad</label>
                                <input type="number" class="form-control" name="materiales_trabajo[${materialIndex}][cantidad]" value="${material.cantidad_utilizada}" readonly>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Observaciones</label>
                                <input type="text" class="form-control" value="${material.observaciones || ''}" readonly>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Trabajador</label>
                                <input type="text" class="form-control" value="${trabajadorNombre}" readonly>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <span class="badge bg-info">Del trabajo</span>
                            </div>
                        </div>
                    `;
                    
                    materialesContainer.insertAdjacentHTML('beforeend', materialHtml);
                    materialIndex++;
                });
                
                materialesTrabajos.set(trabajoId, materialesTrabajo);
            }
        } catch (error) {
            console.error('Error al agregar materiales del trabajo:', error);
        }
    }

    // Función para eliminar materiales de un trabajo
    function eliminarMaterialesTrabajo(trabajoId) {
        const materialesAEliminar = materialesTrabajos.get(trabajoId);
        if (materialesAEliminar) {
            materialesAEliminar.forEach(materialId => {
                const materialElement = document.querySelector(`[data-material-id="${materialId}"]`);
                if (materialElement) {
                    materialElement.remove();
                }
            });
            materialesTrabajos.delete(trabajoId);
        }
    }

    // Función para agregar material adicional
    function agregarMaterial() {
        if (!materialTemplate || !materialesContainer) return;
        
        const materialHtml = materialTemplate.innerHTML.replace(/{index}/g, materialIndex);
        const materialDiv = document.createElement('div');
        materialDiv.innerHTML = materialHtml;
        const newMaterialElement = materialDiv.firstElementChild;
        
        if (newMaterialElement) {
            newMaterialElement.classList.add('material-adicional');
            materialesContainer.appendChild(newMaterialElement);
            materialIndex++;
        }
    }

    // Función para eliminar material
    function eliminarMaterial(event) {
        if (event.target.classList.contains('eliminar-material') || 
            event.target.closest('.eliminar-material')) {
            const materialItem = event.target.closest('.material-item');
            if (materialItem) {
                materialItem.remove();
            }
        }
    }

         // Función para seleccionar/deseleccionar todos
     function toggleSelectAll() {
         const checkboxes = document.querySelectorAll('.trabajo-checkbox');
         const selectAllCheckbox = document.getElementById('selectAll');
         
         checkboxes.forEach(checkbox => {
             checkbox.checked = selectAllCheckbox.checked;
             const event = new Event('change');
             checkbox.dispatchEvent(event);
         });

         aplicarEstiloFilasSeleccionadas();
     }

    // Función para actualizar botón de submit
    function actualizarBotonSubmit() {
        const registrosSeleccionados = trabajosSeleccionados.size;
        submitBtn.disabled = registrosSeleccionados === 0;
         actualizarOpcionesAvanzadasUI();
    }

    // Event listeners
    if (agregarMaterialBtn) {
        agregarMaterialBtn.addEventListener('click', agregarMaterial);
    }

    if (materialesContainer) {
        materialesContainer.addEventListener('click', eliminarMaterial);
    }

    if (trabajadoresSeleccionadosContainer) {
        trabajadoresSeleccionadosContainer.addEventListener('click', function (event) {
            const btn = event.target.closest && event.target.closest('button[data-quitar-trabajador-id]');
            if (!btn) return;
            const tid = String(btn.dataset.quitarTrabajadorId || '');
            if (!tid) return;
            quitarTrabajador(tid);
        });
    }

    if (trabajadoresPendientesContainer) {
        pintarTrabajadoresPendientes();
        trabajadoresPendientesContainer.addEventListener('click', function (event) {
            const btn = event.target.closest && event.target.closest('button[data-user-id]');
            if (!btn) return;
            const tid = String(btn.dataset.userId || '');
            const nombre = String(btn.dataset.userNombre || '');
            if (!tid) return;
            trabajadoresPendientes.delete(tid);
            pintarTrabajadoresPendientes();
            anadirTrabajadorPreseleccionado(tid, nombre);
        });
    }

    function alCambiarLugarParteVacio() {
        trabajosSeleccionados.clear();
        if (contadorTrabajos) contadorTrabajos.textContent = '0';
        document.querySelectorAll('.material-trabajo').forEach(function (el) { el.remove(); });
        materialesTrabajos.clear();
        trabajadoresSeleccionados.clear();
        trabajadoresSeleccionadosInfo.clear();
        renderTrabajadoresSeleccionados();
        todosLosTrabajos.clear();
        trabajadoresPendientes.clear();
        pintarTrabajadoresPendientes();
        if (materialesContainer) materialesContainer.innerHTML = '';
        materialIndex = 0;
        if (trabajosContainer) trabajosContainer.innerHTML = '';
        if (trabajosCard) trabajosCard.classList.add('d-none');
        actualizarTrabajosVista();
        aplicarEstiloFilasSeleccionadas();
        actualizarBotonSubmit();
    }

    async function alRecargarTrabajosMismoLugar() {
        trabajosSeleccionados.clear();
        if (contadorTrabajos) contadorTrabajos.textContent = '0';
        document.querySelectorAll('.material-trabajo').forEach(function (el) { el.remove(); });
        materialesTrabajos.clear();
        trabajadoresSeleccionados.clear();
        trabajadoresSeleccionadosInfo.clear();
        renderTrabajadoresSeleccionados();
        const ids = [];
        for (const tid of ids) {
            todosLosTrabajos.delete(tid);
            await cargarTrabajosTrabajador(tid);
        }
        actualizarTrabajosVista();
        aplicarEstiloFilasSeleccionadas();
        actualizarBotonSubmit();
    }

    async function recargarTrabajosSoloFecha() {
        trabajosSeleccionados.clear();
        if (contadorTrabajos) contadorTrabajos.textContent = '0';
        document.querySelectorAll('.material-trabajo').forEach(function (el) { el.remove(); });
        materialesTrabajos.clear();
        trabajadoresSeleccionados.clear();
        trabajadoresSeleccionadosInfo.clear();
        renderTrabajadoresSeleccionados();
        const ids = [];
        for (const tid of ids) {
            todosLosTrabajos.delete(tid);
            await cargarTrabajosTrabajador(tid);
        }
        actualizarTrabajosVista();
        aplicarEstiloFilasSeleccionadas();
        actualizarBotonSubmit();
    }

    async function aplicarSugerenciaAutomatica() {
        if (!sugerenciaAutomatica || !lugarSelect.value || !fechaParteInput || !fechaParteInput.value) {
            return;
        }
        try {
            const url = sugerenciaRegistrosUrl + '?lugar_id=' + encodeURIComponent(lugarSelect.value) + '&fecha=' + encodeURIComponent(fechaParteInput.value);
            const res = await fetch(url, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            });
            if (!res.ok) {
                return;
            }
            const data = await res.json();
            trabajosSeleccionados.clear();
            if (contadorTrabajos) contadorTrabajos.textContent = '0';
            document.querySelectorAll('.material-trabajo').forEach(function (el) { el.remove(); });
            materialesTrabajos.clear();
            trabajadoresSeleccionados.clear();
            trabajadoresSeleccionadosInfo.clear();
            todosLosTrabajos.clear();
            renderTrabajadoresSeleccionados();
            if (materialesContainer) materialesContainer.innerHTML = '';
            materialIndex = 0;

            const trabs = data.trabajadores || [];
            const porT = data.registros_por_trabajador || {};
            const idsPre = (data.ids_preseleccionar || []).map(function (x) { return String(x); });

            trabs.forEach(function (t) {
                const uid = String(t.id);
                trabajadoresSeleccionados.add(uid);
                trabajadoresSeleccionadosInfo.set(uid, t.nombre_completo || 'Trabajador');
                const regs = porT[uid] || [];
                todosLosTrabajos.set(uid, regs);
            });
            renderTrabajadoresSeleccionados();

            actualizarTrabajosVista();

            for (let i = 0; i < idsPre.length; i++) {
                const rid = idsPre[i];
                trabajosSeleccionados.add(rid);
                await agregarMaterialesTrabajo(rid);
            }
            document.querySelectorAll('.trabajo-checkbox').forEach(function (cb) {
                const tid = String(cb.dataset.trabajoId);
                if (idsPre.indexOf(tid) !== -1) {
                    cb.checked = true;
                }
            });
            aplicarEstiloFilasSeleccionadas();
            actualizarBotonSubmit();
        } catch (e) {
            console.error(e);
        }
    }

    async function onLugarParteChange() {
        if (parteBloqueTrabajadores) {
            parteBloqueTrabajadores.classList.toggle('d-none', !lugarSelect.value);
        }
        if (!lugarSelect.value) {
            alCambiarLugarParteVacio();
            return;
        }
        if (sugerenciaAutomatica && fechaParteInput && fechaParteInput.value) {
            await aplicarSugerenciaAutomatica();
        } else {
            await alRecargarTrabajosMismoLugar();
        }
    }

    async function onFechaParteChange() {
        if (!lugarSelect.value) {
            return;
        }
        if (sugerenciaAutomatica && fechaParteInput && fechaParteInput.value) {
            await aplicarSugerenciaAutomatica();
        } else {
            await recargarTrabajosSoloFecha();
        }
    }

    if (lugarSelect) {
        lugarSelect.addEventListener('change', onLugarParteChange);
        if (fechaParteInput) {
            fechaParteInput.addEventListener('change', onFechaParteChange);
        }
        if (parteBloqueTrabajadores) {
            parteBloqueTrabajadores.classList.toggle('d-none', !lugarSelect.value);
        }
        if (lugarSelect.value && sugerenciaAutomatica && fechaParteInput && fechaParteInput.value) {
            aplicarSugerenciaAutomatica();
        } else if (lugarSelect.value && !sugerenciaAutomatica) {
            alRecargarTrabajosMismoLugar();
        }
    }

    window.deseleccionarTrabajo = function (trabajoId) {
        deseleccionarTrabajo(trabajoId);
    };

    // Select2: buscador + añadir
    (function initSelect2BuscarTrabajador() {
        const sel = document.getElementById('buscar-trabajador-select2');
        if (!sel) return;
        if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.select2) return;
        const url = sel.dataset.buscarUrl;
        const $sel = window.jQuery(sel);
        $sel.select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: 'Buscar trabajador…',
            allowClear: true,
            language: 'es',
            minimumInputLength: 2,
            ajax: {
                url: url,
                dataType: 'json',
                delay: 200,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    const list = (data && data.resultados) ? data.resultados : [];
                    return {
                        results: list.map(function (u) {
                            return { id: String(u.id), text: String(u.nombre_completo || '') };
                        })
                    };
                },
                cache: true,
            }
        });
        $sel.on('select2:select', function (e) {
            const d = e && e.params ? e.params.data : null;
            if (!d || !d.id) return;
            anadirTrabajadorPreseleccionado(String(d.id), String(d.text || ''));
            // limpiar selección para poder añadir otro rápido
            $sel.val(null).trigger('change');
        });
    })();

    function anadirTrabajadorPreseleccionado(userId, nombreCompleto) {
        const tid = String(userId || '');
        if (!tid) return;
        if (trabajadoresSeleccionados.has(tid)) {
            alert('Ese trabajador ya está en la lista.');
            return;
        }
        seleccionarTrabajador(tid, nombreCompleto || 'Trabajador', true);
    }

    // Validación del formulario
    document.getElementById('parteForm').addEventListener('submit', function(e) {
        if (trabajosSeleccionados.size === 0) {
            e.preventDefault();
            alert('Debes seleccionar al menos un trabajo.');
            return false;
        }
    });
});
</script>
@endpush