@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/TbSection/tb.css') }}?v={{ filemtime(public_path('css/TbSection/tb.css')) }}">
@endpush

@section('content')
@auth
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('js/TB_js/tb-Reg-03.js') }}"></script>

<p class="btn-gnavi">
 <span></span>
 <span></span>
 <span></span>
</p>
<div class="container-fluid tb03-record-container">
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="card tb03-card shadow-sm mx-auto">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
          <div>
            <h2 class="mb-0">TB-03 register</h2>
            <div class="small tb03-header-subtitle">Register, export, and manage TB-03 data by clinic.</div>
          </div>
          <div class="d-flex flex-wrap align-items-center gap-2">
            <form id="tb03QuickExportForm" method="POST" action="{{ route('tb03_data') }}" class="d-none">
              @csrf
              <input type="hidden" name="dateFrom" value="01-01-1900">
              <input type="hidden" name="dateTo" value="31-12-2099">
              <input type="hidden" name="notice" value="TB 03 Export">
            </form>
            <a href="{{ route('tb03.manage') }}" class="btn btn-outline-light btn-sm tb03-header-action-btn">Manage</a>
            <a href="{{ route('tb03.create') }}" class="btn btn-outline-light btn-sm tb03-header-action-btn">Clear</a>
            <form method="POST" action="{{ route('tb03.import') }}" enctype="multipart/form-data" class="d-flex align-items-center">
              @csrf
              <input type="file" name="import_file" accept=".csv,.txt,.xlsx" class="d-none" onchange="this.form.submit()">
              <button type="button" class="btn btn-outline-light btn-sm tb03-header-action-btn" onclick="this.previousElementSibling.click()">Import</button>
            </form>
            <button type="button" class="btn btn-outline-light btn-sm tb03-header-action-btn" data-tb03-tab="#Tb_registerForm">Register</button>
            <button type="submit" class="btn btn-outline-light btn-sm tb03-header-action-btn" form="tb03QuickExportForm">Export</button>
          </div>
        </div>
        <div class="card-body">
          @if (session('status'))
          <div class="alert alert-success">
            {{ session('status') }}
          </div>
          @endif

          @if ($errors->any())
          <div class="alert alert-danger">
            <ul class="mb-0">
              @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
          @endif

          @if (!empty($editRecord))
          <div class="alert alert-info">
            Editing TB-03 record #{{ $editRecord->id }}. Save with the Update TB_03 button.
          </div>
          @endif
          @include('TB.partials.entry_context', ['currentPage' => 'tb03'])

          <div class="alert alert-secondary" id="tb03SyncPanel"
            data-download-url="{{ route('tb03.sync.download') }}"
            data-upload-url="{{ route('tb03.sync.upload') }}">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
              <div>
                <div class="fw-semibold">TB03 browser entry queue</div>
                <div class="small text-muted">TB03 entries are saved in this browser first. Use Sync to upload them to the server.</div>
              </div>
              <div class="d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="tb03OfflineToggle">Offline-only: Off</button>
                <button type="button" class="btn btn-sm btn-outline-primary" id="tb03SyncDownload">Download</button>
                <button type="button" class="btn btn-sm btn-outline-success" id="tb03SyncUpload">
                  Sync (<span id="tb03SyncPendingCount">0</span>)
                </button>
                <button type="button" class="btn btn-sm btn-outline-danger" id="tb03SyncClear">Clear pending</button>
              </div>
            </div>
            <div id="tb03SyncPanelBody">
              <div class="d-flex align-items-center justify-content-between gap-2 mt-2">
                <div class="small text-muted" id="tb03SyncStatus">Ready.</div>
                <div class="d-flex gap-2">
                  <button type="button" class="btn btn-sm btn-outline-secondary" id="tb03SyncQueueToggle">Show queue</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary" id="tb03SyncQueueRefresh">Refresh</button>
                </div>
              </div>
              <div class="small text-muted mt-1">Downloaded local TB03 records: <span id="tb03SyncCachedCount">0</span></div>
              <div class="small mt-2 d-none" id="tb03SyncQueueList">No pending TB03 records.</div>
            </div>
          </div>

  <ul class="nav nav-tabs toggle"
    id="hidden-title">
    <li class="nav-item">
      <a class="nav-link active toggle-link"
        data-toggle="pill"
        href="#Tb_registerForm">Tb_Register_03</a>
    </li>

    <li class="nav-item ms-auto">
      <a class="nav-link tb03-manage-nav-link"
        href="{{ route('tb03.manage') }}">Manage</a>
    </li>
  </ul>
  <div class="tab-content tb-parent-div">
    <div class="tab-pane tb-register03 active"
      id="Tb_registerForm">
      <div id="tb03_main">
        <div style="position: relative">
          <h2 class="header-text">
            TB Register_03
          </h2>
          <button class="btn refresh-follow tb03-refresh"
            id="tbo3_refresh"
            style="float:right">Refresh</button>
        </div>
        <div id="Tb_generalData">
          <div class="row">
            <div class="col-sm-3"
              id="new_RC_Block">
              <input type="checkbox"
                id="TBexit_newRec"
                name="sameIdNewRc"
                onclick="same_ID_newRc()">
              <label class="form-label">Same ID New Record</label>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="input-group mb-3 tb-generalCode">
                <input type="number"
                  id="TB03_pid"
                  class="form-control"
                  placeholder="General ID">
                <input type="text"
                  id="TB03_id"
                  class="form-control"
                  placeholder="Township TB Reg Number">
                <button class="btn btn-primary"
                  onclick="findTB03_patient()"
                  type="button">Search</button>
              </div>
            </div>
            <div class="col-sm-3">
              <label for="TB03_name"
                class="form-label">Name</label>
              <input type="text" id="TB03_name"
                class="form-control">
            </div>
            <div class="col-sm-3">
              <label for="TB03_age"
                class="form-label">Register Age</label>
              <input type="number" id="TB03_age"
                class="form-control">
            </div>
            <div class="col-sm-3">
              <label for="TB03_regMonth"
                class="form-label">Reg Age(Month)</label>
              <input type="number" id="TB03_regMonth"
                class="form-control">
            </div>
            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">Current Age</label>
              <input type='number' id="agey"
                class="form-control" disabled>
            </div>
            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">Current Age(Month)</label>
              <input type='number' id="agem"
                class="form-control" disabled>
            </div>
            @if (!empty($editRecord))
            @php
              $tb03ClinicOptions = array_values(array_filter((array) ($clinics ?? config('tb_entry.clinics', []))));
              $tb03ClinicPrefixes = (array) config('tb_entry.general_id_prefixes', []);
              $tb03RecordClinic = old('Clinic Code', $editRecord->Clinic_code ?? session('tb.clinic', config('tb_entry.default_clinic', 'Myitkyina')));
              if ($tb03RecordClinic && !in_array($tb03RecordClinic, $tb03ClinicOptions, true)) {
                $tb03ClinicOptions[] = $tb03RecordClinic;
              }
            @endphp
            <div class="col-sm-3">
              <label for="TB03_clinic"
                class="form-label">Record Clinic</label>
              <select id="TB03_clinic"
                class="form-control"
                name="Clinic Code">
                @foreach ($tb03ClinicOptions as $clinic)
                <option value="{{ $clinic }}" {{ (string) $tb03RecordClinic === (string) $clinic ? 'selected' : '' }}>
                  {{ $clinic }} : {{ $tb03ClinicPrefixes[$clinic] ?? '' }}
                </option>
                @endforeach
              </select>
            </div>
            @endif
            <div class="col-sm-2">
              <label for="TB03_gender"
                class="form-label">Sex</label>
              <select id="TB03_gender"
                class="form-control">
                <option value=""></option>
                <option value="M">M</option>
                <option value="F">F</option>
              </select>
            </div>

            <div class="col-sm-2 tb-region">
              <label for="TB03_state"
                class="form-label">State/ Region</label>
              <input class="form-control"
                id="TB03_state">
            </div>
            <div class="col-sm-2 tb-township">
              <label for="TB03_town"
                class="form-label">Township</label>
              <input class="form-control"
                id="TB03_town">
            </div>
          </div>
        </div>
        <div id="tb_info">

          <div class="row">
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Treatment Date</label>
              <div class="date-holder">
                <input type="text"
                  class="form-control Gdate"
                  id="TB03_tremDate"
                  placeholder="dd-mm-yyyy">
                <img src="{{ asset('img/calendar3.svg') }}"
                  class="dateimg"
                  alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Nationality</label>
              <select class="form-control"
                id="TB03_nationality"
                name="">
                <option value=""></option>
                <option value="N">N</option>
                <option value="NN">NN</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="validationCustom01"
                class="form-label">Facility name</label>
              <select class="form-control"
                id="TB03_facility"
                name="">
                <option value=""></option>
                <option value="AHRN (Kachin) WM, PK, BM">AHRN (Kachin) WM, PK, BM</option>
                <option value="AHRN (Shan North) Laukkai, Lashio">AHRN (Shan North) Laukkai, Lashio</option>
                <option value="MDM, (Myitkyina, Mokaung, Moenyin)">MDM, (Myitkyina, Mokaung, Moenyin)</option>
                <option value="MDM, Ygn (Hlaing)">MDM, Ygn (Hlaing)</option>
                <option value="MAM">MAM</option>
                <option value="MMA">MMA</option>
                <option value="MSF-CH (Dawei)">MSF-CH (Dawei)</option>
                <option value="MSF-H (Kachin)Myitkyina, WM, Phaknt, BM, MK)">MSF-H (Kachin)(Myitkyina, WM, Phaknt, BM,
                  MK)</option>
                <option value="MSF-H (Rakhine)">MSF-H (Rakhine)</option>
                <option value="MSF-H (Shan-north) Muse, Lashio">MSF-H (Shan-north) Muse, Lashio</option>
                <option value="MSF-H (Yangon) Insein, Tharketa">MSF-H (Yangon) Insein, Tharketa</option>

              </select>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Reporting Period</label>
              <select class="form-control"
                id="TB03_reportPeriod"
                name="">
                <option value=""></option>
                <option value="1st_Qtr">1st Qtr</option>
                <option value="2nd_Qtr">2nd Qtr</option>
                <option value="3rd_Qtr">3rd Qtr</option>
                <option value="4th_Qtr">4th Qtr</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Transfer in</label>
              <select class="form-control"
                id="TB03_transfer"
                name="">
                <option value=""></option>
                <option value="Y">Yes</option>
                <option value="N">No</option>
              </select>
            </div>
          </div>
          <div class="row"
            id="TB03_locate">
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Refer From</label>
              <select class="form-control"
                id="TB03_referFrom"
                name="">
                <option value=""></option>
                <option value="AHRN">AHRN</option>
                <option value="ARC">ARC</option>
                <option value="BHS/PHS">BHS/PHS</option>
                <option value="Community Volunteer">Community Volunteer</option>
                <option value="DM Clinic">DM Clinic</option>
                <option value="Drug Seller">Drug Seller</option>
                <option value="IOM">IOM</option>
                <option value="KPHW">KPHW</option>
                <option value="MAM">MAM</option>
                <option value="MHAA">MHAA</option>
                <option value="MMA">MMA</option>
                <option value="MMCWA">MMCWA</option>
                <option value="MNCH">MNCH</option>
                <option value="Mobile Team">Mobile Team</option>
                <option value="MRCS">MRCS</option>
                <option value="MWAF">MWAF</option>
                <option value="PPM Hosp">PPM Hosp</option>
                <option value="Union">Union</option>
                <option value="HPA">HPA</option>
                <option value="EHO">EHO</option>
                <option value="STD/NAP">STD/NAP</option>
                <option value="GP">GP</option>
                <option value="Top Center">Top Center</option>
                <option value="World Vision">World Vision</option>
                <option value="Public Hosp">Public Hosp</option>
                <option value="Private Hosp">Private Hosp</option>
                <option value="Prison">Prison</option>
                <option value="PSI">PSI</option>
                <option value="SMRU">SMRU</option>
                <option value="SR2">SR2</option>
                <option value="SR4">SR4</option>
                <option value="Self">Self</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Type of Patient's</label>
              <select class="form-control"
                id="TB03_typePatient"
                name="">
                <option value=""></option>
                <option value="N">N</option>
                <option value="R">R</option>
                <option value="F">F</option>
                <option value="L">L</option>
                <option value="O">O</option>
                <option value="U">U</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">TB Site</label>
              <select class="form-control"
                id="TB03_site"
                name="">
                <option value=""></option>
                <option value="P">P</option>
                <option value="EP">EP</option>
                <option value="EP-TBM">EP-TBM</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Treatment Regimens</label>
              <select class="form-control"
                id="TB03_treRegimens"
                name="">
                <option value=""></option>
                <option value="I">I</option>
                <option value="R">R</option>
                <option value="C">C</option>
                <option value="M">M</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Smoking Status</label>
              <select class="form-control"
                id="TB03_smoke"
                name="">
                <option value=""></option>
                <option value="C">C</option>
                <option value="P">P</option>
                <option value="N">N</option>
                <option value="U">U</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">DM Status</label>
              <select class="form-control"
                id="TB03_dm"
                name="">
                <option value=""></option>
                <option value="Y">Yes</option>
                <option value="N">No</option>
                <option value="U">Unknow</option>
              </select>
            </div>
            <div class="col-sm-12">
              <label for="validationCustom01"
                class="form-label">Specify _(if EP)/Site of EPTB</label>
              <input id="TB03_EPTB"
                type="text"
                class="form-control">
            </div>
          </div>
          <div class="row tb_essential"
            id="TB03_essentialData">
            <div class="row tb_hivActivites">
              <h3 class="header-text">TB/HIV Activites</h3>

              <div class="col-sm-2">
                <label for="validationCustom01"
                  class="form-label">HIV Status</label>
                <select class="form-control"
                  id="TB03_hiv"
                  name="">
                  <option value=""></option>
                  <option value="P">Positive</option>
                  <option value="N">Negative</option>
                  <option value="U">Unknow</option>
                </select>
              </div>
              <div class="col-sm-3">
                <label for="validationCustom01"
                  class="form-label">ART Start Date</label>
                <div class="date-holder">
                  <input type="text"
                    class="form-control Gdate"
                    id="TB03_ART"
                    placeholder="dd-mm-yyyy">
                  <img src="{{ asset('img/calendar3.svg') }}"
                    class="dateimg"
                    alt="date">
                </div>
              </div>
              <div class="col-sm-3">
                <label for="validationCustom01"
                  class="form-label">CPT Start Date</label>
                <div class="date-holder">
                  <input type="text"
                    class="form-control Gdate"
                    id="TB03_CPT"
                    placeholder="dd-mm-yyyy">
                  <img src="{{ asset('img/calendar3.svg') }}"
                    class="dateimg"
                    alt="date">
                </div>
              </div>
            </div>

          </div>
          <div class="row tb_sartDiag">
            <h3 class="header-text">At the time of TB Diagnosis</h3>
            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">Microscope Result</label>
              <select class="form-control"
                id="TB03_microscope"
                name="">
                <option value=""></option>
                <option value="P">Positive</option>
                <option value="N">Negative</option>
                <option value="U">Unknow</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">XRay Result</label>
              <select class="form-control"
                id="TB03_Xray"
                name="">
                <option value=""></option>
                <option value="N">Normal</option>
                <option value="A">Active TB</option>
                <option value="O">Abnormal Other > TB</option>
                <option value="ND">Not Done</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">Xpert Result</label>
              <select class="form-control"
                id="TB03_Xpert"
                name="">
                <option value=""></option>
                <option value="N">N</option>
                <option value="I">I</option>
                <option value="T">T</option>
                <option value="RR">RR</option>
                <option value="TI">TI</option>
                <option value="TT">TT</option>
              </select>
            </div>

            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">Culture Result</label>
              <select class="form-control"
                id="TB03_culture"
                name="">
                <option value=""></option>
                <option value="N">N</option>
                <option value="S">S</option>
                <option value="P">P</option>
                <option value="NT">NT</option>
                <option value="C">C</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">Counsellor Name</label>
              <select class="form-select"
                id="TB03_counselor"
                required="">
                <option value=""></option>
                <option value="col_1">Counsellor 1</option>
                <option value="col_2">Counsellor 2</option>
                <option value="col_3">Counsellor 3</option>
                <option value="col_4">Counsellor 4</option>
                <option value="col_5">Counsellor 5</option>
                <option value="col_6">Counsellor 6</option>
                <option value="col_7">Counsellor 7</option>
                <option value="col_8">Counsellor 8</option>
                <option value="col_9">Counsellor 9</option>
                <option value="col_10">Counsellor 10</option>
                <option value="col_11">Counsellor 11</option>
                <option value="col_12">Counsellor 12</option>
                <option value="col_13">Counsellor 13</option>
                <option value="col_14">Counsellor 14</option>
                <option value="col_15">Counsellor 15</option>
                <option value="col_16">Counsellor 16</option>
                <option value="col_17">Counsellor 17</option>
                <option value="col_18">Counsellor 18</option>
                <option value="col_19">Counsellor 19</option>
                <option value="col_20">Counsellor 20</option>
                <option value="col_21">Counsellor 21</option>
                <option value="col_22">Counsellor 22</option>
                <option value="col_23">Counsellor 23</option>
                <option value="col_24">Counsellor 24</option>
                <option value="col_25">Counsellor 25</option>
                <option value="col_26">Counsellor 26</option>
                <option value="col_27">Counsellor 27</option>
                <option value="col_28">Counsellor 28</option>
                <option value="col_29">Counsellor 29</option>
                <option value="col_30">Counsellor 30</option>
                <option value="col_31">Counsellor 31</option>
                <option value="col_32">Counsellor 32</option>
                <option value="col_33">Counsellor 33</option>
                <option value="col_34">Counsellor 34</option>
                <option value="col_35">Counsellor 35</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">bacteriological/clinical</label>
              <input id="TB03_bactlogical"
                type="text"
                class="form-control">
            </div>
          </div>

          <div class="row"
            id="tb_time">
            <div class="row">
              <div class="col-sm-2">
                <button class="tb-time-Tab"
                  id="tb-m2">Month 2</button>
              </div>
              <div class="col-sm-2">
                <button class="tb-time-Tab"
                  id="tb-m3">Month 3</button>
              </div>
              <div class="col-sm-2">
                <button class="tb-time-Tab"
                  id="tb-m5">Month 5</button>
              </div>
              <div class="col-sm-2">
                <button class="tb-time-Tab"
                  id="tb-endDiag">End Treatment</button>
              </div>
            </div>
            <div class="col-md-6 tb-m2">
              <div class="row ">
                <h3 class="header-text">Month 2 Result</h3>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Microscope</label>
                  <select class="form-control"
                    id="TB03_2ndmicroscope"
                    name="">
                    <option value=""></option>
                    <option value="P">Positive</option>
                    <option value="N">Negative</option>
                    <option value="U">Unknow</option>
                  </select>
                </div>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Xpert</label>
                  <select class="form-control"
                    id="TB03_2ndXpert"
                    name="">
                    <option value=""></option>
                    <option value="N">N</option>
                    <option value="I">I</option>
                    <option value="T">T</option>
                    <option value="RR">RR</option>
                    <option value="TI">TI</option>
                  </select>
                </div>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Culture</label>
                  <select class="form-control"
                    id="TB03_culture_m2"
                    name="">
                    <option value=""></option>
                    <option value="N">N</option>
                    <option value="S">S</option>
                    <option value="P">P</option>
                    <option value="NT">NT</option>
                    <option value="C">C</option>
                  </select>
                </div>
              </div>

            </div>

            <div class="col-md-6 tb-m3">
              <h3 class="header-text">Month 3 Result</h3>
              <div class="row">
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Microscope</label>
                  <select class="form-control"
                    id="TB03_3rdmicroscope"
                    name="">
                    <option value=""></option>
                    <option value="P">Positive</option>
                    <option value="N">Negative</option>
                    <option value="U">Unknow</option>
                  </select>
                </div>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Xpert</label>
                  <select class="form-control"
                    id="TB03_3rdXpert"
                    name="">
                    <option value=""></option>
                    <option value="N">N</option>
                    <option value="I">I</option>
                    <option value="T">T</option>
                    <option value="RR">RR</option>
                    <option value="TI">TI</option>
                  </select>
                </div>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Culture</label>
                  <select class="form-control"
                    id="TB03_culture_m3"
                    name="">
                    <option value=""></option>
                    <option value="N">N</option>
                    <option value="S">S</option>
                    <option value="P">P</option>
                    <option value="NT">NT</option>
                    <option value="C">C</option>
                  </select>
                </div>
              </div>

            </div>

            <div class="col-md-6 tb-m5">
              <h3 class="header-text">Month 5 Result</h3>
              <div class="row">
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Microscope</label>
                  <select class="form-control"
                    id="TB03_5thmicroscope"
                    name="">
                    <option value=""></option>
                    <option value="P">Positive</option>
                    <option value="N">Negative</option>
                    <option value="U">Unknow</option>
                  </select>
                </div>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Xpert</label>
                  <select class="form-control"
                    id="TB03_5thXpert"
                    name="">
                    <option value=""></option>
                    <option value="N">N</option>
                    <option value="I">I</option>
                    <option value="T">T</option>
                    <option value="RR">RR</option>
                    <option value="TI">TI</option>
                  </select>
                </div>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Culture</label>
                  <select class="form-control"
                    id="TB03_culture_m5"
                    name="">
                    <option value=""></option>
                    <option value="N">N</option>
                    <option value="S">S</option>
                    <option value="P">P</option>
                    <option value="NT">NT</option>
                    <option value="C">C</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-md-6 tb-endDiag">
              <h3 class="header-text">End of Treatment</h3>
              <div class="row">
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label"> Microscope</label>
                  <select class="form-control"
                    id="TB03_endmicroscope"
                    name="">
                    <option value=""></option>
                    <option value="P">Positive</option>
                    <option value="N">Negative</option>
                    <option value="U">Unknow</option>
                  </select>
                </div>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">XRay</label>
                  <select class="form-control"
                    id="TB03_endXray"
                    name="">
                    <option value=""></option>
                    <option value="N">Normal</option>
                    <option value="A">Active TB</option>
                    <option value="O">Abnormal Other > TB</option>
                    <option value="ND">Not Done</option>
                  </select>
                </div>
                <div class="col-sm-4">
                  <label for="validationCustom01"
                    class="form-label">Xpert</label>
                  <select class="form-control"
                    id="TB03_endXpert"
                    name="">
                    <option value=""></option>
                    <option value="N">N</option>
                    <option value="I">I</option>
                    <option value="T">T</option>
                    <option value="RR">RR</option>
                    <option value="TI">TI</option>
                  </select>
                </div>

              </div>

            </div>
            <div class="col-sm-2">
              <label for=""
                class="form-label">1st line DST</label>
              <select name=""
                id="1st_dst"
                class="form-select">
                <option value=""></option>
                <option value="R">R</option>
                <option value="S">S</option>
                <option value="C">C</option>
                <option value="NA">NA</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Treatment Outcome</label>
              <select class="form-control"
                id="TB03_outcome"
                name="">
                <option value=""></option>
                <option value="C">C</option>
                <option value="TC">TC</option>
                <option value="F">F</option>
                <option value="D">D</option>
                <option value="LFU">LFU</option>
                <option value="N">N</option>
                <option value="SLD">SLD</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">Initial Regimen Started Date</label>
              <div class="date-holder">
                <input type="text"
                  class="form-control Gdate"
                  id="TB03_IRSD"
                  placeholder="dd-mm-yyyy">
                <img src="{{ asset('img/calendar3.svg') }}"
                  class="dateimg"
                  alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="validationCustom01"
                class="form-label">Outcome Date</label>
              <div class="date-holder">
                <input type="text"
                  class="form-control Gdate"
                  id="TB03_outDate"
                  placeholder="dd-mm-yyyy">
                <img src="{{ asset('img/calendar3.svg') }}"
                  class="dateimg"
                  alt="date">
              </div>
            </div>

            <div class="col-sm-3">
              <label for="validationCustom01"
                class="form-label">Estimated Outcome Date</label>
              <div class="date-holder">
                <input type="text"
                  class="form-control Gdate"
                  id="TB03_EoutDate"
                  placeholder="dd-mm-yyyy">
                <img src="{{ asset('img/calendar3.svg') }}"
                  class="dateimg"
                  alt="date">
              </div>
            </div>
            <div class="col-sm-12">
              <label for="validationCustom01"
                class="form-label">Remark</label>
              <input id="TB03_remark"
                type="text"
                class="form-control">
            </div>

          </div>
          <div class="row"
            style="justify-content:center">
            <div class="col-sm-2">
              <button class="btn btn-info TB-button"
                onclick="TB03_saveUp(this)"
                disabled="true">Register-TB-03</button>
            </div>
          </div>
        </div>

      </div>

    </div>
    <div class="tab-pane fade"
      id="tb_report">
      <h2 class="header-text">Report TB</h2>
      <form action="{{ route('tb03_data') }}"
        method="POST">
        @csrf
        <div class="row export-div">
          <div class="col-sm-2">
            <label class="form-label">Select Report Type</label>
            <select class="form-select tb-03-report"
              name="TB_03_report">
              <option value="TB_O7">TB-O7</option>
              <option value="TB_O8">TB-O8</option>
              <option value="TB_03_IPT">TB-IPT</option>
            </select>
          </div>
          <div class="col-sm-2">
            <label class="form-label">Form</label>
            <div class="date-holder">
              <input type="text"
                class="form-control Gdate"
                name="dateFrom"
                id="tb_exportStart"
                placeholder="dd-mm-yyyy">
              <img src="{{ asset('img/calendar3.svg') }}"
                class="dateimg"
                alt="date">
            </div>
          </div>
          <div class="col-sm-2">
            <label class="form-label">To</label>
            <div class="date-holder">
              <input type="text"
                class="form-control Gdate"
                name="dateTo"
                id="tb_exportEnd"
                placeholder="dd-mm-yyyy">
              <img src="{{ asset('img/calendar3.svg') }}"
                class="dateimg"
                alt="date">
            </div>
          </div>
          <div class="col-sm-2">
            <select class="form-select TB-03-report-type"
              name="TB_03_report_type">
              <option value=""></option>
              <option value="Report_view">Only Report View</option>
            </select>
          </div>
          <div class="col-sm-2">
            <button class="btn btn-info tb-reBtn">Report</button>
          </div>
          <div class="col-sm-1"
            style="display:none">
            <input value="TB 03 Report"
              name="notice">
          </div>

        </div>

      </form>
      <!-- export date -->

    </div>

    <div class="tab-pane fade"
      id="tb_export">
      <h2 class="header-text">TB 03 Export</h2>
      <form action="{{ route('tb03_data') }}"
        method="post">
        @csrf
        <div class="row export-div">
          <div class="col-sm-3">
            <input type="hidden" name="dateFrom" value="01-01-1900">
            <input type="hidden" name="dateTo" value="31-12-2099">
            <div class="small text-muted pt-4">Export all TB-03 records</div>
          </div>
          <div class="col-sm-2 align-self-end">
            <button class="btn btn-info tb-exBtn">Export</button>
          </div>
          <div class="col-sm-1"
            style="display:none">
            <input value="TB 03 Export"
              name="notice">
          </div>
        </div>
      </form>
    </div>

        </div>
      </div>
    </div>
  </div>

</div>
@endauth
@endsection

@push('scripts')
<script type="text/javascript">
  // count input 41
  let clinic_Code = @json(session('tb.clinic', config('tb_entry.default_clinic', 'Myitkyina')));
  let tB03_UP = "",
    updateRid;
  let tb03LatestRecord = null,
    tb03LatestHasOutcome = false;
  const tb03DataUrl = @json(route('tb03_data'));
  const tb03CsrfToken = @json(csrf_token());
  var Tbexit_id = [
    'TNumber_TB03', "TB03_id",
    'Name_TB03', "TB03_name",
    'Age_TB03', "TB03_age",
    'Gender', "TB03_gender",
    'TreDate_TB03', "TB03_tremDate",
    'State_TB03', "TB03_state",
    'Township_TB03', "TB03_town",
    'Nationality_TB03', "TB03_nationality",
    'FaciName_TB03', "TB03_facility",
    'RePariod_TB03', "TB03_reportPeriod",
    'TranferIn_TB03', "TB03_transfer",
    'ReferFrom_TB03', "TB03_referFrom",
    'TypePatient_TB03', "TB03_typePatient",
    'TBsite_TB03', "TB03_site",
    'EPTBsite_TB03', "TB03_EPTB",
    'TreRegimens_TB03', "TB03_treRegimens",
    'Smoke_status_TB03', "TB03_smoke",
    'DMstatue_TB03', "TB03_dm",
    'Hivstatus_TB03', "TB03_hiv",
    'ART_start_TB03', "TB03_ART",
    'CPT_start_TB03', "TB03_CPT",
    'Microscope_Res_TB03', "TB03_microscope",
    'Xpert_Res_TB03', "TB03_Xpert",
    'XRay_Res_TB03', "TB03_Xray",
    'Calture_Res_TB03', "TB03_culture",
    'Counsellor_TB03', "TB03_counselor",
    'BioClinical_TB03', "TB03_bactlogical",
    '2ndMicroscope_Res_TB03', "TB03_2ndmicroscope",
    '2ndXpert_Res_TB03', "TB03_2ndXpert",
    '2ndCulture_Res_TB03', 'TB03_culture_m2',
    '3rdMicroscope_Res_TB03', "TB03_3rdmicroscope",
    '3rdXpert_Res_TB03', "TB03_3rdXpert",
    '3rdCulture_Res_TB03', 'TB03_culture_m3',
    '5rdMicroscope_Res_TB03', "TB03_5thmicroscope",
    '5rdXpert_Res_TB03', "TB03_5thXpert",
    '5rdCulture_Res_TB03', 'TB03_culture_m5',
    'EndTX_Microscope_Res_TB03', "TB03_endmicroscope",
    'EndTX_XRay_Res_TB03', "TB03_endXray",
    'EndTX_Xpert_Res_TB03', "TB03_endXpert",
    '1stDst', '1st_dst',
    'TrementOut_TB03', "TB03_outcome",
    'Intial_RegimenDate_TB03', "TB03_IRSD",
    'TrementOut_Date_TB03', "TB03_outDate",
    'EstimentOut_Date_TB03', "TB03_EoutDate",
    'Remark_TB03', "TB03_remark",
  ]
  let tb03_regDate;
  let tb03_Dob;
  const tb03EditRecord = @json(!empty($editRecord) ? $editRecord->toArray() : null);

  function normalizeTb03DateDisplay(value) {
    if (!value) return '';
    const raw = String(value).trim();
    const ymd = raw.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})/);
    if (ymd) {
      return `${String(ymd[3]).padStart(2, '0')}-${String(ymd[2]).padStart(2, '0')}-${ymd[1]}`;
    }
    const dmy = raw.match(/^(\d{1,2})[-/](\d{1,2})[-/](\d{4})$/);
    if (dmy) {
      return `${String(dmy[1]).padStart(2, '0')}-${String(dmy[2]).padStart(2, '0')}-${dmy[3]}`;
    }
    return raw;
  }

  function fillTb03FormFromRecord(record) {
    if (!record) return;

    $("#TB03_pid").val(record.Pid_TB03 || "");
    clinic_Code = record.Clinic_code || clinic_Code;
    $("#TB03_clinic").val(record.Clinic_code || window.currentTbClinic || clinic_Code);
    updateRid = record.id;
    tB03_UP = "Update 03";

    for (var i = 0; i < Tbexit_id.length; i += 2) {
      var column = Tbexit_id[i];
      var fieldId = Tbexit_id[i + 1];
      var field = $("#" + fieldId);
      if (!field.length) continue;
      var value = record[column] || "";
      if (field.hasClass("Gdate")) {
        value = normalizeTb03DateDisplay(value);
      }
      field.val(value);
    }

    $("#Tb_registerForm h2").text("Update TB Register_03");
    $("#tb_info .TB-button").text("Update TB_03").prop("disabled", false);
    setTb03IdentityLock(true);
    $("#TBexit_newRec").prop("disabled", false).prop("checked", false);
  }

  function initTb03EditRecord() {
    fillTb03FormFromRecord(tb03EditRecord);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initTb03EditRecord);
  } else {
    initTb03EditRecord();
  }

  function setTb03IdentityLock(locked) {
    $("#TB03_pid").prop("disabled", locked);
    $("#TB03_id").prop("disabled", false);
  }

  function tb03RecordHasOutcome(record) {
    if (!record) return false;
    return Boolean(record["TrementOut_TB03"] || record["TrementOut_Date_TB03"]);
  }

  function fillTb03FieldsFromRecord(record) {
    if (!record) return;
    for (var i = 0; i < Tbexit_id.length; i += 2) {
      var column = Tbexit_id[i];
      var fieldId = Tbexit_id[i + 1];
      if ($("#" + fieldId).is("input,select")) {
        $("#" + fieldId).val(record[column] || "");
      } else if ($("#" + fieldId).is("select")) {
        $("#" + fieldId).text(record[column] || "");
      }
    }
  }

  function resetTb03SameIdNewRecord() {
    $("#TBexit_newRec").prop("checked", false).prop("disabled", !tb03LatestHasOutcome);
  }

  function setTb03CompletedRecordMode() {
    $("#Tb_registerForm h2").text("Completed TB Register_03");
    $("#tb_info .TB-button").text("Register-TB-03").prop("disabled", true);
    setTb03IdentityLock(true);
    tB03_UP = "";
  }

  function tb03OfflineOnlyEnabled() {
    return Boolean(window.tb03LocalFirst && typeof window.tb03LocalFirst.isOfflineOnly === "function" && window.tb03LocalFirst.isOfflineOnly());
  }

  function tb03ShowOfflineOnlyServerBlocked() {
    const message = "Offline-only is On. Turn it Off to access server search/save.";
    if (window.tb03LocalFirst && typeof window.tb03LocalFirst.setStatus === "function") {
      window.tb03LocalFirst.setStatus(message, "info");
    }
    alert(message);
  }

  function normalizeTbClinicName(value) {
    const raw = String(value || "").trim();
    if (!raw) return raw;
    const aliases = {
      pb: "Paungbyin",
      paungbyin: "Paungbyin",
      mkn: "Myitkyina",
      myitkyina: "Myitkyina",
      myikyina: "Myitkyina",
      mohnyin: "Mohnyin",
      kl: "Kale",
      kale: "Kale",
      hpyts: "Hpayarthonesu",
      hpayarthonesu: "Hpayarthonesu",
      lahe: "Lahe",
      nanyun: "Nanyun",
      kbc: "KBC",
      htp: "Htantabin",
      htantabin: "Htantabin",
    };
    return aliases[raw.toLowerCase()] || raw;
  }

  function validateTb03GeneralIdWithClinic(pid, clinicName) {
    const normalizedPid = String(pid || "").trim();
    if (!/^[0-9]{10,12}$/.test(normalizedPid)) {
      return "General ID must be 10, 11, or 12 digits.";
    }

    const clinic = normalizeTbClinicName(clinicName || window.currentTbClinic || clinic_Code);
    const prefixMap = window.tbClinicGeneralIdPrefixes || {};
    const expectedPrefix = String(prefixMap[clinic] || "").trim();
    if (!expectedPrefix) {
      return `Clinic prefix rule is missing for clinic ${clinic || "Unknown"}.`;
    }
    if (!normalizedPid.startsWith(expectedPrefix)) {
      return `General ID must start with ${expectedPrefix} for clinic ${clinic}.`;
    }
    return null;
  }

  function tb03PostToServer(payload) {
    const body = new URLSearchParams();
    Object.entries(payload || {}).forEach(([key, value]) => {
      body.append(key, value == null ? '' : String(value));
    });

    return fetch(tb03DataUrl, {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        'X-CSRF-TOKEN': tb03CsrfToken,
      },
      body: body.toString(),
    }).then(async (resp) => {
      const raw = await resp.text();
      let data = raw;
      try {
        data = JSON.parse(raw);
      } catch (e) {
        // keep plain text
      }
      if (!resp.ok) {
        const message = (typeof data === 'object' && data && data.message)
          ? data.message
          : (typeof data === 'string' && data ? data : `Server responded ${resp.status}`);
        throw new Error(message);
      }
      return data;
    });
  }

  function tb03FindFromServer(Pid03, TB03_Id) {
    if (tb03OfflineOnlyEnabled()) {
      tb03ShowOfflineOnlyServerBlocked();
      return Promise.reject(new Error("Offline-only mode is enabled"));
    }
    return tb03PostToServer({
      notice: "Find TB03 patient",
      Pid03: Pid03,
      TB03_Id: TB03_Id,
    });
  }

  function tb03SaveToServer(TB03_data, button) {
    if (tb03OfflineOnlyEnabled()) {
      tb03ShowOfflineOnlyServerBlocked();
      return;
    }
    if (button) {
      button.disabled = true;
    }
    tb03PostToServer(TB03_data)
      .then(() => {
        alert("TB-03 record saved to server.");
        findTB03_patient();
      })
      .catch((error) => {
        console.error(error);
        alert(error.message || "Unable to save TB-03 record to server.");
      })
      .finally(() => {
        if (button) {
          button.disabled = false;
        }
      });
  }

  function applyTb03SearchResponse(response, Pid03, TB03_Id) {
    console.log(response);
    console.log(response.length);
    if (response[0] !== null) {
      $("#tb_info .TB-button").prop("disabled", false);
      clinic_Code = response[0]['Clinic Code'];
      $("#TB03_pid").val(response[0]['Pid']);
      $("#TB03_name").val(response[0]['Name'] || response[0]['Name_TB03'] || '');
      $("#TB03_town").val(response[0]['Township']);
      $("#TB03_state").val(response[0]['Region']);
      $("#TB03_age").val(response[0]['Agey']);
      $("#TB03_regMonth").val(response[0]['Agem']);
      $("#TB03_gender").val(response[0]['Gender']);
      tb03_regDate = response[0]['Reg Date'];
      tb03_Dob = response[0]['Date of Birth'];
      $("#tb_info .TB-button").text("Register-TB-03");
      $("#Tb_registerForm h2").text("TB Register_03");

    } else {
      $("#tb_info .TB-button").prop("disabled", false);
      $("#TB03_pid").val(Pid03);
      $("#TB03_id").val(TB03_Id);
      $("#Tb_registerForm h2").text("New TB Register_03");
      $("#tb_info .TB-button").text("Register-TB-03");
      tB03_UP = "";
      window.tb03ActiveLocalUuid = null;
    }

    let tb_transation = response[1].length;
    tb03LatestRecord = tb_transation > 0 ? response[1][tb_transation - 1] : null;
    tb03LatestHasOutcome = tb03RecordHasOutcome(tb03LatestRecord);
    resetTb03SameIdNewRecord();

    if (tb_transation > 0) {
      fillTb03FieldsFromRecord(tb03LatestRecord);

      DateTo_text();
      if (response[0] && response[0]['Reg Date'] && response[0]['Date of Birth']) {
        net_age(response[0]['Reg Date'], response[0]['Date of Birth'], $('#TB03_tremDate').val());
      }

      updateRid = tb03LatestRecord["id"] || tb03LatestRecord["server_id"] || tb03LatestRecord["Rid"];
      window.tb03ActiveLocalUuid = tb03LatestRecord["_local_uuid"] || null;
      clinic_Code = tb03LatestRecord["Clinic_code"];
      if (tb03LatestHasOutcome) {
        setTb03CompletedRecordMode();
      } else {
        $("#Tb_registerForm h2").text("Existing TB Register_03");
        $("#tb_info .TB-button").text("Update TB_03").prop("disabled", false);
        setTb03IdentityLock(true);
        tB03_UP = updateRid ? "Update 03" : "";
      }

    }
  }

  function findTB03_patient() {
    var Pid03 = $("#TB03_pid").val();
    var TB03_Id = $("#TB03_id").val();
    if (!window.tb03LocalFirst || typeof window.tb03LocalFirst.search !== "function") {
      if (tb03OfflineOnlyEnabled()) {
        tb03ShowOfflineOnlyServerBlocked();
        return;
      }
      tb03FindFromServer(Pid03, TB03_Id)
        .then(function(response) {
          applyTb03SearchResponse(response, Pid03, TB03_Id);
        })
        .catch(function(error) {
          console.error(error);
          alert(error.message || "Unable to search TB-03 records on server.");
        });
      return;
    }
    window.tb03LocalFirst.search({ pid: Pid03, tbNumber: TB03_Id })
      .then(function(response) {
        applyTb03SearchResponse(response, Pid03, TB03_Id);
      })
      .catch(function(error) {
        console.error(error);
        if (tb03OfflineOnlyEnabled()) {
          tb03ShowOfflineOnlyServerBlocked();
          return;
        }
        tb03FindFromServer(Pid03, TB03_Id)
          .then(function(response) {
            applyTb03SearchResponse(response, Pid03, TB03_Id);
          })
          .catch(function(serverError) {
            console.error(serverError);
            alert(serverError.message || "Unable to search TB-03 records.");
          });
      });
  }

  function TB03_saveUp(button) {
    let TB03_data = {},
      TB_03Exist = "";
    $("#Tb_registerForm input,#Tb_registerForm select,#Tb_registerForm span").each(function(index) {
      var Tb03_name = $(this).attr('id');
      TB03_data["notice"] = "TB_03 Register";

      if (tB03_UP == "Update 03") {
        TB03_data["notice"] = "TB_03 Update";
        TB03_data["Rid"] = updateRid;
      }

      if ($(this).is("input,select")) {
        if ($(this).is("input") && $(this).hasClass("Gdate")) {
          TB03_data[Tb03_name] = formatDate($(this).val());
        } else {
          TB03_data[Tb03_name] = $(this).val();
        }
      } else if ($(this).is("span")) {
        TB03_data[Tb03_name] = $(this).text();
      }
      console.log(Tb03_name)
    })
    TB03_data["Clinic Code"] = $("#TB03_clinic").val() || window.currentTbClinic || clinic_Code;
    if (tB03_UP !== "Update 03") {
      const generalIdError = validateTb03GeneralIdWithClinic(TB03_data["TB03_pid"], TB03_data["Clinic Code"]);
      if (generalIdError) {
        if (window.tb03LocalFirst && typeof window.tb03LocalFirst.setStatus === "function") {
          window.tb03LocalFirst.setStatus(generalIdError, "error");
        }
        alert(generalIdError);
        $("#TB03_pid").focus();
        return;
      }
    }


    console.log(Object.keys(TB03_data).length);
    console.log(Object.keys(TB03_data))
    console.log(TB03_data)
    console.log("TB 03 save");
    if (TB03_data["TB03_gender"] == "Female") {
      TB03_data["TB03_gender"] = "F"
    } else if (TB03_data["TB03_gender"] == "Male") {
      TB03_data["TB03_gender"] = "M"
    }
    if ($("#TBexit_newRec").prop('checked') == true) {
      TB03_data["SameID"] = 1;
    } else {
      TB03_data["SameID"] = 0;
    }

    if (window.tb03ActiveLocalUuid) {
      TB03_data["_local_uuid"] = window.tb03ActiveLocalUuid;
    }

    if (window.tb03LocalFirst && window.tb03LocalFirst.save(TB03_data, button)) {
      return;
    }
    if (tb03OfflineOnlyEnabled()) {
      const message = "Offline-only is On, but browser storage is not available in this browser. Turn Offline-only Off to save on server.";
      if (window.tb03LocalFirst && typeof window.tb03LocalFirst.setStatus === "function") {
        window.tb03LocalFirst.setStatus(message, "error");
      }
      alert(message);
      return;
    }
    tb03SaveToServer(TB03_data, button);
  }
  function same_ID_newRc() {
    if ($("#TBexit_newRec").is(":checked")) {
      if (!tb03LatestHasOutcome) {
        $("#TBexit_newRec").prop("checked", false);
        alert("Same ID New Record is only for a TB-03 record that already has an outcome.");
        return;
      }

      $("#tb_info input,#tb_info select").val("");
      $("#tb_info .TB-button").text("Register-TB-03").prop("disabled", false);
      $("#Tb_registerForm h2").text("Same ID New TB Register_03");
      setTb03IdentityLock(true);
      tB03_UP = "";
      updateRid = null;
      window.tb03ActiveLocalUuid = null;
      alert("A new TB-03 record will be saved for this same General ID.");
    } else {
      if (tb03LatestHasOutcome) {
        fillTb03FieldsFromRecord(tb03LatestRecord);
        setTb03CompletedRecordMode();
      }
    }
  }
</script>
<script src="{{ asset('js/TbSection/tbDatePicker.js') }}?v={{ filemtime(public_path('js/TbSection/tbDatePicker.js')) }}"></script>
<script src="{{ asset('js/TbSection/tb03Compat.js') }}?v={{ filemtime(public_path('js/TbSection/tb03Compat.js')) }}"></script>
<script src="{{ asset('js/TbSection/tb03Sync.js') }}?v={{ filemtime(public_path('js/TbSection/tb03Sync.js')) }}"></script>
@endpush