@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/lab.css') }}">
@endsection

@section('content')
<div class="container">
  <div id="noti_global" class="alert" style="display:none"></div>

  <h3 class="mb-3">Clinic Lab Tests</h3>

  {{-- Optional: Global Patient Header (use your original header/grid here) --}}
  <div class="card mb-3">
    <div class="card-body">
      <div class="row g-2">
        <div class="col-md-3">
          <label for="cid" class="form-label">CID</label>
          <input type="text" id="cid" class="form-control" placeholder="CID / NAP-ID">
        </div>
        <div class="col-md-3">
          <label for="vDate" class="form-label">Visit Date</label>
          <input type="date" id="vDate" class="form-control">
        </div>
        {{-- Keep adding your own global fields here if you use them (doctor, counsellor, etc.) --}}
      </div>
    </div>
  </div>

  {{-- Tabs (HIV active; others placeholders for later) --}}
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#tab_hiv" role="tab">HIV</a>
    </li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">RPR</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">STI</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">HepBC</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">Urine</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">OI</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">General</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">Stool</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">AFB</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">Covid19</a></li>
    <li class="nav-item"><a class="nav-link disabled" tabindex="-1" aria-disabled="true">Viral</a></li>
  </ul>

  <div class="tab-content mt-3">

    {{-- ============ HIV ONLY (using your exact IDs) ============ --}}
    <div class="tab-pane fade show active" id="tab_hiv" role="tabpanel">
      <form id="form_hiv">
        <input type="hidden" id="hiv_row_id" name="row_id">

        {{-- If you prefer per-tab CID/Visit Date, keep these; otherwise it will use global #cid/#vDate --}}
        <div class="row mb-3">
          <div class="col-md-3">
            <label for="hiv_cid" class="form-label">CID (optional per-tab)</label>
            <input type="text" id="hiv_cid" class="form-control" placeholder="(Leave empty to use global CID)">
          </div>
          <div class="col-md-3">
            <label for="hiv_vDate" class="form-label">Visit Date (optional per-tab)</label>
            <input type="date" id="hiv_vDate" class="form-control">
          </div>
        </div>

        {{-- Your field IDs preserved exactly --}}
        <div class="row g-2">
          <div class="col-md-3">
            <label for="bcdate" class="form-label">Blood Collection Date</label>
            <input type="date" id="bcdate" class="form-control">
          </div>
          <div class="col-md-3">
            <label for="d_result" class="form-label">Determine Result</label>
            <input type="text" id="d_result" class="form-control">
          </div>
          <div class="col-md-3">
            <label for="uni_result" class="form-label">Uni-Gold Result</label>
            <input type="text" id="uni_result" class="form-control">
          </div>
          <div class="col-md-3">
            <label for="stat_result" class="form-label">Stat-Pak Result</label>
            <input type="text" id="stat_result" class="form-control">
          </div>
        </div>

        <div class="row g-2 mt-2">
          <div class="col-md-4">
            <label for="final_result" class="form-label">Final Result</label>
            <input type="text" id="final_result" class="form-control">
          </div>
          <div class="col-md-4">
            <label for="comment" class="form-label">Comment</label>
            <input type="text" id="comment" class="form-control">
          </div>
          <div class="col-md-4">
            <label for="lab_tech" class="form-label">Lab Tech</label>
            <input type="text" id="lab_tech" class="form-control">
          </div>
        </div>

        <div class="row g-2 mt-2">
          <div class="col-md-3">
            <label for="issue_date" class="form-label">Issue Date</label>
            <input type="date" id="issue_date" class="form-control">
          </div>
        </div>

        {{-- Actions --}}
        <div class="mt-3 d-flex flex-wrap gap-2">
          <button type="button" class="btn btn-success" onclick="saveTest('hiv')">Save</button>
          <button type="button" class="btn btn-warning" onclick="updateTest('hiv')">Update</button>
          <button type="button" class="btn btn-danger"  onclick="deleteTest('hiv')">Delete</button>
          <button type="button" class="btn btn-info"    onclick="fetchHistory('hiv')">History</button>
        </div>
      </form>

      <hr>

      {{-- History Table --}}
      <div class="table-responsive">
        <table class="table table-sm table-bordered align-middle" id="hiv_table">
          <thead>
            <tr>
              <th style="width:70px">ID</th>
              <th style="width:130px">Visit Date</th>
              <th>Final Result</th>
              <th>Lab Tech</th>
              <th style="width:100px">Action</th>
            </tr>
          </thead>
          <tbody>
            {{-- filled by JS --}}
          </tbody>
        </table>
      </div>
    </div>

    {{-- Other tabs will be added later step-by-step --}}
  </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('js/cliniclab.js') }}"></script>
@endsection