@extends('layouts.simple.master')

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

<div class="container-fluid">
    <h3 class="text-center">Mantenimiento Competidores - Sector Público</h3>
    <!-- Filtros -->
    <form method="GET" action="{{ route('operations.comercial.ofertas.mantenimiento_competitors.index') }}" class="row g-3 mb-3">
        <div class="col-md-4">
            <label>Cliente:</label>
            <select name="cliente" class="form-control" onchange="this.form.submit()">
                <option value="">--Todos--</option>
                @foreach($clientes as $c)
                    <option value="{{ $c }}" {{ request('cliente') == $c ? 'selected' : '' }}>{{ $c }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4">
            <label>Proyecto:</label>
            <select name="proyecto" class="form-control" onchange="this.form.submit()">
                <option value="">--Todos--</option>
                @foreach($proyectos as $p)
                    <option value="{{ $p }}" {{ request('proyecto') == $p ? 'selected' : '' }}>{{ $p }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4 d-flex align-items-end">
            <button type="button" class="btn btn-secondary me-2" onclick="window.location='{{ route('operations.comercial.ofertas.mantenimiento_competitors.index') }}'">
                Inicializar
            </button>

            <button type="button" class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#addModal">
                Añadir
            </button>
            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#addCompetitorModal">
                Añadir nuevo competidor
            </button>
        </div>
    </form>

    <!-- Modal Añadir -->
    <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <form id="addForm">
            <div class="modal-header">
              <h5 class="modal-title">Añadir Competidor</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label>Cliente:</label>
                <select id="clienteSelect" name="cliente" class="form-control">
                  <option value="">Seleccione</option>
                  @foreach($clientes as $c)
                    <option value="{{ $c }}">{{ $c }}</option>
                  @endforeach
                </select>
              </div>
              <div class="mb-3">
                <label>Proyecto:</label>
                <select id="proyectoSelect" name="proyecto" class="form-control">
                  <option value="">Seleccione</option>
                  <!-- Se cargarán por JS al elegir cliente -->
                </select>
              </div>
              <div class="mb-3">
                <label>Competidor:</label>
                <input type="text" id="competitorInput" name="competidor" class="form-control" autocomplete="off" />
                <div id="autocompleteList" class="border bg-white position-absolute w-100" style="z-index: 999;"></div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
              <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
          </form>
        </div>
      </div>
    </div>



    <!-- Modal Secundario: Añadir Competidor -->
    <div class="modal fade" id="addCompetitorModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <form id="newCompetitorForm">
            <div class="modal-header">
              <h5 class="modal-title">Nuevo Competidor</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <label>Nombre del competidor:</label>
              <input type="text" class="form-control" name="nombre_competidor" id="nombreCompetidorInput"/>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
              <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Tabla de Competidores -->
    <div class="table-responsive">
		<div class="table-responsive">
			<table class="table table-bordered table-hover">
				<thead class="thead-dark">
					<tr>
						<th>Código Proyecto</th>
						<th>Cliente</th>
						<th>Proyecto</th>
						<th>Competidor</th>
						<th>Técnico</th>
						<th>Económico</th>
						<th>Objetivo Real</th>
						<th>Objetivo Fake</th>
						<th>Precio</th>
						<th>Rank</th>
						<th>Ganador</th>
					</tr>
				</thead>
				<tbody>
				@foreach($records as $rec)
					<tr>
						<td>{{ $rec->codigo_proyecto }}</td>
						<td>{{ $rec->cliente }}</td>
						<td>{{ $rec->proyecto }}</td>
						<td>
							<select class="form-control form-control-sm editable" data-id="{{ $rec->cuantitativaId }}" data-field="competitor_id">
								<option value="">--Seleccione--</option>
								@foreach($competitors as $comp)
									<option value="{{ $comp->id }}" {{ $rec->competitorId == $comp->id ? 'selected' : '' }}>
										{{ $comp->nombre }}
									</option>
								@endforeach
							</select>
						</td>
						<td contenteditable="true" class="editable" data-id="{{ $rec->cuantitativaId }}" data-field="tecnico">
							{{ number_format($rec->tecnico, 2, ',', '.') }}
						</td>
						<td contenteditable="true" class="editable" data-id="{{ $rec->cuantitativaId }}" data-field="economico">
							{{ number_format($rec->economico, 2, ',', '.') }}
						</td>
						<td contenteditable="true" class="editable" data-id="{{ $rec->cuantitativaId }}" data-field="objetivo_real">
							{{ number_format($rec->objetivo_real, 2, ',', '.') }}
						</td>
						<td contenteditable="true" class="editable" data-id="{{ $rec->cuantitativaId }}" data-field="objetivo_fake">
							{{ number_format($rec->objetivo_fake, 2, ',', '.') }}
						</td>
						<td contenteditable="true" class="editable" data-id="{{ $rec->cuantitativaId }}" data-field="precio">
							{{ number_format($rec->precio, 2, ',', '.') }}
						</td>
						<td>{{ $rec->rank_licitacion }}</td>
						<td class="text-center">
							@if($rec->es_ganador == 1)
								✔
							@endif
						</td>
					</tr>
				@endforeach
				</tbody>
			</table>
		</div>

        <!-- Paginación -->
        <div class="mt-3">
            {{ $records->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  const clienteSelect = document.getElementById('clienteSelect');
  const proyectoSelect = document.getElementById('proyectoSelect');

  clienteSelect.addEventListener('change', async function() {
    proyectoSelect.innerHTML = '<option value="">Seleccione</option>';
    const cliente = this.value;
    if (!cliente) return;

    const res = await fetch(`{{ route('operations.comercial.ofertas.mantenimiento_competitors.fetch-proyectos','') }}/${cliente}`);
    const proyectos = await res.json();

    proyectos.forEach(p => {
      const opt = document.createElement('option');
      opt.value = p;
      opt.textContent = p;
      proyectoSelect.appendChild(opt);
    });
  });

  // Autocompletar competitor
  const competitorInput = document.getElementById('competitorInput');
  const autocompleteList = document.getElementById('autocompleteList');
  let timer;
  competitorInput.addEventListener('input', () => {
    clearTimeout(timer);
    timer = setTimeout(async () => {
      let query = competitorInput.value.trim();
      if(!query) {
        autocompleteList.innerHTML = '';
        return;
      }
      let response = await fetch(
        '{{ route('operations.comercial.ofertas.mantenimiento_competitors.autocomplete') }}?query=' + encodeURIComponent(query)
      );
      let data = await response.json();
      autocompleteList.innerHTML = '';
      data.forEach(item => {
        let div = document.createElement('div');
        div.classList.add('p-2','border-bottom');
        div.textContent = item.nombre;
        div.addEventListener('click', () => {
          competitorInput.value = item.nombre;
          competitorInput.dataset.id = item.id;
          autocompleteList.innerHTML = '';
        });
        autocompleteList.appendChild(div);
      });
    }, 300);
  });

  // Guardar nuevo competidor
  const newCompetitorForm = document.getElementById('newCompetitorForm');
  newCompetitorForm.addEventListener('submit', async e => {
    e.preventDefault();
    const nombre = document.getElementById('nombreCompetidorInput').value.trim();
    if(!nombre) return alert('Ingrese nombre.');

    let resp = await fetch('{{ route("operations.comercial.ofertas.mantenimiento_competitors.store_competitor") }}', {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ nombre })
    });
    let data = await resp.json();
    if(data.success) {
      // Cerrar modal y opcionalmente asignar al competitorInput
      document.getElementById('nombreCompetidorInput').value = '';
      bootstrap.Modal.getInstance(document.getElementById('addCompetitorModal')).hide();
      // Reload o actualizar autocompletado
      alert('Competidor añadido con ID ' + data.id);
    } else {
      alert('Error al crear competidor.');
    }
  });

  // Edit in-place
  document.querySelectorAll('.editable').forEach(elem => {
    if(elem.tagName.toLowerCase() === 'select') {
      elem.addEventListener('change', function() {
        const id = this.dataset.id;
        const field = this.dataset.field;
        const value = this.value;
        updateField(id, field, value);
      });
    } else {
      elem.addEventListener('blur', function() {
        const id = this.dataset.id;
        const field = this.dataset.field;
        let val = this.innerText.trim().replace(/\./g,'').replace(',','.');
        updateField(id, field, val);
      });
    }
  });

  function updateField(id, field, value) {
    fetch(`{{ route('operations.comercial.ofertas.mantenimiento_competitors.update-field','') }}/${id}`, {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ field, value }),
    })
    .then(res => res.json())
    .then(data => {
      if (!data.success) {
        alert('Error actualizando campo');
      }
    })
    .catch(err => {
      console.error(err);
    });
  }
});
</script>
@endsection
@endsection