@if($expense->id)
  <div class="d-flex justify-content-start align-items-center user-name mb-4">
    <div class="avatar-wrapper">
      <div class="avatar me-2"><i class="ti ti-license mb-2 ti-xl"></i></div>
    </div>
    <div class="d-flex flex-column">
      <span class="fw-medium mb-1">{{ $expense->subject }}</span>
      <small class="text-muted mb-1">{{ $expense->program->name ?? 'N/A' }}</small>
      <span class="badge bg-label-{{$expense->getStatusColor()}} me-auto">{{$expense->status}}</span>
    </div>
  </div>
@endif
<div class="row mb-4">
  <div class="nav-align-top">
    @if(false && $expense->id)
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-summary" aria-selected="true">Summary</button>
        </li>
        <li class="nav-item" onclick="reload_contract_activities('{{$expense->id}}')">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-activities" aria-selected="false">Activities
            @if($activities_count)
              <span class="badge bg-danger rounded-pill">{{$activities_count}}</span>
            @endif
          </button>
        </li>
        {{-- <li class="nav-item" onclick="reload_contract_reviewers('{{$expense->id}}')">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-reviewers" aria-selected="false">Reviewers</button>
        </li> --}}
        <li class="nav-item" onclick="reload_contract_comments('{{$expense->id}}')">
          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-comments-contracts" aria-selected="false">Comments
            @if($comments_count)
              <span class="badge bg-danger rounded-pill">{{$comments_count}}</span>
            @endif
          </button>
        </li>
      </ul>
    @endif
    <div class="tab-content p-0">
      <div class="tab-pane fade {{request()->tab == null || request()->tab == 'summary' ? 'show active' : ''}}" id="navs-top-summary" role="tabpanel">
        @include('admin.pages.expenses.tabs.summary')
      </div>
      <div class="tab-pane fade {{request()->tab == 'reviewers' ? 'show active' : ''}}" id="navs-top-reviewers" role="tabpanel">
        {{-- @include('admin.pages.contracts.tabs.reviewers') --}}
      </div>
      <div class="tab-pane fade {{request()->tab == 'activities' ? 'show active' : ''}}" id="navs-top-activities" role="tabpanel">
        {{-- @include('admin.pages.contracts.tabs.activities') --}}
      </div>
      <div class="tab-pane fade {{request()->tab == 'comments' ? 'show active' : ''}}" id="navs-top-comments-contracts" role="tabpanel">
        {{-- @include('admin.pages.contracts.tabs.comments') --}}
      </div>
    </div>
  </div>
</div>
<script nonce="{{ csp_nonce() }}">
  $(document).ready(function () {
        window.oURL = window.location.href;
      });
  function reload_contract_summary(contract){
    var url = route('admin.contracts.summary', {
      contract: contract,
    });
    $.ajax({
      url: url,
      type: "GET",
      success: function(data){
        $('#navs-top-summary').html(data.data.view_data);
      }
    });
  }

  function reload_contract_comments(contract){
    var url = route('admin.contracts.comments', {
      contract: contract,
    });
    $.ajax({
      url: url,
      type: "GET",
      success: function(data){
        $('#navs-top-comments-contracts').html(data.data.view_data);
          Livewire.rescan(document.getElementById('navs-top-comments-contracts'));
          Alpine.initTree(document.getElementById('navs-top-comments-contracts'));
        setTimeout(function () {
          history.replaceState(null, null, oURL);
        }, 1000);
      }
    });
  }


  function reload_contract_activities(contract){
    var url = route('admin.contracts.activities', {
      contract: contract,
    });
    $.ajax({
      url: url,
      type: "GET",
      success: function(data){
        $('#navs-top-activities').html(data.data.view_data);
      }
    });
  }
</script>