@extends('layouts.app')
@section('content')
@auth
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('js/Prep/prepFacility.js') }}"></script>
<div class="container containers">
  <ul class="nav nav-tabs toggle  ncd-list"
    id="hidden-title">
    <li class="nav-item">
      <a class="nav-link active toggle-link "
        data-toggle="tab"
        href="#FacilityScreen">PrepFacility</a>
    </li>
    <li class="nav-item">
      <a class="nav-link toggle-link "
        data-toggle="tab"
        href="#prepFacilityExport">PrepFacility Export</a>
    </li>
  </ul>
  <section class="tab-content page-color">
    <div class="tab-pane active mental-block active" id="FacilityScreen">
      <section class="" id="prepFacility">
        <div id="header_section" style="position:relative">
          <h2 class="header-text" id="prepFacility_head">Pre-Exposure Prophylaxis (PrEP) Facility Record</h2>
          <button type="button" class="btn btn-info prep_HisFollowBtn" value="facility page">Follow Up History</button>
          <button type="button" class="btn btn-info prep_toFollowBtn" id="toFollowbtn">To Follow Up</button>
        </div>
        <section id="patient_information">
          <h2 class="subTb-header">Client Information</h2>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">General ID</label>
              <input type="number" class="form-control" name="Pid" id="pid">
            </div>

            <div class="col-sm-2">
              <button class="btn btn-primary" id="prepSearchBtn" onclick="findRegisterData()" type="button" style="margin-top:26px; width:70%;height:50px">Search</button>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Intial Screen Date</label>
              <div class="date-holder">
                <input type="text" name="intialDate" id="facilityDate" class="form-control Gdate date-verify reception-dateformat" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label class="form-label">PrEP ID</label>
              <span class="form-control" id="prepId"></span>
            </div>
            <div class="col-sm-2">
              <label class="form-label">Clinic Code</label>
              <span class="form-control" id="clinic_code"></span>
            </div>
          </div>
        </section>

        <section id="faciltyInfo">
          <h2 class="subTb-header">Facility Information</h2>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">Facility Name</label>
              <select class="form-select" name="facilityName" id="facilityName">
                <option value="71">HTY-A ( 71 )</option>
                <option value="72">HTY-B ( 72 )</option>
                <option value="81">HTY-C2 ( 81 )</option>
                <option value="73">SPT ( 73 )</option>
                <option value="74">TL ( 74 )</option>
                <option value="75">Winka ( 75 )</option>
                <option value="76">TBZY ( 76 )</option>
                <option value="77">PTO-DT ( 77 )</option>
                <option value="78">PTO-MCB ( 78 )</option>
                <option value="80">Hpakant ( 80 )</option>
                <option value="82">Taze ( 82 )</option>
                <option value="83">HTY-C1 ( 83 )</option>
                <option value="84">SDG ( 84 )</option>
                <option value="90">90</option>
                <option value="94">94</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Navigator Code</label>
              <label style="display: none;">facilityDate</label>
              <select class="form-control" name="peerCode" id="peerCode">
                <option value=""></option>
                <option value="1">PE-1</option>
                <option value="2">PE-2</option>
                <option value="3">PE-3</option>
                <option value="4">PE-4</option>
                <option value="5">PE-5</option>
                <option value="6">PE-6</option>
                <option value="7">PE-7</option>
                <option value="8">PE-8</option>
                <option value="9">PE-9</option>
                <option value="10">PE-10</option>
                <option value="11">PE-11</option>
                <option value="12">PE-12</option>
                <option value="13">PE-13</option>
                <option value="14">PE-14</option>
                <option value="15">PE-15</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">Persion Completing Form</label>
              <label class="form-control" name="peerName" id="peerName"></label>
            </div>
            <div class="col-sm-5">
              <label for="" class="form-label">Regular partner HIV status</label>
              <select name="regPartnerHiv" id="regPartnerHiv" class="form-select">
                <option value=""></option>
                <option value="1">No regular partner</option>
                <option value="2">Unknown</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">Refer from</label>
              <select name="referFrom" id="referFrom" class="form-select">
                <option value=""></option>
                <option value="Others">Others</option>
                <option value="CBO">CBO</option>
                <option value="Other Page">Other Page</option>
                <option value="Peer Educator">Peer Educator</option>
                <option value="Prevent Ygn Page">Prevent Ygn Page</option>
                <option value="Quickres online booking link">Quickres online booking link</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">Other Page</label>
              <input type="text" class="form-control" name="otherPage" id="otherPage">
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">Other CBO</label>
              <input type="text" class="form-control" name="otherCBO" id="otherCBO">
            </div>
            <div class="col-sm-12">
              <label for="" class="form-label">Other</label>
              <input type="text" class="form-control" name="otherInfo" id="otherInfo">
            </div>

          </div>
        </section>

        <section id="pregnancyBreast">
          <h2 class="subTb-header">If Female : Pregnancy , Breastfeeding</h2>
          <div class="row">
            <div class="col-sm-6">
              <label for="" class="form-label">Client currently pregnant?</label>
              <select name="currentlPregnant" id="currentlPregnant" class="form-select">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
            </div>
            <div class="col-sm-6">
              <label for="" class="form-label">Client currently breastfeeding?</label>
              <select class="form-select" id="currentBreastFeed" name="currentBreastFeed">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
            </div>
          </div>
        </section>

        <section id="baseLabTest">
          <h2 class="subTb-header">Baseline Laboratory Tests</h2>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">HIV Last Test Date</label>
              <div class="date-holder">
                <input type="text" id="hivTestDate" name="hivTestDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>

            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">Date of Creatinine test</label>
              <div class="date-holder">
                <input type="text" id="creatinineTestDate" name="creatinineTestDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-7">
              <label for="" class="form-label">Serum creatinine result</label>
              <input type="number" class="form-control" id="creatinineResult" name="creatinineResult">
            </div>
            <div class="col-sm-6">
              <label for="" class="form-label">Calculated creatinine clearnance (CrCL)</label>
              <input type="number" class="form-control" id="calculateCreatinine" name="calculateCreatinine">
            </div>
            <div class="col-sm-6">
              <label for="" class="form-label">Anti HCV Ab test result</label>
              <select name="hcbAbResult" id="hcbAbResult" class="form-select">
                <option value=""></option>
                <option value="Positive">Positive</option>
                <option value="Negative">Negative</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">HCV Ab Test Date</label>
              <div class="date-holder">
                <input type="text" id="hcvTestDate" name="hcvTestDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Urine RE</label>
              <select name="urineReResult" id="urineReResult" class="form-select">
                <option value=""></option>
                <option value="1">Normal</option>
                <option value="2">High</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">If High, specify</label>
              <input type="text" name="highSpecify" id="highSpecify" class="form-control" disabled>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Urine Test Date</label>
              <div class="date-holder">
                <input type="text" id="urineTestDate" name="urineTestDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Weight(Kg)</label>
              <input type="number" name="weight" id="weight" class="form-control">
            </div>



          </div>
        </section>

        <section id="expoHIV">
          <h2 class="subTb-header">Hepatitis B Testing, Vaccination, and Treatment</h2>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">HbsAg Date</label>
              <div class="date-holder">
                <input type="text" id="hbsAgTestDate" name="hbsAgTestDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Test Result</label>
              <select name="hbasResult" id="hbasResult" class="form-select">
                <option value=""></option>
                <option value="Positive">Positive</option>
                <option value="Negative">Negative</option>
                <option value="Not Done">Not Done</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Clinic Treatment</label>
              <select name="clinicTreatment" id="clinicTreatment" class="form-select" disabled>
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
                <option value="3">Not Done</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">HBV vaccination provided Date</label>
              <select name="hbcVaccination" id="hbcVaccination" class="form-select" disabled>
                <option value=""></option>
                <option value="2">Done</option>
                <option value="3">Not Done</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Vaccianation 1</label>
              <div class="date-holder">
                <input type="text" id="vaccianation_1" name="vaccianation_1" class="form-control Gdate" placeholder="dd-mm-yyyy" disabled>
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Vaccianation 2</label>
              <div class="date-holder">
                <input type="text" id="vaccianation_2" name="vaccianation_2" class="form-control Gdate" placeholder="dd-mm-yyyy" disabled>
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Vaccianation 3</label>
              <div class="date-holder">
                <input type="text" id="vaccianation_3" name="vaccianation_3" class="form-control Gdate" placeholder="dd-mm-yyyy" disabled>
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
          </div>
        </section>

        <section id="serviceClient">
          <h2 class="subTb-header">Sexually Transmitted Infections (STI)</h2>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">STI screen date</label>
              <div class="date-holder">
                <input type="text" id="stiScreenDate" name="stiScreenDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">STI Result</label>
              <input type="text" name="stiResult" class="form-control" id="stiResult">
            </div>
            <div class="col-sm-8">
              <label for="" class="form-label">If STI syndromic management, syndrome treated </label>
              <input type="text" name="stiSyndrome" class="form-control" id="stiSyndrome">
            </div>
            <div class="col-sm-2">
              <label class="form-label">STI Treatment start</label>
              <select name="strTreatmentStart" id="strTreatmentStart" class="form-select">
                <option value=""></option>
                <option value="1">Start</option>
                <option value="2">Not Start</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">STI treatment start date</label>
              <div class="date-holder">
                <input type="text" id="stiTreatmentDate" name="stiTreatmentDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-5">
              <label for="" class="form-label">Type of Lab investigation</label>
              <select name="labInvest" id="labInvest" class="form-select">
                <option value=""></option>
                <option value="Syphilis RDT">Syphilis RDT</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Result</label>
              <select name="stiSyphilisResult" id="stiSyphilisResult" class="form-select">
                <option value=""></option>
                <option value="Reactive">Reactive</option>
                <option value="Non Reactive">Non Reactive</option>
                <option value="Not Done">Not Done</option>
                <option value="NA">NA</option>
              </select>
            </div>

          </div>
        </section>
        <section id="intialPrepTreat">
          <h2 class="subTb-header">Initiation of PrEP Treatment</h2>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP Initiation Type</label>
              <select name="prepInitType" id="prepInitType" class="form-select">
                <option value=""></option>
                <option value="1">New</option>
                <option value="2">Old</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Eligible Start/Stop</label>
              <select name="eligibleStartStop" id="eligibleStartStop" class="form-select">
                <option value=""></option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label class="form-label">Prep Taking Type</label>
              <select name="prepTakingType" id="prepTakingType" class="form-select">
                <option value=""></option>
                <option value="Daily">Daily</option>
                <option value="Start-Stop">Start-Stop</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Prep Start Date</label>
              <div class="date-holder">
                <input type="text" id="prepStartDate" name="prepStartDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP(ARVs)_Prescribed</label>
              <select name="prepARVS" id="prepARVS" class="form-select">
                <option value=""></option>
                <option value="1">TDF/FTC</option>
                <option value="2">TDF/3TC</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Next Visit Date</label>
              <div class="date-holder">
                <input type="text" id="nextVisitDate" name="nextVisitDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Prep Re-Start Date</label>
              <div class="date-holder">
                <input type="text" id="prepReStartDate" name="prepReStartDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP(ARVs)_Prescribed</label>
              <select name="prepARVS_2" id="prepARVS_2" class="form-select">
                <option value=""></option>
                <option value="1">TDF/FTC</option>
                <option value="2">TDF/3TC</option>
              </select>
            </div>
            <div class="col-sm-8">
              <label for="" class="form-label">Other (Specify)</label>
              <input type="text" name="prepOtherSpecify" id="prepOtherSpecify" class="form-control">
            </div>
          </div>
        </section>
        <section id="additionFacilityRecord">
          <h2 class="subTb-header">Additional information for Facility record</h2>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">Family Planning</label>
              <select name="familyPlan" id="familyPlan" class="form-select">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
            </div>
          </div>
          <div id="familyPlanMethod">
            <div class="row">
              <h2 class="subTb-header">Family Plan Method</h2>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" disabled id="oral" value="" name="oral">Oral
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" disabled id="injection" value="" name="injection">Injection
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" disabled id="implant" value="" name="implant">Implant
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" disabled id="iud" value="" name="iud">IUD
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" disabled id="other" value="" name="other">Other
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <label for="" class="form-label">If Other, Please Specify</label>
                <input type="text" name="familyPlanAddOther" id="familyPlanAddOther" class="form-control" disabled>
              </div>
              <div class="col-sm-3">
                <label for="" class="form-label">Last family planning date</label>
                <div class="date-holder">
                  <input type="text" id="lastPlanDate" name="lastPlanDate" class="form-control Gdate" placeholder="dd-mm-yyyy" disabled>
                  <img src="../img/calendar3.svg" class="dateimg" alt="date">
                </div>
              </div>
            </div>
          </div>
          <div id="typeFSW">
            <div class="row">
              <h2 class="subTb-header">Type OF FSW</h2>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="brothel" value="" name="brothel">Brothel
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="message" value="" name="message">Message
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="KTV" value="" name="KTV">KTV
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="bar" value="" name="bar">Bar
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="guestHouse" value="" name="guestHouse">Guest-House
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="musicBar" value="" name="musicBar">Music-Bar
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="beautySaloon" value="" name="beautySaloon">Beauty Saloon
                </label>
              </div>
              <div class="form-check-inline col-sm-2">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="freelance" value="" name="freelance">Freelance
                </label>
              </div>
              <div class="col-sm-2">
                <select name="freelanceFSWType" id="freelanceFSWType" class="form-select" disabled>
                  <option value=""></option>
                  <option value="Online">Online</option>
                  <option value="Street-base">Street-base</option>
                </select>
              </div>
            </div>
          </div>

        </section>
        <section id="prepScreenControl">
          <div class="row" style="justify-content: center;">
            <div class=" col-sm-2">
              <button class="btn btn-info" id="facilityBTn" value="saveFacility" onclick="saveUpdate(this)" style="height: 50px;" disabled>Save Facility</button>
            </div>
            <div class=" col-sm-2 deleteFacility">
              <button class="btn btn-danger facilityDelete" id="facilitydelete" value="" onclick="deleteData(this)">Delete Facility</button>
            </div>
          </div>
        </section>
      </section>

      <section id="prepFollow" style="display: none;">
        <div id="header_section" style="position:relative">
          <h2 class="header-text" id="prepFollow_head">Prep Follow Up Visit Form</h2>
          <button type="button" class="btn btn-info prep_HisFollowBtn" value="follow page">Follow Up History</button>
          <button type="button" class="btn btn-info prep_toFollowBtn" id="tofacilitybtn">To Facility</button>
        </div>
        <div class="row">
          <div class="col-sm-2">
            <button class="btn btn-warning" id="clearSave">Clear Save</button>
          </div>
        </div>

        <section id="prepFollowVisit">
          <div class="subTb-header ">
            <h3>Follow Up Visit Form</h3>
          </div>

          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">Visit Date</label>
              <div class="date-holder">
                <input type="text" id="visitDate" name="visitDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">FollowUp Visit Date</label>
              <div class="date-holder">
                <input type="text" id="followVisitDate" name="followVisitDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP Active</label>
              <select name="prepActive" id="prepActive" class="form-select">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>

            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Followup Month</label>
              <select name="followMonth" id="followMonth" class="form-select">
                <option value="M0">M0</option>
                <option value="M1">M1</option>
                <option value="M3">M3</option>
                <option value="M6">M6</option>
                <option value="M9">M9</option>
                <option value="M12">M12</option>
                <option value="M15">M15</option>
                <option value="M18">M18</option>
                <option value="M21">M21</option>
                <option value="M24">M24</option>
                <option value="M27">M27</option>
                <option value="M30">M30</option>
                <option value="M33">M33</option>
                <option value="M36">M36</option>
                <option value="M39">M39</option>
                <option value="M42">M42</option>
                <option value="M45">M45</option>
                <option value="M48">M48</option>
                <option value="M51">M51</option>
                <option value="M54">M54</option>
                <option value="M57">M57</option>
                <option value="M60">M60</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Weight</label>
              <input type="number" name="followWeight" id="followWeight" class="form-control">
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">HIV Screen Result</label>
              <select name="hivScreenResult" id="hivScreenResult" class="form-select">
                <option value=""></option>
                <option value="Reactive">Reactive</option>
                <option value="Non Reactive">Non Reactive</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Comfirmation Result</label>
              <select name="confirmResult" id="confirmResult" class="form-select">
                <option value=""></option>
                <option value="Reactive">Reactive</option>
                <option value="Non Reactive">Non Reactive</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Confirmation Date</label>
              <div class="date-holder">
                <input type="text" id="confirmDate" name="confirmDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Fuchia ID</label>
              <span class="form-control" id="followFuchia"></span>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">ART Start Date</label>
              <div class="date-holder">
                <input type="text" id="artDate" name="artDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">HbsAg Result</label>
              <select name="hbsAgResult" id="hbsAgResult" class="form-select">
                <option value=""></option>
                <option value="Positive">Positive</option>
                <option value="Negative">Negative</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">HCVAb Result</label>
              <select name="hcvabResult" id="hcvabResult" class="form-select">
                <option value=""></option>
                <option value="Positive">Positive</option>
                <option value="Negative">Negative</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">Urine RE</label>
              <select name="followUrineRe" id="followUrineRe" class="form-select">
                <option value=""></option>
                <option value="1">Normal</option>
                <option value="2">Height</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">CrCl Calculation</label>
              <input type="number" class="form-control" name="followCrcl" id="followCrcl" step="any">
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">Signs and symptoms of acute HIV infection?</label>
              <select name="hivSymptoms" id="hivSymptoms" class="form-select">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">Screening for Substantial Risk for HIV infection</label>
              <select name="hivRisk" id="hivRisk" class="form-select">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">Risk reduction counseling and commodities provided</label>
              <select name="equiment" id="equiment" class="form-select">
                <option value=""></option>
                <option value="condoms">condoms</option>
                <option value="lubricants">lubricants</option>
                <option value="Needles & /or syrings">Needles & /or syrings</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">STI Screening,</label>
              <select name="followSTIScreen" id="followSTIScreen" class="form-select">
                <option value=""></option>
                <option value="1">Detected</option>
                <option value="2">Not Detected</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label class="form-label">Syphillis RDT Test Result </label>
              <select class="form-control" name="followRDTResult" id="followRDTResult">
                <option value=""></option>
                <option value="Positive">Positive</option>
                <option value="Negative">Negative</option>
                <option value="Not Done">Not Done</option>
                <option value="NA">NA</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">STI Treatment </label>
              <select name="followSTITreatment" id="followSTITreatment" class="form-select">
                <option value=""></option>
                <option value="1">Treated</option>
                <option value="2">Not Treated</option>
              </select>
            </div>
            <div class="col-sm-6">
              <label for="" class="form-label">Adherence Self-Reported- Did you take the medication as prescribed?</label>
              <select name="takeMedication" id="takeMedication" class="form-select">
                <option value=""></option>
                <option value="1">&#62;95% adherence</option>
                <option value="2">80 to 95%</option>
                <option value="3">&#60;80% < /option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP Side effects 1</label>
              <select name="followSideEffect_1" id="followSideEffect_1" class="form-select">
                <option value=""></option>
                <option value="1">Abdominal pain</option>
                <option value="2">Skin rash</option>
                <option value="3">Nausea</option>
                <option value="4">Vomiting</option>
                <option value="5">Vomiting</option>
                <option value="6">Diarrhea</option>
                <option value="7">Fatigue</option>
                <option value="8">Headache</option>
                <option value="9">Enlarged lymph nodes</option>
                <option value="10">Fever</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP Side effects 2</label>
              <select name="followSideEffect_2" id="followSideEffect_2" class="form-select">
                <option value=""></option>
                <option value="1">Abdominal pain</option>
                <option value="2">Skin rash</option>
                <option value="3">Nausea</option>
                <option value="4">Vomiting</option>
                <option value="5">Vomiting</option>
                <option value="6">Diarrhea</option>
                <option value="7">Fatigue</option>
                <option value="8">Headache</option>
                <option value="9">Enlarged lymph nodes</option>
                <option value="10">Fever</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP Side effects 3</label>
              <select name="followSideEffect_3" id="followSideEffect_3" class="form-select">
                <option value=""></option>
                <option value="1">Abdominal pain</option>
                <option value="2">Skin rash</option>
                <option value="3">Nausea</option>
                <option value="4">Vomiting</option>
                <option value="5">Vomiting</option>
                <option value="6">Diarrhea</option>
                <option value="7">Fatigue</option>
                <option value="8">Headache</option>
                <option value="9">Enlarged lymph nodes</option>
                <option value="10">Fever</option>
              </select>
            </div>
            <div class="col-sm-12">
              <label for="" class="form-label">Prep Side Effect Other</label>
              <input type="text" name="prepSideEffectOther" id="prepSideEffectOther" class="form-control">
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP Discontinuation</label>
              <select name="followDiscon" id="followDiscon" class="form-select">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">Discontinuation reason</label>
              <select type="text" class="form-select" name="followDisReason" id="followDisReason" disabled>
                <option value=""></option>
                <option value="1">Tested HIV +</option>
                <option value="2">No longer at substantial risk</option>
                <option value="3">Side effects</option>
                <option value="4">Client preference</option>
                <option value="5">Other (specify)</option>
              </select>
            </div>

            <div class="col-sm-6">
              <label for="" class="form-label">Client preferences for discontinuation reason</label>
              <select name="followClientDisReason" id="followClientDisReason" class="form-select" disabled>
                <option value=""></option>
                <option value="1">Moved out of Yangon</option>
                <option value="2">Does not want to take daily medicine</option>
                <option value="3">Does not want to come to clinic for follow up visit</option>
                <option value="4">No reason</option>
                <option value="5">Preference by partner</option>
              </select>
            </div>
            <div class="col-sm-12">
              <label for="" class="form-label">PrEP Discontinuation (other)</label>
              <input type="text" name="followDisOther" id="followDisOther" class="form-control" disabled>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP Prescription</label>
              <select name="followPrescription" id="followPrescription" class="form-select">
                <option value=""></option>
                <option value="1">TDF/FTC</option>
                <option value="2">TDF/3TC</option>
                <option value="3">Other (specify)</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="form-label">PrEP prescription Other</label>
              <input type="text" name="followPrescriptOther" id="followPrescriptOther" class="form-control" disabled>
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label"> Next Scheduled PrEP Date</label>
              <div class="date-holder">
                <input type="text" id="nextPrepDate" name="nextPrepDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">Outcome</label>
              <select name="followOutcome" id="followOutcome" class="form-select">
                <option value=""></option>
                <option value="1">Transferred out (TO)</option>
                <option value="2">Died</option>
                <option value="3">Lost to follow up(LTFU)</option>
              </select>
            </div>
            <div class="col-sm-12">
              <label for="" class="form-label">Additional Note</label>
              <input type="text" class="form-control" name="followAddition" id="followAddition">
            </div>
          </div>
        </section>
        <section id="followRecordForm">
          <div class="subTb-header ">
            <h3>Follow Up Record Form</h3>
          </div>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">HIV Screening Test</label>
              <select name="followHivType" id="followHivType" class="form-select">
                <option value=""></option>
                <option value="1">Facility</option>
                <option value="2">CBS</option>
                <option value="3">Self Testing</option>
                <option value="4">Other Lab</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">PrEP Delivery</label>
              <select name="followDelivery" id="followDelivery" class="form-select">
                <option value=""></option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">Family Planning Method</label>
              <select name="followFpMethod" id="followFpMethod" class="form-select">
                <option value=""></option>
                <option value="Oral">Oral</option>
                <option value="Injection">Injection</option>
                <option value="Implant">Implant</option>
                <option value="IUD">IUD</option>
                <option value="Other">Other</option>
                <option value="None">None</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">If Injection</label>
              <div class="date-holder">
                <input type="text" id="followInjectionDate" name="followInjectionDate" class="form-control Gdate" placeholder="dd-mm-yyyy" disabled>
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">If Other</label>
              <input type="text" name="fpOther" id="fpOther" class="form-control" disabled>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">UCG result</label>
              <select name="ucgResult" id="ucgResult" class="form-select">
                <option value=""></option>
                <option value="Positive">Positive</option>
                <option value="Negative">Negative</option>
                <option value="Not Done">Not Done</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="" class="form-label">STI Symptoms</label>
              <select name="followStiSymptonm" id="followStiSymptonm" class="form-select">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
            </div>
            <div class="col-sm-8">
              <label class="form-label">STI Symptoms Specify</label>
              <input type="text" name="followStiSpecify" id="followStiSpecify" class="form-control">
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">STI Management </label>
              <select name="followStiMangement" id="followStiMangement" class="form-select">
                <option value=""></option>
                <option value="1">Done</option>
                <option value="2">Not Done</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">Rapid plasma reagin (RPR)</label>
              <select name="followRPR" id="followRPR" class="form-select">
                <option value=""></option>
                <option value="Positive">Positive</option>
                <option value="Negative">Negative</option>
                <option value="Not Done">Not Done</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">Dilution</label>
              <input type="text" name="followDilution" id="followDilution" class="form-control">
            </div>
            <div class="col-sm-3">
              <label for="" class="form-label">Condom Usage</label>
              <select name="followCondom" id="followCondom" class="form-select">
                <option value=""></option>
                <option value="1">Never</option>
                <option value="2">Sometime</option>
                <option value="3">Alway</option>
              </select>
            </div>
          </div>

        </section>
        <div class="row" style="justify-content: center;">
          <div class="col-sm-3">
            <button class="btn btn-info follow-save-update" id="followsaveUpdate" value="saveFollow" style="height: 50px;" onclick="saveUpdateFollow(this)">Save Follow Up</button>
          </div>
        </div>
      </section>

      <section id="prepHistory" style="display: none;">
        <div class="header_section" style="position:relative">
          <h2 class="header-text" id="prepHistory_head">Prep Follow Up History</h2>
        </div>
        <table class="table" id="prepHistory_table">
          <thead>
            <tr>
              <th>No.</th>
              <th>Genereal ID</th>
              <th>Visit Date</th>
              <th>Follow Up V-Date</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <div class="row" style="justify-content: center;">
          <div class="col-sm-3">
            <button class="btn btn-info prep-goBack" id="toMainPage">To Prep Facility</button>
          </div>
        </div>
      </section>
    </div>
    <div class="tab-pane mental-block fade" id="prepFacilityExport">
      <form action="{{ route('prepExport') }}" method="post">
        @csrf
        <section class="" id="prepScreen_export">
          <h2 class="header-text">Prep Facility And Follow Up Export Data</h2>
        </section>
        <section>
          <div class="row">
            <div class="col-sm-2">
              <label for="" class="form-label">Export Type</label>
              <select name="ExportType" id="" class="form-select">
                <option value="Facility">Facility</option>
                <option value="FollowUp">Follow Up</option>
              </select>
            </div>
            <div class="col-sm-2">
              <label for="FromDate" class="form-label">From Date</label>
              <div class="date-holder">
                <input type="text" id="FromDate" name="FromDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
              @error('FromDate')
              <div class="alert alert-danger">Please input date</div>
              @enderror

            </div>
            <div class="col-sm-2">
              <label for="ToDate" class="form-label">To Date</label>
              <div class="date-holder">
                <input type="text" id="ToDate" name="ToDate" class="form-control Gdate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
              @error('ToDate')
              <div class="alert alert-danger">Please input date</div>
              @enderror
            </div>
            <div class="col-sm-2">
              <button class="btn btn-info" style="margin-top: 35px;">Export</button>
            </div>
          </div>

        </section>

      </form>
    </div>
  </section>

</div>
@endauth
@endsection
<script>
  let facilityFill = [
    //targetID,Column Name
    'facilityDate', 'Inital_date',
    'facilityName', 'Facility_name',
    'peerCode', 'Peer_code',
    'regPartnerHiv', 'Regular_partner_hiv',
    'referFrom', 'Refer_from',
    'otherPage', 'Other_page',
    'otherCBO', 'Other_cbo',
    'otherInfo', 'Other',
    'currentlPregnant', 'Current_pregnant',
    'currentBreastFeed', 'Current_breastfeeding',
    'hivTestDate', 'HIV_last_test_date',
    'creatinineTestDate', 'Creatinine_test_date',
    'creatinineResult', 'Serum_creatinine_result',
    'calculateCreatinine', 'Creatinine_clearnance',
    'hcbAbResult', 'HCV_AB_result',
    'hcvTestDate', 'HCV_AB_date',
    'urineReResult', 'Urine_re_result',
    'highSpecify', 'High_sepcify',
    'urineTestDate', 'Urine_test_date',
    'weight', 'Body_weight',
    'hbsAgTestDate', 'HbsAg_date',
    'hbasResult', 'HbsAg_result',
    'clinicTreatment', 'Client_treatment',
    'hbcVaccination', 'HBV_vaccination',
    'vaccianation_1', 'Vaccination_1',
    'vaccianation_2', 'Vaccination_2',
    'vaccianation_3', 'Vaccination_3',
    'stiScreenDate', 'STI_screen_date',
    'stiResult', 'STI_result',
    'stiSyndrome', 'STI_symdome_tratement',
    'strTreatmentStart', 'STI_treatment_start',
    'stiTreatmentDate', 'STI_treatment_date',
    'labInvest', 'Lab_investigation',
    'stiSyphilisResult', 'Lab_invest_result',
    'prepInitType', 'Prep_initiation_type',
    'eligibleStartStop', 'Eligible_start_stop',
    'prepTakingType', 'Prep_taking_type',
    'prepStartDate', 'Prep_start_date',
    'prepARVS', 'Prep_ARvs',
    'nextVisitDate', 'Next_visit_date',
    'prepReStartDate', 'Prep_Restart_date',
    'prepARVS_2', 'Prep_ReARvs',
    'prepOtherSpecify', 'Prep_other',
    'familyPlan', 'Family_plan',
    'oral', 'Oral',
    'injection', 'Injection',
    'implant', 'Implant',
    'iud', 'IUD',
    'other', 'Other_family_check',
    'familyPlanAddOther', 'Other_family_text',
    'lastPlanDate', 'Last_family_date',
    'brothel', 'Brothel',
    'message', 'Message',
    'KTV', 'KTV',
    'bar', 'Bar',
    'guestHouse', 'Guest_house',
    'musicBar', 'Music-Bar',
    'beautySaloon', 'Beauty_saloon',
    'freelance', 'Freelance',
    'freelanceFSWType', 'Freelance_fsw_type',
  ]

  let updateFacilityID; //for Facility Updae id
  let followHisData; //for Facility History Data
  let updateFollowID;

  let followFill = [
    //Target ID,Column Name
    'visitDate', 'visit_date',
    'followVisitDate', 'followUp_date',
    'prepActive', 'prep_active',
    'followMonth', 'follow_month',
    'followWeight', 'weight',
    'hivScreenResult', 'hiv_screen_result',
    'confirmResult', 'hiv_confirm_result',
    'confirmDate', 'confirm_date',
    'artDate', 'art_start_date',
    'hbsAgResult', 'hbsAg_result',
    'hcvabResult', 'hcvAb_result',
    'followUrineRe', 'urine_re',
    'followCrcl', 'crcl_calculate',
    'hivSymptoms', 'sign_sympt_hivInfection',
    'hivRisk', 'hivInfection_risk',
    'equiment', 'risk_provide',
    'followSTIScreen', 'sti_screen',
    'followRDTResult', 'rdt_result',
    'followSTITreatment', 'sti_treatment',
    'takeMedication', 'adh_self_report',
    'followSideEffect_1', 'prep_side_effect_1',
    'followSideEffect_2', 'prep_side_effect_2',
    'followSideEffect_3', 'prep_side_effect_3',
    'prepSideEffectOther', 'prep_side_effect_other',
    'followDiscon', 'prep_discon',
    'followDisReason', 'discon_reason',
    'followClientDisReason', 'client_discon_reason',
    'followDisOther', 'prep_discon_other',
    'followPrescription', 'prep_prescription',
    'followPrescriptOther', 'prep_prescription_other',
    'nextPrepDate', 'next_prep_date',
    'followOutcome', 'outcome',
    'followAddition', 'add_note',
    'followHivType', 'hiv_screen_type',
    'followDelivery', 'prep_delivery',
    'followFpMethod', 'fb_menthod',
    'followInjectionDate', 'fb_injection_date',
    'fpOther', 'fb_other',
    'ucgResult', 'ucg_result',
    'followStiSymptonm', 'sti_sympt',
    'followStiSpecify', 'sti_sympt_specify',
    'followStiMangement', 'sti_management',
    'followRPR', 'rapid_plasma',
    'followDilution', 'dilution',
    'followCondom', 'condom_usage',
  ]


  function prepDiscontinuation() {
    let discon = $("#followDiscon").val();
    if (discon == "1") {
      $("#followDisReason,#followClientDisReason,#followDisOther").prop("disabled", false)
    } else {
      $("#followDisReason,#followClientDisReason,#followDisOther").prop("disabled", true).val("");
    }
  }

  function prepPerscript() {
    let prepPer = $("#followPrescription").val();
    if (prepPer == "3") {
      $("#followPrescriptOther").prop('disabled', false);
    } else {
      $("#followPrescriptOther").prop('disabled', true).val("");
    }
  }

  function familyPlanMethod() {
    let fpMethod = $("#followFpMethod").val();
    if (fpMethod == "Injection") {
      $("#followInjectionDate").prop("disabled", false);
      $("#fpOther").prop('disabled', true).val("");
    } else if (fpMethod == "Other") {
      $("#fpOther").prop('disabled', false);
      $("#followInjectionDate").prop("disabled", true).val("");
    } else {
      $("#followInjectionDate,#fpOther").prop('disabled', true).val("");
    }
  }


  function familyPlan() {
    let familyPlan = $("#familyPlan").val();
    familyPlan === '1' ?
      $("#familyPlanMethod input[type='checkbox'], #lastPlanDate").prop('disabled', false) :
      ($("#lastPlanDate, #familyPlanAddOther").prop('disabled', true).val(''),
        $("#familyPlanMethod input[type='checkbox']").prop('checked', false).prop('disabled', true));
  }

  function familyOther() {
    $("#other").prop("checked") ?
      $("#familyPlanAddOther").prop("disabled", false) :
      $("#familyPlanAddOther").prop("disabled", true).val('');
  }

  function fswFreelance() {
    $("#freelance").prop("checked") ?
      $("#freelanceFSWType").prop("disabled", false) :
      $("#freelanceFSWType").prop("disabled", true).val('');
  }

  function hepBTest() {
    let hepResult = $("#hbasResult").val();
    if (hepResult == "Positive") {
      $("#clinicTreatment").prop('disabled', false);
      $("#hbcVaccination,#vaccianation_1,#vaccianation_2,#vaccianation_3").prop('disabled', true).val();
    } else if (hepResult == "Negative") {
      $("#hbcVaccination,#vaccianation_1,#vaccianation_2,#vaccianation_3").prop('disabled', false)
      $("#clinicTreatment").prop('disabled', true).val("")
    } else {
      $("#clinicTreatment").prop('disabled', true).val("");
      $("#hbcVaccination,#vaccianation_1,#vaccianation_2,#vaccianation_3").prop('disabled', true).val();
    }
  }

  function urineTest() {
    let urineResult = $("#urineReResult").val();
    if (urineResult == "2") {
      $("#highSpecify").prop("disabled", false)
    } else {
      $("#highSpecify").prop("disabled", true).val("");
    }
  }
  //

  function findRegisterData() {
    let prepFind = {
      Pid: $("#pid").val(),
    };
    console.log(prepFind);

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      }
    });
    $.ajax({
      type: 'POST',
      url: "{{ route('searchRegister') }}",
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(prepFind),
      success: function(response) {
        console.log(response);
        if (response != false) {
          $("#prepFacility select,#prepFacility input").val("");
          $("#prepFacility span").text("");
          $("#pid").val(response["Pid"]);
          $('#prepId').text(response['PrEPCode']);
          $("#clinic_code").text(response['Clinic Code']);
          $('#facilityName').val(mam_clinicID);
          $("#facilityBTn").val("saveFacility").text("Save Facility").prop('disabled', false);
          $("#prepFollow input,#prepFollow select").val("");
          $("#followsaveUpdate").val("saveFollow").text("Save Follow Up");
          if (response['Gender'] == 'Male') {
            $("#pregnancyBreast select,#familyPlan,#typeFSW input,#typeFSW select").val('').prop('disabled', true);
            $('#typeFSW input').prop('checked', false);
            familyPlanMethod()
          } else {
            $("#pregnancyBreast select,#familyPlan,#typeFSW input,#typeFSW select").prop('disabled', false);
          }

          if (response['prep_facility'] != null) {
            $("#facilityBTn").val("updateFacility").text("Update Facility").prop('disabled', false);
            $("#toFollowbtn,.deleteFacility").show();
            for (let key = 0; key < facilityFill.length; key += 2) {
              if ($('#' + facilityFill[key]).is("input[type='checkbox']")) {
                if (response['prep_facility'][facilityFill[key + 1]] == '1') {
                  $('#' + facilityFill[key]).prop('checked', true);
                } else {
                  $('#' + facilityFill[key]).prop('checked', false);
                }
              } else {
                $('#' + facilityFill[key]).val(response['prep_facility'][facilityFill[key + 1]])
              }
            }
            updateFacilityID = response['prep_facility']['id'];
            DateTo_text();
            familyPlan();
            familyOther();
            fswFreelance();
            urineTest();
            hepBTest();
          } else {
            $("#prep_toFollowBtn").hide();
          }
          if (response['prep_follow'].length > 0) {
            $("#prepHistory_table tbody").empty();
            followHisList(response['prep_follow'])
            $(".prep_HisFollowBtn").show();
            followHisData = response['prep_follow'];
          } else {
            $(".prep_HisFollowBtn").hide();
            $("#prepHistory_table tbody").empty();
          }
        } else {
          alert("This patient don't register in clinic");
        }
      }
    })
  }

  function followHisList(datalist) {
    $("#prepHistory_table tbody").empty();
    datalist.forEach((follow, index) => {
      let historyData = $("<tr>").append($("<td>").text(index + 1)).append($("<td>").text(follow['Pid']))
        .append($("<td>").text(follow['visit_date'])).append($("<td>").text(follow['followUp_date']))
        .append($("<td>").append($("<button>").attr({
          'class': 'btn btn-info prepHisBtn',
          'onclick': 'fillFollowHistory(this)',
          'id': index,
          'style': 'margin-right:5%'
        }).text("Show Data")).append($("<button>").attr({
          'class': 'btn btn-danger followDelete',
          'onclick': 'deleteData(this)',
          'id': index
        }).text('Delete')));
      $("#prepHistory_table tbody").append(historyData);
    });
  }

  function saveUpdate(button) {
    let prepData = {};

    let saveUpdate = $(button).val();
    if (saveUpdate == "updateFacility") {
      prepData["id"] = updateFacilityID;
      prepData["notice"] = "UpdateFacility"
    } else {
      prepData["notice"] = "SaveFacility"
    }
    $("#prepFacility input,#prepFacility select").each(function(index) {
      if ($(this).is('input[type="checkbox"]')) {
        if ($(this).is(':checked')) {
          prepData[$(this).attr('name')] = 1;
        } else {
          prepData[$(this).attr('name')] = 0;
        }
      } else if ($(this).hasClass('Gdate')) {
        prepData[$(this).attr('name')] = formatDate($(this).val())
      } else {
        prepData[$(this).attr('name')] = $(this).val()
      }
    })
    console.log(prepData);
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      }
    });
    $.ajax({
      type: 'POST',
      url: "{{ route('facilitySaveUpdate') }}",

      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(prepData),
      // beforeSend: function() {
      //   $(button).prop("disabled", true);
      //   timeoutHandle = setTimeout(oneClick, 3000);
      // },
      success: function(response) {
        console.log(response);
        // $(button).prop("disabled", false);
        // clearTimeout(timeoutHandle);
        if (prepData["notice"] == "UpdateFacility") {
          if (response) {
            alert("Success Update")
          } else {
            alert("Fail Update")
          }
        } else if (prepData["notice"] == "SaveFacility") {
          if (response) {
            alert("Success Save")
          } else {
            alert("Fail Save")
          }
        }
        //location.reload(true);

      }
    });
  }

  function saveUpdateFollow(button) {
    let prepData = {};
    prepData["Pid"] = $("#pid").val();
    let saveUpdate = $(button).val();
    if (saveUpdate == "updateFollow") {
      prepData["id"] = followHisData[updateFollowID];
      prepData["notice"] = "UpdateFollow"
    } else if (saveUpdate == "saveFollow") {
      prepData["notice"] = "SaveFollow"
    }
    $("#prepFollow input,#prepFollow select").each(function(index) {
      if ($(this).hasClass('Gdate')) {
        prepData[$(this).attr('name')] = formatDate($(this).val())
      } else {
        prepData[$(this).attr('name')] = $(this).val()
      }
    })
    console.log(prepData);
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      }
    });
    $.ajax({
      type: 'POST',
      url: "{{ route('followSaveUpdate') }}",

      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(prepData),
      // beforeSend: function() {
      //   $(button).prop("disabled", true);
      //   timeoutHandle = setTimeout(oneClick, 3000);
      // },
      success: function(response) {
        console.log(response);
        // $(button).prop("disabled", false);
        // clearTimeout(timeoutHandle);
        if (response['process'] == 'save') {
          if (response['status'] == 200) {
            followHisList(response['data']);
            followHisData = response['data']
            alert(response['message']);
            $("#prepFollow input,#prepFollow select").val("");
            prepDiscontinuation();
            familyPlanMethod();
            $("html, body").animate({
              scrollTop: 0
            }, "slow");
            $(".prep_HisFollowBtn").show();
            $("#visitDate").focus();
          } else {
            alert(response['message']);
          }
        } else if (response['process'] == 'update') {
          if (response['status'] == 200) {
            followHisList(response['data']);
            followHisData = response['data']
            alert(response['message']);
            $("#prepFollow input,#prepFollow select").val("");
            prepDiscontinuation();
            familyPlanMethod();
            $("#followsaveUpdate").val("saveFollow").text("Save Follow Up");
            $("html, body").animate({
              scrollTop: 0
            }, "slow");
            $("#visitDate").focus();
          } else {
            alert(response['message']);
          }
        }
        // location.reload(true);

      }
    })
  }

  function fillFollowHistory(target) {
    updateFollowID = $(target).attr('id')
    let fillData = followHisData[updateFollowID];
    $("#prepFollow input,#prepFollow select").val("");
    for (let key = 0; key < followFill.length; key += 2) {
      $('#' + followFill[key]).val(fillData[followFill[key + 1]])
    }
    $("#followsaveUpdate").val("updateFollow").text("UpdateFollow");
    DateTo_text();
    prepDiscontinuation();
    familyPlanMethod();
    $("#prepFacility").hide();
    $("#prepFollow").show();
    $("#prepHistory").hide();
    $("#tofacilitybtn").show();

  }

  function deleteData(target) {
    let method, Pid, id;
    if ($(target).hasClass('followDelete')) {
      method = "prepFollowDelete";
      Pid = followHisData[$(target).attr('id')]['Pid'];
      id = followHisData[$(target).attr('id')]['id'];
    } else if ($(target).hasClass('facilityDelete')) {
      method = "prepFacilityDelete"
      id = updateFacilityID
      Pid = $("#pid").val();
    }
    console.log(id, Pid)
    if (confirm('Are you Sure Delete This ID' + Pid)) {
      fetch(`/delete-prep`, {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            Pid: Pid,
            id: id,
            method: method
          })
        })
        .then(response => response.json()) // Ensure JSON response is handled
        .then(data => {
          console.log(data);
          if (data['success']) {
            if (data['target'] == 'Facility') {
              alert(data['message'])
              location.reload(true);
            } else if (data['target'] == 'Follow') {
              alert(data['message'])
              followHisList(data['remainList']);
            }
          } else {
            alert(data['message'])
          }
        })
        .catch(error => {
          console.error("Error:", error);
        });
    }

  }
</script>