@extends('layouts.app')

@section('title', 'Editar Pedido')

@section('content')
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <h2>Editar Pedido</h2>

    @if ($errors->any())
        <div>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="TodoEditarPedido">
    <div class="contenedorTabla">

    <table class="tablaEditar">
    <form action="{{ route('orders.update', $order->FTI_AUTOINCREMENT) }}" method="POST">
        @csrf
        @method('PUT')
      
        <tr> <td> <h3> Pedido #{{  $PedidoActivo = ltrim($order->FTI_DOCUMENTO, '0')   }}
            @if ($order->prioridad == 1)
            <i class="fas fa-check-circle normal"></i> <!-- Ícono aprobado (verde) -->
        @else
            <i class="fas fa-exclamation-circle vencido"></i> <!-- Ícono pendiente (rojo) -->
        @endif
    </h3>
        </td></tr>
        <tr> <td> 
            <div class="fechaHora"> 
                <div class="fechaHoraDeltalle"> <p><strong>Fecha Emisión:</strong> {{ \Carbon\Carbon::parse($order->FTI_FECHAEMISION)->format('d-m-Y') }}</p></div>
                <div class="fechaHoraDeltalle"> <p><strong>Hora:</strong> {{ $order->FTI_HORA }}</p> </div>
            </div>
           
                    <p><strong>Cliente:</strong> {{ $order->FTI_PERSONACONTACTO }}</p>
                    <p><strong>Contacto:</strong> {{ $order->FTI_NOMBRECONTACTO }}</p>
                    <p><strong>Direccion despacho:</strong> {{ $order->FTI_DIRECCIONDESPACHO }}</p>
               
                    <p><strong>Direccion despacho:</strong> {{ $order->DPTO_DESPACHO }}</p>
               
                    <p><strong>Direccion despacho:</strong> {{ $order->CIUDAD_DESPACHO }}</p>
               
                </td></tr>

        {{--         <tr> <td>
                    <div class="editField"> 
                    
                    <div class="editLabel"> 
                    <label>Despacho A:</label>  </div>
                    <div class="editText">   <input size="40" name="despachoa" id="despachoa"  type="text" value="{{ $order->FTI_DIRECCIONDESPACHO   }}" >
                </div>
            </div>
                </td> </tr>




                <tr> <td>
                    <div class="editField"> 
                    
               <div class="editLabel">  <label>Departamento:</label>  </div>
                <div class="editText">   <input  name="depto" id="depto" type="text" value="{{ $order->DPTO_DESPACHO  }}" >
                    </div>
                </div>
                </td> </tr>

                <tr> <td>
                    <div class="editField"> 
                    <div class="editLabel"> 
                    <label>Ciudad:</label>  </div>
                    <div class="editText">    <input    name="ciudad" id="ciudad"  type="text" value="{{ $order->CIUDAD_DESPACHO }}" >
                    </div>
                </div>
                </td> </tr>

 --}}
                <tr> <td>
                    <div class="editField"> 
                    <div class="editLabel"> 
                <label>Observacion:</label>  </div>
                <div class="editText">     <textarea name="nota" id="nota" rows="3" cols="65"  >{{ $order->FTI_DETALLECOMENTARIO }}</textarea>
                    </div>
                </div>
                </td> </tr>

                    <tr> <td>
            <label for="prioridad">Codicion de pago:</label>
            <select name="prioridad" id="prioridad" required>
                @foreach($prioridades as $prioridad)
                <option value="{{ $prioridad->id_prioridad}}" {{ $order->prioridad == $prioridad->id_prioridad ? 'selected' : '' }}>
                    {{ $prioridad->nombre_prioridad }}
                </option>
            @endforeach
            </select>
        </td></tr>


        <tr> <td>
            <div class="fechaHora"> 
                <div class="fechaHoraDeltalle"> 
                    <label for="fecha"><strong>Fecha Vencimiento:</strong></label>
                    <input type="date" name="fecha" id="fecha" value="{{ \Carbon\Carbon::parse($order->FTI_FECHAVENCIDO)->format('Y-m-d') }}" required>
                </div>
                <div class="fechaHoraDeltalle"> 
                    <label for="vencido"><strong>Hora:</strong></label>
                    <input type="time" name="vencido" id="vencido" value="{{ $order->HORA_VENCIDO }}" required>
                </div>
            </div>
        </td></tr>
       
        <tr>
            <td>
                <label for="estado">Estado:</label>
                <select name="estado" id="estado" required>
                    @foreach($estados as $estado)
                        @if ($order->prioridad == 1 || $estado->id_estado != 6) 
                            <option value="{{ $estado->id_estado }}" {{ $order->estado == $estado->id_estado ? 'selected' : '' }}>
                                {{ $estado->nombre_estado }}
                            </option>
                        @endif
                    @endforeach
                </select>
            </td>
        </tr>
        

        <tr>
            <td>
                <label for="operador">Operador:</label>
                <select name="operador" id="operador" required>
                    @foreach($operadores as $operador)
                        @if ($operador->rol == 3 || $operador->rol == 4)
                            <option value="{{ $operador->id_users }}" {{ $order->operador == $operador->id_users ? 'selected' : '' }}>
                                {{ $operador->nombre_usuario }}
                            </option>
                        @endif
                    @endforeach
                </select>
            </td>
        </tr>
        

        <tr> <td>
        <label for="despacho">Despacho:</label>
        <select name="despacho" id="despacho" required>
            @foreach($despachos as $despacho)
            <option value="{{ $despacho->id_despacho}}" {{ $order->despacho == $despacho->id_despacho ? 'selected' : '' }}>
                {{ $despacho->nombre_despacho }}
            </option>
        @endforeach
        </select>
    </td></tr>

        <tr> <td>
        <label for="transportadora">Transportadora:</label>
        <select name="transportadora" id="transportadora" required>
            @foreach($transportadoras as $transportadora)
            <option value="{{ $transportadora->id_transportadora}}" {{ $order->transportadora == $transportadora->id_transportadora ? 'selected' : '' }}>
                {{ $transportadora->nombre_transportadora }}
            </option>
        @endforeach
        </select>
    </td></tr>

        <tr> <td>
        <button type="submit" class="ancho100">Actualizar Pedido</button>
    </td></tr>
    </form>
</table>
</div>

    <div class="contenedorTabla">
   <table class="tablaEditar">
    </table>
    <tr> <td> <h3>   Soportes </h3></td></tr>
    <tr> <td>
      {{-- ------------------------------------------------------ --}}


 {{--      <div class="dropzone-section">
    @foreach (['o' => 'Órdenes', 'p' => 'Pagos', 'c' => 'Cotizaciones'] as $tipo => $titulo)
    <div class="zonaDrop" data-tipo="{{ $tipo }}">
        <h3>{{ $titulo }}</h3>
        <div class="drop-area" data-tipo="{{ $tipo }}">
            Arrastra y suelta archivos aquí (PDF o imágenes)<br>
            o haz clic para seleccionar
            <input type="file" class="input-file" accept=".pdf,image/*" multiple data-tipo="{{ $tipo }}">
        </div>
        <div class="preview" id="preview-{{ $tipo }}"></div>
    </div>
    @endforeach
</div>
 --}}


 @php
    //$PedidoActivo = $PedidoActivo ; // Ejemplo, debes definirlo dinámicamente según tu lógica
    $rutaArchivos = public_path('storage/soportes');
    $urlArchivos = asset('storage/soportes');
    $iconoPdf = asset('icons/pdf-icon.png');

    // Función para obtener archivos guardados según sección
    function archivosPorSeccion($pedido, $letra) {
        $archivos = [];
        $files = glob(public_path("storage/soportes/{$pedido}_{$letra}*"));
        foreach ($files as $file) {
            $archivos[] = basename($file);
        }
        return $archivos;
    }

    $archivosOrdenes = archivosPorSeccion($PedidoActivo, 'o');
    $archivosPagos = archivosPorSeccion($PedidoActivo, 'p');
    $archivosCotizaciones = archivosPorSeccion($PedidoActivo, 'c');
@endphp

<form method="POST" action="{{ route('pedido.uploadFilesDrop') }}" enctype="multipart/form-data" id="formUploadFiles">
    @csrf
    @method('POST')

    <!-- Sección Órdenes -->
    <div class="seccion" data-seccion="o">
        <h3>Órden de compra cliente</h3>
        <div class="dropzone" id="dropzone_o">
            <p>Arrastra o selecciona archivos para Órdenes</p>
            <input type="file" id="input_o" name="ordenes[]" multiple accept="image/*,application/pdf" style="display:none;">
          {{--   <button type="button" onclick="document.getElementById('input_o').click()">Seleccionar archivos</button> --}}
        </div>
        <div class="previsualizacion" id="preview_o"></div>
        <div class="archivos-guardados" id="archivos_guardados_o">
            <h4>Archivos guardados</h4>
            @foreach($archivosOrdenes as $archivo)
                @php
                    $ext = pathinfo($archivo, PATHINFO_EXTENSION);
                    $url = $urlArchivos.'/'.$archivo;
                @endphp
                <div class="archivo-guardado">
                    @if(in_array(strtolower($ext), ['png','jpg','jpeg','gif','bmp','webp']))
                        <a href="{{ $url }}" target="_blank">
                            <img src="{{ $url }}" alt="{{ $archivo }}" class="miniatura-guardada" />
                        </a>
                    @elseif(strtolower($ext) === 'pdf')
                        <a href="{{ $url }}" target="_blank">
                            <img src="{{ $iconoPdf }}" alt="PDF" class="icono-pdf" />
                            <span>{{ $archivo }}</span>
                        </a>
                    @else
                        <a href="{{ $url }}" target="_blank">{{ $archivo }}</a>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <!-- Sección Pagos -->
    <div class="seccion" data-seccion="p">
        <h3>Soporte de Pago</h3>
        <div class="dropzone" id="dropzone_p">
            <p>Arrastra o selecciona archivos para Pagos</p>
            <input type="file" id="input_p" name="pagos[]" multiple accept="image/*,application/pdf" style="display:none;">
           {{--  <button type="button" onclick="document.getElementById('input_p').click()">Seleccionar archivos</button> --}}
        </div>
        <div class="previsualizacion" id="preview_p"></div>
        <div class="archivos-guardados" id="archivos_guardados_p">
            <h4>Archivos guardados</h4>
            @foreach($archivosPagos as $archivo)
                @php
                    $ext = pathinfo($archivo, PATHINFO_EXTENSION);
                    $url = $urlArchivos.'/'.$archivo;
                @endphp
                <div class="archivo-guardado">
                    @if(in_array(strtolower($ext), ['png','jpg','jpeg','gif','bmp','webp']))
                        <a href="{{ $url }}" target="_blank">
                            <img src="{{ $url }}" alt="{{ $archivo }}" class="miniatura-guardada" />
                        </a>
                    @elseif(strtolower($ext) === 'pdf')
                        <a href="{{ $url }}" target="_blank">
                            <img src="{{ $iconoPdf }}" alt="PDF" class="icono-pdf" />
                            <span>{{ $archivo }}</span>
                        </a>
                    @else
                        <a href="{{ $url }}" target="_blank">{{ $archivo }}</a>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <!-- Sección Cotizaciones -->
    <div class="seccion" data-seccion="c">
        <h3>Cotizaciones</h3>
        <div class="dropzone" id="dropzone_c">
            <p>Arrastra o selecciona archivos para Cotizaciones</p>
            <input type="file" id="input_c" name="cotizaciones[]" multiple accept="image/*,application/pdf" style="display:none;">
           {{--  <button type="button" onclick="document.getElementById('input_c').click()">Seleccionar archivos</button> --}}
        </div>
        <div class="previsualizacion" id="preview_c"></div>
        <div class="archivos-guardados" id="archivos_guardados_c">
            <h4>Archivos guardados</h4>
            @foreach($archivosCotizaciones as $archivo)
                @php
                    $ext = pathinfo($archivo, PATHINFO_EXTENSION);
                    $url = $urlArchivos.'/'.$archivo;
                @endphp
                <div class="archivo-guardado">
                    @if(in_array(strtolower($ext), ['png','jpg','jpeg','gif','bmp','webp']))
                        <a href="{{ $url }}" target="_blank">
                            <img src="{{ $url }}" alt="{{ $archivo }}" class="miniatura-guardada" />
                        </a>
                    @elseif(strtolower($ext) === 'pdf')
                        <a href="{{ $url }}" target="_blank">
                            <img src="{{ $iconoPdf }}" alt="PDF" class="icono-pdf" />
                            <span>{{ $archivo }}</span>
                        </a>
                    @else
                        <a href="{{ $url }}" target="_blank">{{ $archivo }}</a>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
    <input type="hidden" name="pedido" id="pedido" value="{{ $PedidoActivo }}">
    <button type="submit">Guardar archivos</button>
</form>

       {{-- ------------------------------------------------------ --}}
    </td></tr>
    </table>
    </div>

</div>

    <a href="{{ route('orders.index') }}">Cancelar</a>

   
  <script>
    /*
    document.addEventListener("DOMContentLoaded", function () {
        const pedido = "{{ $PedidoActivo }}";
        const fecha = new Date();
        const fechaStr = `${fecha.getDate()}_${fecha.getMonth() + 1}_${fecha.getFullYear()}`;

        function renameAndUpload(files, tipo) {
            const formData = new FormData();
            let consecutivo = 1;

            for (const file of files) {
                const ext = file.name.split('.').pop();
                const nuevoNombre = `${pedido}_${tipo}_${fechaStr}_${consecutivo}.${ext}`;
                formData.append('files[]', file, nuevoNombre);
                consecutivo++;
            }

            formData.append('tipo', tipo);
            formData.append('pedido', pedido);

            fetch("{{ route('pedido.uploadFilesDrop') }}", {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) loadFiles(tipo);
                else alert("Error al subir archivos");
            })
            .catch(err => alert("Error de red al subir archivos."));
        }

        document.querySelectorAll(".drop-area").forEach(area => {
            const tipo = area.dataset.tipo;
            const input = area.querySelector(".input-file");

            input.addEventListener("change", e => {
                renameAndUpload(e.target.files, tipo);
            });

            // Manejo del arrastrar y soltar
            area.addEventListener("dragover", e => {
                e.preventDefault();
                area.classList.add("dragover");
            });

            area.addEventListener("dragleave", e => {
                e.preventDefault();
                area.classList.remove("dragover");
            });

            area.addEventListener("drop", e => {
                e.preventDefault();
                area.classList.remove("dragover");
                const files = e.dataTransfer.files;
                renameAndUpload(files, tipo);
            });
        });

        
        function loadFiles(tipo) {
            fetch(`{{ url('pedido/files') }}/${pedido}`)
                .then(res => res.json())
                .then(files => {
                    const preview = document.getElementById(`preview-${tipo}`);
                    preview.innerHTML = '';
                    files.forEach(file => {
                        if (file.includes(`${pedido}_${tipo}_`)) {
                            const ext = file.split('.').pop();
                            const elem = ext === 'pdf'
                                ? `<a href="${file}" target="_blank"><img src="/icons/pdf-icon.png" width="50"></a>`
                                : `<img src="${file}" alt="archivo" width="80">`;
                            preview.innerHTML += elem;
                        }
                    });
                });
        }

        ['o', 'p', 'c'].forEach(loadFiles);
    });*/
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    ['o', 'p', 'c'].forEach(function(seccion) {
        const dropzone = document.getElementById('dropzone_' + seccion);
        const inputFile = document.getElementById('input_' + seccion);
        const preview = document.getElementById('preview_' + seccion);

        // Función para mostrar previsualización
        function mostrarPrevisualizacion(files) {
            preview.innerHTML = '';
            Array.from(files).forEach(file => {
                const ext = file.name.split('.').pop().toLowerCase();
                const contenedor = document.createElement('div');
                contenedor.style.display = 'inline-block';
                contenedor.style.margin = '5px';

                if(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext)) {
                    const img = document.createElement('img');
                    img.classList.add('miniatura');
                    img.style.width = '80px';
                    img.style.height = '80px';
                    img.style.objectFit = 'cover';
                    img.style.borderRadius = '4px';
                    img.style.border = '1px solid #ccc';
                    img.src = URL.createObjectURL(file);
                    contenedor.appendChild(img);
                } else if(ext === 'pdf') {
                    const iconPdf = document.createElement('img');
                    iconPdf.src = '{{ $iconoPdf }}';
                    iconPdf.alt = 'PDF';
                    iconPdf.style.width = '40px';
                    iconPdf.style.height = '50px';
                    iconPdf.style.display = 'block';
                    iconPdf.style.margin = '0 auto 4px';
                    contenedor.appendChild(iconPdf);
                    const span = document.createElement('span');
                    span.textContent = file.name;
                    span.style.fontSize = '12px';
                    contenedor.appendChild(span);
                } else {
                    const span = document.createElement('span');
                    span.textContent = file.name;
                    contenedor.appendChild(span);
                }

                preview.appendChild(contenedor);
            });
        }

        // Al cambiar input file
        inputFile.addEventListener('change', function() {
            mostrarPrevisualizacion(this.files);
        });

        // Drag & drop events
        dropzone.addEventListener('dragover', function(e) {
            e.preventDefault();
            dropzone.style.backgroundColor = '#e0e0e0';
        });
        dropzone.addEventListener('dragleave', function(e) {
            e.preventDefault();
            dropzone.style.backgroundColor = '';
        });
        dropzone.addEventListener('drop', function(e) {
            e.preventDefault();
            dropzone.style.backgroundColor = '';
            const dtFiles = e.dataTransfer.files;
            if(dtFiles.length) {
                // Añadir archivos al input file (esto es un poco limitado en JS puro)
                // La solución es crear un DataTransfer para "combinar" los archivos actuales + nuevos
                const dataTransfer = new DataTransfer();

                // Archivos actuales en input
                for(let i=0; i < inputFile.files.length; i++) {
                    dataTransfer.items.add(inputFile.files[i]);
                }
                // Nuevos archivos arrastrados
                for(let i=0; i < dtFiles.length; i++) {
                    dataTransfer.items.add(dtFiles[i]);
                }
                inputFile.files = dataTransfer.files;

                mostrarPrevisualizacion(inputFile.files);
            }
        });
    });
});
</script>



@endsection