@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/TbSection/preTbRecord.css') }}">
<style>
  .symptom-risk-grid {
    display: grid;
    gap: 12px;
  }
  .symptom-risk-row {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  @media (max-width: 991.98px) {
    .symptom-risk-row {
      flex-direction: column;
      align-items: stretch;
    }
  }
  .symptom-cell {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .risk-cell {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .risk-cell > .form-label {
    margin-bottom: 0;
    min-width: 120px;
  }
  .risk-cell .form-select {
    flex: 1 1 auto;
  }
  .risk-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
  }
  .risk-inline .form-select {
    flex: 0 0 auto;
    width: 120px;
    min-width: 110px;
  }
  .tx-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .tx-inline .form-label {
    margin-bottom: 0;
  }
  .tx-inline.is-hidden {
    display: none;
  }
  @media (max-width: 575.98px) {
    .risk-cell {
      flex-direction: column;
      align-items: stretch;
    }
    .risk-cell .form-label {
      min-width: 0;
    }
    .risk-inline {
      flex-wrap: wrap;
    }
    .risk-inline .form-select {
      width: 100%;
      min-width: 0;
    }
    .tx-inline {
      width: 100%;
    }
  }
  .symptom-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .symptom-entry .form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 0 !important;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .symptom-entry .form-check-input {
    margin: 0 !important;
    float: none !important;
    position: static !important;
  }
  .symptom-entry .form-check-label {
    margin: 0 !important;
  }
  .symptom-label {
    min-width: 0;
    white-space: nowrap;
    padding-left: 0 !important;
    text-align: left;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .symptom-days {
    width: 80px;
    min-width: 0;
    max-width: 80px;
    text-align: center;
  }
  @media (max-width: 575.98px) {
    .symptom-entry {
      flex-wrap: wrap;
    }
    .symptom-label {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    .symptom-days {
      width: 100%;
      max-width: none;
    }
  }
  /* Make room for 3-digit values (e.g. 365) by removing number spinners */
  .symptom-days::-webkit-outer-spin-button,
  .symptom-days::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .symptom-days[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .pre-tb-card .symptom-dropdown {
    background: #0a4674;
    border: 1px solid #2b6898;
    color: #eaf3ff;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
  }
  .pre-tb-card .symptom-dropdown .form-check-label {
    color: #eaf3ff;
  }
  #patient_meta_summary {
    background: #0a4674;
    border-color: #2b6898 !important;
    color: #eaf3ff;
  }
  .yes-no-toggle {
    display: flex;
    align-items: center;
    min-height: 42px;
  }
  .yes-no-toggle .form-check {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
  }
  .yes-no-toggle .form-check-input {
    margin: 0 !important;
    float: none;
  }
  .yes-no-toggle .form-check-label {
    margin: 0;
    white-space: nowrap;
  }
  .tablet-row-break {
    display: none;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .tablet-only-actions {
    display: none;
  }
  .tablet-actions-menu {
    min-width: 260px;
  }
  .tablet-actions-menu .dropdown-item {
    white-space: normal;
  }
  .tablet-actions-menu .form-control[type="file"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .pretb-header-action-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  @media (max-width: 1399.98px) {
    .pre-tb-card .card-header {
      display: block !important;
    }
    .pre-tb-card .card-header > .d-flex {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px !important;
      align-items: center;
    }
    .pre-tb-card .card-header .form-control[type="file"] {
      min-width: 220px;
      width: 100%;
      max-width: 320px;
    }
  }
  @media (min-width: 768px) {
    .xray-upload-field {
      display: none !important;
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .tablet-hide-action {
      display: none !important;
    }
    .pre-tb-card .card-header > .d-flex {
      justify-content: flex-end;
      width: 100%;
      margin-left: auto;
    }
    .tablet-only-actions {
      display: inline-flex;
    }
    .tablet-row-break {
      display: block;
      height: 0;
    }
    .pre-tb-record-container {
      padding: 8px;
    }
    .pre-tb-card .card-body {
      padding: 14px;
    }
    .pre-tb-card .row.g-3 {
      --bs-gutter-x: 0.75rem;
      --bs-gutter-y: 0.75rem;
    }
    .pre-tb-card label,
    .pre-tb-card .form-label {
      font-size: 1rem;
    }
    .pre-tb-card .form-control,
    .pre-tb-card .form-select {
      font-size: 16px;
    }
    .yes-no-toggle .form-check {
      gap: 12px;
      padding-left: 2px;
    }
    .yes-no-toggle .form-check-input {
      width: 2rem;
      height: 2rem;
    }
    .yes-no-toggle .form-check-label {
      font-size: 1rem;
      line-height: 1.2;
      padding-left:40px;
    }
    .check-inline-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .check-inline-group > .form-label {
      margin-bottom: 0;
      white-space: nowrap;
    }
    .check-inline-group > .yes-no-toggle {
      min-height: auto;
      display: inline-flex;
      align-items: center;
      margin-bottom: 0;
    }
    .check-inline-group .yes-no-toggle .form-check {
      gap: 8px;
      padding-left: 0;
    }
    .check-inline-group .yes-no-toggle .form-check-label {
      padding-left: 0;
      font-size: 1rem;
    }
    .tablet-cxr-check {
      flex: 0 0 34%;
      max-width: 34%;
    }
    .tablet-cxr-date {
      flex: 0 0 33%;
      max-width: 33%;
    }
    .tablet-cxr-facility {
      flex: 0 0 33%;
      max-width: 33%;
    }
    .tablet-radio-request {
      flex: 0 0 40%;
      max-width: 40%;
    }
    .tablet-radio-date {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-radio-result {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-radio-other {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .tablet-sputum-check {
      flex: 0 0 40%;
      max-width: 40%;
    }
    .tablet-sputum-date {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-sputum-result {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-genexpert-check {
      flex: 0 0 40%;
      max-width: 40%;
    }
    .tablet-genexpert-date {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-genexpert-result {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-truenat-check {
      flex: 0 0 40%;
      max-width: 40%;
    }
    .tablet-truenat-date {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-truenat-result {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-hiv-check {
      flex: 0 0 40%;
      max-width: 40%;
    }
    .tablet-hiv-date {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-hiv-result {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-crp-check {
      flex: 0 0 40%;
      max-width: 40%;
    }
    .tablet-crp-date {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-crp-result {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-antibiotics-check {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-antibiotics-date {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .tablet-antibiotics-drug {
      flex: 0 0 45%;
      max-width: 45%;
    }
    .tablet-tb-treat-check {
      flex: 0 0 40%;
      max-width: 40%;
    }
    .tablet-tb-treat-date {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-tb-treat-regimen {
      flex: 0 0 30%;
      max-width: 30%;
    }
    .tablet-manage-other-full {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .tablet-manage-remark-full {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .tablet-vitals-item {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .tablet-entry-mode {
      flex: 0 0 34%;
      max-width: 34%;
    }
    .tablet-entry-screening-date {
      flex: 0 0 33%;
      max-width: 33%;
    }
    .tablet-entry-next-visit {
      flex: 0 0 33%;
      max-width: 33%;
    }
    .tablet-general-id-col {
      flex: 0 0 22%;
      max-width: 22%;
    }
    .tablet-patient-details-col {
      flex: 0 0 78%;
      max-width: 78%;
    }
    .tablet-general-id-col #cid {
      width: 100%;
      max-width: 14ch;
      min-width: 12ch;
      margin-left: auto;
      margin-right: auto;
    }
    .pre-tb-card .form-select {
      min-height: 46px;
      height: 46px;
      font-size: 16px;
      line-height: 1.2;
    }
    #patient_meta_summary {
      font-size: 1rem;
      line-height: 1.5;
    }
    .symptom-risk-row {
      display: grid;
      grid-template-columns: minmax(235px, 1.3fr) minmax(220px, 1fr);
      align-items: center;
      gap: 10px;
    }
    .symptom-cell {
      min-width: 0;
    }
    .risk-cell {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(150px, 1fr);
      align-items: center;
      gap: 8px;
    }
    .risk-cell > .form-label {
      min-width: 70px;
      margin-bottom: 0;
      white-space: nowrap;
      font-size: 1rem;
    }
    .symptom-entry {
      display: grid;
      grid-template-columns: 20px minmax(110px, auto) 64px;
      align-items: center;
      justify-content: start;
      gap: 5px;
      width: 100%;
    }
    .symptom-entry .form-check {
      display: contents;
    }
    .symptom-entry .form-check-input {
      margin: 0 !important;
      justify-self: start;
      align-self: center;
    }
    .symptom-entry .form-check-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 0;
      margin: 0;
      justify-self: start;
      align-self: center;
      font-size: 1rem;
    }
    .symptom-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .symptom-days {
      width: 64px;
      max-width: 64px;
      min-width: 64px;
      flex: 0 0 64px;
      margin-left: 3px;
      justify-self: start;
    }
    .risk-inline {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      gap: 6px;
      width: 100%;
      align-items: center;
    }
    .risk-inline .form-select {
      width: 100%;
      min-width: 0;
      flex: initial;
    }
    .tx-inline {
      width: 100%;
      min-width: 0;
    }
    .tx-inline .form-select {
      width: 100%;
      min-width: 0;
    }
    .col-12.text-end.pt-2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }
    .col-12.text-end.pt-2 .btn {
      margin-right: 0 !important;
    }
  }
  @media (max-width: 767.98px) {
    .pre-tb-card .card-header > .d-flex {
      align-items: stretch;
    }
    .pre-tb-card .card-header > .d-flex > form,
    .pre-tb-card .card-header > .d-flex > a {
      width: 100%;
    }
    .pre-tb-card .card-header > .d-flex > form .btn,
    .pre-tb-card .card-header > .d-flex > a.btn {
      width: 100%;
    }
    .pre-tb-card .card-header .form-control[type="file"] {
      max-width: 100%;
    }
  }
</style>
@endpush

@section('content')
@auth
@php
  $editingId = request()->query('edit');
@endphp
<div class="container-fluid pre-tb-record-container">
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="card pre-tb-card shadow-sm mx-auto">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h2 class="mb-0">TB assessment</h2>
            @if ($editingId)
            <div class="mt-1">
              <span class="badge bg-warning text-dark">Editing record #{{ $editingId }}</span>
              <a href="{{ route('pretb_record.create') }}" class="ms-2 text-decoration-underline text-light">Create new</a>
            </div>
            @endif
          </div>
          <div class="d-flex flex-nowrap align-items-center gap-2">
            <a href="{{ route('pretb_record.create') }}" class="btn btn-outline-light btn-sm pretb-header-action-btn">Clear</a>
            <a href="{{ route('pretb_record.manage') }}" class="btn btn-outline-light btn-sm pretb-header-action-btn">Manage</a>
            <form method="POST" action="{{ route('pretb_record.export') }}" class="d-flex align-items-center tablet-hide-action">
              @csrf
              <input type="hidden" name="format" value="codes">
              <button type="submit" class="btn btn-outline-light btn-sm pretb-header-action-btn">Export (codes)</button>
            </form>

            <form method="POST" action="{{ route('pretb_record.export') }}" class="d-flex align-items-center tablet-hide-action">
              @csrf
              <input type="hidden" name="format" value="labels">
              <button type="submit" class="btn btn-outline-light btn-sm pretb-header-action-btn">Export (labels)</button>
            </form>

            <form method="POST" action="{{ route('pretb_record.export') }}" class="d-flex align-items-center tablet-hide-action">
              @csrf
              <input type="hidden" name="format" value="analysis">
              <button type="submit" class="btn btn-outline-light btn-sm">Export (analysis)</button>
            </form>

            <form method="POST" action="{{ route('pretb_record.export') }}" class="d-flex align-items-center tablet-hide-action">
              @csrf
              <input type="hidden" name="format" value="counts">
              <button type="submit" class="btn btn-outline-light btn-sm">Export (counts)</button>
            </form>

            <div class="dropdown tablet-only-actions">
              <button class="btn btn-outline-light btn-sm px-2"
                type="button"
                id="pretbTabletActions"
                data-bs-toggle="dropdown"
                aria-expanded="false"
                aria-label="More actions">
                <i class="bi bi-three-dots-vertical"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-dark p-2 tablet-actions-menu" aria-labelledby="pretbTabletActions">
                <form method="POST" action="{{ route('pretb_record.export') }}" class="mb-2">
                  @csrf
                  <input type="hidden" name="format" value="codes">
                  <button type="submit" class="dropdown-item">Export (codes)</button>
                </form>

                <form method="POST" action="{{ route('pretb_record.export') }}" class="mb-2">
                  @csrf
                  <input type="hidden" name="format" value="labels">
                  <button type="submit" class="dropdown-item">Export (labels)</button>
                </form>

                <form method="POST" action="{{ route('pretb_record.export') }}" class="mb-2">
                  @csrf
                  <input type="hidden" name="format" value="analysis">
                  <button type="submit" class="dropdown-item">Export (analysis)</button>
                </form>

                <form method="POST" action="{{ route('pretb_record.export') }}" class="mb-2">
                  @csrf
                  <input type="hidden" name="format" value="counts">
                  <button type="submit" class="dropdown-item">Export (counts)</button>
                </form>

              </div>
            </div>

          </div>
        </div>
        <div class="card-body">
          @if (session('status'))
          <div class="alert alert-success" id="pretb-status-alert">
            {{ session('status') }}
          </div>
          @endif

          @if ($errors->any())
          <div class="alert alert-danger">
            <div class="fw-bold mb-2">Please fix the following:</div>
            <ul class="mb-0">
              @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
          @endif

          <form method="POST"
            action="{{ $editingId ? route('pretb_record.update', $editingId) : route('pretb_record.store') }}"
            id="pretb-record-form"
            enctype="multipart/form-data"
            @if ($editingId) onsubmit="return confirm('Update this Pre-TB record?');" @endif
            novalidate>
            @csrf
            @if ($editingId)
            @method('PUT')
            @endif
            <div class="row g-3">
              <div class="col-12 col-md-6 col-lg-2 tablet-general-id-col">
                <label for="cid" class="form-label">General ID:</label>
                <input type="text"
                  class="form-control"
                  id="cid"
                  name="cid"
                  inputmode="numeric"
                  pattern="[0-9]{10,12}"
                  required
                  value="{{ old('cid') }}">
              </div>
              <div class="col-12 col-md-6 col-lg-6 tablet-patient-details-col">
                <label class="form-label">Patient details</label>
                <span id="patient_meta_summary" class="d-block rounded border px-3 py-2">
                  Name: {{ old('name', '-') }} | Age: {{ old('age', '-') }} | Sex:
                  {{ old('sex') === '1' ? 'M' : (old('sex') === '2' ? 'F' : '-') }}
                </span>
                <input type="hidden" id="name" name="name" required value="{{ old('name') }}">
                <input type="hidden" id="age" name="age" required value="{{ old('age') }}">
                <input type="hidden" id="sex" name="sex" required value="{{ old('sex') }}">
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-vitals-item">
                <label for="height" class="form-label">Height:</label>
                <div class="input-group">
                  <input type="number"
                    class="form-control"
                    id="height"
                    name="height"
                    step="0.1"
                    min="30"
                    max="250"
                    value="{{ old('height') }}">
                  <span class="input-group-text unit-text">cm</span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-vitals-item">
                <label for="weight" class="form-label">Weight:</label>
                <div class="input-group">
                  <input type="number"
                    class="form-control"
                    id="weight"
                    name="weight"
                    step="0.1"
                    min="1"
                    max="300"
                    value="{{ old('weight') }}">
                  <span class="input-group-text unit-text">kg</span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-vitals-item">
                <label for="bmi" class="form-label">BMI:</label>
                <input type="text"
                  class="form-control"
                  id="bmi"
                  name="bmi"
                  readonly
                  value="{{ old('bmi') }}">
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-vitals-item">
                <label for="type_of_screening" class="form-label">Type of screening</label>
                <select class="form-select" id="type_of_screening" name="type_of_screening">
                  <option value="" {{ old('type_of_screening') === null ? 'selected' : '' }}></option>
                  <option value="New" {{ old('type_of_screening') === 'New' ? 'selected' : '' }}>New</option>
                  <option value="Follow-up" {{ old('type_of_screening') === 'Follow-up' ? 'selected' : '' }}>Follow-up</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-entry-mode">
                <label for="mode_of_entry" class="form-label">Mode of entry:</label>
                <select class="form-select" id="mode_of_entry" name="mode_of_entry" required>
                  <option value="" {{ old('mode_of_entry') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('mode_of_entry') === '1' ? 'selected' : '' }}>General</option>
                  <option value="2" {{ old('mode_of_entry') === '2' ? 'selected' : '' }}>PLHIV</option>
                  <option value="3" {{ old('mode_of_entry') === '3' ? 'selected' : '' }}>NCD</option>
                  <option value="4" {{ old('mode_of_entry') === '4' ? 'selected' : '' }}>Remote (ICMV)</option>
                  <option value="5" {{ old('mode_of_entry') === '5' ? 'selected' : '' }}>Remote (TB mobile)</option>
                  <option value="6" {{ old('mode_of_entry') === '6' ? 'selected' : '' }}>Contact tracing</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-entry-screening-date">
                <label for="dofscrrening" class="form-label">Date of screening:</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="dofscrrening"
                    name="dofscrrening"
                    data-date-format="true"
                    value="{{ old('dofscrrening') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-entry-next-visit">
                <label for="dofnv" class="form-label">Date of next visit:</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="dofnv"
                    name="dofnv"
                    data-date-format="true"
                    value="{{ old('dofnv') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
            </div>

            <hr class="my-4">
            <h5 class="text-light">Symptoms/Risks</h5>
            <div class="row g-3">
              <div class="col-12">
                <label for="main_presenting_complaint" class="form-label">Main presenting complaint</label>
                <textarea class="form-control"
                  id="main_presenting_complaint"
                  name="main_presenting_complaint"
                  rows="2">{{ old('main_presenting_complaint') }}</textarea>
              </div>
              <div class="col-12">
                <small class="text-muted d-block mb-2">Please fill in ALL symptoms &amp; risk factors</small>
                <div class="p-3 rounded symptom-dropdown">
                  <div class="symptom-risk-grid">
                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_fever"
                              name="symptoms[fever][present]"
                              value="1"
                              {{ old("symptoms.fever.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_fever">Fever</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_fever_days"
                            name="symptoms[fever][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.fever.days") }}"
                            {{ old("symptoms.fever.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="alcohol" class="form-label">Alcohol</label>
                        <select class="form-select" id="alcohol" name="alcohol">
                          <option value="" {{ old('alcohol') === null ? 'selected' : '' }}></option>
                          <option value="1" {{ old('alcohol') === '1' ? 'selected' : '' }}>Current</option>
                          <option value="2" {{ old('alcohol') === '2' ? 'selected' : '' }}>Ex</option>
                          <option value="3" {{ old('alcohol') === '3' ? 'selected' : '' }}>No</option>
                          <option value="4" {{ old('alcohol') === '4' ? 'selected' : '' }}>UK</option>
                        </select>
                      </div>
                    </div>

                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_cough"
                              name="symptoms[cough][present]"
                              value="1"
                              {{ old("symptoms.cough.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_cough">Cough</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_cough_days"
                            name="symptoms[cough][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.cough.days") }}"
                            {{ old("symptoms.cough.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="smoking" class="form-label">Smoking</label>
                        <select class="form-select" id="smoking" name="smoking">
                          <option value="" {{ old('smoking') === null ? 'selected' : '' }}></option>
                          <option value="1" {{ old('smoking') === '1' ? 'selected' : '' }}>Current</option>
                          <option value="2" {{ old('smoking') === '2' ? 'selected' : '' }}>Ex</option>
                          <option value="3" {{ old('smoking') === '3' ? 'selected' : '' }}>No</option>
                          <option value="4" {{ old('smoking') === '4' ? 'selected' : '' }}>UK</option>
                        </select>
                      </div>
                    </div>

                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_hemoptysis"
                              name="symptoms[hemoptysis][present]"
                              value="1"
                              {{ old("symptoms.hemoptysis.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_hemoptysis">Hemoptysis</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_hemoptysis_days"
                            name="symptoms[hemoptysis][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.hemoptysis.days") }}"
                            {{ old("symptoms.hemoptysis.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="malnutrition" class="form-label">Malnutrition</label>
                        <select class="form-select" id="malnutrition" name="malnutrition">
                          <option value="" {{ old('malnutrition') === null ? 'selected' : '' }}></option>
                          <option value="1" {{ old('malnutrition') === '1' ? 'selected' : '' }}>Yes</option>
                          <option value="2" {{ old('malnutrition') === '2' ? 'selected' : '' }}>No</option>
                        </select>
                      </div>
                    </div>

                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_weight_loss"
                              name="symptoms[weight_loss][present]"
                              value="1"
                              {{ old("symptoms.weight_loss.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_weight_loss">Weight loss</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_weight_loss_days"
                            name="symptoms[weight_loss][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.weight_loss.days") }}"
                            {{ old("symptoms.weight_loss.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="PWID" class="form-label">PWID</label>
                        <select class="form-select" id="PWID" name="PWID">
                          <option value="" {{ old('PWID') === null ? 'selected' : '' }}></option>
                          <option value="1" {{ old('PWID') === '1' ? 'selected' : '' }}>Current</option>
                          <option value="2" {{ old('PWID') === '2' ? 'selected' : '' }}>Ex</option>
                          <option value="3" {{ old('PWID') === '3' ? 'selected' : '' }}>No</option>
                          <option value="4" {{ old('PWID') === '4' ? 'selected' : '' }}>UK</option>
                        </select>
                      </div>
                    </div>

                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_appetite_loss"
                              name="symptoms[appetite_loss][present]"
                              value="1"
                              {{ old("symptoms.appetite_loss.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_appetite_loss">Loss of appetite</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_appetite_loss_days"
                            name="symptoms[appetite_loss][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.appetite_loss.days") }}"
                            {{ old("symptoms.appetite_loss.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="PWUD" class="form-label">PWUD</label>
                        <select class="form-select" id="PWUD" name="PWUD">
                          <option value="" {{ old('PWUD') === null ? 'selected' : '' }}></option>
                          <option value="1" {{ old('PWUD') === '1' ? 'selected' : '' }}>Current</option>
                          <option value="2" {{ old('PWUD') === '2' ? 'selected' : '' }}>Ex</option>
                          <option value="3" {{ old('PWUD') === '3' ? 'selected' : '' }}>No</option>
                          <option value="4" {{ old('PWUD') === '4' ? 'selected' : '' }}>UK</option>
                        </select>
                      </div>
                    </div>

                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_chest_pain"
                              name="symptoms[chest_pain][present]"
                              value="1"
                              {{ old("symptoms.chest_pain.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_chest_pain">Chest pain</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_chest_pain_days"
                            name="symptoms[chest_pain][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.chest_pain.days") }}"
                            {{ old("symptoms.chest_pain.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="DM" class="form-label">DM</label>
                        <div class="risk-inline">
                          <select class="form-select" id="DM" name="DM">
                            <option value="" {{ old('DM') === null ? 'selected' : '' }}></option>
                            <option value="1" {{ old('DM') === '1' ? 'selected' : '' }}>Yes</option>
                            <option value="2" {{ old('DM') === '2' ? 'selected' : '' }}>No</option>
                            <option value="3" {{ old('DM') === '3' ? 'selected' : '' }}>UK</option>
                          </select>
                          <div class="tx-inline" id="dm_tx_status_wrap">
                            <label for="dm_tx_status" class="form-label visually-hidden">Tx status</label>
                            <select class="form-select" id="dm_tx_status" name="dm_tx_status">
                              <option value="" {{ old('dm_tx_status') === null ? 'selected' : '' }}></option>
                              <option value="1" {{ old('dm_tx_status') === '1' ? 'selected' : '' }}>on Tx</option>
                              <option value="2" {{ old('dm_tx_status') === '2' ? 'selected' : '' }}>not Tx</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_night_sweats"
                              name="symptoms[night_sweats][present]"
                              value="1"
                              {{ old("symptoms.night_sweats.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_night_sweats">Night sweats</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_night_sweats_days"
                            name="symptoms[night_sweats][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.night_sweats.days") }}"
                            {{ old("symptoms.night_sweats.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="hiv_status" class="form-label">HIV</label>
                        <div class="risk-inline">
                          <select class="form-select" id="hiv_status" name="hiv_status">
                            <option value="" {{ old('hiv_status') === null ? 'selected' : '' }}></option>
                            <option value="1" {{ old('hiv_status') === '1' ? 'selected' : '' }}>Yes</option>
                            <option value="2" {{ old('hiv_status') === '2' ? 'selected' : '' }}>No</option>
                            <option value="3" {{ old('hiv_status') === '3' ? 'selected' : '' }}>UK</option>
                          </select>
                          <div class="tx-inline" id="hiv_tx_wrap">
                            <label for="hiv_tx" class="form-label visually-hidden">Tx status</label>
                            <select class="form-select" id="hiv_tx" name="hiv_tx">
                              <option value="" {{ old('hiv_tx') === null ? 'selected' : '' }}></option>
                              <option value="1" {{ old('hiv_tx') === '1' ? 'selected' : '' }}>on Tx</option>
                              <option value="2" {{ old('hiv_tx') === '2' ? 'selected' : '' }}>not Tx</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_neck_glands"
                              name="symptoms[neck_glands][present]"
                              value="1"
                              {{ old("symptoms.neck_glands.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_neck_glands">Neck glands</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_neck_glands_days"
                            name="symptoms[neck_glands][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.neck_glands.days") }}"
                            {{ old("symptoms.neck_glands.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="his_tb_self" class="form-label">Hist. of TB (self)</label>
                        <select class="form-select" id="his_tb_self" name="his_tb_self">
                          <option value="" {{ old('his_tb_self') === null ? 'selected' : '' }}></option>
                          <option value="1" {{ old('his_tb_self') === '1' ? 'selected' : '' }}>Yes</option>
                          <option value="2" {{ old('his_tb_self') === '2' ? 'selected' : '' }}>No</option>
                          <option value="3" {{ old('his_tb_self') === '3' ? 'selected' : '' }}>UK</option>
                        </select>
                      </div>
                    </div>

                    <div class="symptom-risk-row">
                      <div class="symptom-cell">
                        <div class="symptom-entry">
                          <div class="form-check mb-0">
                            <input class="form-check-input symptom-checkbox"
                              type="checkbox"
                              id="symptom_fatigue"
                              name="symptoms[fatigue][present]"
                              value="1"
                              {{ old("symptoms.fatigue.present") == '1' ? 'checked' : '' }}>
                            <label class="form-check-label symptom-label" for="symptom_fatigue">Fatigue</label>
                          </div>
                          <input type="number"
                            class="form-control form-control-sm symptom-days"
                            id="symptom_fatigue_days"
                            name="symptoms[fatigue][days]"
                            min="0"
                            max="365"
                            placeholder="days"
                            value="{{ old("symptoms.fatigue.days") }}"
                            {{ old("symptoms.fatigue.present") == '1' ? '' : 'disabled' }}>
                        </div>
                      </div>
                      <div class="risk-cell">
                        <label for="his_tb_family" class="form-label">Hist. of TB (family)</label>
                        <select class="form-select" id="his_tb_family" name="his_tb_family">
                          <option value="" {{ old('his_tb_family') === null ? 'selected' : '' }}></option>
                          <option value="1" {{ old('his_tb_family') === '1' ? 'selected' : '' }}>Yes</option>
                          <option value="2" {{ old('his_tb_family') === '2' ? 'selected' : '' }}>No</option>
                          <option value="3" {{ old('his_tb_family') === '3' ? 'selected' : '' }}>UK</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <hr class="my-4">
            <div class="row g-3">
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-cxr-check">
                <label for="chest_xray_check" class="form-label">Chest X-ray:</label>
                <input type="hidden" id="chest_xray" name="chest_xray" value="{{ old('chest_xray') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="chest_xray_check"
                      {{ old('chest_xray') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="chest_xray_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-cxr-date">
                <label for="chest_xray_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="chest_xray_date"
                    name="chest_xray_date"
                    data-date-format="true"
                    value="{{ old('chest_xray_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-cxr-facility">
                <label for="chest_xray_fac" class="form-label ">Facility</label>
                <select class="form-select" id="chest_xray_fac" name="chest_xray_fac">
                  <option value="" {{ old('chest_xray_fac') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('chest_xray_fac') === '1' ? 'selected' : '' }}>MAM Xray</option>
                  <option value="2" {{ old('chest_xray_fac') === '2' ? 'selected' : '' }}>Outside facility</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-4 xray-upload-field">
                <label for="xray_image" class="form-label">X-ray image (optional)</label>
                <input type="hidden" name="xray_image_path" value="{{ old('xray_image_path') }}">
                <input type="file"
                  class="form-control"
                  id="xray_image"
                  name="xray_image"
                  accept=".jpg,.jpeg,.png,.webp,image/*">
                @if (old('xray_image_path'))
                <small class="d-block mt-1">
                  Current image:
                  <a href="{{ asset('storage/' . old('xray_image_path')) }}" target="_blank" rel="noopener">view</a>
                </small>
                @endif
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="md_diagnosis" class="form-label">MD diagnosis:</label>
                <select class="form-select" id="md_diagnosis" name="md_diagnosis">
                  <option value="" {{ old('md_diagnosis') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('md_diagnosis') === '1' ? 'selected' : '' }}>Normal</option>
                  <option value="2" {{ old('md_diagnosis') === '2' ? 'selected' : '' }}>Active TB</option>
                  <option value="3" {{ old('md_diagnosis') === '3' ? 'selected' : '' }}>Other</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-4">
                <label for="md_diagnosis_oth" class="form-label">Other</label>
                <input type="text"
                  class="form-control"
                  id="md_diagnosis_oth"
                  name="md_diagnosis_oth"
                  value="{{ old('md_diagnosis_oth') }}">
              </div>
              <div class="col-12 col-md-4 col-lg-1">
                <label for="cad_score" class="form-label">CAD Score</label>
                <input type="number"
                  class="form-control"
                  id="cad_score"
                  name="cad_score"
                  step="0.01"
                  min="0"
                  value="{{ old('cad_score') }}">
              </div>
              <div class="col-12 col-md-8 col-lg-5">
                <label for="comment" class="form-label">Comment</label>
                <input type="text"
                  class="form-control"
                  id="comment"
                  name="comment"
                  value="{{ old('comment') }}">
              </div>
              <div class="tablet-row-break"></div>
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-radio-request">
                <label for="radio_request_check" class="form-label">Radiologist requested:</label>
                <input type="hidden" id="radio_request" name="radio_request" value="{{ old('radio_request') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="radio_request_check"
                      {{ old('radio_request') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="radio_request_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-radio-date">
                <label for="radio_request_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="radio_request_date"
                    name="radio_request_date"
                    data-date-format="true"
                    value="{{ old('radio_request_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-radio-result">
                <label for="radiologist_result" class="form-label">Result:</label>
                <select class="form-select" id="radiologist_result" name="radiologist_result">
                  <option value="" {{ old('radiologist_result') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('radiologist_result') === '1' ? 'selected' : '' }}>Normal</option>
                  <option value="2" {{ old('radiologist_result') === '2' ? 'selected' : '' }}>Active TB</option>
                  <option value="3" {{ old('radiologist_result') === '3' ? 'selected' : '' }}>Old TB (scar)</option>
                  <option value="4" {{ old('radiologist_result') === '4' ? 'selected' : '' }}>Other</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-6 tablet-radio-other">
                <label for="radiologist_result_oth" class="form-label">Other</label>
                <input type="text"
                  class="form-control"
                  id="radiologist_result_oth"
                  name="radiologist_result_oth"
                  value="{{ old('radiologist_result_oth') }}">
              </div>
              <div class="tablet-row-break"></div>
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-sputum-check">
                <label for="sputum_afb_check" class="form-label">Sputum AFB:</label>
                <input type="hidden" id="sputum_afb" name="sputum_afb" value="{{ old('sputum_afb') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="sputum_afb_check"
                      {{ old('sputum_afb') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="sputum_afb_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-sputum-date">
                <label for="sputum_afb_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="sputum_afb_date"
                    name="sputum_afb_date"
                    data-date-format="true"
                    value="{{ old('sputum_afb_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-sputum-result">
                <label for="sputum_afb_res" class="form-label">Result:</label>
                <select class="form-select" id="sputum_afb_res" name="sputum_afb_res">
                  <option value="" {{ old('sputum_afb_res') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('sputum_afb_res') === '1' ? 'selected' : '' }}>Pos</option>
                  <option value="2" {{ old('sputum_afb_res') === '2' ? 'selected' : '' }}>Neg</option>
                </select>
              </div>
              <div class="tablet-row-break"></div>
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-genexpert-check">
                <label for="genexpert_check" class="form-label">GeneXpert:</label>
                <input type="hidden" id="genexpert" name="genexpert" value="{{ old('genexpert') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="genexpert_check"
                      {{ old('genexpert') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="genexpert_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-genexpert-date">
                <label for="genexpert_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="genexpert_date"
                    name="genexpert_date"
                    data-date-format="true"
                    value="{{ old('genexpert_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-genexpert-result">
                <label for="genexpert_res" class="form-label">Result:</label>
                <select class="form-select" id="genexpert_res" name="genexpert_res">
                  <option value="" {{ old('genexpert_res') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('genexpert_res') === '1' ? 'selected' : '' }}>N</option>
                  <option value="2" {{ old('genexpert_res') === '2' ? 'selected' : '' }}>T</option>
                  <option value="3" {{ old('genexpert_res') === '3' ? 'selected' : '' }}>TT</option>
                  <option value="4" {{ old('genexpert_res') === '4' ? 'selected' : '' }}>RR</option>
                  <option value="5" {{ old('genexpert_res') === '5' ? 'selected' : '' }}>TI</option>
                  <option value="6" {{ old('genexpert_res') === '6' ? 'selected' : '' }}>Invalid</option>
                </select>
              </div>
              <div class="tablet-row-break"></div>
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-truenat-check">
                <label for="truenat_check" class="form-label">Truenat:</label>
                <input type="hidden" id="truenat" name="truenat" value="{{ old('truenat') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="truenat_check"
                      {{ old('truenat') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="truenat_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-truenat-date">
                <label for="truenat_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="truenat_date"
                    name="truenat_date"
                    data-date-format="true"
                    value="{{ old('truenat_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-truenat-result">
                <label for="truenat_res" class="form-label">Result:</label>
                <select class="form-select" id="truenat_res" name="truenat_res">
                  <option value="" {{ old('truenat_res') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('truenat_res') === '1' ? 'selected' : '' }}>N</option>
                  <option value="2" {{ old('truenat_res') === '2' ? 'selected' : '' }}>T</option>
                  <option value="3" {{ old('truenat_res') === '3' ? 'selected' : '' }}>RR</option>
                  <option value="4" {{ old('truenat_res') === '4' ? 'selected' : '' }}>TI</option>
                  <option value="5" {{ old('truenat_res') === '5' ? 'selected' : '' }}>Invalid</option>
                </select>
              </div>
              <div class="tablet-row-break"></div>
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-hiv-check">
                <label for="hiv_det_tested_check" class="form-label">HIV (determine):</label>
                <input type="hidden" id="hiv_det_tested" name="hiv_det" value="{{ old('hiv_det') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="hiv_det_tested_check"
                      {{ old('hiv_det') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="hiv_det_tested_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-hiv-date">
                <label for="hiv_det_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="hiv_det_date"
                    name="hiv_det_date"
                    data-date-format="true"
                    value="{{ old('hiv_det_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-hiv-result">
                <label for="hiv_det" class="form-label">Result:</label>
                <select class="form-select" id="hiv_det" name="hiv_det_res">
                  <option value="" {{ old('hiv_det_res') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('hiv_det_res') === '1' ? 'selected' : '' }}>R</option>
                  <option value="2" {{ old('hiv_det_res') === '2' ? 'selected' : '' }}>NR</option>
                </select>
              </div>
              <div class="tablet-row-break"></div>
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-crp-check">
                <label for="crp" class="form-label">CRP</label>
                <input type="hidden" id="crp" name="crp" value="{{ old('crp') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="crp_check"
                      {{ old('crp') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="crp_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-crp-date">
                <label for="crp_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="crp_date"
                    name="crp_date"
                    data-date-format="true"
                    value="{{ old('crp_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-crp-result">
                <label for="crp_result" class="form-label">Result:</label>
                <input type="number"
                  class="form-control"
                  id="crp_result"
                  name="crp_result"
                  step="0.01"
                  min="0"
                  value="{{ old('crp_result') }}">
              </div>
            </div>

            <hr class="my-4">
            <h5 class="text-light">Management</h5>
            <div class="row g-3">
              <div class="tablet-row-break"></div>
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-antibiotics-check">
                <label for="antibiotics" class="form-label">Antibiotics:</label>
                <input type="hidden" id="antibiotics" name="antibiotics" value="{{ old('antibiotics') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="antibiotics_check"
                      {{ old('antibiotics') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="antibiotics_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-antibiotics-date">
                <label for="antibiotic_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="antibiotic_date"
                    name="antibiotic_date"
                    data-date-format="true"
                    value="{{ old('antibiotic_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-8 col-lg-8 tablet-antibiotics-drug">
                <label for="drug" class="form-label">Drug:</label>
                <input type="text"
                  class="form-control"
                  id="drug"
                  name="drug"
                  value="{{ old('drug') }}">
              </div>
              <div class="w-100"></div>
              <div class="col-12 col-md-6 col-lg-2 check-inline-group tablet-tb-treat-check">
                <label for="tb_treat" class="form-label">TB treatment:</label>
                <input type="hidden" id="tb_treat" name="tb_treat" value="{{ old('tb_treat') === '1' ? '1' : '2' }}">
                <div class="yes-no-toggle">
                  <div class="form-check">
                    <input class="form-check-input"
                      type="checkbox"
                      id="tb_treat_check"
                      {{ old('tb_treat') === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="tb_treat_check">Yes</label>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-tb-treat-date">
                <label for="tb_treat_date" class="form-label">Date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="tb_treat_date"
                    name="tb_treat_date"
                    data-date-format="true"
                    value="{{ old('tb_treat_date') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 tablet-tb-treat-regimen">
                <label for="tb_treat_regimen" class="form-label">Regimen:</label>
                <select class="form-select" id="tb_treat_regimen" name="tb_treat_regimen">
                  <option value="" {{ old('tb_treat_regimen') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('tb_treat_regimen') === '1' ? 'selected' : '' }}>IR</option>
                  <option value="2" {{ old('tb_treat_regimen') === '2' ? 'selected' : '' }}>RR</option>
                  <option value="3" {{ old('tb_treat_regimen') === '3' ? 'selected' : '' }}>CR</option>
                  <option value="4" {{ old('tb_treat_regimen') === '4' ? 'selected' : '' }}>MDR</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-6 tablet-manage-other-full">
                <label for="manage_oth" class="form-label">Other</label>
                <input type="text"
                  class="form-control"
                  id="manage_oth"
                  name="manage_oth"
                  value="{{ old('manage_oth') }}">
              </div>
              <div class="w-100"></div>
              <div class="col-12 col-md-6 col-lg-6 tablet-manage-remark-full">
                <label for="remark" class="form-label">Remark</label>
                <input type="text"
                  class="form-control"
                  id="remark"
                  name="remark"
                  value="{{ old('remark') }}">
              </div>
              <div class="w-100"></div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="md" class="form-label">MD</label>
                <select class="form-select" id="md" name="md">
                  <option value="" {{ old('md') === null ? 'selected' : '' }}></option>
                  @foreach (($mdInitials ?? []) as $mdInitial)
                  <option value="{{ $mdInitial }}" {{ old('md') === (string) $mdInitial ? 'selected' : '' }}>{{ $mdInitial }}</option>
                  @endforeach
                  @if (old('md') !== null && old('md') !== '' && !in_array(old('md'), $mdInitials ?? [], true))
                  <option value="{{ old('md') }}" selected>{{ old('md') }}</option>
                  @endif
                </select>
              </div>
              <div class="w-100"></div>
              <div class="col-12 text-end pt-2">
                @if ($editingId)
                <button type="submit"
                  class="btn btn-outline-danger me-2"
                  form="pretb-delete-form"
                  formnovalidate
                  onclick="return confirm('Delete this Pre-TB record? This cannot be undone.');">Delete</button>
                @endif
                <button type="submit" class="btn btn-primary px-4">{{ $editingId ? 'Update record' : 'Save record' }}</button>
              </div>
            </div>
          </form>

          @if ($editingId)
          <form method="POST" action="{{ route('pretb_record.destroy', $editingId) }}" id="pretb-delete-form" class="d-none">
            @csrf
            @method('DELETE')
          </form>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>
@endauth
@endsection

@push('scripts')
<script>
  (() => {
    const heightInput = document.getElementById('height');
    const weightInput = document.getElementById('weight');
    const bmiInput = document.getElementById('bmi');
    const dateInputs = document.querySelectorAll('[data-date-format]');
    const cidInput = document.getElementById('cid');
    const nameInput = document.getElementById('name');
    const ageInput = document.getElementById('age');
    const sexInput = document.getElementById('sex');
    const patientMetaSummary = document.getElementById('patient_meta_summary');
    const statusAlert = document.getElementById('pretb-status-alert');

    if (statusAlert) {
      window.setTimeout(() => {
        statusAlert.style.transition = 'opacity 0.35s ease';
        statusAlert.style.opacity = '0';
        window.setTimeout(() => statusAlert.remove(), 360);
      }, 5000);
    }

    const applyTabletNumericKeyboard = () => {
      const isTouchDevice = window.matchMedia('(hover: none) and (pointer: coarse)').matches;
      const isTabletViewport = window.matchMedia('(min-width: 600px) and (max-width: 1366px)').matches;
      if (!(isTouchDevice && isTabletViewport)) return;

      document.querySelectorAll('input[type="number"]').forEach((input) => {
        const step = input.getAttribute('step');
        const decimalInput = !!step && step !== '1';
        input.setAttribute('inputmode', decimalInput ? 'decimal' : 'numeric');
        input.setAttribute('autocomplete', 'off');
        input.setAttribute('autocorrect', 'off');
        if (!decimalInput) {
          input.setAttribute('pattern', '[0-9]*');
        } else {
          input.removeAttribute('pattern');
        }
      });
    };

    applyTabletNumericKeyboard();
    window.addEventListener('resize', applyTabletNumericKeyboard);

    if (!heightInput || !weightInput || !bmiInput) return;

    const calculateBmi = () => {
      const rawH = parseFloat(heightInput.value);
      const w = parseFloat(weightInput.value);

      if (!rawH || !w || rawH <= 0) {
        bmiInput.value = '';
        return;
      }

      const hMeters = rawH > 3 ? (rawH / 100) : rawH;
      if (!hMeters || hMeters <= 0) {
        bmiInput.value = '';
        return;
      }
      bmiInput.value = (w / (hMeters * hMeters)).toFixed(2);
    };

    ['input', 'change'].forEach(evt => {
      heightInput.addEventListener(evt, calculateBmi);
      weightInput.addEventListener(evt, calculateBmi);
    });

    calculateBmi();

    const renderPatientMeta = () => {
      if (!patientMetaSummary) return;

      const name = nameInput?.value?.trim() || '-';
      const age = ageInput?.value?.trim() || '-';
      const sexRaw = sexInput?.value?.trim();
      const sex = sexRaw === '1' ? 'M' : (sexRaw === '2' ? 'F' : '-');

      patientMetaSummary.textContent = `Name: ${name} | Age: ${age} | Sex: ${sex}`;
    };

    renderPatientMeta();

    const symptomKeys = [
      'fever',
      'cough',
      'hemoptysis',
      'weight_loss',
      'appetite_loss',
      'chest_pain',
      'night_sweats',
      'neck_glands',
      'fatigue',
    ];

    const toggleSymptomInput = (key) => {
      const checkbox = document.getElementById(`symptom_${key}`);
      const daysInput = document.getElementById(`symptom_${key}_days`);
      if (!checkbox || !daysInput) return;
      daysInput.disabled = !checkbox.checked;
    };

    const updateSymptomSummary = () => {
      const summaryEl = document.getElementById('symptomSummary');
      if (!summaryEl) return;
      const parts = [];
      symptomKeys.forEach(key => {
        const checkbox = document.getElementById(`symptom_${key}`);
        const daysInput = document.getElementById(`symptom_${key}_days`);
        if (checkbox?.checked) {
          const label = checkbox.nextElementSibling?.textContent?.trim() || key;
          const days = daysInput?.value ? `${daysInput.value}d` : '';
          parts.push(days ? `${label} (${days})` : label);
        }
      });
      summaryEl.textContent = parts.length ? parts.join(', ') : 'No symptoms selected';
    };

    symptomKeys.forEach(key => {
      const checkbox = document.getElementById(`symptom_${key}`);
      if (!checkbox) return;
      toggleSymptomInput(key);
      checkbox.addEventListener('change', () => {
        toggleSymptomInput(key);
        updateSymptomSummary();
      });
      const daysInput = document.getElementById(`symptom_${key}_days`);
      if (daysInput) {
        daysInput.addEventListener('input', updateSymptomSummary);
      }
    });

    updateSymptomSummary();

    const setupTxToggle = (statusId, wrapId, txId) => {
      const statusSelect = document.getElementById(statusId);
      const wrap = document.getElementById(wrapId);
      const txSelect = document.getElementById(txId);
      if (!statusSelect || !wrap || !txSelect) return;

      const apply = () => {
        const show = statusSelect.value === '1';
        wrap.classList.toggle('is-hidden', !show);
        txSelect.disabled = !show;
      };

      statusSelect.addEventListener('change', apply);
      apply();
    };

    setupTxToggle('DM', 'dm_tx_status_wrap', 'dm_tx_status');
    setupTxToggle('hiv_status', 'hiv_tx_wrap', 'hiv_tx');

    const setupSymptomsRiskTabOrder = () => {
      const container = document.querySelector('.symptom-risk-grid');
      if (!container) return;

      const orderedIds = [
        'symptom_fever',
        'symptom_fever_days',
        'symptom_cough',
        'symptom_cough_days',
        'symptom_hemoptysis',
        'symptom_hemoptysis_days',
        'symptom_weight_loss',
        'symptom_weight_loss_days',
        'symptom_appetite_loss',
        'symptom_appetite_loss_days',
        'symptom_chest_pain',
        'symptom_chest_pain_days',
        'symptom_night_sweats',
        'symptom_night_sweats_days',
        'symptom_neck_glands',
        'symptom_neck_glands_days',
        'symptom_fatigue',
        'symptom_fatigue_days',
        'alcohol',
        'smoking',
        'malnutrition',
        'PWID',
        'PWUD',
        'DM',
        'dm_tx_status',
        'hiv_status',
        'hiv_tx',
        'his_tb_self',
        'his_tb_family',
      ];

      const getOrderedFocusable = () =>
        orderedIds
          .map((id) => document.getElementById(id))
          .filter((el) => el && !el.disabled && el.offsetParent !== null);

      container.addEventListener('keydown', (event) => {
        if (!['Tab', 'ArrowLeft', 'ArrowRight'].includes(event.key)) return;

        const focusable = getOrderedFocusable();
        const currentIndex = focusable.indexOf(event.target);
        if (currentIndex === -1) return;

        const movePrev = event.key === 'ArrowLeft' || (event.key === 'Tab' && event.shiftKey);
        const moveNext = event.key === 'ArrowRight' || (event.key === 'Tab' && !event.shiftKey);

        if (movePrev) {
          if (currentIndex === 0) return;
          event.preventDefault();
          focusable[currentIndex - 1].focus();
          return;
        }

        if (moveNext) {
          if (currentIndex === focusable.length - 1) return;
          event.preventDefault();
          focusable[currentIndex + 1].focus();
        }
      });
    };

    setupSymptomsRiskTabOrder();

    const setupYesNoToggle = (fieldId, dependentIds) => {
      const sourceField = document.getElementById(fieldId);
      const sourceCheck = document.getElementById(`${fieldId}_check`);
      if (!sourceField && !sourceCheck) return;

      const getValue = () => {
        if (sourceCheck) return sourceCheck.checked ? '1' : '2';
        return sourceField?.value || '';
      };

      const syncHiddenValue = () => {
        if (sourceField && sourceField.type === 'hidden' && sourceCheck) {
          sourceField.value = sourceCheck.checked ? '1' : '2';
        }
      };

      const apply = () => {
        syncHiddenValue();
        const disableDependents = getValue() === '2';
        dependentIds.forEach((id) => {
          const field = document.getElementById(id);
          if (!field) return;

          field.disabled = disableDependents;
          if (disableDependents) {
            if (field.tagName === 'SELECT') {
              field.value = '';
            } else if (field.type === 'checkbox' || field.type === 'radio') {
              field.checked = false;
            } else {
              field.value = '';
            }
          }
        });
      };

      if (sourceCheck) sourceCheck.addEventListener('change', apply);
      if (sourceField && sourceField.tagName === 'SELECT') {
        sourceField.addEventListener('change', apply);
      }
      apply();
    };

    setupYesNoToggle('chest_xray', ['chest_xray_date', 'chest_xray_fac', 'md_diagnosis', 'md_diagnosis_oth', 'cad_score']);
    setupYesNoToggle('radio_request', ['radio_request_date', 'radiologist_result', 'radiologist_result_oth']);
    setupYesNoToggle('sputum_afb', ['sputum_afb_date', 'sputum_afb_res']);
    setupYesNoToggle('genexpert', ['genexpert_date', 'genexpert_res']);
    setupYesNoToggle('truenat', ['truenat_date', 'truenat_res']);
    setupYesNoToggle('hiv_det_tested', ['hiv_det_date', 'hiv_det']);
    setupYesNoToggle('crp', ['crp_date', 'crp_result']);
    setupYesNoToggle('antibiotics', ['antibiotic_date', 'drug']);
    setupYesNoToggle('tb_treat', ['tb_treat_date', 'tb_treat_regimen']);

    const toDmy = (value) => {
      if (!value) return '';
      const digits = value.replace(/[^0-9]/g, '');
      if (digits.length === 8) {
        return `${digits.slice(0, 2)}-${digits.slice(2, 4)}-${digits.slice(4)}`;
      }
      if (/^\d{2}-\d{2}-\d{4}$/.test(value)) return value;
      return value;
    };

    dateInputs.forEach(input => {
      input.addEventListener('blur', () => {
        input.value = toDmy(input.value.trim());
      });
    });

    document.querySelectorAll('.date-trigger').forEach(trigger => {
      trigger.addEventListener('click', () => {
        const input = trigger.previousElementSibling;
        if (input) {
          input.focus();
          input.click();
        }
      });
    });

    const fillFromLookup = (data) => {
      if (nameInput && data.name !== null && data.name !== undefined) nameInput.value = data.name;
      if (ageInput && data.age !== null && data.age !== undefined) ageInput.value = data.age;
      if (sexInput && data.sex !== null && data.sex !== undefined) sexInput.value = data.sex;
      if (heightInput && data.height !== null && data.height !== undefined) {
        heightInput.value = data.height;
      }
      if (weightInput && data.weight !== null && data.weight !== undefined) {
        weightInput.value = data.weight;
      }
      renderPatientMeta();
      calculateBmi();
    };

    const lookupCid = async () => {
      const cid = cidInput?.value?.trim();
      if (!cid) return;
      try {
        const resp = await fetch("{{ route('pretb_record.lookup') }}", {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
          },
          body: JSON.stringify({ cid })
        });
        if (!resp.ok) return;
        const data = await resp.json();
        fillFromLookup(data);
      } catch (e) {
        console.error(e);
      }
    };

    if (cidInput) {
      cidInput.addEventListener('blur', lookupCid);
      cidInput.addEventListener('change', lookupCid);
    }
  })();
</script>
@endpush