@extends('layouts.simple.master')

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

<div class="container-fluid">
    <h2 class="mb-3">Criterios de clasificación de las ofertas (Pesos y fórmula económica)</h2>

    <!-- Filtros -->
    <div class="accordion mb-4" id="accordionFiltros">
        <!-- Único acordeón -->
        <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>Filtros de Ofertas y Criterios</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 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.criterios.index') }}" id="filterForm">
                        <!-- Línea 1: Filtros básicos -->
                        <div class="row align-items-center g-2">
                            <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()->startOfYear()->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()->endOfYear()->toDateString()) }}">
                            </div>
                            <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="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 class="my-4">

                        <!-- Línea 2: Filtros adicionales (Criterios) -->
                        <h5 class="mb-3">Filtros de Criterios</h5>
                        <div class="row align-items-center g-2">
                            @foreach(['peso_economica', 'peso_tecnica', 'peso_objetiva_real', 'peso_objetiva_fake'] as $peso)
                                <div class="col-md-2">
                                    <label for="{{ $peso }}" class="form-label">{{ ucfirst(str_replace('_', ' ', $peso)) }}</label>
                                    <select name="{{ $peso }}" id="{{ $peso }}" class="form-control form-control-sm">
                                        <option value="">Todos</option>
                                        <option value="ConCriterio" {{ request($peso) == 'ConCriterio' ? 'selected' : '' }}>Con criterio</option>
                                        <option value="SinCriterio" {{ request($peso) == 'SinCriterio' ? 'selected' : '' }}>Sin criterio</option>
                                    </select>
                                </div>
                            @endforeach
                            <div class="col-md-3">
                                <label for="formula" class="form-label">Fórmula</label>
                                <select name="formula" id="formula" class="form-control form-control-sm">
                                    <option value="">Todos</option>
                                    @foreach($formulas as $formula)
                                        <option value="{{ $formula }}" {{ request('formula') == $formula ? 'selected' : '' }}>
                                            {{ ucfirst($formula) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <hr class="my-3">

                        <!-- Botón para filtrar -->
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-success btn-sm">
                                <i class="bi bi-filter"></i> Filtrar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Fin Filtros -->

    <!-- Controles superiores -->
    <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="50" {{ request('limit') == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('limit') == 100 ? 'selected' : '' }}>100</option>
                    <option value="200" {{ request('limit') == 200 ? 'selected' : '' }}>200</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 me-3" onchange="filterByStatus(this.value)">
                    <option value="">Todos</option>
                    <option value="Completa" {{ request('status') == 'Completa' ? 'selected' : '' }}>Completa</option>
                    <option value="Incompleta" {{ request('status') == 'Incompleta' ? 'selected' : '' }}>Incompleta</option>
                    <option value="No aplica" {{ request('status') == 'No aplica' ? 'selected' : '' }}>No aplica</option>
                </select>

                <!-- Filtro de criterios -->
                <label for="criteriosFilter" class="form-label me-2">Criterios:</label>
                <select id="criteriosFilter" class="form-select form-select-sm d-inline-block w-auto ms-3" onchange="filterByCriterios(this.value)">
                    <option value="">Todos</option>
                    <option value="ConCriterios" {{ request('criterios') == 'ConCriterios' ? 'selected' : '' }}>Con criterios</option>
                    <option value="SinCriterios" {{ request('criterios') == 'SinCriterios' ? 'selected' : '' }}>Sin criterios</option>
                </select>

            </div>
        </div>
    </div>

    <!-- Tabla -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-container">
                    <table class="table table-bordered table-hover">
                    <thead>
                          <tr>
                              <th>Código</th>
                              <th>Cliente</th>
                              <th>¿Criterios?</th>
                              <th>Económica</th>
                              <th>Técnica</th>
                              <th>Obj.Real</th>
                              <th>Obj.Fake</th>
                              <th>Fórmula</th>
                              <th></th> <!-- Nueva columna -->
                          </tr>
                      </thead>
                      <tbody>
                          @foreach($criterios as $criterio)
                              <tr>
                                  <td>{{ $criterio->oferta->codigo_proyecto }}</td>
                                  <td>{{ $criterio->oferta->cliente }}</td>
                                  <td>
                                      <select onchange="updateField(this, '{{ route('operations.comercial.ofertas.criterios.update.field', ['id' => $criterio->id, 'field' => 'respuesta_paso_2']) }}')">
                                          <option value="Si" {{ ($criterio->ofertaStatus->respuesta_paso_2 ?? '') == 'Si' ? 'selected' : '' }}>Sí</option>
                                          <option value="No" {{ ($criterio->ofertaStatus->respuesta_paso_2 ?? '') == 'No' ? 'selected' : '' }}>No</option>
                                      </select>
                                  </td>
                                  <td>
                                        <input type="number"
                                            value="{{ $criterio->peso_economica }}"
                                            onchange="updateField(this, {{ $criterio->id }}, 'peso_economica')"
                                            class="form-control form-control-sm text-end"
                                            min="0"
                                            max="100"
                                            step="0.01">
                                    </td>
                                    <td>
                                        <input type="number"
                                            value="{{ $criterio->peso_tecnica }}"
                                            onchange="updateField(this, {{ $criterio->id }}, 'peso_tecnica')"
                                            class="form-control form-control-sm text-end"
                                            min="0"
                                            max="100"
                                            step="0.01">
                                    </td>
                                    <td>
                                        <input type="number"
                                            value="{{ $criterio->peso_objetiva_real }}"
                                            onchange="updateField(this, {{ $criterio->id }}, 'peso_objetiva_real')"
                                            class="form-control form-control-sm text-end"
                                            min="0"
                                            max="100"
                                            step="0.01">
                                    </td>
                                    <td>
                                        <input type="number"
                                            value="{{ $criterio->peso_objetiva_fake }}"
                                            onchange="updateField(this, {{ $criterio->id }}, 'peso_objetiva_fake')"
                                            class="form-control form-control-sm text-end"
                                            min="0"
                                            max="100"
                                            step="0.01">
                                    </td>
                                    <td>
                                        <select class="form-control form-control-sm"
                                                onchange="updateField(this, {{ $criterio->id }}, 'formula')">
                                            <option value="">Seleccionar fórmula</option>
                                            @foreach($formulas as $formula)
                                                <option value="{{ $formula }}"
                                                        {{ $criterio->formula == $formula ? 'selected' : '' }}>
                                                    {{ ucfirst($formula) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                  <td class="text-center">
                                      <i
                                          class="bi
                                              {{ $criterio->ofertaStatus && $criterio->ofertaStatus->status_criterios === 'Completa' ? 'bi-emoji-smile text-success' :
                                                 ($criterio->ofertaStatus && $criterio->ofertaStatus->status_criterios === 'No aplica' ? 'bi-emoji-neutral text-warning' :
                                                 'bi-emoji-frown text-danger') }}"
                                          style="font-size: 1.5rem; cursor: pointer;"
                                          ondblclick="openStatusModal({{ $criterio->id }}, '{{ $criterio->ofertaStatus->status_criterios ?? 'Incompleta' }}')"
                                      ></i>
                                  </td>
                              </tr>
                          @endforeach
                      </tbody>
                  </table>
                  <!-- Paginación -->
                  <div class="d-flex justify-content-center mt-3">
                      {{ $criterios->links('pagination::bootstrap-5') }}
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para cambiar estado -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusModalLabel">Cambiar Estado</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="statusForm">
                    <input type="hidden" id="recordId">
                    <div class="mb-3">
                        <label for="newStatus" class="form-label">Nuevo Estado</label>
                        <select id="newStatus" class="form-select">
                            <option value="Completa">Completa</option>
                            <option value="Incompleta">Incompleta</option>
                            <option value="No aplica">No aplica</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary" id="saveStatus">Guardar</button>
                </form>
            </div>
        </div>
    </div>
</div>


@endsection

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Función para abrir el modal y asignar datos
    window.openStatusModal = function(recordId, currentStatus) {
        const modal = new bootstrap.Modal(document.getElementById('statusModal'));
        modal.show();

        // Asignar los valores actuales
        document.getElementById('recordId').value = recordId;
        document.getElementById('newStatus').value = currentStatus;
    };

    // Guardar el estado actualizado
    const saveStatusButton = document.getElementById('saveStatus');
    saveStatusButton.addEventListener('click', () => {
        const recordId = document.getElementById('recordId').value;
        const newStatus = document.getElementById('newStatus').value;

        // Validar que se haya seleccionado un estado
        if (!newStatus) {
            alert('Por favor, selecciona un estado válido.');
            return;
        }

        // Realizar la solicitud AJAX para actualizar el estado
        fetch(`{{ url('operations/comercial/ofertas/criterios/update-field') }}/${recordId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ field: 'status_criterios', value: newStatus }),
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Actualizar el ícono en la tabla
                const icon = document.querySelector(`i[ondblclick="openStatusModal(${recordId}, '${newStatus}')"]`);
                if (icon) {
                    icon.className = newStatus === 'Completa'
                        ? 'bi bi-emoji-smile text-success'
                        : newStatus === 'No aplica'
                        ? 'bi bi-emoji-neutral text-warning'
                        : 'bi bi-emoji-frown text-danger';
                    icon.setAttribute('ondblclick', `openStatusModal(${recordId}, '${newStatus}')`);
                }

                // Cerrar el modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('statusModal'));
                modal.hide();
            } else {
                alert('Error al actualizar el estado: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error al actualizar el estado:', error);
            alert('Error al actualizar el estado. Por favor, inténtalo de nuevo.');
        });
    });

    // Obtener el elemento del filtro de estado
    const statusFilter = document.getElementById('statusFilter');

    // Escuchar cambios en el filtro de estado
    if (statusFilter) {
        statusFilter.addEventListener('change', () => {
            const status = statusFilter.value;
            const url = new URL(window.location.href);
            url.searchParams.set('status', status); // Establecer el filtro de estado en la URL
            updateTable(url.href); // Llamar a la función para actualizar la tabla
        });
    }

    // Manejar clics en los enlaces de paginación
    document.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.closest('.pagination')) {
            e.preventDefault();
            const url = e.target.href;
            updateTable(url);
        }
    });

    // Función para actualizar la tabla y la paginación con AJAX
    function updateTable(url) {
        fetch(url, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text(); // Obtener HTML del servidor
        })
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');

            // Actualizar la tabla y la paginación
            const newTableBody = doc.querySelector('table tbody');
            const newPagination = doc.querySelector('.pagination');
            const tableBody = document.querySelector('table tbody');
            const pagination = document.querySelector('.pagination');

            if (newTableBody && tableBody) {
                tableBody.innerHTML = newTableBody.innerHTML;
            }
            if (newPagination && pagination) {
                pagination.innerHTML = newPagination.innerHTML;
            }
        })
        .catch(error => console.error('Error al actualizar la tabla:', error));
    }
});

// Función para actualizar la tabla y la paginación con AJAX
function updateTable(url) {
    fetch(url, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        },
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); // Obtener JSON del servidor
        })
        .then(data => {
            if (data.html) {
                const tableBody = document.querySelector('table tbody');
                const pagination = document.querySelector('.pagination');

                const parser = new DOMParser();
                const doc = parser.parseFromString(data.html, 'text/html');

                const newTableBody = doc.querySelector('tbody');
                const newPagination = doc.querySelector('.pagination');

                if (newTableBody && tableBody) {
                    tableBody.innerHTML = newTableBody.innerHTML;
                }

                if (newPagination && pagination) {
                    pagination.innerHTML = newPagination.innerHTML;
                }
            }
        })
        .catch(error => console.error('Error al actualizar la tabla:', error));
}
function setScrollLimit(limit) {
    const url = new URL(window.location.href);

    // Actualizar o agregar el parámetro `limit`
    url.searchParams.set('limit', limit);

    // Redirigir al servidor con el nuevo límite
    window.location.href = url.toString();
}

function openStatusModal(recordId, currentStatus) {
    // Mostrar modal
    const modal = new bootstrap.Modal(document.getElementById('statusModal'));
    modal.show();

    // Asignar datos actuales
    document.getElementById('recordId').value = recordId;
    document.getElementById('newStatus').value = currentStatus;
}

// Guardar el estado actualizado
document.getElementById('saveStatus').addEventListener('click', () => {
    const recordId = document.getElementById('recordId').value;
    const newStatus = document.getElementById('newStatus').value;

    fetch(`{{ url('operations/comercial/ofertas/criterios/update-field') }}/${recordId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ field: 'status_criterios', value: newStatus }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Actualizar el icono
            const icon = document.querySelector(`i[ondblclick="openStatusModal(${recordId}, '${newStatus}')"]`);
            icon.className = newStatus === 'Completa'
                ? 'bi bi-emoji-smile text-success'
                : newStatus === 'No aplica'
                ? 'bi bi-emoji-neutral text-warning'
                : 'bi bi-emoji-frown text-danger';

            // Cerrar el modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('statusModal'));
            modal.hide();
        } else {
            alert('Error al actualizar el estado.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al actualizar el estado.');
    });
});

function filterByCriterios(criterios) {
    const url = new URL(window.location.href);
    url.searchParams.set('criterios', criterios); // Agregar filtro de criterios a la URL
    window.location.href = url.toString(); // Redirigir para aplicar el filtro
}

function updateField(element, id, field) {
    const value = element.value;
    fetch(`{{ route('operations.comercial.ofertas.criterios.update.field', '') }}/${id}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ field, value })
    })
    .then(response => response.json())
    .then(data => {
        if (!data.success) {
            alert('Error al actualizar el campo');
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al actualizar');
        location.reload();
    });
}

</script>

<style>
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
}

.table thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 100;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
.table-container {
    max-height: calc(100vh - 200px); /* Adjust based on header height */
    overflow-y: auto;
}

.table thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.table thead th {
    background: white;
    border-bottom: 2px solid #dee2e6;
}
.page-main-header {
    position: relative !important; /* Remove sticky positioning from horizontal menu */
}
</style>