@extends('layouts.walls')

@section('content')
  @php $accountName = account()->account_name @endphp
  <div class="logout-float">
    <span class="wall-title">{{ \App\Models\SkywatchWall::$walls[$wall] }}</span>
    <a href="{{ route('wallLogout') }}" class="btn btn-sm btn-outline-secondary">Logout</a>
    <a href="{{ route('wallLogout',['toSkywatch'=>true]) }}" class="btn btn-sm btn-outline-secondary">Logout and Back to
      Skywatch</a>
  </div>

  <div>
    <div class="row mt-5">
      <div class="col-2 text-right">
        <h4>Critical Monitoring Wall</h4>
      </div>
      <div class="col-10 text-right">
        <span id="last-updated" class="mr-3">Last Updated: {{ \Carbon\Carbon::now() }}</span>
        <button id="refresh-btn" class="btn btn-sm btn-outline-secondary">
          <i class="fa fa-refresh"></i> Refresh
        </button>
      </div>
    </div>
  </div>

  <div class="row justify-content-around mt-3" id="cases-container">

  </div>

  <script>
    const accountName = {!! json_encode($accountName) !!};
    function loadCriticalCases() {
      $.ajax({
        url: "{{ route('cases.get-critical-cases') }}",
        type: "GET",
        dataType: "json",
        success: function (resp) {
          $("#cases-container").empty();

          $.each(resp, function (caseTypeId, cases) {
            let caseTypeName = cases[0].sub_type_of_case?.name ?? "Case Type " + caseTypeId;

            $("#cases-container").append(`
            <div class="col-md-5 mx-3 p-5 mb-4 dataTable-wrapper dataTable-loading no-footer sortable searchable fixed-columns">
              <h5>${caseTypeName} (Critical) (${cases.length})</h5>
              <table class="table table-chrome table-striped not-wrapped-results" id="cases-table-${caseTypeId}">
                <thead>
                  <tr>
                    <th>CASE#</th>
                    <th>Service</th>
                    <th>Owner</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          `);

            let tbody = $("#cases-table-" + caseTypeId + " tbody");

            if (cases.length === 0) {
              tbody.append('<tr><td colspan="4" class="text-center">No cases found</td></tr>');
            } else {
              $.each(cases, function (i, item) {
                tbody.append(`
                <tr>
                  <td>#${item.id} ${item.name}</td>
                  <td>${item.service?.short_name ?? ''}</td>
                  <td>${item.control == 'Glesec' ? 'GLESEC' : accountName}</td>
                  <td>${item.status_name}</td>
                </tr>
              `);
              });
            }
          });

          $("#last-updated").text("Last Updated: " + new Date().toLocaleString());
        },
        error: function (xhr) {
          console.error("Error AJAX:", xhr.responseText);
        }
      });
    }

    $(document).ready(function () {
      loadCriticalCases();

      $("#refresh-btn").on("click", function () {
        loadCriticalCases();
      });

      // Автоматичне оновлення кожні 30 хвилин (1800000 мс)
      setInterval(loadCriticalCases, 1800000);
    });
  </script>

@endsection