@extends('layouts.app')

@section('content')
<div class="container-fluid py-3">
  <style>
    .page-grid { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; }
    @media (max-width: 991.98px){ .page-grid { grid-template-columns: 1fr; } }

    .card-flat { border: 1px solid var(--bs-border-color); box-shadow: none; }
    .panel { min-height: 60vh; display:flex; flex-direction:column; }
    .panel-scroll { overflow: visible; }

    .table-sticky thead th{ position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); }
    .w-actions { min-width: 12rem; }
    .w-obs { min-width: 16rem; }
    .w-adj { min-width: 13rem; }

    /* Mobile: table -> cards (no horizontal scroll) */
    @media (max-width: 991.98px){
      .table-sticky{ table-layout: fixed; }
      .table-rwd{ display:block; }
      .table-rwd thead{ display:none; }
      .table-rwd tbody{ display:block; }
      .table-rwd tr{ display:block; background:#fff; border:1px solid var(--bs-border-color); border-radius:.5rem; padding:.75rem; margin-bottom:.75rem; }
      .table-rwd td{ display:flex; gap:.75rem; justify-content:space-between; align-items:center; padding:.25rem 0 !important; border:none !important; }
      .table-rwd td::before{ content: attr(data-th); font-weight:600; color:#6c757d; }
      .table-rwd .form-select, .table-rwd .form-control{ width:100%; }
      .table-rwd .form-subir{ margin-top:.25rem; }
    }
  </style>

  <div class="d-flex justify-content-between align-items-center mb-2">
    <h5 class="mb-0">Tareas</h5>
    <div class="d-flex align-items-center gap-2">
      <span class="text-muted small me-2">{{ count($tareas ?? []) }} resultados</span>
      <button class="btn btn-outline-secondary btn-sm d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#filtersCollapse">Filtros</button>
    </div>
  </div>

  <div class="page-grid">
    <!-- Filtros -->
    <aside class="collapse d-lg-block show" id="filtersCollapse">
      <div class="card card-flat panel">
        <div class="card-header py-2">Filtros</div>
        <div class="card-body panel-scroll">
          <form method="GET" action="{{ route('viaticos.tareas') }}" class="vstack gap-2">
            <input name="radicado" class="form-control form-control-sm" placeholder="Radicado" value="{{ $filtros['radicado'] ?? '' }}">
            <input name="cedula" class="form-control form-control-sm" placeholder="Cédula" value="{{ $filtros['cedula'] ?? '' }}">
            <div class="row g-2">
              <div class="col-6"><input type="date" name="fecha_desde" class="form-control form-control-sm" value="{{ $filtros['fecha_desde'] ?? '' }}" placeholder="Desde"></div>
              <div class="col-6"><input type="date" name="fecha_hasta" class="form-control form-control-sm" value="{{ $filtros['fecha_hasta'] ?? '' }}" placeholder="Hasta"></div>
            </div>
            <select id="f_region" name="region_id" class="form-select form-select-sm">
              <option value="">Región</option>
            </select>
            <select id="f_departamento" name="departamento" class="form-select form-select-sm">
              <option value="">Departamento</option>
            </select>
            <select id="f_municipio" name="municipio" class="form-select form-select-sm">
              <option value="">Municipio</option>
            </select>
            <div id="geo-help" class="text-danger small d-none">No tienes acceso a este sector.</div>
            <div class="d-grid gap-2 mt-2">
              <button class="btn btn-primary btn-sm" type="submit">Aplicar</button>
              <a class="btn btn-outline-secondary btn-sm" href="{{ route('viaticos.tareas') }}">Limpiar</a>
            </div>
          </form>
        </div>
      </div>
    </aside>

    <!-- Tabla -->
    <section>
      <div class="card card-flat panel">
        <div class="card-body panel-scroll">
          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle table-sticky table-rwd">
              <thead>
                <tr>
                  <th>Radicado</th>
                  <th>Cédula</th>
                  <th>Fecha solicitud</th>
                  <th>Región</th>
                  <th>Departamento</th>
                  <th>Municipio</th>
                  <th class="w-actions">Acción</th>
                  <th class="w-obs">Observación</th>
                  <th class="w-adj">Adjuntar</th>
                </tr>
              </thead>
              <tbody>
                @forelse($tareas as $t)
                <tr data-radicado="{{ $t->radicado }}" data-cedula="{{ $t->cedula }}" data-departamento="{{ $t->departamento }}">
                  <td data-th="Radicado">{{ $t->radicado }}</td>
                  <td data-th="Cédula">{{ $t->cedula }}</td>
                  <td data-th="Fecha solicitud">{{ \Illuminate\Support\Str::of($t->fecha_solicitud)->substr(0,10) }}</td>
                  <td data-th="Región">{{ $t->regiona }}</td>
                  <td data-th="Departamento">{{ $t->departamento }}</td>
                  <td data-th="Municipio">{{ $t->municipio }}</td>
                  <td data-th="Acción">
                    <select class="form-select form-select-sm estado-select">
                      <option value="" selected disabled>Seleccione...</option>
                      <option value="Reembolso pagado">Reembolso pagado</option>
                      <option value="Evento ejecutado">Evento ejecutado</option>
                      <option value="Subsanacion">Subsanación</option>
                    </select>
                  </td>
                  <td data-th="Observación">
                    <textarea class="form-control form-control-sm obs-text" rows="1" placeholder="Observación" disabled></textarea>
                  </td>
                  <td data-th="Adjuntar">
                    <form method="POST" action="{{ route('viaticos.subir') }}" class="d-inline form-subir" enctype="multipart/form-data">
                      @csrf
                      <input type="hidden" name="radicado" value="{{ $t->radicado }}">
                      <input type="hidden" name="cedula" value="{{ $t->cedula }}">
                      <input type="hidden" name="departamento" value="{{ $t->departamento }}">
                      <input type="hidden" name="estado" value="Reembolso pagado">
                      <div class="d-flex gap-2 align-items-center flex-wrap">
                        <input type="file" name="archivo[]" class="form-control form-control-sm" multiple disabled style="max-width: 240px;">
                        <button class="btn btn-primary btn-sm" disabled>Subir</button>
                      </div>
                    </form>
                    <button class="btn btn-success btn-sm mt-2 btn-guardar" type="button">Guardar</button>
                  </td>
                </tr>
                @empty
                <tr><td colspan="9" class="text-muted">Sin resultados</td></tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

<script>
// Acciones por fila (estado, observación, habilitar upload)
(function(){
  document.querySelectorAll('tr[data-radicado]').forEach(function(row){
    const sel = row.querySelector('.estado-select');
    const obs = row.querySelector('.obs-text');
    const form = row.querySelector('.form-subir');
    const file = form.querySelector('input[type=file]');
    const btn  = form.querySelector('button');
    const hiddenEstado = form.querySelector('input[name="estado"]');
    const uploadOn = ['Reembolso pagado','Evento ejecutado'];
    const obsReq   = ['Subsanacion'];
    sel.addEventListener('change', function(){
      const v = sel.value;
      hiddenEstado.value = v || 'Reembolso pagado';
      if (obsReq.includes(v)) {
        obs.disabled = false; obs.required = true; obs.placeholder = 'Observación obligatoria';
        file.disabled = true; btn.disabled = true;
      } else if (uploadOn.includes(v)) {
        obs.disabled = false; obs.required = false; obs.placeholder = 'Observación (opcional)';
        file.disabled = false; btn.disabled = false;
      } else {
        obs.disabled = true; obs.required = false; obs.value = '';
        file.disabled = true; btn.disabled = true;
      }
    });
    row.querySelector('.btn-guardar').addEventListener('click', async function(){
      const v = sel.value;
      if (!v) { alert('Selecciona una acción.'); return; }
      if (v==='Subsanacion' && !obs.value.trim()) { alert('La observación es obligatoria.'); return; }
      const payload = { _token: '{{ csrf_token() }}', radicado: row.dataset.radicado, cedula: row.dataset.cedula, accion: v, observacion: obs.value };
      const resp = await fetch('{{ route('viaticos.tareas.estado') }}', { method: 'POST', headers: { 'Accept':'application/json', 'X-Requested-With':'XMLHttpRequest' }, body: new URLSearchParams(payload) });
      if (resp.ok) {
        const data = await resp.json();
        if (data.allowUpload) { file.disabled = false; btn.disabled = false; } else { file.disabled = true; btn.disabled = true; }
        alert(data.message || 'Acción registrada');
      } else {
        try { const err = await resp.json(); alert(Object.values(err.errors||{})[0] || 'No se pudo guardar'); } catch(e){ alert('No se pudo guardar'); }
      }
    });
  });
})();

// Selects dependientes flexibles (no obligatorios)
(function(){
  const URLS = {
    regiones: @json(route('geo.regiones')),
    departamentos: @json(route('geo.departamentos')),
    municipios: @json(route('geo.municipios')),
  };
  const selRegion = document.getElementById('f_region');
  const selDepto  = document.getElementById('f_departamento');
  const selMpio   = document.getElementById('f_municipio');
  const help      = document.getElementById('geo-help');
  const INIT = @json(['region_id' => $filtros['region_id'] ?? '', 'departamento' => $filtros['departamento'] ?? '', 'municipio' => $filtros['municipio'] ?? '']);

  async function getJson(url){
    const r = await fetch(url, { headers: { 'Accept':'application/json' } });
    if(!r.ok) throw new Error('HTTP '+r.status);
    return await r.json();
  }

  async function loadRegiones(selected){
    selRegion.innerHTML = '<option value="">Región</option>';
    try{
      const data = await getJson(URLS.regiones);
      if(!Array.isArray(data) || data.length===0){ help.classList.remove('d-none'); return; }
      help.classList.add('d-none');
      data.forEach(it=>{
        const opt = document.createElement('option');
        opt.value = it.id; opt.textContent = it.descripcion;
        if(String(selected||'')===String(it.id)) opt.selected=true;
        selRegion.appendChild(opt);
      });
    }catch(e){ console.error(e); }
  }

  async function loadDeptos(){
    const rid = selRegion.value || '';
    selDepto.innerHTML = '<option value="">Departamento</option>';
    try{
      const url = URLS.departamentos + (rid ? ('?region_id='+encodeURIComponent(rid)) : '');
      const data = await getJson(url);
      if(!Array.isArray(data) || data.length===0){ help.classList.remove('d-none'); return; }
      help.classList.add('d-none');
      data.forEach(it=>{
        const opt=document.createElement('option');
        opt.value=it.departamento; opt.textContent=it.departamento;
        selDepto.appendChild(opt);
      });
    }catch(e){ console.error(e); }
  }

  async function loadMpios(){
    const rid = selRegion.value || '';
    const dep = selDepto.value || '';
    selMpio.innerHTML = '<option value="">Municipio</option>';
    try{
      const qs = [];
      if(rid) qs.push('region_id='+encodeURIComponent(rid));
      if(dep) qs.push('departamento='+encodeURIComponent(dep));
      const url = URLS.municipios + (qs.length ? ('?'+qs.join('&')) : '');
      const data = await getJson(url);
      if(!Array.isArray(data) || data.length===0){ help.classList.remove('d-none'); return; }
      help.classList.add('d-none');
      data.forEach(it=>{
        const opt=document.createElement('option');
        opt.value=it.municipio; opt.textContent=it.municipio;
        selMpio.appendChild(opt);
      });
    }catch(e){ console.error(e); }
  }

  selRegion?.addEventListener('change', async ()=>{ await loadDeptos(); await loadMpios(); });
  selDepto?.addEventListener('change', loadMpios);

  // Inicial respetando filtros existentes
  (async ()=>{
    await loadRegiones(INIT.region_id);
    await loadDeptos(); if(INIT.departamento){ selDepto.value = INIT.departamento; }
    await loadMpios(); if(INIT.municipio){ selMpio.value = INIT.municipio; }
  })();
})();

// Inyectar columna "Archivos" y manejar modal de vista/descarga
(function(){
  // Añadir encabezado de columna antes de Acción
  const theadRow = document.querySelector('.table-rwd thead tr');
  if (theadRow) {
    const th = document.createElement('th'); th.textContent = 'Archivos';
    const thAcc = theadRow.querySelector('th.w-actions');
    thAcc ? theadRow.insertBefore(th, thAcc) : theadRow.appendChild(th);
  }

  // Crear modal en el body solo una vez
  if (!document.getElementById('modalArchivos')) {
    const wrap = document.createElement('div');
    wrap.innerHTML = `
    <div class="modal fade" id="modalArchivos" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header py-2">
            <h6 class="modal-title">Archivos de la solicitud <span id="archivos-radicado"></span></h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
          </div>
          <div class="modal-body">
            <div id="archivos-alert" class="alert alert-warning d-none"></div>
            <div class="row g-3">
              <div class="col-lg-5">
                <ul id="archivos-lista" class="list-group list-group-flush small"></ul>
              </div>
              <div class="col-lg-7">
                <div class="border rounded p-2" style="min-height:360px;">
                  <div id="preview-empty" class="text-muted">Selecciona un archivo para previsualizar.</div>
                  <iframe id="preview-frame" src="" class="w-100 d-none" style="height:360px;"></iframe>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer py-2">
            <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
          </div>
        </div>
      </div>
    </div>`;
    document.body.appendChild(wrap.firstElementChild);
  }

  function b64url(str){
    const b64 = btoa(unescape(encodeURIComponent(str)));
    return b64.replace(/\+/g,'-').replace(/\//g,'_');
  }

  const modalEl = document.getElementById('modalArchivos');
  let modal = null;
  function openModal(){
    try{
      if (window.bootstrap && bootstrap.Modal){
        if(!modal) modal = new bootstrap.Modal(modalEl);
        modal.show();
      } else {
        modalEl.classList.add('show');
        modalEl.style.display = 'block';
        document.body.classList.add('modal-open');
      }
    }catch(e){
      modalEl.classList.add('show');
      modalEl.style.display = 'block';
      document.body.classList.add('modal-open');
    }
  }
  function closeModal(){
    try{
      if (window.bootstrap && bootstrap.Modal && modal){
        modal.hide();
      } else {
        modalEl.classList.remove('show');
        modalEl.style.display = 'none';
        document.body.classList.remove('modal-open');
      }
    }catch(e){
      modalEl.classList.remove('show');
      modalEl.style.display = 'none';
      document.body.classList.remove('modal-open');
    }
    // limpiar previsualización al cerrar
    try { prevFrm.src = ''; prevFrm.classList.add('d-none'); prevEmp.classList.remove('d-none'); } catch(_){ }
  }
  const elLista = document.getElementById('archivos-lista');
  const elRad   = document.getElementById('archivos-radicado');
  const elAlert = document.getElementById('archivos-alert');
  const prevFrm = document.getElementById('preview-frame');
  const prevEmp = document.getElementById('preview-empty');

  // Acciones de cierre para botones con data-bs-dismiss
  modalEl.querySelectorAll('[data-bs-dismiss="modal"]').forEach(btn=>{
    btn.addEventListener('click', function(ev){ ev.preventDefault(); closeModal(); });
  });

  // Cerrar al hacer clic fuera del contenido (fallback)
  modalEl.addEventListener('click', function(ev){
    if (ev.target === modalEl) { closeModal(); }
  });
  // Cerrar con tecla Escape
  document.addEventListener('keydown', function(ev){
    if (ev.key === 'Escape' && modalEl.classList.contains('show')) { closeModal(); }
  });

  function showPreview(url){
    prevEmp.classList.add('d-none');
    prevFrm.classList.remove('d-none');
    prevFrm.src = url;
  }

  async function cargar(dir, radicado){
    elLista.innerHTML = '<li class="list-group-item">Cargando...</li>';
    elRad.textContent = radicado || '';
    elAlert.classList.add('d-none');
    prevEmp.classList.remove('d-none');
    prevFrm.classList.add('d-none');
    prevFrm.src = '';
    try{
      const base = '{{ route('viaticos.archivos.listar') }}';
      const url = dir ? (base + '?dir=' + encodeURIComponent(b64url(dir)))
                      : (base + '?radicado=' + encodeURIComponent(radicado||''));
      const r = await fetch(url, { headers: { 'Accept':'application/json' } });
      const data = await r.json();
      if(!data.ok){
        elLista.innerHTML = '';
        elAlert.textContent = data.message || 'No se pudo listar el directorio.';
        elAlert.classList.remove('d-none');
        return;
      }
      if(!data.files || data.files.length===0){
        elLista.innerHTML = '<li class="list-group-item text-muted">No hay archivos en la carpeta</li>';
        return;
      }
      elLista.innerHTML = '';
      data.files.forEach((f)=>{
        const li = document.createElement('li');
        li.className = 'list-group-item d-flex justify-content-between align-items-center gap-2';
        const name = document.createElement('span'); name.textContent = f.name;
        const actions = document.createElement('span'); actions.className = 'btn-group btn-group-sm';
        const ver = document.createElement('a'); ver.className = 'btn btn-outline-primary'; ver.textContent = 'Ver'; ver.href = f.preview_url; ver.target = '_blank';
        ver.addEventListener('click', (ev)=>{ ev.preventDefault(); showPreview(f.preview_url); });
        const down = document.createElement('a'); down.className = 'btn btn-outline-secondary'; down.textContent = 'Descargar'; down.href = f.download_url;
        actions.appendChild(ver); actions.appendChild(down);
        li.appendChild(name); li.appendChild(actions);
        elLista.appendChild(li);
      });
    }catch(e){
      console.error(e);
      elLista.innerHTML = '';
      elAlert.textContent = 'Error al consultar archivos.';
      elAlert.classList.remove('d-none');
    }
  }

  // Insertar botón "Ver archivos" como columna antes de Acción
  document.querySelectorAll('table.table-rwd tbody tr').forEach((row)=>{
    const btnCol = document.createElement('td'); btnCol.setAttribute('data-th','Archivos');
    const dir = row.dataset.url_drive || row.getAttribute('data-url_drive') || '';
    // Si no viene como data-*, leer desde celda de departamento + cedula para armar carpeta cuando exista en atributo data en cada fila
    // Preferimos tomar un atributo data directo si se añade en el futuro
    const fallback = row.dataset.radicado;
    const btn = document.createElement('button');
    btn.type = 'button'; btn.className = 'btn btn-outline-primary btn-sm'; btn.textContent = 'Ver archivos';
    btn.disabled = false; // habilitado; la validación real es al consultar
    btn.addEventListener('click', ()=>{
      openModal();
      // Consultar por radicado en el servidor; allá se resuelve url_drive
      cargar('', row.dataset.radicado || '');
    });
    btnCol.appendChild(btn);
    // Insertar antes de la celda de Acción (séptima col)
    const accionCell = row.children[6];
    if (accionCell) { row.insertBefore(btnCol, accionCell); } else { row.appendChild(btnCol); }
  });
})();
</script>
@endsection