@extends('layouts.simple.master')

@section('title', 'Gestión de InfonaliaData')

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

<div class="container-fluid">
    <!-- Título -->
    <div class="page-title">
        <div class="row">
            <div class="col-6">
                <h4>Gestión de Infonalia</h4>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <form method="GET" action="{{ route('operations.comercial.infonalia.index') }}">
        <div class="row align-items-center mb-4">
            <!-- Filtro Decisión -->
            @php
                $decisions = collect(['Pendiente', 'Focus', 'No_Focus', 'Descartar'])->sort();
                $selectedDecision = request('decision', 'Pendiente');
            @endphp

            <div class="col-md-4">
                <label for="decision">Decisión:</label>
                <select name="decision" id="decision" class="form-control form-select-sm" onchange="this.form.submit()">
                    <option value="Todos" {{ $selectedDecision == 'Todos' ? 'selected' : '' }}>Ver todos</option>
                    @foreach($decisions as $option)
                        <option value="{{ $option }}" {{ $selectedDecision === $option ? 'selected' : '' }}>{{ $option }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Selector de Registros por Página -->
            <div class="col-md-4">
                <label for="per_page">Mostrar:</label>
                <select name="per_page" id="per_page" class="form-control form-select-sm" onchange="this.form.submit()">
                    <option value="10" {{ request('per_page', 1000) == 1000 ? 'selected' : '' }}>1000</option>
                    <option value="25" {{ request('per_page') == 2000 ? 'selected' : '' }}>2000</option>
                    <option value="50" {{ request('per_page') == 3000 ? 'selected' : '' }}>3000</option>
                    <option value="100" {{ request('per_page', 4000) == 1000 ? 'selected' : '' }}>4000</option>
                </select>
            </div>

            <!-- Campo de búsqueda -->
            <div class="col-md-4 text-end">
                <label for="search" class="d-block">Buscar:</label>
                <input type="search" id="search" name="search" class="form-control form-control-sm"
                       placeholder="Buscar..." value="{{ request('search') }}" onchange="this.form.submit()">
            </div>
        </div>
    </form>

    <!-- Tabla -->
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
          <thead class="thead-light">
              <tr>
                <th style="width: 5%">Publicación</th>
                <th style="width: 10%">Decisión</th>
                <th style="width: 15%">Cliente</th>
                <th style="width: 8%">Provincia</th>
                <th style="width: 8%" class="text-end">Presupuesto</th> <!-- Alineación a la derecha -->
                <th style="width: 35%">Resumen</th>
                <th style="width: 5%">Presentación</th>
                <th style="width: 3%"></th>
              </tr>
          </thead>
          <tbody>
              @foreach($registros as $registro)
              @php
                  $bgColor = '#ffffff'; // Blanco por defecto
                  if ($registro->decision === 'Focus') {
                      $bgColor = 'rgba(0, 255, 0, 0.1)'; // Verde tenue
                  } elseif ($registro->decision === 'No_Focus' || $registro->decision === 'Descartar') {
                      $bgColor = 'rgba(255, 0, 0, 0.1)'; // Rojo tenue
                  }
              @endphp
              <tr data-id="{{ $registro->id }}" style="background-color: {{ $bgColor }}">
                  <td>{{ $registro->fecha_publicacion }}</td>
                  <td>
                      <select class="form-select form-select-sm update-field" data-id="{{ $registro->id }}" data-field="decision">
                          <option value="Pendiente" {{ $registro->decision === 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
                          <option value="Focus" {{ $registro->decision === 'Focus' ? 'selected' : '' }}>Focus</option>
                          <option value="No_Focus" {{ $registro->decision === 'No_Focus' ? 'selected' : '' }}>No_Focus</option>
                          <option value="Descartar" {{ $registro->decision === 'Descartar' ? 'selected' : '' }}>Descartar</option>
                      </select>
                  </td>
                  <td>{{ $registro->cliente }}</td>
                  <td>{{ $registro->provincia }}</td>
                  <td class="text-end">{{ number_format($registro->presupuesto, 2) }} €</td>
                  <td>
                      <span data-bs-toggle="tooltip" title="{{ $registro->resumen_objeto }}">
                          {{ Str::limit($registro->resumen_objeto, 250) }}
                      </span>
                  </td>
                  <td>{{ $registro->presentacion }}</td>
                  <td>
                      @if($registro->url)
                          <a href="{{ $registro->url }}" target="_blank" class="text-primary">
                              <i class="fa fa-external-link"></i>
                          </a>
                      @else
                          <span class="text-muted">No disponible</span>
                      @endif
                  </td>
              </tr>
              @endforeach
          </tbody>
          <tfoot>
              <tr>
                  <th>Publicación</th>
                  <th>Decisión</th>
                  <th>Cliente</th>
                  <th>Provincia</th>
                  <th class="text-end">Presupuesto</th> <!-- Alineación a la derecha -->
                  <th>Resumen</th>
                  <th>Presentación</th>
                  <th></th>
              </tr>
          </tfoot>
      </table>
    </div>

    <!-- Paginación -->
    <div class="d-flex justify-content-between align-items-center mt-3">
        <span>Mostrando {{ $registros->firstItem() }} a {{ $registros->lastItem() }} de {{ $registros->total() }} registros</span>
        {{ $registros->links('pagination::bootstrap-5') }}
    </div>
</div>
@endsection


@section('css')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
    <!-- Opcional: CSS de estilo propio -->
    <style>
        /* Ajustar el ancho de columnas y colores según estados */
        .text-end { text-align: right; }
        .bg-light-red {
            background-color: rgba(255, 0, 0, 0.1); /* Rojo tenue */
        }
        .bg-light-green {
            background-color: rgba(0, 255, 0, 0.1); /* Verde tenue */
        }
    </style>
@endsection

@section('scripts')
<script>
$(document).on('change', '.update-field', function () {
    let id = $(this).data('id');
    let field = $(this).data('field');
    let value = $(this).val();

    $.ajax({
        url: `/operations/comercial/infonalia/${id}`,
        method: 'PATCH',
        data: {
            [field]: value,
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            console.log('Actualización exitosa:', response);

            let row = $(`tr[data-id="${id}"]`);

            // Cambiar el color dinámicamente
            if (value === 'Pendiente') {
                row.css('background-color', '#ffffff'); // Blanco
            } else if (value === 'Focus') {
                row.css('background-color', 'rgba(0, 255, 0, 0.1)'); // Verde tenue
            } else if (value === 'No_Focus' || value === 'Descartar') {
                row.css('background-color', 'rgba(255, 0, 0, 0.1)'); // Rojo tenue
            }
        },
        error: function (xhr) {
            console.error('Error al actualizar:', xhr.responseJSON?.message || 'Error desconocido.');
            alert('Error al actualizar el campo.');
        }
    });
});
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Inicializar tooltips de Bootstrap
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
@endsection