@extends('layouts.kaiadmin.master')

@section('content')
<br>
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="card-title mb-0">{{ $item['title'] }}</h1>
                <small class="text-muted">
                    Creado: {{ \Carbon\Carbon::parse($item['created_at'])->format('d/m/Y H:i') }}
                    @if($item['updated_at'] !== $item['created_at'])
                        | Actualizado: {{ \Carbon\Carbon::parse($item['updated_at'])->format('d/m/Y H:i') }}
                    @endif
                </small>
            </div>
            <div class="card-tools">
                <a href="{{ route('accesoinformacion.edit', $item['id']) }}" class="btn btn-outline-primary btn-sm me-2">
                    <i class="fas fa-edit"></i> Editar
                </a>
                <button type="button" class="btn btn-primary" id="uploadFileButton">
                    <i class="fas fa-upload"></i> Subir archivos
                </button>
                <a href="{{ route('accesoinformacion.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left"></i> Volver
                </a>
            </div>
        </div>
    </div>

    <div class="card-body">
        @if(session('success'))
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: '{{ session('success') }}',
                        showConfirmButton: true,
                        confirmButtonText: 'Aceptar',
                    });
                });
            </script>
        @endif

        @if(session('error'))
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: '{{ session('error') }}',
                        showConfirmButton: true,
                        confirmButtonText: 'Aceptar',
                    });
                });
            </script>
        @endif

        <!-- Descripción del item -->
        <div class="mb-4">
            <h5>Descripción:</h5>
            <p class="text-muted">{{ $item['description'] }}</p>
        </div>

        <hr>

        <!-- Sección de archivos -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4>Archivos adjuntos</h4>
            <span class="badge bg-primary">{{ count($files) }} archivo(s)</span>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="filesTable">
                <thead class="table-light">
                    <tr>
                        <th width="40%">Nombre del archivo</th>
                        <th width="15%">Tamaño</th>
                        <th width="20%">Fecha de subida</th>
                        <th width="25%">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($files as $fileId => $file)
                        <tr id="file-row-{{ $fileId }}">
                            <td>
                                <i class="fas {{ getFileIcon($file['mime_type']) }} me-2"></i>
                                {{ $file['name'] }}
                            </td>
                            <td>{{ formatFileSize($file['size']) }}</td>
                            <td>{{ \Carbon\Carbon::parse($file['uploaded_at'])->format('d/m/Y H:i') }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ asset('storage/' . $file['path']) }}" 
                                       target="_blank" class="btn btn-success btn-sm">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>
                                    <a href="{{ route('accesoinformacion.downloadFile', ['id' => $id, 'fileId' => $fileId]) }}" 
                                       class="btn btn-info btn-sm">
                                        <i class="fas fa-download"></i> Descargar
                                    </a>
                                    <button type="button" 
                                            class="btn btn-danger btn-sm delete-file-button" 
                                            data-file-id="{{ $fileId }}" 
                                            data-file-name="{{ $file['name'] }}"
                                            data-delete-url="{{ route('accesoinformacion.deleteFile', ['id' => $id, 'fileId' => $fileId]) }}">
                                        <i class="fas fa-trash"></i> Eliminar
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr id="no-files-row">
                            <td colspan="4" class="text-center">
                                <div class="py-4">
                                    <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                    <p class="text-muted">No hay archivos adjuntos aún.</p>
                                    <button type="button" class="btn btn-primary" onclick="document.getElementById('uploadFileButton').click()">
                                        <i class="fas fa-upload"></i> Subir primer archivo
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
// Modal para subir archivos
document.getElementById('uploadFileButton').addEventListener('click', function () {
    Swal.fire({
        title: 'Subir archivos',
        html: `
            <form id="uploadForm" enctype="multipart/form-data">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="form-group mb-3">
                    <label for="file" class="form-label">Seleccionar archivos</label>
                    <input type="file" class="form-control" name="file[]" multiple required
                           accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                    <small class="form-text text-muted">
                        Formatos permitidos: PDF, DOC, DOCX, XLS, XLSX, JPG, JPEG, PNG (máximo 10MB por archivo)
                    </small>
                </div>
                <div id="fileList" class="mt-3"></div>
            </form>
            <div id="progress-container" class="mt-3" style="display: none;">
                <div class="progress">
                    <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" style="width: 0%"></div>
                </div>
                <div id="progress-text" class="text-center mt-2">0%</div>
            </div>
        `,
        width: '600px',
        confirmButtonText: 'Subir archivos',
        showCancelButton: true,
        cancelButtonText: 'Cancelar',
        focusConfirm: false,
        didOpen: () => {
            const popup = Swal.getPopup();
            const inputFile = popup.querySelector('input[name="file[]"]');
            const fileListDiv = popup.querySelector('#fileList');

            inputFile.addEventListener('change', () => {
                const files = Array.from(inputFile.files);
                if (files.length > 0) {
                    let html = '<div class="alert alert-info"><strong>Archivos seleccionados:</strong><ul class="mb-0 mt-2">';
                    files.forEach(file => {
                        const fileName = file.name;
                        const fileSize = formatFileSize(file.size);
                        html += `<li>${fileName} (${fileSize})</li>`;
                    });
                    html += '</ul></div>';
                    fileListDiv.innerHTML = html;
                } else {
                    fileListDiv.innerHTML = '';
                }
            });

            // Función para formatear tamaño de archivo en JS
            function formatFileSize(bytes) {
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                if (bytes === 0) return '0 Bytes';
                const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
                return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
            }
        },
        preConfirm: () => {
            const fileInput = Swal.getPopup().querySelector('input[name="file[]"]');
            if (!fileInput.files.length) {
                Swal.showValidationMessage('Debe seleccionar al menos un archivo');
                return false;
            }

            return new Promise((resolve, reject) => {
                const formData = new FormData(Swal.getPopup().querySelector('#uploadForm'));
                const xhr = new XMLHttpRequest();
                xhr.open('POST', "{{ route('accesoinformacion.uploadFile', ['id' => $id]) }}", true);

                document.getElementById('progress-container').style.display = 'block';
                Swal.getConfirmButton().disabled = true;
                Swal.getCancelButton().disabled = true;

                xhr.upload.onprogress = (event) => {
                    if (event.lengthComputable) {
                        const percentComplete = (event.loaded / event.total) * 100;
                        const progressBar = document.getElementById('progress-bar');
                        const progressText = document.getElementById('progress-text');

                        progressBar.style.width = percentComplete + '%';
                        progressText.textContent = Math.round(percentComplete) + '%';
                    }
                };

                xhr.onload = () => {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Archivos subidos con éxito!',
                                text: response.message,
                                showConfirmButton: true,
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message || 'Error al subir los archivos.',
                            });
                        }
                        resolve();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error al subir los archivos.',
                        });
                        reject();
                    }
                };

                xhr.onerror = () => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error en la conexión.',
                    });
                    reject();
                };

                xhr.send(formData);
            });
        }
    });
});


// Event listener para eliminar archivos
document.addEventListener('DOMContentLoaded', function() {
    const deleteButtons = document.querySelectorAll('.delete-file-button');

    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const fileId = this.getAttribute('data-file-id');
            const fileName = this.getAttribute('data-file-name');
            const deleteUrl = this.getAttribute('data-delete-url'); // Nueva línea
            
            Swal.fire({
                title: '¿Estás seguro?',
                text: `¿Deseas eliminar el archivo "${fileName}"? Esta acción no se puede deshacer.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Usar la URL del data attribute
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = deleteUrl; // URL completa desde el data attribute
                    
                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    
                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'DELETE';
                    
                    form.appendChild(csrfToken);
                    form.appendChild(methodField);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });
});

// Función para formatear bytes
</script>

<style>
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.btn-group .btn {
    border-radius: 0.25rem;
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

.progress {
    height: 20px;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.progress-bar {
    background-color: #007bff;
}

.file-icon {
    width: 20px;
    text-align: center;
}

.alert ul {
    padding-left: 1.5rem;
}

.table-responsive {
    border-radius: 0.375rem;
    overflow: hidden;
}

.empty-state {
    padding: 3rem 1rem;
}

.empty-state i {
    opacity: 0.5;
}
</style>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection

@php
// Funciones auxiliares para el helper
function getFileIcon($mimeType) {
    if (strpos($mimeType, 'pdf') !== false) return 'fa-file-pdf text-danger';
    if (strpos($mimeType, 'word') !== false || strpos($mimeType, 'document') !== false) return 'fa-file-word text-primary';
    if (strpos($mimeType, 'excel') !== false || strpos($mimeType, 'spreadsheet') !== false) return 'fa-file-excel text-success';
    if (strpos($mimeType, 'image') !== false) return 'fa-file-image text-info';
    return 'fa-file text-secondary';
}

function formatFileSize($bytes) {
    if ($bytes === 0) return '0 Bytes';
    $k = 1024;
    $sizes = ['Bytes', 'KB', 'MB', 'GB'];
    $i = floor(log($bytes) / log($k));
    return round($bytes / pow($k, $i), 2) . ' ' . $sizes[$i];
}
@endphp