@props(['titlePage'])

<style>
  /* Visual do botão igual ao do form */
  #nav-time-tracking .timer-btn{
    width: 34px; height: 34px;
    border: 0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    cursor: pointer; line-height: 1;
    transition: transform .05s ease-in-out, opacity .15s;
    background: #e53935;            /* running = vermelho */
  }
  #nav-time-tracking .timer-btn.idle{ background: #2e7d32; } /* play */
  #nav-time-tracking .timer-btn i{ color:#fff !important; font-size:14px; }
  #nav-time-tracking .timer-btn:active{ transform: scale(.98); }
  #nav-time-tracking .timer-btn:disabled{ opacity:.7; cursor:not-allowed; }

  #nav-time-tracking #nav-timer-text{ color:#546e7a; font-weight:500; margin-left:.25rem; }
  #nav-time-tracking #nav-timer-value{ font-weight:700; margin-left:.35rem; }
</style>

<nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
    navbar-scroll="true">
    <div class="container-fluid py-1 px-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
                <li class="breadcrumb-item text-sm text-dark active" aria-current="page">{{ $titlePage }}</li>
            </ol>
            <h6 class="font-weight-bolder mb-0">{{ $titlePage }}</h6>
        </nav>

        <div class="collapse navbar-collapse d-flex justify-content-end mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
            <ul class="navbar-nav justify-content-end">

                {{-- 🔁 CRONÔMETROS ATIVOS --}}
                <li class="nav-item d-flex align-items-center" id="nav-trackings">
  <span id="nav-no-tracking" class="badge bg-secondary">SEM ATIVOS</span>
  <div id="nav-trackings-list" class="d-flex align-items-center ms-2"></div>
</li>
                <li class="nav-item d-xl-none ps-3 d-flex align-items-center"></li>

                <li class="nav-item px-3 d-flex align-items-center">
                    <a href="javascript:;" class="nav-link text-body p-0">
                        <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                    </a>
                </li>

                <li class="nav-item dropdown pe-2 d-flex align-items-center">
                    <a href="javascript:;" class="nav-link text-body p-0 d-none" id="dropdownMenuButton"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-bell cursor-pointer"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
                        <li class="mb-2">
                            <a class="dropdown-item border-radius-md" href="javascript:;">
                                <div class="d-flex py-1">
                                    <div class="my-auto">
                                        <img src="{{ asset('assets') }}/img/team-2.jpg" class="avatar avatar-sm me-3 ">
                                    </div>
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="text-sm font-weight-normal mb-1">
                                            <span class="font-weight-bold">New message</span> from Laur
                                        </h6>
                                        <p class="text-xs text-secondary mb-0">
                                            <i class="fa fa-clock me-1"></i> 13 minutes ago
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="mb-2">
                            <a class="dropdown-item border-radius-md" href="javascript:;">
                                <div class="d-flex py-1">
                                    <div class="my-auto">
                                        <img src="{{ asset('assets') }}/img/small-logos/logo-spotify.svg"
                                            class="avatar avatar-sm bg-gradient-dark me-3 ">
                                    </div>
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="text-sm font-weight-normal mb-1">
                                            <span class="font-weight-bold">New album</span> by Travis Scott
                                        </h6>
                                        <p class="text-xs text-secondary mb-0">
                                            <i class="fa fa-clock me-1"></i> 1 day
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item border-radius-md" href="javascript:;">
                                <div class="d-flex py-1">
                                    <div class="avatar avatar-sm bg-gradient-secondary me-3 my-auto">
                                        <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <title>credit-card</title>
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF"
                                                    fill-rule="nonzero">
                                                    <g transform="translate(1716.000000, 291.000000)">
                                                        <g transform="translate(453.000000, 454.000000)">
                                                            <path class="color-background"
                                                                d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"
                                                                opacity="0.593633743"></path>
                                                            <path class="color-background"
                                                                d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z">
                                                            </path>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
(function(){
  const container   = document.getElementById('nav-trackings');
  const noBadge     = document.getElementById('nav-no-tracking');
  const listEl      = document.getElementById('nav-trackings-list');

  const ATIVOS_URL  = "{{ url('/trackings/ativos') }}";
  const STOP_BASE   = "{{ url('admin/eventos') }}";
  const CSRF        = document.querySelector('meta[name="csrf-token"]')?.content || '';

  const timers = {};

  function fmt(s){
    const h=Math.floor(s/3600), m=Math.floor((s%3600)/60), ss=s%60;
    if(h) return `${h}h`;
    if(m) return `${m}m ${ss}s`;
    return `0:${String(ss).padStart(2,'0')}`;
  }

  function startTimer(labelEl, started_at, key){
    let t0 = Date.parse(started_at) || Date.now();
    let s  = Math.floor((Date.now()-t0)/1000);
    labelEl.textContent = fmt(s);
    timers[key] = setInterval(()=>{ s++; labelEl.textContent = fmt(s); }, 1000);
  }

  function clearAllTimers(){
    Object.values(timers).forEach(id => clearInterval(id));
    Object.keys(timers).forEach(k => delete timers[k]);
  }

  function render(list){
    // limpa UI
    clearAllTimers();
    listEl.innerHTML = '';

    if(!list.length){
      noBadge.classList.remove('d-none');
      return;
    }
    noBadge.classList.add('d-none');

    list.forEach(tr => {
      // wrapper de cada tracking
      const item = document.createElement('div');
      item.className = 'd-flex align-items-center nav-tr-item ms-3'; // espaçamento lateral
      item.title = tr.evento || `Evento #${tr.evento_id}`;

      // botão igual ao do form
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'timer-btn running';
      btn.innerHTML = '<i class="fas fa-stop"></i>';

      // texto fixo igual ao form (se quiser remover, apague as 2 linhas abaixo)
      const txt = document.createElement('span');
      txt.className = 'ms-2';
      txt.textContent = 'Tempo rastreado';

      // valor (cronômetro)
      const val = document.createElement('span');
      val.className = 'ms-2 fw-bold';

      // liga cronômetro
      const key = String(tr.idtimetracking);
      startTimer(val, tr.started_at, key);

      // STOP
      btn.onclick = () => {
        btn.disabled = true;
        fetch(`${STOP_BASE}/${tr.evento_id}/trackings/stop`, {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': CSRF,
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
          },
          credentials: 'same-origin',
          body: JSON.stringify({ tracking_id: tr.idtimetracking })
        })
        .then(r => { if(!r.ok) throw new Error(r.status); })
        .then(() => location.reload())
        .catch(() => { btn.disabled = false; });
      };

      // monta
      item.appendChild(btn);
      item.appendChild(txt);
      item.appendChild(val);
      listEl.appendChild(item);
    });
  }

  function load(){
    fetch(ATIVOS_URL, { headers:{'X-Requested-With':'XMLHttpRequest'}, credentials:'same-origin' })
      .then(r => r.ok ? r.json() : [])
      .then(l => render(Array.isArray(l) ? l : []))
      .catch(() => render([]));
  }

  document.addEventListener('DOMContentLoaded', () => {
    load();
    setInterval(load, 20000); // atualiza a cada 20s
  });
})();
</script>