@extends('layouts.simple.master')

@section('main_content')
@include('operations.comercial.ofertas.navigation')

<div class="container-fluid mt-5">
    <div class="card">
        <div class="card-header bg-danger text-white">
            <h5 class="mb-0">Valoración Cualitativa - {{ $oferta->codigo_proyecto }}</h5>
        </div>
        <div class="card-body">
            <div class="text-start mb-3">
                <a href="{{ request('redirect', route('operations.comercial.ofertas.cial_ofertas.index')) }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Volver
                </a>
            </div>
            <form id="uploadForm" action="{{ route('operations.comercial.ofertas.cial_ofertas.cualitativo.upload', $oferta->id) }}" 
                  method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mb-3">
                    <label class="form-label">Tipo de Fichero</label>
                    <select name="tipo_fichero" class="form-select" id="tipo_fichero">  
                        <option value="Informe Valoracion">Informe Valoracion</option>
                        <option value="Aciertos y Mejoras">Aciertos y Mejoras</option>
                        <option value="Pliego">Pliego</option>
                    </select>
                    <input type="hidden" name="tipo_fichero" id="tipo_fichero_input" value="Informe Valoracion">
                </div>

                <div class="mb-3">
                    <div id="dropZone" class="border rounded p-5 text-center">
                        <i class="bi bi-cloud-upload display-4"></i>
                        <p>Arrastra archivos aquí o haz clic para seleccionar</p>
                        <input type="file" name="file" id="fileInput" class="d-none" required>
                    </div>
                </div>

                <!-- Preview section -->
                <div id="filePreview" class="mt-3" style="display: none;">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Archivo seleccionado</th>
                                    <th>Procesar GPT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td id="selectedFileName"></td>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="procesar_gpt" id="procesarGpt">
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary">Subir Archivo</button>
                </div>

                <!-- Lista de archivos existentes -->
                <div class="mt-4">
                    <h6>Archivos Subidos</h6>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Tipo</th>
                                    <th>Nombre</th>
                                    <th>Estado GPT</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($oferta->ficheros as $fichero)
                                    <tr>
                                        <td>{{ $fichero->tipo_fichero }}</td>
                                        <td>
                                            <a href="{{ route('operations.comercial.ofertas.cial_ofertas.cualitativo.download', $fichero->id) }}" target="_blank">
                                                {{ $fichero->nombre_fichero }}
                                            </a>
                                        </td>
                                        <td>
                                            @if($fichero->gpt == 'Procesado')
                                                <span class="badge bg-success">Procesado</span>
                                            @else
                                                <select class="form-select form-select-sm" 
                                                        onchange="updateGptStatus({{ $fichero->id }}, this.value)">
                                                    <option value="No Procesar" {{ $fichero->gpt == 'No Procesar' || !$fichero->gpt ? 'selected' : '' }}>
                                                        No procesar
                                                    </option>
                                                    <option value="Procesar" {{ $fichero->gpt == 'Procesar' ? 'selected' : '' }}>
                                                        Procesar
                                                    </option>
                                                </select>
                                            @endif
                                        </td>
                                        <td>
                                            <button type="button" 
                                                    class="btn btn-sm btn-danger"
                                                    onclick="deleteFichero({{ $fichero->id }})">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const filePreview = document.getElementById('filePreview');
const selectedFileName = document.getElementById('selectedFileName');
const selectedTypeFile = document.getElementById('tipo_fichero');

selectedTypeFile.addEventListener('change', function() {
    document.getElementById('tipo_fichero_input').value = this.value;
});

dropZone.addEventListener('click', () => fileInput.click());

fileInput.addEventListener('change', function(e) {
    if (this.files.length > 0) {
        selectedFileName.textContent = this.files[0].name;
        filePreview.style.display = 'block';
    }
});

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults (e) {
    e.preventDefault();
    e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, highlight, false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, unhighlight, false);
});

function highlight(e) {
    dropZone.classList.add('border-primary');
}

function unhighlight(e) {
    dropZone.classList.remove('border-primary');
}

dropZone.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    
    if (files.length > 0) {
        fileInput.files = files;
        selectedFileName.textContent = files[0].name;
        filePreview.style.display = 'block';
    }
}

function deleteFichero(id) {
    if (confirm('¿Está seguro de eliminar este archivo?')) {
        fetch(`/operations/comercial/ofertas/cial_ofertas/cualitativo/fichero/${id}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.reload();
            } else {
                alert('Error al eliminar el archivo');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar el archivo');
        });
    }
}

function updateGptStatus(ficheroId, status) {
    fetch(`/operations/comercial/ofertas/cial_ofertas/cualitativo/updatestatus/${ficheroId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ gpt: status })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (!data.success) {
            throw new Error(data.message || 'Error al actualizar el estado');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al actualizar el estado: ' + error.message);
        window.location.reload();
    });
}
</script>
@endsection