@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>Clinic Lab Tests</h3>

  {{-- Tabs --}}
  <ul class="nav nav-tabs" role="tablist">
    @foreach (['hiv','rpr','sti','hepbc','urine','oi','general','stool','afb','covid19','viral'] as $idx => $test)
      <li class="nav-item">
        <a class="nav-link {{ $idx===0 ? 'active':'' }}" data-bs-toggle="tab" href="#tab_{{ $test }}">{{ strtoupper($test) }}</a>
      </li>
    @endforeach
  </ul>

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

    {{-- ---------------- HIV ---------------- --}}
    <div class="tab-pane fade show active" id="tab_hiv">
      <form id="form_hiv">
        <input type="hidden" id="hiv_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="hiv_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="hiv_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Final Result</label><input type="text" id="Final_Result" class="form-control"></div>
        <div class="mb-2"><label>Sample ID</label><input type="text" id="Sample_ID" class="form-control"></div>
        <div class="mb-2"><label>Comment</label><input type="text" id="Comment" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="Issue_Date" class="form-control"></div>
        <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>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="hiv_table">
        <thead><tr><th>ID</th><th>Date</th><th>Result</th><th>Sample</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- RPR ---------------- --}}
    <div class="tab-pane fade" id="tab_rpr">
      <form id="form_rpr">
        <input type="hidden" id="rpr_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="rpr_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="rpr_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>RPR Result</label><input type="text" id="RPR_Result" class="form-control"></div>
        <div class="mb-2"><label>Titre (Current)</label><input type="text" id="Titre(current)" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="Issue_Date_rpr" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('rpr')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('rpr')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('rpr')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('rpr')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="rpr_table">
        <thead><tr><th>ID</th><th>Date</th><th>RPR</th><th>Titre</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- STI ---------------- --}}
    <div class="tab-pane fade" id="tab_sti">
      <form id="form_sti">
        <input type="hidden" id="sti_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="sti_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="sti_vDate" class="form-control" required></div>
        </div>
        <h6>Candida</h6>
        <div class="row">
          <div class="col"><input type="text" id="candida_postfornix" class="form-control" placeholder="Postfornix"></div>
          <div class="col"><input type="text" id="candida_endocervix" class="form-control" placeholder="Endocervix"></div>
          <div class="col"><input type="text" id="candida_vagina" class="form-control" placeholder="Vagina"></div>
        </div>
        <h6>Gram Stain (Intra)</h6>
        <div class="row">
          <div class="col"><input type="text" id="gram_intra_urethra" class="form-control" placeholder="Urethra"></div>
          <div class="col"><input type="text" id="gram_intra_vagina" class="form-control" placeholder="Vagina"></div>
          <div class="col"><input type="text" id="gram_intra_cervix" class="form-control" placeholder="Cervix"></div>
        </div>
        <h6>Gram Stain (Extra)</h6>
        <div class="row">
          <div class="col"><input type="text" id="gram_extra_urethra" class="form-control" placeholder="Urethra"></div>
          <div class="col"><input type="text" id="gram_extra_vagina" class="form-control" placeholder="Vagina"></div>
          <div class="col"><input type="text" id="gram_extra_cervix" class="form-control" placeholder="Cervix"></div>
        </div>
        <h6>PMNL</h6>
        <div class="row">
          <div class="col"><input type="text" id="pmnl_urethra" class="form-control" placeholder="Urethra"></div>
          <div class="col"><input type="text" id="pmnl_vagina" class="form-control" placeholder="Vagina"></div>
          <div class="col"><input type="text" id="pmnl_cervix" class="form-control" placeholder="Cervix"></div>
        </div>
        <h6>Other</h6>
        <div class="row">
          <div class="col"><input type="text" id="oth_bact" class="form-control" placeholder="Other Bacteria"></div>
          <div class="col"><input type="text" id="Sper_other_wet" class="form-control" placeholder="Other Wet Prep"></div>
          <div class="col"><input type="text" id="urine_exam_done" class="form-control" placeholder="Urine Exam Done"></div>
          <div class="col"><input type="text" id="epithelial_cell" class="form-control" placeholder="Epithelial Cells"></div>
        </div>
        <div class="mb-2"><label>Lab Tech</label><input type="text" id="sti_lab_tech" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="sti_issueDate" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('sti')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('sti')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('sti')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('sti')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="sti_table">
        <thead><tr><th>ID</th><th>Date</th><th>Tech</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- HepBC ---------------- --}}
    <div class="tab-pane fade" id="tab_hepbc">
      <form id="form_hepbc">
        <input type="hidden" id="hepbc_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="hepbc_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="hepbc_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Hepatitis Result</label><input type="text" id="Hep_Result" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="Issue_Date_hepbc" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('hepbc')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('hepbc')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('hepbc')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('hepbc')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="hepbc_table">
        <thead><tr><th>ID</th><th>Date</th><th>Result</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- Urine ---------------- --}}
    <div class="tab-pane fade" id="tab_urine">
      <form id="form_urine">
        <input type="hidden" id="urine_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="urine_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="urine_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Protein</label><input type="text" id="Protein" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="Issue_Date_urine" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('urine')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('urine')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('urine')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('urine')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="urine_table">
        <thead><tr><th>ID</th><th>Date</th><th>Protein</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- OI ---------------- --}}
    <div class="tab-pane fade" id="tab_oi">
      <form id="form_oi">
        <input type="hidden" id="oi_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="oi_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="oi_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Risk</label><input type="text" id="Risk" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="Issue_Date_oi" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('oi')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('oi')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('oi')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('oi')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="oi_table">
        <thead><tr><th>ID</th><th>Date</th><th>Risk</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- General ---------------- --}}
    <div class="tab-pane fade" id="tab_general">
      <form id="form_general">
        <input type="hidden" id="general_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="general_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="general_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Remark</label><input type="text" id="Remark" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="Issue_Date_general" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('general')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('general')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('general')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('general')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="general_table">
        <thead><tr><th>ID</th><th>Date</th><th>Remark</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- Stool ---------------- --}}
    <div class="tab-pane fade" id="tab_stool">
      <form id="form_stool">
        <input type="hidden" id="stool_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="stool_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="stool_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Stool</label><input type="text" id="st_stool" class="form-control"></div>
        <div class="mb-2"><label>Colour</label><input type="text" id="st_colour" class="form-control"></div>
        <div class="mb-2"><label>Consistency</label><input type="text" id="st_consistency" class="form-control"></div>
        <div class="mb-2"><label>Comment</label><input type="text" id="st_comment" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="st_issue_date" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('stool')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('stool')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('stool')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('stool')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="stool_table">
        <thead><tr><th>ID</th><th>Date</th><th>Stool</th><th>Color</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- AFB ---------------- --}}
    <div class="tab-pane fade" id="tab_afb">
      <form id="form_afb">
        <input type="hidden" id="afb_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="afb_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="afb_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Patient Name</label><input type="text" id="afb_pt_name" class="form-control"></div>
        <div class="mb-2"><label>Patient Address</label><input type="text" id="afb_pt_address" class="form-control"></div>
        <div class="mb-2"><label>Result</label><input type="text" id="afb_result" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="Issue_Date_afb" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('afb')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('afb')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('afb')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('afb')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="afb_table">
        <thead><tr><th>ID</th><th>Date</th><th>Name</th><th>Result</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- Covid19 ---------------- --}}
    <div class="tab-pane fade" id="tab_covid19">
      <form id="form_covid19">
        <input type="hidden" id="covid19_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="covid19_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="covid19_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Type of Patient</label><input type="text" id="type_of_patient_covid" class="form-control"></div>
        <div class="mb-2"><label>Covid Result</label><input type="text" id="covid_result" class="form-control"></div>
        <div class="mb-2"><label>Age</label><input type="number" id="co_Age" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('covid19')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('covid19')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('covid19')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('covid19')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="covid19_table">
        <thead><tr><th>ID</th><th>Date</th><th>Result</th><th>Age</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    {{-- ---------------- Viral Load ---------------- --}}
    <div class="tab-pane fade" id="tab_viral">
      <form id="form_viral">
        <input type="hidden" id="viral_row_id">
        <div class="row mb-2">
          <div class="col"><label>CID</label><input type="text" id="viral_cid" class="form-control" required></div>
          <div class="col"><label>Visit Date</label><input type="date" id="viral_vDate" class="form-control" required></div>
        </div>
        <div class="mb-2"><label>Viral Result</label><input type="text" id="Viral_Result" class="form-control"></div>
        <div class="mb-2"><label>Issue Date</label><input type="date" id="Issue_Date_viral" class="form-control"></div>
        <button type="button" class="btn btn-success" onclick="saveTest('viral')">Save</button>
        <button type="button" class="btn btn-warning" onclick="updateTest('viral')">Update</button>
        <button type="button" class="btn btn-danger" onclick="deleteTest('viral')">Delete</button>
        <button type="button" class="btn btn-info" onclick="fetchHistory('viral')">History</button>
      </form>
      <hr>
      <table class="table table-sm table-bordered" id="viral_table">
        <thead><tr><th>ID</th><th>Date</th><th>Result</th><th>Action</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

  </div>
</div>
@endsection

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