@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/TbSection/preTbRecord.css') }}">
<style>
  .symptom-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
  }
  @media (min-width: 576px) {
    .symptom-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 768px) {
    .symptom-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (min-width: 992px) {
    .symptom-grid {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }

  .symptom-entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .symptom-entry .form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 0 !important;
    margin: 0;
    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: normal;
    padding-left: 0 !important;
    text-align: left;
    line-height: 1.15;
  }
  .symptom-days {
    width: 80px;
    min-width: 0;
    max-width: 80px;
    align-self: center;
    text-align: center;
  }
  @media (max-width: 575.98px) {
    .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: #0c2038;
    border: 1px solid #1f3658;
    color: #d6dde8;
    width: 100%;
  }
  .pre-tb-card .symptom-dropdown .form-check-label {
    color: #d6dde8;
  }
</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>
            <small class="text-muted">Capture a focused screening entry</small>
            @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.manage') }}" class="btn btn-outline-light btn-sm">Manage</a>
            <form method="POST" action="{{ route('pretb_record.export') }}" class="d-flex align-items-center">
              @csrf
              <input type="hidden" name="format" value="codes">
              <button type="submit" class="btn btn-outline-light btn-sm">Export (codes)</button>
            </form>

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

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

            <form method="POST"
              action="{{ route('pretb_record.import') }}"
              enctype="multipart/form-data"
              class="d-flex align-items-center gap-2">
              @csrf
              <input type="file" name="import_file" accept=".csv,.txt,.xlsx" class="form-control form-control-sm w-auto" required>
              <button type="submit" class="btn btn-outline-light btn-sm">Import</button>
            </form>

            <form method="POST" action="{{ route('pretb_record.import_local') }}" class="d-flex align-items-center">
              @csrf
              <button type="submit" class="btn btn-outline-light btn-sm">Import `storage/app/preTB.xlsx`</button>
            </form>

          </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">
            <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"
            @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">
                <label for="cid" class="form-label">General clinic ID (CID)</label>
                <input type="text"
                  class="form-control"
                  id="cid"
                  name="cid"
                  inputmode="numeric"
                  pattern="[0-9]{10,12}"
                  required
                  value="{{ old('cid') }}"
                  placeholder="7124000001">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="name" class="form-label">Patient name</label>
                <input type="text"
                  class="form-control"
                  id="name"
                  name="name"
                  required
                  value="{{ old('name') }}">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="age" class="form-label">Age in years</label>
                <input type="number"
                  class="form-control"
                  id="age"
                  name="age"
                  required
                  min="0"
                  max="111"
                  step="0.1"
                  value="{{ old('age') }}"
                  placeholder="e.g. 0.5 for 6 months">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="sex" class="form-label">Sex</label>
                <select class="form-select" id="sex" name="sex" required>
                  <option value="" disabled {{ old('sex') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('sex') === '1' ? 'selected' : '' }}>Male</option>
                  <option value="2" {{ old('sex') === '2' ? 'selected' : '' }}>Female</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <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">
                <label for="height" class="form-label">Height (cm)</label>
                <input type="number"
                  class="form-control"
                  id="height"
                  name="height"
                  step="0.1"
                  min="30"
                  max="250"
                  value="{{ old('height') }}"
                  placeholder="170">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="weight" class="form-label">Weight (kg)</label>
                <input type="number"
                  class="form-control"
                  id="weight"
                  name="weight"
                  step="0.1"
                  min="1"
                  max="300"
                  value="{{ old('weight') }}"
                  placeholder="63.5">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="bmi" class="form-label">BMI</label>
                <input type="text"
                  class="form-control"
                  id="bmi"
                  name="bmi"
                  readonly
                  value="{{ old('bmi') }}"
                  placeholder="auto-calculated">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <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"
                    placeholder="dd-mm-yyyy"
                    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">
                <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"
                    placeholder="dd-mm-yyyy"
                    data-date-format="true"
                    value="{{ old('dofnv') }}">
                  <span class="input-group-text dateimg">
                    <i class="bi bi-calendar3"></i>
                  </span>
                </div>
              </div>
              <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"
                  placeholder="Chief complaint or notes">{{ old('main_presenting_complaint') }}</textarea>
              </div>
            </div>

            <hr class="my-4">
            <h5 class="text-light">TB risk & diagnostics</h5>
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label">Symptoms (days)</label>
                @php
                  $symptoms = [
                    'fever' => 'Fever',
                    'cough' => 'Cough',
                    'hemoptysis' => 'Hemoptysis',
                    'weight_loss' => 'Weight loss',
                    'appetite_loss' => 'Loss of appetite',
                    'chest_pain' => 'Chest pain',
                    'night_sweats' => 'Night sweats',
                    'neck_glands' => 'Neck glands',
                    'fatigue' => 'Fatigue',
                  ];
                @endphp
                <div class="p-3 rounded symptom-dropdown">
                  <div class="symptom-grid">
                    @foreach ($symptoms as $key => $label)
                    <div>
                      <div class="symptom-entry">
                        <div class="form-check mb-0">
                          <input class="form-check-input symptom-checkbox"
                            type="checkbox"
                            id="symptom_{{ $key }}"
                            name="symptoms[{{ $key }}][present]"
                            value="1"
                            {{ old("symptoms.$key.present") == '1' ? 'checked' : '' }}>
                          <label class="form-check-label symptom-label" for="symptom_{{ $key }}">{{ $label }}</label>
                        </div>
                        <input type="number"
                          class="form-control form-control-sm symptom-days"
                          id="symptom_{{ $key }}_days"
                          name="symptoms[{{ $key }}][days]"
                          min="0"
                          max="365"
                          placeholder="Days"
                          value="{{ old("symptoms.$key.days") }}"
                          {{ old("symptoms.$key.present") == '1' ? '' : 'disabled' }}>
                      </div>
                    </div>
                    @endforeach
                  </div>
                  <small class="text-muted d-block mt-3">Select all that apply and capture duration in days.</small>
                </div>
                <div class="form-text" id="symptomSummary">No symptoms selected</div>
              </div>
              <div class="col-12 col-md-4 col-lg-2">
                <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' : '' }}>Unknown</option>
                </select>
              </div>
              <div class="col-12 col-md-4 col-lg-2">
                <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' : '' }}>Unknown</option>
                </select>
              </div>
              <div class="col-12 col-md-4 col-lg-2">
                <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 class="col-12 col-md-4 col-lg-2">
                <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' : '' }}>Unknown</option>
                </select>
              </div>
              <div class="col-12 col-md-4 col-lg-2">
                <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' : '' }}>Unknown</option>
                </select>
              </div>
              <div class="col-12 col-md-4 col-lg-2">
                <label for="DM" class="form-label">Diabetes Mellitus</label>
                <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' : '' }}>Unknown</option>
                </select>
              </div>
              <div class="col-12 col-md-4 col-lg-2">
                <label for="dm_tx_status" class="form-label">DM treatment 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 class="col-12 col-md-4 col-lg-2">
                <label for="hiv_status" class="form-label">HIV status</label>
                <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' : '' }}>Unknown</option>
                </select>
              </div>
              <div class="col-12 col-md-4 col-lg-2">
                <label for="hiv_tx" class="form-label">HIV treatment</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 class="col-12 col-md-4 col-lg-2">
                <label for="his_tb_self" class="form-label">History 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' : '' }}>Unknown</option>
                </select>
              </div>
              <div class="col-12 col-md-4 col-lg-2">
                <label for="his_tb_family" class="form-label">History 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' : '' }}>Unknown</option>
                </select>
              </div>
            </div>

            <hr class="my-4">
            <h5 class="text-light">Investigations</h5>
            <div class="row g-3">
              <div class="col-12 col-md-6 col-lg-2">
                <label for="chest_xray" class="form-label">Chest X-ray</label>
                <select class="form-select" id="chest_xray" name="chest_xray">
                  <option value="" {{ old('chest_xray') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('chest_xray') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('chest_xray') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="chest_xray_date" class="form-label">CXR date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="chest_xray_date"
                    name="chest_xray_date"
                    placeholder="dd-mm-yyyy"
                    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">
                <label for="chest_xray_fac" class="form-label">CXR 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-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">MD diagnosis (other)</label>
                <input type="text"
                  class="form-control"
                  id="md_diagnosis_oth"
                  name="md_diagnosis_oth"
                  value="{{ old('md_diagnosis_oth') }}"
                  placeholder="If Other, specify">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="cxr_result" class="form-label">CXR result</label>
                <select class="form-select" id="cxr_result" name="cxr_result">
                  <option value="" {{ old('cxr_result') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('cxr_result') === '1' ? 'selected' : '' }}>Suggestive of TB</option>
                  <option value="2" {{ old('cxr_result') === '2' ? 'selected' : '' }}>Not suggestive</option>
                  <option value="3" {{ old('cxr_result') === '3' ? 'selected' : '' }}>Other abnormality</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="sputum_exam" class="form-label">Sputum Exam</label>
                <select class="form-select" id="sputum_exam" name="sputum_exam">
                  <option value="" {{ old('sputum_exam') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('sputum_exam') === '1' ? 'selected' : '' }}>Done</option>
                  <option value="2" {{ old('sputum_exam') === '2' ? 'selected' : '' }}>Not done</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="sputum_result" class="form-label">Sputum result</label>
                <select class="form-select" id="sputum_result" name="sputum_result">
                  <option value="" {{ old('sputum_result') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('sputum_result') === '1' ? 'selected' : '' }}>Positive</option>
                  <option value="2" {{ old('sputum_result') === '2' ? 'selected' : '' }}>Negative</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="sputum_afb" class="form-label">Sputum AFB tested</label>
                <select class="form-select" id="sputum_afb" name="sputum_afb">
                  <option value="" {{ old('sputum_afb') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('sputum_afb') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('sputum_afb') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="sputum_afb_date" class="form-label">AFB date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="sputum_afb_date"
                    name="sputum_afb_date"
                    placeholder="dd-mm-yyyy"
                    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">
                <label for="sputum_afb_res" class="form-label">AFB result (microscopy)</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' : '' }}>Positive</option>
                  <option value="2" {{ old('sputum_afb_res') === '2' ? 'selected' : '' }}>Negative</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="genexpert" class="form-label">GeneXpert</label>
                <select class="form-select" id="genexpert" name="genexpert">
                  <option value="" {{ old('genexpert') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('genexpert') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('genexpert') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="genexpert_date" class="form-label">GeneXpert date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="genexpert_date"
                    name="genexpert_date"
                    placeholder="dd-mm-yyyy"
                    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">
                <label for="genexpert_res" class="form-label">GeneXpert 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="col-12 col-md-6 col-lg-2">
                <label for="truenat" class="form-label">Truenat</label>
                <select class="form-select" id="truenat" name="truenat">
                  <option value="" {{ old('truenat') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('truenat') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('truenat') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="truenat_date" class="form-label">Truenat date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="truenat_date"
                    name="truenat_date"
                    placeholder="dd-mm-yyyy"
                    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">
                <label for="truenat_res" class="form-label">Truenat 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="col-12 col-md-6 col-lg-2">
                <label for="hiv_det_tested" class="form-label">HIV DET tested</label>
                <select class="form-select" id="hiv_det_tested" name="hiv_det">
                  <option value="" {{ old('hiv_det') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('hiv_det') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('hiv_det') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="hiv_det_date" class="form-label">HIV DET date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="hiv_det_date"
                    name="hiv_det_date"
                    placeholder="dd-mm-yyyy"
                    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">
                <label for="hiv_det" class="form-label">HIV DET 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' : '' }}>Reactive</option>
                  <option value="2" {{ old('hiv_det_res') === '2' ? 'selected' : '' }}>Non-Reactive</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="crp" class="form-label">CRP</label>
                <select class="form-select" id="crp" name="crp">
                  <option value="" {{ old('crp') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('crp') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('crp') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="crp_date" class="form-label">CRP date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="crp_date"
                    name="crp_date"
                    placeholder="dd-mm-yyyy"
                    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">
                <label for="crp_result" class="form-label">CRP 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">Assessment & plan</h5>
            <div class="row g-3">
              <div class="col-12 col-md-6 col-lg-2">
                <label for="tb_treat_regimen" class="form-label">Treatment 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' : '' }}>Initial Regimen</option>
                  <option value="2" {{ old('tb_treat_regimen') === '2' ? 'selected' : '' }}>Retreatment Regimen</option>
                  <option value="3" {{ old('tb_treat_regimen') === '3' ? 'selected' : '' }}>Childhood Regimen</option>
                  <option value="4" {{ old('tb_treat_regimen') === '4' ? 'selected' : '' }}>MDR Regimen</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="manage_oth" class="form-label">Other management</label>
                <input type="text"
                  class="form-control"
                  id="manage_oth"
                  name="manage_oth"
                  value="{{ old('manage_oth') }}"
                  placeholder="If other plan, specify">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="tb_treat" class="form-label">Anti-TB treated</label>
                <select class="form-select" id="tb_treat" name="tb_treat">
                  <option value="" {{ old('tb_treat') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('tb_treat') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('tb_treat') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="tb_treat_date" class="form-label">TB treatment start date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="tb_treat_date"
                    name="tb_treat_date"
                    placeholder="dd-mm-yyyy"
                    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">
                <label for="antibiotics" class="form-label">Antibiotics</label>
                <select class="form-select" id="antibiotics" name="antibiotics">
                  <option value="" {{ old('antibiotics') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('antibiotics') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('antibiotics') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="antibiotic_date" class="form-label">Antibiotic start date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="antibiotic_date"
                    name="antibiotic_date"
                    placeholder="dd-mm-yyyy"
                    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-6 col-lg-2">
                <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-6 col-lg-6">
                <label for="drug" class="form-label">Drug given</label>
                <input type="text"
                  class="form-control"
                  id="drug"
                  name="drug"
                  value="{{ old('drug') }}">
              </div>
              <div class="col-12 col-lg-2">
                <label for="radio_request" class="form-label">Radiology request</label>
                <select class="form-select" id="radio_request" name="radio_request">
                  <option value="" {{ old('radio_request') === null ? 'selected' : '' }}></option>
                  <option value="1" {{ old('radio_request') === '1' ? 'selected' : '' }}>Yes</option>
                  <option value="2" {{ old('radio_request') === '2' ? 'selected' : '' }}>No</option>
                </select>
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="radio_request_date" class="form-label">Radiology request date</label>
                <div class="input-group">
                  <input type="text"
                    class="form-control Gdate"
                    id="radio_request_date"
                    name="radio_request_date"
                    placeholder="dd-mm-yyyy"
                    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">
                <label for="radiologist_result" class="form-label">Radiologist 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-10">
                <label for="radiologist_result_oth" class="form-label">Radiologist result (other)</label>
                <input type="text"
                  class="form-control"
                  id="radiologist_result_oth"
                  name="radiologist_result_oth"
                  value="{{ old('radiologist_result_oth') }}"
                  placeholder="If Other, specify">
              </div>
              <div class="col-12 col-md-6 col-lg-2">
                <label for="md" class="form-label">MD</label>
                <input type="text"
                  class="form-control"
                  id="md"
                  name="md"
                  value="{{ old('md') }}"
                  placeholder="MD's name">
              </div>
              <div class="col-12 col-lg-12">
                <label for="comment" class="form-label">Comment</label>
                <textarea class="form-control"
                  id="comment"
                  name="comment"
                  rows="2">{{ old('comment') }}</textarea>
              </div>
            </div>
            <div class="text-end pt-4">
              <a href="{{ route('pretb_record.create') }}" class="btn btn-outline-light me-2">Clear</a>
              @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>
          </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 sexSelect = document.getElementById('sex');

    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 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 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 (data.name && nameInput) nameInput.value = data.name;
      if (data.age !== null && data.age !== undefined && ageInput) ageInput.value = data.age;
      if (data.sex && sexSelect) {
        sexSelect.value = data.sex;
      }
      if (data.height && heightInput) {
        heightInput.value = data.height;
      }
      if (data.weight && weightInput) {
        weightInput.value = data.weight;
      }
      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