@extends('layouts.app')

@section('title', 'Detalle de Pedido')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
<div class="alistamiento">
    @if ($details->isNotEmpty())
     
    

    <h2>Detalle Pedido #:  {{ $idActivo = ltrim($details->first()->FDI_CLIENTEPROVEEDOR, '0') }} </h2>
    @php
            $total_alistada = $details->sum('alistada');
            $total_cantidad = $details->sum('FDI_CANTIDAD');
            $porcentaje_total = ($total_cantidad > 0) ? ($total_alistada / $total_cantidad) * 100 : 0;
        @endphp
        
        <h2> --- Porcentaje de alistamiento: {{ number_format($porcentaje_total, 2) }}%</h2>
    @endif
</div>
    @if (session('success'))
        <p>{{ session('success') }}</p>
    @endif

    <table>
        <thead>
            <tr>
                <th>CODIGO</th>
                <th>PRODUCTO</th>
                <th>LOTE</th>
                <th>CANTIDAD</th>
                <th>ALISTADO</th>
                <th>PORCETAJE</th>
                
            </tr>
        </thead>
        <tbody>
            @foreach ($details as $detail)
                <tr>
                    <td><h3>{{ $detail->FDI_CODIGO }}</h3></td>
                    <td>{{ $detail->FDI_PRODUCTO }}</td>
                    <td>{{ $detail->FDI_LOTE }}</td>
                    <td>{{ $detail->FDI_CANTIDAD }}</td>
                    <form action="{{ route('detail.updateQuantity', $detail->FDI_AUTOINCREMENT) }}" method="POST">
                    <td>
                       
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="pedido" value="{{ $detail->FDI_OPERACION_AUTOINCREMENT }}">
                            <input type="number"size="1"  name="cantidad_editada" min="0" max="{{ $detail->FDI_CANTIDAD }}" value="{{ $detail->alistada }}" required >
                        </td>
                    <td>
                            <button type="submit ancho100">Actualizar</button>
                       

                    </td>
                </form>
                    <td>
                    
                    </td>
    
                </tr>
            @endforeach
        </tbody>
    </table>


    {{-- ------------------------------------------------------ --}}


     @php
    //$PedidoActivo = $PedidoActivo ; // Ejemplo, debes definirlo dinámicamente según tu lógica
    $rutaArchivos = public_path('storage/pedidos');
    $urlArchivos = asset('storage/pedidos');
    $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/pedidos/{$pedido}_{$letra}*"));
        foreach ($files as $file) {
            $archivos[] = basename($file);
        }
        return $archivos;
    }

    $archivosOrdenes = archivosPorSeccion($idActivo, 'd');
    
@endphp

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

  <!-- Sección Delle  -->
    <div class="seccion" data-seccion="d">
        <h3>Evidencias</h3>
        <div class="dropzone" id="dropzone_d">
            <p>Arrastra o selecciona archivos para Evidencias </p>
            <input type="file" id="input_d" 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_d"></div>
        <div class="archivos-guardados" id="archivos_guardados_d">
            <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>

        <input type="hidden" name="pedido" id="pedido" value="{{ $idActivo }}">
    <button type="submit">Guardar archivos</button>
</form>


    {{-- ------------------------------------------------------ --}}



   {{--  <form id="upload-form" action="{{ route('pedido.upload.store', ['id' => $idActivo]) }}" method="POST" enctype="multipart/form-data">
        @csrf
    
        <div id="drop-area">
    <p>Arrastra y suelta imágenes aquí o haz clic para seleccionar: {{$idActivo}}</p>
    <input type="file" name="images[]" id="file-input" accept="image/png, image/jpeg" multiple hidden>
</div>

        <button type="submit" class="ancho100" disabled>Subir Imágenes</button>
    </form>

    <td>
        
 

    <h3>Imágenes A Subir </h3>
    <div class="image-gallery">
        @foreach ($imageUrls as $imageUrl)
            <div class="thumbnail">
                <img src="{{ $imageUrl }}" alt="Imagen Pedido {{ $idActivo }}">
            </div>
        @endforeach
    </div>

     <h3>Archivos Subidos</h3>
        <div id="file-gallery">
           
        </div>

    </td>   --}}

    <a href="{{ url('/orders') }}">Volver a Pedidos</a>

    {{-- <script src="{{ asset('js/upload.js') }}"></script> --}}


    <script>
document.addEventListener('DOMContentLoaded', function() {
    ['d'].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