@extends('layouts.app')

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

@section('contenido')
    @php
        if (is_array(old('materiales'))) {
            $filasMateriales = array_values(old('materiales'));
        } else {
            $filasMateriales = $registro->materialesUtilizados->map(function ($mu) {
                return [
                    'material_id' => $mu->material_id,
                    'cantidad' => $mu->cantidad_utilizada,
                    'observaciones' => $mu->observaciones,
                    'unidad_nuevo' => null,
                ];
            })->all();
        }
    @endphp
    <form action="{{ route('trabajo.registro.update', $registro) }}" method="POST" id="registroForm" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="fecha" class="form-label">Fecha del trabajo</label>
                <input type="date" class="form-control @error('fecha') is-invalid @enderror" id="fecha" name="fecha" value="{{ old('fecha', $registro->fecha->format('Y-m-d')) }}" required
                    @unless(auth()->user()->hasAnyRole(['oficina', 'gestor', 'admin'])) max="{{ now()->format('Y-m-d') }}" @endunless>
                @error('fecha')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6" id="registro-bloque-lugar">
                @include('user.trabajo.registro._form_lugar_trabajo', ['defaultLugarId' => $defaultLugarId, 'defaultLugarText' => $defaultLugarText])
            </div>
        </div>

        @include('user.trabajo.registro._form_campos_horario', ['registro' => $registro])

        <div id="registro-bloque-descripcion-materiales">
            @include('user.trabajo.registro._form_descripcion_trabajo', [
                'valor' => old('descripcion_trabajo', $registro->descripcion_trabajo),
            ])

            <div class="row mb-3">
                <div class="col-12">
                    <label class="form-label">Materiales utilizados</label>
                    <div id="materiales-container">
                        @foreach($filasMateriales as $index => $fila)
                            @include('user.trabajo.registro._material_fila', ['index' => $index, 'materiales' => $materiales, 'fila' => $fila])
                        @endforeach
                    </div>
                    <button type="button" class="btn btn-outline-secondary" id="agregar-material"><i class="fas fa-plus me-2"></i>Agregar material</button>
                </div>
            </div>
        </div>

        @if(auth()->user()->hasAnyRole(['oficina', 'gestor', 'admin']))
            <div class="row mb-3">
                <div class="col-12">
                    <label for="observaciones" class="form-label">Observaciones</label>
                    <textarea class="form-control" id="observaciones" name="observaciones" rows="2">{{ old('observaciones', $registro->observaciones) }}</textarea>
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col-12">
                <a href="{{ route('trabajo.registro.index') }}" class="btn btn-secondary">Cancelar</a>
                <button type="submit" class="btn btn-warning"><i class="fas fa-save me-2"></i>Actualizar</button>
            </div>
        </div>
    </form>

    <template id="material-template">
        <div class="material-item border rounded p-3 mb-3">
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Material</label>
                    <select class="form-select material-select" name="materiales[{index}][material_id]">
                        <option value="">Selecciona</option>
                        @include('user.trabajo.registro._material_select_opciones')
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Cantidad</label>
                    <input type="number" class="form-control material-cantidad" name="materiales[{index}][cantidad]" step="0.01" min="0.01">
                </div>
                @include('user.trabajo.registro._material_columna_unidad', ['idx' => '{index}'])
                <div class="col-md-3">
                    <label class="form-label">Obs.</label>
                    <input type="text" class="form-control" name="materiales[{index}][observaciones]">
                </div>
                <div class="col-md-1">
                    <label class="form-label">&nbsp;</label>
                    <button type="button" class="btn btn-outline-danger btn-sm w-100 eliminar-material"><i class="fas fa-trash"></i></button>
                </div>
            </div>
        </div>
    </template>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var UNIDAD_MATERIAL_ETIQUETAS = @json(\App\Models\Material::opcionesUnidadMaterialNuevo());

    function etiquetaUnidadMaterial(codigo) {
        if (!codigo) return '';
        return UNIDAD_MATERIAL_ETIQUETAS[codigo] || codigo;
    }

    function capitalizarPrimera(str) {
        var t = (str || '').trim();
        if (!t) return '';
        return t.charAt(0).toLocaleUpperCase('es-ES') + t.slice(1);
    }

    function existeNombreMaterialEnCatalogo(selectEl, termCapitalizado) {
        var term = (termCapitalizado || '').trim();
        if (term.length < 2) return false;
        var tl = term.toLowerCase();
        var opts = selectEl.querySelectorAll('option[value]:not([value=""])');
        for (var i = 0; i < opts.length; i++) {
            var dn = opts[i].getAttribute('data-nombre');
            if (dn && dn.trim().toLowerCase() === tl) {
                return true;
            }
        }
        return false;
    }

    let materialIndex = {{ count($filasMateriales) }};
    const materialesContainer = document.getElementById('materiales-container');
    const materialTemplate = document.getElementById('material-template');

    function destruirSelect2Material(row) {
        if (!window.jQuery) return;
        const sel = row.querySelector('.material-select');
        if (!sel) return;
        const $j = window.jQuery(sel);
        if ($j.data('select2')) {
            $j.select2('destroy');
        }
    }

    function initMaterialRow(row) {
        if (!window.jQuery || !window.jQuery.fn.select2) return;
        const sel = row.querySelector('.material-select');
        if (!sel) return;
        const $j = window.jQuery(sel);
        function aplicarUnidadDesdeValor() {
            const inpExist = row.querySelector('.material-unidad-exist');
            const selUnidad = row.querySelector('.material-unidad-nuevo');
            const c = row.querySelector('.material-cantidad');
            const val = $j.val();
            if (!val) {
                if (inpExist) { inpExist.classList.remove('d-none'); inpExist.value = ''; }
                if (selUnidad) { selUnidad.classList.add('d-none'); selUnidad.disabled = true; }
                return;
            }
            if (String(val).indexOf('new:') === 0) {
                if (inpExist) inpExist.classList.add('d-none');
                if (selUnidad) {
                    selUnidad.classList.remove('d-none');
                    selUnidad.disabled = false;
                    if (!selUnidad.value) selUnidad.value = 'ud';
                }
                if (c) c.removeAttribute('max');
                return;
            }
            const opt = sel.options[sel.selectedIndex];
            var codigo = (opt && opt.value) ? (opt.dataset.unidad || '') : '';
            if (inpExist) {
                inpExist.classList.remove('d-none');
                inpExist.value = etiquetaUnidadMaterial(codigo);
            }
            if (selUnidad) {
                selUnidad.classList.add('d-none');
                selUnidad.disabled = true;
            }
            if (c) c.removeAttribute('max');
        }
        $j.select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: 'Seleccione o escriba para añadir',
            allowClear: true,
            language: 'es',
            tags: true,
            createTag: function (params) {
                var term = capitalizarPrimera(params.term || '');
                if (term.length < 2) {
                    return null;
                }
                var colision = existeNombreMaterialEnCatalogo(sel, term);
                var texto = colision
                    ? 'Crear nuevo «' + term + '» (otra unidad)'
                    : 'Crear nuevo «' + term + '»';
                return { id: 'new:' + term, text: texto };
            },
            templateSelection: function (data) {
                if (!data || data.id === undefined || data.id === null || data.id === '') {
                    return data && data.text ? data.text : '';
                }
                var sid = String(data.id);
                if (sid.indexOf('new:') === 0) {
                    return sid.replace(/^new:/, '') + ' (nuevo)';
                }
                return data.text || '';
            }
        });
        $j.off('change.materialRegistro').on('change.materialRegistro', aplicarUnidadDesdeValor);
        aplicarUnidadDesdeValor();
    }

    document.querySelectorAll('.material-item').forEach(initMaterialRow);
    document.getElementById('agregar-material')?.addEventListener('click', function() {
        if (!materialTemplate || !materialesContainer) return;
        const html = materialTemplate.innerHTML.replace(/{index}/g, materialIndex);
        const wrap = document.createElement('div');
        wrap.innerHTML = html;
        const el = wrap.firstElementChild;
        materialesContainer.appendChild(el);
        initMaterialRow(el);
        materialIndex++;
    });
    document.addEventListener('click', function(e) {
        if (e.target.closest('.eliminar-material')) {
            const row = e.target.closest('.material-item');
            if (row) {
                destruirSelect2Material(row);
                row.remove();
            }
        }
    });
});
</script>
@endpush