@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)

@section('title', 'Editar Archivos de la Orden de Trabajo | Guiñez Ingeniería')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-8">

                <div class="card card-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Editar Archivos de la Orden de Trabajo </h3>
                    </div>

                    <form id="formularioDeOrdenDeTrabajo" enctype="multipart/form-data">
                        @csrf

                        <div class="card-body">

                            <div class="contenedor-dos-campos-por-fila">
                                <div class="form-group">
                                    <label>Número de Orden de Trabajo</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->numero_orden_trabajo }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Contrato</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->contrato->numero_contrato }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Cliente</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->cliente->name }}" disabled="true">
                                </div>

                                @if (isset($ordenDeTrabajo->proyecto))
                                    <div class="form-group">
                                        <label>Proyecto</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->proyecto->nombre }}" disabled="true">
                                    </div>
                                @else
                                    <div class="form-group">
                                        <label>Proyecto</label>
                                        <input type="text" class="form-control" value="" disabled="true">
                                    </div>
                                @endif

                                <div class="form-group">
                                    <label>Área/Sector</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->area->nombre }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Servicio</label>
                                    <input type="text" class="form-control" value="{{ $servicio->nombre }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Tipo de Pozo</label>
                                    <input type="text" class="form-control" class="form-control" name="tipo_servicio" value="{{ $ordenDeTrabajo->tipo_servicio }}"  disabled="true">
                                </div>

                                @if ($servicio->nombre=="Sondajes")
                                    <div class="form-group">
                                        <label>Sistema de Referencia de Origen</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_referencia_origen}}" disabled="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label>Sistema de Proyección</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_proyeccion }}" readonly="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label>Conversión a</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_proyeccion_visualización }}" readonly="true">
                                    </div>
                                @elseif($servicio->nombre=="Pilas")
                                    <div class="form-group">
                                        <label>Sistema de Proyección</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_proyeccion }}" readonly="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label>Conversión a</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_proyeccion_visualización }}" readonly="true">
                                    </div>
                                @elseif($servicio->nombre=="Calicatas")
                                    <div class="form-group">
                                        <label>Sistema de Proyección</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_proyeccion }}" readonly="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label>Conversión a</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_proyeccion_visualización }}" readonly="true">
                                    </div>
                                @endif

                                <div class="form-group">
                                    <label>Fecha Inicio</label>
                                    <input type="date" class="form-control" name="fecha_inicio" value="{{ $ordenDeTrabajo->fecha_inicio }}" readonly="true">
                                </div>
                            </div>

                            @if (count($ordenDeTrabajo->archivos) > 0)
                                <div class="dt-responsive table-responsive">
                                    <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info">
                                        <thead>
                                            <tr role="row">
                                                <th colspan="5" class="text-center">ARCHIVOS REGISTRADOS DE LA ORDEN DE TRABAJO </th>
                                            </tr>
                                            <tr role="row">
                                                <th>Acción</th>
                                                <th>Archivo</th>
                                                <th>Tipo</th>
                                                <th>Estado</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registrosDeArchivosRegistrados">
                                            @if (count($ordenDeTrabajo->archivos) > 0)
                                                @foreach ($ordenDeTrabajo->archivos as $archivoOt)
                                                    <tr>
                                                        <td>
                                                            <div class="btn-group ">
                                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    Acciones
                                                                </button>
                                                                <div class="dropdown-menu">
                                                                    <a class="dropdown-item" href="#" onclick="visualizarArchivoRegistrado('{{ $archivoOt->nombre_Archivo }}', '{{ strtolower($archivoOt->extension) }}','{{ $archivoOt->id_orden_trabajo }}','{{ $archivoOt->nombre_Archivo }}')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>
                                                                    <a class="dropdown-item eliminar-item-archivo" href="#" onclick="eliminarArchivoRegistrado(this.parentElement.parentElement.parentElement.parentElement,'{{ $archivoOt->id }}')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>
                                                                    <a class="dropdown-item cancelar-eliminacion-item-archivo" style="display:none;" href="#" onclick="cancelarEliminacionDelArchivoRegistrado(this.parentElement.parentElement.parentElement.parentElement,'{{ $archivoOt->id }}')"><i class="fas fa-times-circle" aria-hidden="true"></i> Cancelar Eliminación</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="{{obtenerEstiloDelTipoArchivo($archivoOt->extension)}}">{{ $archivoOt->nombre_Archivo }}</td>
                                                        <td>{{ obtenerNombreDeLaExtensionDelArchivo($archivoOt->extension) }}</td>
                                                        <td class="columna-estado-archivo"><span class="badge badge-success">Registrado</span></td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr id="archivosNoDisponibleEnLaTabla">
                                                    <td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            @endif

                            <div class="form-group" id="contenedorDeLosCamposDeTipoArchivo">
                                <label>Seleccionar Archivos</label>
                                <input type="file" class="form-control-file" id="campoArchivoDeTrabajo" name="archivo_1" onchange="guardarArchivo(this)">
                            </div>

                            <div class="dt-responsive table-responsive">
                                <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-archivo-orden-trabajo">
                                    <thead>
                                        <tr role="row">
                                            <th colspan="3" class="text-center">NUEVOS ARCHIVOS</th>
                                        </tr>
                                        <tr role="row">
                                            <th>Acción</th>
                                            <th>Archivo</th>
                                            <th>Tipo</th>
                                        </tr>
                                    </thead>
                                    <tbody id="registrosDeArchivos">
                                        <tr id="archivosNoDisponibleEnLaTabla">
                                            <td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <input type="hidden" id="listadoDeArchivosRegistrados" value="{{ json_encode($ordenDeTrabajo->archivos) }}">
                            <input type="hidden" id="listadoDeArchivosRemovidosPorElUsuario"value="[]">
                        </div>

                        <div class=" card-footer">
                            <button type="button" onclick="editarArchivoDeLaOrdenDeTrabajo()" class="btn btn-aspen" id="botonDeEdicionDeArchivo"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Orden De Trabajo </button>
                            @if (Gate::check('orden-trabajo.index')  || Gate::check('orden-trabajo.index-creadas'))
                                @if (Gate::check('orden-trabajo.index-cliente') || Gate::check('orden-trabajo.index-creadas-cliente'))
                                    @if ($servicio->nombre=="Sondajes")
                                        <a href="{{ route('orden-trabajo.index',$servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                                    @elseif($servicio->nombre=="Pilas")
                                        <a href="{{ route('orden-trabajo.index-pila',$servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                                    @endif  
                                @else   
                                    @if ($servicio->nombre=="Sondajes")
                                        <a href="{{ route('orden-trabajo.index',$servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                                    @elseif($servicio->nombre=="Pilas")
                                        <a href="{{ route('orden-trabajo.index-pila',$servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                                    @endif  
                                @endif
                            @elseif(Gate::check('orden-trabajo.index-cliente') || Gate::check('orden-trabajo.index-creadas-cliente')) 
                                @if ($servicio->nombre=="Sondajes")
                                    <a href="{{ route('orden-trabajo.index-cliente',$servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                                @elseif($servicio->nombre=="Pilas")
                                    <a href="{{ route('orden-trabajo.index-cliente-pila',$servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                                @endif  
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalVisualizarArchivo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #007bff; color:white;">
                        <h5 class="modal-title" id="modalTituloVisualizarArchivo"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="modalContenidoModalVisualizarArchivo" style="text-align: center;">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/generico.css') }}">
@stop

@section('js')
    <script src="{{ asset('js/generico.js') }}"></script>
    <script>
        function obtenerAccionesDelArchivoGuardado(extensionDelArchivo, base64, archivo) {
            if (
                extensionDelArchivo.toLowerCase() == "png" ||
                extensionDelArchivo.toLowerCase() == "jpeg" ||
                extensionDelArchivo.toLowerCase() == "gif" ||
                extensionDelArchivo.toLowerCase() == "jpg" ||
                extensionDelArchivo.toLowerCase() == "bmp"
            ) {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarArchivo(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp3" ||
                extensionDelArchivo.toLowerCase() == "wav" ||
                extensionDelArchivo.toLowerCase() == "wma" ||
                extensionDelArchivo.toLowerCase() == "ogg"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "zip" ||
                extensionDelArchivo.toLowerCase() == "rar" ||
                extensionDelArchivo.toLowerCase() == "tgz" ||
                extensionDelArchivo.toLowerCase() == "tar"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "pdf") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarArchivo(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "xlsx" ||
                extensionDelArchivo.toLowerCase() == "xls"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "pptx" ||
                extensionDelArchivo.toLowerCase() == "ppt"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "docx" ||
                extensionDelArchivo.toLowerCase() == "doc"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "txt") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarArchivo(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp4" ||
                extensionDelArchivo.toLowerCase() == "webm" ||
                extensionDelArchivo.toLowerCase() == "avi" ||
                extensionDelArchivo.toLowerCase() == "asf" ||
                extensionDelArchivo.toLowerCase() == "dvd" ||
                extensionDelArchivo.toLowerCase() == "m1v" ||
                extensionDelArchivo.toLowerCase() == "movie" ||
                extensionDelArchivo.toLowerCase() == "mpeg" ||
                extensionDelArchivo.toLowerCase() == "wn" ||
                extensionDelArchivo.toLowerCase() == "wmv"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            }

            return accionesDelArchivo;
        }

        function eliminarArchivo(registro, archivo) {
            document.getElementById(archivo).remove();
            registro.remove();

            let filasDeArchivos = document.getElementById('tabla-archivo-orden-trabajo').tBodies[0].querySelectorAll("tr");
            if (filasDeArchivos.length == 0) {
                document.getElementById("registrosDeArchivos").innerHTML =
                    '<tr id="archivosNoDisponibleEnLaTabla">' +
                    '<td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>' +
                    '</tr>';
            }
        }

        function visualizarArchivo(archivo, tipo, nombreArchivo) {
            if (tipo.toLowerCase() == "png" ||
                tipo.toLowerCase() == "jpeg" ||
                tipo.toLowerCase() == "gif" ||
                tipo.toLowerCase() == "jpg" ||
                tipo.toLowerCase() == "bmp") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<img src="' + archivo + '" style="max-width: 100%;">';
            } else if (tipo.toLowerCase() == "pdf") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + archivo + '" style="width:95%; height:600px;"></iframe>';
            } else if (tipo.toLowerCase() == "txt") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + archivo + '" style="width:95%; height:600px;"></iframe>';
            }
            document.getElementById("modalTituloVisualizarArchivo").innerHTML = nombreArchivo;
            $("#modalVisualizarArchivo").modal("show");
        }

        function visualizarArchivoRegistrado(archivo, tipo, idOrdenTrabajo, nombreArchivo) {
            var rutaUrl = 'storage/orden-trabajo/' + idOrdenTrabajo + '/' + archivo;
            var url = '{{ asset('') }}';
            url = url + rutaUrl;

            if (tipo.toLowerCase() == "png" ||
                tipo.toLowerCase() == "jpeg" ||
                tipo.toLowerCase() == "gif" ||
                tipo.toLowerCase() == "jpg" ||
                tipo.toLowerCase() == "bmp") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<img src="' + url + '">';
            } else if (tipo.toLowerCase() == "pdf") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + url + '" style="width:95%; height:600px;"></iframe>';
            } else if (tipo.toLowerCase() == "txt") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + url + '" style="width:95%; height:600px;"></iframe>';
            }
            document.getElementById("modalTituloVisualizarArchivo").innerHTML = nombreArchivo;
            $("#modalVisualizarArchivo").modal("show");
        }

        function eliminarArchivoRegistrado(registro, idArchivo) {
            //registro.remove();
            let listadoDeArchivosRemovidosPorElUsuario = document.getElementById("listadoDeArchivosRemovidosPorElUsuario").value;
            listadoDeArchivosRemovidosPorElUsuario = JSON.parse(listadoDeArchivosRemovidosPorElUsuario);

            let listadoDeArchivosRegistrados = document.getElementById("listadoDeArchivosRegistrados").value;
            listadoDeArchivosRegistrados = JSON.parse(listadoDeArchivosRegistrados);

            listadoDeArchivosRegistrados.forEach(elemento => {
                if (idArchivo == elemento.id) {
                    listadoDeArchivosRemovidosPorElUsuario.push(elemento);
                }
            });
            document.getElementById("listadoDeArchivosRemovidosPorElUsuario").value = JSON.stringify(listadoDeArchivosRemovidosPorElUsuario);
            registro.querySelector(".columna-estado-archivo").innerHTML = '<span class="badge badge-danger">Removido</span>';

            registro.querySelector(".eliminar-item-archivo").style.display = "none";
            registro.querySelector(".cancelar-eliminacion-item-archivo").style.display = "block";
        }

        function cancelarEliminacionDelArchivoRegistrado(registro, idArchivo) {
            let listadoDeArchivosRemovidosPorElUsuario = document.getElementById("listadoDeArchivosRemovidosPorElUsuario").value;
            listadoDeArchivosRemovidosPorElUsuario = JSON.parse(listadoDeArchivosRemovidosPorElUsuario);

            let listadoDeArchivosRegistrados = document.getElementById("listadoDeArchivosRegistrados").value;
            listadoDeArchivosRegistrados = JSON.parse(listadoDeArchivosRegistrados);

            for (let i = 0; i < listadoDeArchivosRemovidosPorElUsuario.length; i++) {
                if (idArchivo == listadoDeArchivosRemovidosPorElUsuario[i].id) {
                    listadoDeArchivosRemovidosPorElUsuario.splice(i, 1);
                }
            }

            document.getElementById("listadoDeArchivosRemovidosPorElUsuario").value = JSON.stringify(listadoDeArchivosRemovidosPorElUsuario);
            registro.querySelector(".columna-estado-archivo").innerHTML = '<span class="badge badge-success">Registrado</span>';

            registro.querySelector(".eliminar-item-archivo").style.display = "block";
            registro.querySelector(".cancelar-eliminacion-item-archivo").style.display = "none";
        }

        function guardarArchivo(archivo) {
            let nombreArchivo = archivo.files[0].name;
            let extensionDelArchivo = nombreArchivo.split('.');
            extensionDelArchivo = extensionDelArchivo[extensionDelArchivo.length - 1];

            if (document.getElementById("archivosNoDisponibleEnLaTabla")) {
                document.getElementById("archivosNoDisponibleEnLaTabla").remove();
            }

            let reader = new FileReader();
            reader.readAsDataURL(archivo.files[0]);
            reader.onload = function() {
                let base64 = reader.result;
                accionesDelArchivo = obtenerAccionesDelArchivoGuardado(extensionDelArchivo, base64, archivo);
                NombreDeLaExtensionDelArchivo = obtenerNombreDelTipoArchivo(extensionDelArchivo);
                estiloCss = obtenerEstiloDelTipoArchivo(extensionDelArchivo);

                document.getElementById("registrosDeArchivos").innerHTML +=
                    '<tr>' +
                    '<td>' +
                    '<div class="btn-group ">' +
                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                    'Acciones' +
                    '</button>' +
                    '<div class="dropdown-menu">' +
                    accionesDelArchivo +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td class="' + estiloCss + '">' + nombreArchivo + '</td>' +
                    '<td>' + NombreDeLaExtensionDelArchivo + '</td>' +
                    '</tr>';

                archivo.style.display = "none";
                let inputFile = document.createElement("input");
                inputFile.setAttribute("type", "file");
                inputFile.setAttribute("class", "form-control-file");
                inputFile.setAttribute("id", "campoArchivoDeTrabajo" + uuid());
                inputFile.setAttribute("name", "archivo_" + uuid());
                inputFile.setAttribute("onchange", "guardarArchivo(this)");
                document.getElementById("contenedorDeLosCamposDeTipoArchivo").appendChild(inputFile);
            };
            reader.onerror = function(error) {

            };
        }
    </script>

    <script>
        function editarArchivoDeLaOrdenDeTrabajo() {
            document.getElementById("botonDeEdicionDeArchivo").setAttribute("disabled", true);
            let formData = new FormData();
            formData.append('_method', "PUT");
            let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
            let archivosOc = document.getElementsByClassName("form-control-file");
            let asignacionDeIdArchivo = 0;
            for (let i = 0; i < totalDeArchivos; i++) {
                if (archivosOc[i].files.length > 0) {
                    asignacionDeIdArchivo++;
                    formData.append('archivos' + i, archivosOc[i].files[0]);
                }
            }
            formData.append('totalDeArchivos', asignacionDeIdArchivo);
            formData.append('listado_archivo_registrado', document.getElementById("listadoDeArchivosRegistrados").value);
            formData.append('listado_archivo_removido_por_el_usuario', document.getElementById("listadoDeArchivosRemovidosPorElUsuario").value);
            var csrf = '{{ csrf_token() }}';
            if (asignacionDeIdArchivo > 0) {
                document.getElementById("preloader").removeAttribute("style");
                document.getElementById("img-preloader").style.display = "block";
                $.ajax({
                    url: '{{ route('orden-trabajo.update-archivos', $ordenDeTrabajo) }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        Swal.fire({
                                icon: 'success',
                                title: '¡Orden De Trabajo Editada!',
                                text: 'La orden de trabajo ' + data.numero_orden_trabajo + ' se edito con éxito',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                location.reload();
                            })
                            .catch((error) => {
                                location.reload();
                            });

                        document.getElementById("botonDeEdicionDeArchivo").removeAttribute("disabled");
                        document.getElementById("preloader").style.height = "0px";
                        document.getElementById("img-preloader").style.display = "none";
                    },
                    error: function(data) {
                        console.log(data)
                        document.getElementById("botonDeEdicionDeArchivo").removeAttribute("disabled");
                        document.getElementById("preloader").style.height = "0px";
                        document.getElementById("img-preloader").style.display = "none";
                    }
                })
            } else {
                document.getElementById("preloader").removeAttribute("style");
                document.getElementById("img-preloader").style.display = "block";
                $.ajax({
                    url: '{{ route('orden-trabajo.update-archivos', $ordenDeTrabajo) }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        Swal.fire({
                                icon: 'success',
                                title: '¡Orden De Trabajo Editada!',
                                text: 'La orden de trabajo ' + data.numero_orden_trabajo + ' se edito con éxito',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                location.reload();
                            })
                            .catch((error) => {
                                location.reload();
                            });

                        document.getElementById("botonDeEdicionDeArchivo").removeAttribute("disabled");
                        document.getElementById("preloader").style.height = "0px";
                        document.getElementById("img-preloader").style.display = "none";
                    },
                    error: function(data) {
                        console.log(data)
                        document.getElementById("botonDeEdicionDeArchivo").removeAttribute("disabled");
                        document.getElementById("preloader").style.height = "0px";
                        document.getElementById("img-preloader").style.display = "none";
                    }
                })
            }
        }
    </script>
@stop