@extends('layouts.app')
@section('titulo','Órdenes')
@section('contenido')
<style>
  .tabla-ot { font-size: 12.5px; }
  .tabla-ot td, .tabla-ot th { padding: 3px 6px !important; vertical-align: middle; }
  .tabla-ot .estado-badge { font-size: 10.5px; padding: 1px 6px; border-radius: 10px; color: #fff; white-space: nowrap; }
  .tabla-ot .btn-sm { padding: 1px 6px; font-size: 11px; }
  .tabla-ot tr.protegida { background: #fff3cd; }
  .tabla-ot tr.protegida td { color: #856404; }
  .tabla-ot .form-check-input { margin-top: 0; }
  .barra-acciones { background: #1565C0; color: #fff; padding: 6px 12px; border-radius: 6px; }
  .barra-acciones .badge { font-size: 11px; }
</style>

@php
  // Códigos de estado que protegen la OT de borrado
  $protegidos = ['EJE','APR'];
@endphp

<div class="d-flex flex-wrap justify-content-between align-items-center mb-2">
  <h4 class="mb-0"><i class="fa fa-wrench"></i> Órdenes de trabajo {{ $clase ? '— '.ucfirst($clase) : '' }}
    <small class="text-muted ms-2 fs-6">{{ $registros->total() }} en total</small>
  </h4>
  @can('ordenes.crear')
    <a href="{{ route('ordenes.create',['clase'=>$clase ?? 'correctivo']) }}" class="btn btn-primario btn-sm"><i class="fa fa-plus"></i> Nueva</a>
  @endcan
</div>

<form method="GET" class="row g-2 mb-2">
  @if($clase)<input type="hidden" name="clase" value="{{ $clase }}">@endif
  <div class="col-md-3"><input name="q" value="{{ $busqueda }}" class="form-control form-control-sm" placeholder="Código o equipo..."></div>
  <div class="col-md-2"><select name="estado_id" class="form-select form-select-sm"><option value="">— Estado —</option>
    @foreach($estados as $e)<option value="{{ $e->id }}" @selected(request('estado_id')==$e->id)>{{ $e->nombre }}</option>@endforeach
  </select></div>
  <div class="col-md-2"><select name="area_id" class="form-select form-select-sm"><option value="">— Área —</option>
    @foreach($areas as $a)<option value="{{ $a->id }}" @selected(request('area_id')==$a->id)>{{ $a->nombre }}</option>@endforeach
  </select></div>
  <div class="col-md-2"><input type="date" name="desde" value="{{ request('desde') }}" class="form-control form-control-sm"></div>
  <div class="col-md-2"><input type="date" name="hasta" value="{{ request('hasta') }}" class="form-control form-control-sm"></div>
  <div class="col-md-1"><select name="per_page" class="form-select form-select-sm" onchange="this.form.submit()">
    @foreach([25,50,100,200,500] as $n)<option value="{{ $n }}" @selected((int)request('per_page',100)===$n)>{{ $n }}</option>@endforeach
  </select></div>
</form>

{{-- Barra de acciones masivas (visible solo cuando hay selección) --}}
<div id="barraAcciones" class="barra-acciones d-none d-flex flex-wrap justify-content-between align-items-center mb-2">
  <div>
    <i class="fa fa-check-square"></i>
    <strong><span id="contadorSel">0</span></strong> seleccionada(s)
    · <span id="contadorProt" class="badge text-bg-warning d-none">0 protegidas</span>
  </div>
  <div>
    <button type="button" class="btn btn-sm btn-light" onclick="limpiarSeleccion()"><i class="fa fa-xmark"></i> Limpiar</button>
    <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#modalEliminar">
      <i class="fa fa-trash"></i> Eliminar seleccionadas
    </button>
  </div>
</div>

<form id="formMasivo" method="POST" action="{{ route('ordenes.eliminar-multiples') }}">
  @csrf
  <div class="card"><div class="table-responsive"><table class="table table-hover table-sm tabla-ot mb-0">
    <thead class="table-light"><tr>
      <th style="width:30px;"><input type="checkbox" id="selectAll" class="form-check-input" title="Seleccionar todo"></th>
      <th>Código</th><th>Clase</th><th>Equipo</th><th>Área</th><th>Programada</th>
      <th>Estado</th><th>Prioridad</th><th>Responsable</th>
      <th class="text-end">Costo</th><th></th>
    </tr></thead><tbody>
    @forelse($registros as $o)
      @php $estaProtegida = in_array(optional($o->estado)->codigo, $protegidos); @endphp
      <tr class="{{ $estaProtegida ? 'protegida' : '' }}">
        <td>
          <input type="checkbox" name="ids[]" value="{{ $o->id }}"
                 class="form-check-input chk-ot"
                 data-codigo="{{ $o->codigo }}"
                 data-estado="{{ optional($o->estado)->codigo }}"
                 data-estado-nombre="{{ optional($o->estado)->nombre }}"
                 data-protegida="{{ $estaProtegida ? '1' : '0' }}">
        </td>
        <td><a href="{{ route('ordenes.show',$o) }}"><strong>{{ $o->codigo }}</strong></a>
          @if($estaProtegida)<i class="fa fa-lock text-warning ms-1" title="Protegida — no se puede eliminar"></i>@endif
        </td>
        <td>{{ ucfirst($o->clase) }}</td>
        <td>{{ optional($o->equipo)->nombre }}</td>
        <td>{{ optional($o->area)->nombre }}</td>
        <td>{{ $o->fecha_programada?->format('d/m/Y') }}</td>
        <td>@if($o->estado)<span class="estado-badge" style="background: {{ $o->estado->color }};">{{ $o->estado->nombre }}</span>@endif</td>
        <td>@if($o->prioridad)<span class="estado-badge" style="background: {{ $o->prioridad->color }};">{{ $o->prioridad->nombre }}</span>@endif</td>
        <td>{{ optional($o->responsable)->nombre_completo }}</td>
        <td class="text-end">{{ number_format($o->costo_total,2) }}</td>
        <td class="text-end text-nowrap">
          <a href="{{ route('ordenes.show',$o) }}" class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i></a>
          <a href="{{ route('ordenes.pdf',$o) }}" target="_blank" class="btn btn-sm btn-outline-danger"><i class="fa fa-file-pdf"></i></a>
        </td>
      </tr>
    @empty
      <tr><td colspan="11" class="text-muted text-center py-4">Sin órdenes</td></tr>
    @endforelse
    </tbody></table></div></div>
</form>

<div class="d-flex justify-content-between align-items-center mt-2">
  <small class="text-muted">Mostrando {{ $registros->firstItem() ?? 0 }}–{{ $registros->lastItem() ?? 0 }} de {{ $registros->total() }}</small>
  {{ $registros->links() }}
</div>

{{-- Modal de confirmación --}}
<div class="modal fade" id="modalEliminar" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title"><i class="fa fa-triangle-exclamation"></i> Eliminar órdenes seleccionadas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>Estás por eliminar <strong><span id="modalContador">0</span></strong> orden(es) de trabajo.</p>

        <div id="modalProtegidasBlock" class="alert alert-warning d-none">
          <strong><i class="fa fa-lock"></i> Atención:</strong> <span id="modalProtegidasCount">0</span> orden(es) están
          <strong>Ejecutadas / Aprobadas</strong> y NO se eliminarán por seguridad histórica:
          <ul id="modalProtegidasLista" class="mb-0 mt-2 small"></ul>
        </div>

        <div id="modalEliminarBlock" class="alert alert-info d-none">
          Se eliminarán <strong><span id="modalEliminarCount">0</span></strong> orden(es).
        </div>

        <p class="text-muted small mb-0">Esta acción es irreversible. Las OT eliminadas pasan a la papelera (soft-delete) y solo un administrador con acceso a la base de datos podría restaurarlas.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="btnConfirmarEliminar" onclick="document.getElementById('formMasivo').submit()">
          <i class="fa fa-trash"></i> Sí, eliminar
        </button>
      </div>
    </div>
  </div>
</div>

@push('scripts_inline')
const selectAll = document.getElementById('selectAll');
const checks = document.querySelectorAll('.chk-ot');
const barra = document.getElementById('barraAcciones');
const contadorSel = document.getElementById('contadorSel');
const contadorProt = document.getElementById('contadorProt');

function actualizarBarra() {
  const seleccionadas = [...checks].filter(c => c.checked);
  const total = seleccionadas.length;
  const protegidas = seleccionadas.filter(c => c.dataset.protegida === '1').length;
  contadorSel.textContent = total;
  if (protegidas > 0) {
    contadorProt.textContent = protegidas + ' protegida(s)';
    contadorProt.classList.remove('d-none');
  } else {
    contadorProt.classList.add('d-none');
  }
  barra.classList.toggle('d-none', total === 0);
}

function limpiarSeleccion() {
  checks.forEach(c => c.checked = false);
  selectAll.checked = false;
  actualizarBarra();
}

selectAll.addEventListener('change', () => {
  checks.forEach(c => c.checked = selectAll.checked);
  actualizarBarra();
});

checks.forEach(c => c.addEventListener('change', () => {
  selectAll.checked = [...checks].every(c => c.checked);
  actualizarBarra();
}));

// Cuando se abre el modal, calcular cuántas se eliminarán vs protegidas
document.getElementById('modalEliminar').addEventListener('show.bs.modal', () => {
  const sel = [...checks].filter(c => c.checked);
  const total = sel.length;
  const protegidas = sel.filter(c => c.dataset.protegida === '1');
  const eliminables = sel.filter(c => c.dataset.protegida !== '1');

  document.getElementById('modalContador').textContent = total;

  const block = document.getElementById('modalProtegidasBlock');
  const lista = document.getElementById('modalProtegidasLista');
  if (protegidas.length > 0) {
    block.classList.remove('d-none');
    document.getElementById('modalProtegidasCount').textContent = protegidas.length;
    lista.innerHTML = '';
    protegidas.slice(0, 8).forEach(p => {
      const li = document.createElement('li');
      li.innerHTML = `<code>${p.dataset.codigo}</code> — ${p.dataset.estadoNombre}`;
      lista.appendChild(li);
    });
    if (protegidas.length > 8) {
      const li = document.createElement('li');
      li.textContent = `... y ${protegidas.length - 8} más`;
      lista.appendChild(li);
    }
  } else {
    block.classList.add('d-none');
  }

  const elimBlock = document.getElementById('modalEliminarBlock');
  if (eliminables.length > 0) {
    elimBlock.classList.remove('d-none');
    document.getElementById('modalEliminarCount').textContent = eliminables.length;
  } else {
    elimBlock.classList.add('d-none');
  }

  // Si todas son protegidas, deshabilitar el botón
  const btn = document.getElementById('btnConfirmarEliminar');
  btn.disabled = eliminables.length === 0;
});
@endpush
@endsection