@extends('layouts.simple.master')

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

<div class="container-fluid">
    <h2 class="mb-3">Detallar las Ofertas</h2>

    <!-- Filtros -->
    <div class="accordion mb-4" id="accordionFiltros">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingFiltros">
                <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFiltros" aria-expanded="false" aria-controls="collapseFiltros">
                    <span>Filtro detalles de las ofertas</span>
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
                        </svg>
                    </span>
                </button>
            </h2>
            <div id="collapseFiltros" class="accordion-collapse collapse" aria-labelledby="headingFiltros" data-bs-parent="#accordionFiltros">
                <div class="accordion-body">
                    <form method="GET" action="{{ route('operations.comercial.ofertas.details.index') }}" id="filterForm">
                        <div class="row align-items-center g-2">
                            <!-- Línea 1: Filtros básicos -->
                            <div class="col-md-2">
                                <label for="estado" class="form-label">Estado</label>
                                <select name="estado" id="estado" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    @foreach($estados as $value)
                                        <option value="{{ $value }}" {{ request('estado') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="sector" class="form-label">Sector</label>
                                <select name="sector" id="sector" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    @foreach($sectores as $value)
                                        <option value="{{ $value }}" {{ request('sector') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="tipo_licitacion" class="form-label">Tipo Licitación</label>
                                <select name="tipo_licitacion" id="tipo_licitacion" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    @foreach($tiposLicitacion as $value)
                                        <option value="{{ $value }}" {{ request('tipo_licitacion') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="fecha_desde" class="form-label">Desde</label>
                                <input type="date"
                                       name="fecha_desde"
                                       id="fecha_desde"
                                       class="form-control form-control-sm"
                                       value="{{ request('fecha_desde', now()->subMonths(12)->toDateString()) }}">
                            </div>
                            <div class="col-md-2">
                                <label for="fecha_hasta" class="form-label">Hasta</label>
                                <input type="date"
                                       name="fecha_hasta"
                                       id="fecha_hasta"
                                       class="form-control form-control-sm"
                                       value="{{ request('fecha_hasta', now()->addMonths(3)->toDateString()) }}">
                            </div>
                            <div class="col-md-2">
                                <label for="search" class="form-label">Buscar</label>
                                <div class="input-group">
                                    <input type="text" name="search" id="search" class="form-control form-control-sm" placeholder="Cliente u Objeto" value="{{ request('search') }}">
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <i class="bi bi-search"></i> <!-- Ícono de lupa -->
                                    </button>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Línea 2: Filtros adicionales -->
                        <div class="row align-items-center g-2 mt-2">
                            <div class="col-md-2">
                                <label for="linea_negocio" class="form-label">Línea de Negocio</label>
                                <select name="linea_negocio" id="linea_negocio" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    @foreach($lineasNegocio as $value)
                                        <option value="{{ $value }}" {{ request('linea_negocio') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="actividad_cliente" class="form-label">Actividad Cliente</label>
                                <select name="actividad_cliente" id="actividad_cliente" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    @foreach($actividadesCliente as $value)
                                        <option value="{{ $value }}" {{ request('actividad_cliente') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="renovable" class="form-label">Renovable</label>
                                <select name="renovable" id="renovable" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    <option value="Si" {{ request('renovable') == 'Si' ? 'selected' : '' }}>Sí</option>
                                    <option value="No" {{ request('renovable') == 'No' ? 'selected' : '' }}>No</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="fidelizacion" class="form-label">Fidelización</label>
                                <select name="fidelizacion" id="fidelizacion" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    @foreach($fidelizaciones as $value)
                                        <option value="{{ $value }}" {{ request('fidelizacion') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="provincia" class="form-label">Provincia</label>
                                <select name="provincia" id="provincia" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    @foreach($provincias as $value)
                                        <option value="{{ $value }}" {{ request('provincia') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="statusFilter" class="form-label">Estado Detalles</label>
                                <select name="status" id="statusFilter" class="form-control form-control-sm" onchange="document.getElementById('filterForm').submit()">
                                    <option value="">Todos</option>
                                    <option value="Completa" {{ request('status') == 'Completa' ? 'selected' : '' }}>Completa</option>
                                    <option value="Incompleta" {{ request('status') == 'Incompleta' ? 'selected' : '' }}>Incompleta</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Zona intermedia -->

    <div class="row mb-3">
        <!-- Registros a mostrar y botón de añadir -->
        <div class="col-12 d-flex justify-content-between align-items-center">
            <!-- Selección de registros a mostrar -->
            <div class="d-flex align-items-center">
                <label for="scrollLimit" class="form-label me-2">Registros:</label>
                <select id="scrollLimit" class="form-select form-select-sm d-inline-block w-auto me-3" onchange="setScrollLimit(this.value)">
                    <option value="100" {{ request('limit') == 100 ? 'selected' : '' }}>100</option>
                    <option value="200" {{ request('limit') == 200 ? 'selected' : '' }}>200</option>
                    <option value="300" {{ request('limit') == 300 ? 'selected' : '' }}>300</option>
                    <option value="all" {{ request('limit') == 'all' ? 'selected' : '' }}>Todos</option>
                </select>

                <!-- Filtro de status -->
                <label for="statusFilter" class="form-label me-2">Estado:</label>
                <select id="statusFilter" class="form-select form-select-sm d-inline-block w-auto" onchange="filterStatus(this.value)">
                    <option value="">Todos</option>
                    <option value="Completa" {{ request('status') == 'Completa' ? 'selected' : '' }}>Completa</option>
                    <option value="Incompleta" {{ request('status') == 'Incompleta' ? 'selected' : '' }}>Incompleta</option>
                </select>

                <!-- Filtro de Kanboard -->
                <label for="kanboardFilter" class="form-label me-2">Kanboard:</label>
                <select id="kanboardFilter" class="form-select form-select-sm d-inline-block w-auto" onchange="filterKanboard(this.value)">
                    <option value="">Todos</option>
                    <option value="Asignado" {{ request('kanboard') == 'Asignado' ? 'selected' : '' }}>Asignado</option>
                    <option value="Sin asignar" {{ request('kanboard') == 'Sin asignar' ? 'selected' : '' }}>Sin asignar</option>
                </select>

            </div>

        </div>
    </div>

    <!-- Tabla -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Cliente</th>
                                    <th>Línea de Negocio</th>
                                    <th>Actividad Cliente</th>
                                    <th>Renovable</th>
                                    <th>Fidelización</th>
                                    <th>Provincia</th>
                                    <th>Responsable</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($details as $detail)
                                    <tr class="{{
                                        $detail->oferta->estado === 'Pendiente' ? 'estado-pendiente' :
                                        ($detail->oferta->estado === 'Ganado' ? 'estado-ganado' :
                                        (in_array($detail->oferta->estado, ['Perdido', 'Pendiente de adjudicacion']) ? 'estado-perdido' :
                                        (in_array($detail->oferta->estado, ['Desestimado Cliente', 'Renuncia']) ? 'estado-desestimado' : 'estado-default')))
                                    }}">
                                        <td>{{ $detail->oferta->codigo_proyecto }}</td>
                                        <td>{{ $detail->oferta->cliente }}</td>
                                        <td>
                                            <select class="form-select form-select-sm" onchange="updateField(this, '{{ route('operations.comercial.ofertas.details.update.field', ['id' => $detail->id, 'field' => 'linea_negocio']) }}')">
                                                @foreach($lineasNegocio as $linea)
                                                    <option value="{{ $linea }}" {{ $detail->linea_negocio == $linea ? 'selected' : '' }}>
                                                        {{ $linea }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm" onchange="updateField(this, '{{ route('operations.comercial.ofertas.details.update.field', ['id' => $detail->id, 'field' => 'actividad_cliente']) }}')">
                                                @foreach($actividadesCliente as $actividad)
                                                    <option value="{{ $actividad }}" {{ $detail->actividad_cliente == $actividad ? 'selected' : '' }}>
                                                        {{ $actividad }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select onchange="updateField(this, '{{ route('operations.comercial.ofertas.details.update.field', ['id' => $detail->id, 'field' => 'renovable']) }}')">
                                                <option value="Si" {{ $detail->renovable == 'Si' ? 'selected' : '' }}>Sí</option>
                                                <option value="No" {{ $detail->renovable == 'No' ? 'selected' : '' }}>No</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select onchange="updateField(this, '{{ route('operations.comercial.ofertas.details.update.field', ['id' => $detail->id, 'field' => 'fidelizacion']) }}')">
                                                @foreach($fidelizaciones as $fidelizacion)
                                                    <option value="{{ $fidelizacion }}" {{ $detail->fidelizacion == $fidelizacion ? 'selected' : '' }}>
                                                        {{ $fidelizacion }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm" onchange="updateField(this, '{{ route('operations.comercial.ofertas.details.update.field', ['id' => $detail->id, 'field' => 'provincia_oferta']) }}')">
                                                <option value="">Seleccione una provincia</option>
                                                @foreach($provincias as $provincia)
                                                    <option value="{{ $provincia }}" {{ $detail->provincia_oferta == $provincia ? 'selected' : '' }}>
                                                        {{ $provincia }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm" onchange="updateField(this, '{{ route('operations.comercial.ofertas.details.update.field', ['id' => $detail->id, 'field' => 'responsable']) }}')">
                                                <option value="">Seleccione un responsable</option>
                                                @foreach($users as $user)
                                                    <option value="{{ $user->id }}" {{ $detail->responsable == $user->id ? 'selected' : '' }}>
                                                        {{ $user->first_name }} {{ $user->last_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td class="text-center">
                                            @if($detail->status && $detail->status->status_details === 'Completa')
                                                <i class="bi bi-emoji-smile text-success"></i>
                                            @else
                                                <i class="bi bi-emoji-frown text-danger"></i>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="11" class="text-center">No hay registros disponibles.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="11" class="text-center">
                                        <div class="d-flex justify-content-center">
                                            {{ $details->links('pagination::bootstrap-5') }}
                                        </div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



</div>
@endsection

<script>
function executeKanboardSearch(detailId) {
    const searchInput = document.getElementById(`kanboardSearch_${detailId}`);
    const filter = searchInput.value.trim();
    const taskList = document.getElementById(`kanboardTaskList_${detailId}`);

    // Validar entrada
    if (filter.length < 1) {
        alert('Por favor, escribe algo para buscar.');
        return;
    }

    // Mostrar un estado de carga
    taskList.innerHTML = '<li class="list-group-item">Buscando...</li>';

    // Realizar la búsqueda
    fetch(`{{ route('operations.comercial.ofertas.details.search.kanboard') }}?q=${encodeURIComponent(filter)}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Error al realizar la búsqueda.');
            }
            return response.json();
        })
        .then(data => {
            // Mostrar resultados en la lista
            if (data.length === 0) {
                taskList.innerHTML = '<li class="list-group-item">No se encontraron resultados.</li>';
            } else {
                taskList.innerHTML = data.map(task => `
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        ${task.task_title}
                        <button
                            class="btn btn-primary btn-sm"
                            onclick="selectKanboardTask('${task.task_id}', '${detailId}')"
                            data-bs-dismiss="modal"
                        >
                            Seleccionar
                        </button>
                    </li>
                `).join('');
            }
        })
        .catch(err => {
            console.error('Error al buscar tareas:', err);
            taskList.innerHTML = '<li class="list-group-item text-danger">Error al realizar la búsqueda.</li>';
        });
}

function filterKanboardTasks(detailId) {
    const searchInput = document.getElementById(`kanboardSearch_${detailId}`);
    const filter = searchInput.value.toLowerCase();
    const taskList = document.getElementById(`kanboardTaskList_${detailId}`);
    const tasks = taskList.getElementsByTagName('li');

    // Iterar sobre las tareas y filtrar
    Array.from(tasks).forEach(task => {
        const taskTitle = task.textContent.toLowerCase();
        if (taskTitle.includes(filter)) {
            task.style.display = ''; // Mostrar tarea
        } else {
            task.style.display = 'none'; // Ocultar tarea
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const autocompleteFields = document.querySelectorAll('.kanboard-autocomplete');

    if (!autocompleteFields.length) return; // Salir si no hay campos

    autocompleteFields.forEach(field => {
        field.addEventListener('input', function () {
            const query = this.value.trim();
            const url = this.dataset.url;

            if (query.length > 2) { // Solo buscar si hay más de 2 caracteres
                fetch(`${url}?q=${encodeURIComponent(query)}`)
                    .then(response => response.json())
                    .then(data => {
                        // Crear un dropdown con las coincidencias
                        let dropdown = this.nextElementSibling;
                        if (!dropdown || !dropdown.classList.contains('dropdown-menu')) {
                            dropdown = document.createElement('ul');
                            dropdown.classList.add('dropdown-menu');
                            dropdown.style.position = 'absolute';
                            dropdown.style.zIndex = '1000';
                            this.parentNode.appendChild(dropdown);
                        }

                        dropdown.innerHTML = data.map(task => `
                            <li>
                                <button type="button" class="dropdown-item" data-id="${task.task_id}" data-title="${task.task_title}">
                                    ${task.task_title}
                                </button>
                            </li>
                        `).join('');

                        // Manejar selección de tarea
                        dropdown.querySelectorAll('button').forEach(btn => {
                            btn.addEventListener('click', () => {
                                this.value = btn.dataset.title; // Muestra el título seleccionado
                                updateField(this, `${this.dataset.url}/${btn.dataset.id}`); // Actualiza en el backend
                                dropdown.innerHTML = ''; // Limpia el dropdown
                            });
                        });
                    })
                    .catch(err => console.error('Error:', err));
            } else {
                // Si la búsqueda es muy corta, limpiar dropdown
                const dropdown = this.nextElementSibling;
                if (dropdown && dropdown.classList.contains('dropdown-menu')) {
                    dropdown.innerHTML = '';
                }
            }
        });

        // Eliminar el dropdown al hacer clic fuera del campo
        document.addEventListener('click', (e) => {
            const dropdown = field.nextElementSibling;
            if (!field.contains(e.target) && dropdown && dropdown.classList.contains('dropdown-menu')) {
                dropdown.innerHTML = '';
            }
        });
    });
});

function selectKanboardTask(taskId, detailId) {
    // URL para la actualización
    const url = `{{ route('operations.comercial.ofertas.details.update.field', ['id' => ':id', 'field' => 'kanboard_task']) }}`.replace(':id', detailId);

    // Llamar al backend para actualizar el valor
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ value: taskId }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Tarea actualizada correctamente.');
            // Opcional: Recargar la página o actualizar dinámicamente el contenido
        } else {
            alert('Error al actualizar la tarea.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Ocurrió un error al intentar actualizar la tarea.');
    });
}

function updateField(element, url) {
    const value = element.value.trim();

    // Validaciones comunes
    const fieldValidations = {
        user_id: val => val !== '' && !isNaN(val),
        importe: val => !isNaN(parseFloat(val)),
        provincia_oferta: val => val !== '',
    };

    const fieldName = Object.keys(fieldValidations).find(name => url.includes(name));
    if (fieldName && !fieldValidations[fieldName](value)) {
        alert(`Por favor, introduce un valor válido para ${fieldName.replace('_', ' ')}.`);
        return;
    }

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ value }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Campo actualizado correctamente.');
        } else {
            alert('Error al actualizar el campo.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Ocurrió un error al intentar actualizar el campo.');
    });
}


    function filterStatus(status) {
        const url = new URL(window.location.href);
        url.searchParams.set('status', status); // Añade o actualiza el parámetro `status`
        window.location.href = url.toString(); // Recarga la página con el nuevo filtro
    }

    function filterKanboard(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('kanboard', value); // Agrega o actualiza el parámetro kanboard
        window.location.href = url.toString(); // Redirige con el nuevo parámetro
    }

$(document).ready(function() {
    // Cargar datos adicionales después de que la página esté lista
    $('#sector').select2({
        ajax: {
            url: '/api/sectores',
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                return {
                    results: data
                };
            }
        }
    });
});
</script>

<style>
.pagination {
    margin: 0;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.pagination .page-link {
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}.pagination {
    margin: 0;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.pagination .page-link {
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}
.estado-pendiente {
    background-color: #fff3cd !important; /* amarillo muy tenue */
}
.estado-ganado {
    background-color: #d4edda !important; /* verde muy tenue */
}
.estado-perdido, .estado-sin-respuesta {
    background-color: #f8d7da !important; /* rojo muy tenue */
}
.estado-desestimado, .estado-renuncia {
    background-color: #e9ecef !important; /* gris muy tenue */
}
</style>