@extends('layouts.app')

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

@section('contenido')
    <form action="{{ route('partes.update', $parte) }}" method="POST" id="parteForm">
        @csrf
        @method('PUT')

        <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 align-items-end">
                <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 }}"
                                    {{ $parte->lugar_id == $lugar->id ? 'selected' : '' }}>
                                {{ $lugar->nombre }}
                            </option>
                        @endforeach
                    </select>
                    <p class="small text-muted mt-1 mb-0">Dirección y población se actualizan 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', $parte->fecha ? $parte->fecha->format('Y-m-d') : now()->format('Y-m-d')) }}">
                </div>
            </div>
            <div class="row mt-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...">{{ $parte->observaciones }}</textarea>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <h6 class="text-muted border-bottom pb-2 mb-3">
                <i class="fas fa-users me-2"></i>
                Trabajadores y Trabajos
            </h6>
            @if($registrosPendientes->isNotEmpty())
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <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>Estado</th>
                                <th>Materiales</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($registrosPendientes as $registro)
                                <tr>
                                    <td>
                                        <input type="checkbox" name="registros_trabajo[]"
                                               value="{{ $registro->id }}"
                                               class="form-check-input registro-checkbox"
                                               {{ $parte->registrosTrabajo->contains($registro->id) ? 'checked' : '' }}>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="{{ imagenPerfilUrl($registro->user->imagen_perfil) }}"
                                                 class="rounded-circle me-2" width="30" height="30" alt="">
                                            <span>{{ $registro->user->nombre }}</span>
                                        </div>
                                    </td>
                                    <td>{{ $registro->fecha->format('d/m/Y') }}</td>
                                    <td>
                                        {{ $registro->etiquetaHorarioResumen() }}
                                        <br>
                                        <small class="text-muted">
                                            {{ number_format($registro->horas_laborales, 2, ',', '') }} h
                                        </small>
                                    </td>
                                    <td>{{ $registro->lugar->nombre }}</td>
                                    <td>
                                        <span class="text-truncate d-inline-block" style="max-width: 200px;"
                                              title="{{ $registro->descripcion_trabajo }}">
                                            {{ $registro->descripcion_trabajo }}
                                        </span>
                                    </td>
                                    <td>
                                        @switch($registro->estado)
                                            @case('pendiente')
                                                <span class="badge bg-warning">Pendiente</span>
                                                @break
                                            @case('en_parte')
                                                <span class="badge bg-info">En Parte</span>
                                                @break
                                            @case('verificado')
                                                <span class="badge bg-success">Verificado</span>
                                                @break
                                            @default
                                                <span class="badge bg-secondary">{{ ucfirst($registro->estado) }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        @if($registro->materiales->isNotEmpty())
                                            <span class="badge bg-info">{{ $registro->materiales->count() }} materiales</span>
                                        @else
                                            <span class="text-muted">Sin materiales</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                                </table>
                            </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-inbox fa-2x text-muted mb-3"></i>
                    <p class="text-muted">No hay registros de trabajo disponibles</p>
                    <a href="{{ route('trabajo.registro.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i>
                        Crear Registro de Trabajo
                    </a>
                </div>
            @endif
        </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 Adicionales
                </h6>
                <button type="button" class="btn btn-sm btn-outline-primary" id="agregarMaterial">
                    <i class="fas fa-plus me-1"></i>
                    Agregar Material
                </button>
            </div>
            <div id="materiales-container">
                @foreach($parte->materialesAdicionales as $index => $material)
                    <div class="row mb-3 material-item">
                        <div class="col-md-4">
                            <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 $mat)
                                    <option value="{{ $mat->id }}"
                                            {{ $material->material_id == $mat->id ? 'selected' : '' }}>
                                        {{ $mat->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Cantidad</label>
                            <input type="number" class="form-control"
                                   name="materiales_adicionales[{{ $index }}][cantidad]"
                                   value="{{ $material->cantidad }}" min="1" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Observaciones</label>
                            <input type="text" class="form-control"
                                   name="materiales_adicionales[{{ $index }}][observaciones]"
                                   value="{{ $material->observaciones }}"
                                   placeholder="Observaciones opcionales">
                        </div>
                        <div class="col-md-1 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>
                @endforeach
            </div>
        </div>

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

<!-- Template para materiales adicionales -->
<template id="material-template">
    <div class="row mb-3 material-item">
        <div class="col-md-4">
            <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-3">
            <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-4">
            <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-1 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.show', $parte) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            Volver al Parte
        </a>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let materialIndex = {{ $parte->materialesAdicionales->count() }};
    const materialesContainer = document.getElementById('materiales-container');
    const materialTemplate = document.getElementById('material-template');
    const agregarMaterialBtn = document.getElementById('agregarMaterial');
    const selectAllCheckbox = document.getElementById('selectAll');
    const registroCheckboxes = document.querySelectorAll('.registro-checkbox');
    const submitBtn = document.getElementById('submitBtn');
    const lugarSelect = document.getElementById('lugar_id');

    // Función para agregar material
    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) {
            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() {
        registroCheckboxes.forEach(checkbox => {
            checkbox.checked = selectAllCheckbox.checked;
        });
        actualizarBotonSubmit();
    }

    // Función para actualizar botón de submit
    function actualizarBotonSubmit() {
        const registrosSeleccionados = document.querySelectorAll('.registro-checkbox:checked').length;
        submitBtn.disabled = registrosSeleccionados === 0;
    }

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

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

    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', toggleSelectAll);
    }

    registroCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', actualizarBotonSubmit);
    });

    // Validación del formulario
    document.getElementById('parteForm').addEventListener('submit', function(e) {
        const registrosSeleccionados = document.querySelectorAll('.registro-checkbox:checked').length;
        if (registrosSeleccionados === 0) {
            e.preventDefault();
            alert('Debes seleccionar al menos un registro de trabajo.');
            return false;
        }
    });

    // Inicializar estado del botón
    actualizarBotonSubmit();
});
</script>
@endpush