@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/Cervical_cancer/cervical_cancer1.js') }}?v={{ @filemtime(public_path('js/Cervical_cancer/cervical_cancer1.js')) }}"></script>
<div class="container containers cervical-screening-page">
    <input type="hidden" id="passed_id" value="{{ $id ?? '' }}">
    <input type="hidden" id="passed_date" value="{{ $date ?? '' }}">
    <ul class="nav nav-tabs toggle">
      <li class="nav-item">
        <a class="nav-link active toggle-link" data-toggle="pill" href="#cancer_screening">Cervical Cancer Screening</a>
      </li>  
      <li class="nav-item">
        <a class="nav-link toggle-link" data-toggle="pill" href="#cancer_Export">Export Data</a>
      </li>      
    </ul>
    <div class="tab-content page-color">
      <div class="tab-pane active" id="cancer_screening">
        <div id="screening_Info">
          <div class="header-text cercival-header" id="cercival_header">
            <div class="cervical-header-title-row row">
              <div class="col-12">
                <h2>Cervical Cancer Screening and Treatment (test-triage-treat)</h2>
              </div>
            </div>
            <div class="cervical-header-action-row row align-items-center">
              <div class="col-auto cervical-header-action-item">
                <div class="cercival_IDchangeBlock">
                    <input type="checkbox" id="cercival_idChange">
                    <label class="from-label">ID Change ?</label> 
                </div>
              </div>
            </div>
          </div>
          <div class="row align-items-center cc-top-tools-row">
            <div class="col-auto cc-top-tool-left">
                <button class="btn btn-warning" id="shift-sti-top" data-sti-base-url="{{ url('/sti_view') }}" onclick="return goToStiFromCc();" type="button">Go to STI Form</button>
            </div>
            <div class="col cc-top-tool-center">
              <div class="cc-patient-summary" id="cc_patient_summary">
                <span class="cc-summary-item"><strong>Name:</strong> <span id="cc_patient_name_value">-</span></span>
                <span class="cc-summary-item"><strong>Age:</strong> <span id="cc_patient_age_value">-</span></span>
                <span class="cc-summary-item"><strong>Sex:</strong> <span id="cc_patient_sex_value">-</span></span>
              </div>
              <span id="cervical_age" class="d-none"></span>
            </div>
            <div class="col-auto cc-top-tool-right">
                <button class="btn btn-info cervical-historyBtn" id="cervical_history" type="button">History</button>
                <label class="from-label cercivalHis-alert" id="cercival_historyAlert"></label>
                <button class="btn refresh-follow cervical_refresh" id="CC_refresh">Refresh</button>
            </div>
          </div>
          <div class="row cercival-personalInfo cercival-search-row">
            <div class="col-sm-3 cercival-pid-col">
              <label class="form-label">General ID</label>
              <input type="number" id="cercival_pid" class="form-control" placeholder="General ID">
            </div>
            <div class="col-sm-3 cercival-fid-col">
              <label class="form-label">Fuchia ID</label>
              <input type="text" id="cercival_fid" class="form-control" placeholder="Fuchia ID">
            </div>
            <div class="col-sm-2 cercival-searchbtn-col">
              <label class="form-label">&nbsp;</label>
              <button class="btn btn-primary w-100" id="cercival_ptFind" onclick="findcercival_patient()" type="button">Search</button>
            </div>
            <div class="col-sm-2 cercival-vdate-col">
              <label class="form-label">Visit Date</label>
              <div class="date-holder">
                <input type="text" class="form-control Gdate date-verify" id="cercival_VDate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            
          </div>
          <div class="row cercival-personalInfo cercival-hiv-row">
            <div class="col-sm-2">
              <label class="form-label">HIV Status</label>
              <select class="form-select"  id="crecival_hivStatus">
                <option value=""></option>
                <option value="Reactive">Reactive</option>
                <option value="Non Reactive">Non Reactive</option>
                <option value="Unknown">Unknown</option>
                <option value="Inconclusive">Inconclusive</option>
              </select>
            </div>
             <div class="col-sm-1">
              <label class="form-label">Parity</label>
              <input type="number"class="form-control cercivla-Prevpreg" id="num_prev_preg">
            </div>
            <div class="col-sm-2">
              <label class="form-label">UCG</label>
              <select class="form-select" id="UCG_test_res">
                <option value=""></option>
                <option value="Positive">Positive</option>
                <option value="Negative">Negative</option>
              </select>
            </div>
             <div class="col-sm-2">
              <label class="form-label">UCG test date</label>
              <div class="date-holder">
                <input type="text" class="form-control Gdate" id="UCG_test_date" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
          </div>
          <div class="row cercival-personalInfo cercival-hpv-row">
            <div class="col-sm-2">
              <label class="form-label">HPV</label><!--NEW VAR-->
              <select class="form-select" id="hpv_test">
                <option value=""></option>
                <option value="Done">Done</option>
                <option value="Not Done">Not done</option>
              </select>
            </div>
             <div class="col-sm-4">
              <label class="form-label">Reason if not done</label><!--NEW VAR-->
              <input class="form-control" id="hpv_notdone" >
            </div>
            <div class="col-sm-2">
              <label class="form-label">HPV test result</label><!--NEW VAR-->
              <select class="form-select" id="hpv_test_res">
                <option value=""></option>
                <option value="Negative">Negative</option>
                <option value="High risk type (16/18)">High risk type (16/18)</option>
                 <option value="Other genotype">Other genotype</option>
                  <option value="Invalid">Invalid</option>
              </select>
            </div>
          </div>

          <div class="row cercival-breat">
              <h3> <div class="cc_underline"> Breast Cancer Screening and Examinaiton </div></h3>
              <div class="col-sm-5">
                <label class="form-label breast-label">1. Have you had any cancer like breast cancer , ovarian cancer,cervical cancer?</label>
              </div>
              <div class="col-sm-1">
                <select class="form-select" id="crecival_selfhave" data-cc-hide-yes-label="1">
                  <option value=""></option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
                </select>
              </div>
              <div class="col-sm-5">
                <label class="form-label breast-label">2. Any family history of cancer like breast cancer,ovarian cancer,cervical cancer?</label>
              </div>
              <div class="col-sm-1">
                <select class="form-select" id="crecival_familyHis_have" data-cc-hide-yes-label="1">
                  <option value=""></option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
                </select>
              </div>
              <div class="col-sm-5 breast-exam-label-col">
                <label class="form-label breast-label">3. Breast examination done or not</label>
              </div>
              <div class="col-sm-1 breast-exam-input-col">
                <select class="form-select" id="crecival_breastExam">
                  <option value=""></option>
                  <option value="Done">Done</option>
                  <option value="Not Done">Not Done</option>
                </select>
              </div>
              <div class="col-sm-5">
                <label class="form-label breast-label">4. If done,any abnormal findings on breast</label>
              </div>
              <div class="col-sm-1">
                <select class="form-select" id="crecival_abnormal_breast" data-cc-hide-yes-label="1" disabled>
                  <option value=""></option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
                  
                </select>
              </div>
              <div class="col-sm-12">
                <label class="form-label text-start">Abnormal findings</label>
                <input class="form-control" id="breast_remark" disabled>
              </div>
          </div>

          <div class="row cercival-viascreening">
            <div class="col-sm-2">
              <label class="form-label">VIA Screening</label>
              <select class="form-select" id="via_test">
                <option value=""></option>
                <option value="Done">Done</option>
                <option value="Not Done">Not Done</option>
              </select>
            </div>
            <div class="col-sm-3">
              <label class="form-label">If done,</label>
              <select class="form-select" id="via_screening_his">
                <option value=""></option>
                <option value="first time VIA">first time VIA</option>
                <option value="1 year follow up after thermal ablation">1 year follow up after thermal ablation</option>
                <option value="follow up after___year">follow up after _____ year</option>
                
              </select>
            </div>
            <div class="col-sm-3 numFollowYr" style="display:none;"><!-- new vir-->
                    <label class="form-label" for="numoffollowupYear" > Number of follow up year.</label>
                    <input type="number" class="form-control" id="numoffollowupYear" name="numoffollowupYear"  > 
            </div>
            <div class="checkbox-container noviaScreeningReasons" style="display:none;">
              <div class="row no-margin w-100">
                <div class="col-sm-12">
                  <label class="form-label">Not done or postponed due to</label>
                </div>
              </div>
              <div class="row no-margin w-100">
                <div class="checkbox-group col-sm-3">
                  <input type="checkbox" id="very_ill" name="very_ill" class="custom-checkbox">
                  <label for="very_ill" class="custom-checkbox-label">Very ill</label>
                </div>
                <div class="checkbox-group col-sm-3">
                  <input type="checkbox" id="Pregnancy" name="Pregnancy" class="custom-checkbox">
                  <label for="Pregnancy" class="custom-checkbox-label">Pregnancy</label>
                </div>
                <div class="checkbox-group col-sm-3">
                  <input type="checkbox" id="less12wkDeli" name="less12wkDeli" class="custom-checkbox">
                  <label for="less12wkDeli" class="custom-checkbox-label">Less than 12 weeks after delivery</label>
                </div>
                <div class="checkbox-group col-sm-3">
                  <input type="checkbox" id="cli_evi_gen_inf" name="cli_evi_gen_inf" class="custom-checkbox">
                  <label for="cli_evi_gen_inf" class="custom-checkbox-label">Clinical evidence of genital infection</label>
                </div>
              </div>
              <div class="row no-margin w-100">
                <div class="checkbox-group col-sm-3">
                  <input type="checkbox" id="pri_cur_his_cc" name="pri_cur_his_cc" class="custom-checkbox">
                  <label for="pri_cur_his_cc" class="custom-checkbox-label">Prior or currently history of cervical surgery</label>
                </div>
                <div class="checkbox-group col-sm-3">
                  <input type="checkbox" id="ab_growth" name="ab_growth" class="custom-checkbox">
                  <label for="ab_growth" class="custom-checkbox-label">Abnormal growth</label>
                </div>
                <div class="checkbox-group col-sm-3">
                  <input type="checkbox" id="bl_ontouch" name="bl_ontouch" class="custom-checkbox">
                  <label for="bl_ontouch" class="custom-checkbox-label">Bleed on touch</label>
                </div>
                <div class="checkbox-group col-sm-3">
                  <input type="checkbox" id="other_postpone_reason" name="other_postpone_reason" class="custom-checkbox">
                  <label for="other_postpone_reason" class="custom-checkbox-label">Others</label>
                </div>
              </div>
              <div class="row no-margin w-100 noViaotherReason" style="display:none;">
                <div class="col-sm-6">
                  <label for="via_postponed_reason_oth">Other please specify</label>
                  <input class="form-control" id="via_postponed_reason_oth">
                </div>
              </div>
            </div>
          </div>

          <div class="row cercival-finding">
            <h3> <div class="cc_underline"> Cervical map and VIA finding</div></h3>
            <div class="col-sm-2 finding-scj-col">
              <label class="form-label">SCJ</label>
              <select class="form-select" id="SCJ">
                <option value=""></option>
                <option value="Was clearly seen">Was clearly seen</option>
                <option value="Not all seen">Not all seen</option>
              </select>
            </div>
            <div class="col-sm-2 finding-via-result-col">
              <label class="form-label">VIA test result</label>
              <select class="form-select" id="via_test_res">
                <option value=""></option>
                <option value="Negative">Negative</option>
                <option value="Positive">Positive</option>
              </select>
            </div>
            <div class="col-sm-6 finding-counselling-col">
              <label class="form-label">Counselling and cervical cancer screening by</label>
              <input class="form-control" id="counselling_via_res_by">
            </div>
            <div class="col-sm-6 finding-confirm-by-col"><!-- new Variable -->
              <label class="form-label"> VIA(+) result confirmation done by</label>
              <input class="form-control" id="via_res_comfirm_by">
            </div>
            <div class="col-sm-2 finding-confirm-result-col"><!-- new Variable -->
              <label class="form-label finding-confirm-result-label">VIA test Confrimation Result</label>
              <select class="form-select" id="via_test_confrim_res">
                <option value=""></option>
                <option value="Negative">Negative</option>
                <option value="Positive">Positive</option>
              </select>
            </div>
          </div>

          <div class="row cercival-eligible thermal-top-row">
           <h3> <div class="cc_underline"> Thermal Ablation </div></h3>
            <div class="col-sm-2 thermal-need-col"> <!-- new Variable -->
              <label class="form-label thermal-need-label">Thermal Ablation</label>
              <select class="form-select" id="needed_thermal_ablation">
                <option value=""></option>
                <option value="Needed">Needed</option>
                <option value="Not needed">Not needed</option>
              </select>
            </div>
            <div class="col-sm-2 thermal-date-col"> <!-- Need ID to connect old data -->
              <label class="form-label">Date</label>
              <div class="date-holder">
                <input type="text" class="form-control Gdate" id="thermalNeedDate" placeholder="dd-mm-yyyy">
                <img src="../img/calendar3.svg" class="dateimg" alt="date">
              </div>
            </div>
            <div class="col-sm-3 thermal-eligible-col">
              <label class="form-label">Eligible for thermal ablation</label>
              <select class="form-select" id="eligible_thermal_ablation">
                <option value=""></option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
              </select>
            </div>
            <div class="checkbox-container eligibleNoReasons" style="display:none;">
              <div class="row no-margin w-100">
                <div class="col-sm-12">
                  <label class="form-label">If No,please specify reason</label>
                </div>
              </div>
              <div class="row no-margin w-100">
                <div class="checkbox-group col-sm-4">
                  <input type="checkbox" id="evi_gen_inf"  name="evi_gen_inf" class="custom-checkbox">
                  <label for="evi_gen_inf" class="custom-checkbox-label">Evidence of genital infection</label>
                </div>
                <div class="checkbox-group col-sm-4">
                  <input type="checkbox" id="lo_size_lesion"  name="lo_size_lesion" class="custom-checkbox">
                  <label for="lo_size_lesion" class="custom-checkbox-label">Location,size and extension of the lesion</label>
                </div>
                <div class="checkbox-group col-sm-4">
                  <input type="checkbox" id="other_Nothermal_reason" name="other_Nothermal_reason" class="custom-checkbox">
                  <label for="other_Nothermal_reason" class="custom-checkbox-label">Others</label>
                </div>
              </div>
              <div class="row no-margin w-100 eli_other_specify" style="display:none;">
                <div class="col-sm-6">
                  <label for="eligible_thermal_ablation_rea_oth">If Other,please specify reason</label>
                  <input class="form-control" name="eligible_thermal_ablation_rea_oth" id="eligible_thermal_ablation_rea_oth">
                </div>
              </div>
            </div>
          </div>

          <div class="row gp_nonEligible_hide"> <!-- to hide if Eligible no-->
                  <div class="col-sm-2 thermal-mam-col">
                    <label class="form-label">Thermal ablation done at MAM</label>
                    <select class="form-select" id="thermal_ablation">
                      <option value=""></option>
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                    </select>
                  </div>
                  <div class="checkbox-container thermal_refuse_reasons thermal-reason-col" style="display: none;" >
                    <div class="row no-margin w-100">
                      <div class="col-sm-12">
                        <label class="form-label">If No,specify reason</label>
                      </div>
                    </div>
                    <div class="row no-margin w-100">
                      <div class="checkbox-group col-sm-3">
                        <input type="checkbox" id="TAR_refuse_treat"  name="TAR_refuse_treat" class="custom-checkbox">
                        <label for="TAR_refuse_treat" class="custom-checkbox-label">Patient refuse for treatment</label>
                      </div>
                      <div class="checkbox-group col-sm-3">
                        <input type="checkbox" id="TAR_postpone"  name="TAR_postpone" class="custom-checkbox">
                        <label for="TAR_postpone" class="custom-checkbox-label">Postpone to</label>
                      </div>
                      <div class="checkbox-group col-sm-3">
                        <input type="checkbox" id="TAR_resource_need"  name="TAR_resource_need" class="custom-checkbox">
                        <label for="TAR_resource_need" class="custom-checkbox-label">Resource not available for thermal ablation</label>
                      </div>
                      <div class="checkbox-group col-sm-3">
                        <input type="checkbox" id="TAR_other"  name="TAR_other" class="custom-checkbox">
                        <label for="TAR_other" class="custom-checkbox-label">Other</label>
                      </div>
                    </div>
                    <div class="row no-margin w-100 therAblationReason_other" style="display:none;">
                      <div class="col-sm-6">
                        <label for="thermal_ablation_rea_oth">If Other,please specify</label>
                        <input class="form-control" type="text" name ="thermal_ablation_rea_oth" id="thermal_ablation_rea_oth">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4 thermal_data_tohide thermal-result-col">
                    <label class="form-label">Thermal Ablation Result</label>
                    <input class="form-control" id="thermal_ablation_res">
                  </div>
                  <div class="col-sm-3 thermal_data_tohide thermal-counsel-col"><!-- new Variable -->
                    <label class="form-label">Counseling for thermal ablation done by </label>
                    <input class="form-control" id="thermal_ablation_col_by">
                  </div>
                  <div class="col-sm-3 thermal_data_tohide thermal-performed-col">
                    <label class="form-label">Thermal Ablation performed by:</label>
                    <input class="form-control" id="thermal_ablation_per_by">
                  </div>
                  <div class="col-sm-2 thermal_data_tohide thermal-done-date-col">
                    <label class="form-label">Date</label>
                    <div class="date-holder">
                      <input type="text" class="form-control Gdate" id="thermal_ablation_date" placeholder="dd-mm-yyyy">
                      <img src="../img/calendar3.svg" class="dateimg" alt="date">
                    </div>
                  </div>
          </div>

          <div class="row cercival-adverse">
              <div class="col-sm-2 Postpone_Date adverse-postpone-col">
                <label class="form-label adverse-postpone-label">Postpone<br>Date</label>
                <div class="date-holder">
                  <input type="text" class="form-control Gdate" id="eligible_postpone_date" placeholder="dd-mm-yyyy">
                  <img src="../img/calendar3.svg" class="dateimg" alt="date">
                </div>
              </div>
              <div class="col-sm-3 adverse-financial-col"> <!-- new Variable -->
                <label class="form-label">Financial support for post thermal ablation</label>
                <select class="form-select" id="financial_support">
                  <option value=""></option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
                </select>
              </div>
              <div class="col-sm-2 adverse-refer-col">
                  <label class="form-label">Refer to gynaecologist</label>
                  <select class="form-select" id="ref_hos">
                    <option value=""></option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                  </select>
              </div>
              <div class="col-sm-3 adverse-reason-col"><!-- new Variable -->
                  <label class="form-label adverse-reason-label">Reason for<br>referral</label>
                  <select class="form-select" id="reason_for_referral" >
                    <option value=""></option>
                    <option value="Malignancy suspects">Malignancy suspects</option>
                    <option value="Thermal ablation">Thermal ablation</option>
                    <option value="For LEEP">For LEEP</option>
                    <option value="Other">Other</option> <!-- link to other specify -->
                  </select>
              </div>
              <div class="col-sm-3 referal_other" style="display:none;"><!-- new Variable need ID-->
                  <label class="form-label">Other please specify</label>
                  <input class="form-control" id="reason_ref_other">
              </div>
          </div>

          <div class="row cercival-gy-row">
                <h3> <div class="cc_underline">Gynaecologist's management </div></h3>
                <div class="col-sm-2 gy-biopsy-done-col"><!-- new Variable -->
                  <label class="form-label">Biopsy done</label>
                  <select class="form-select" id="biopsy_done">
                    <option value=""></option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                  </select>
                </div>
                <div class="col-sm-2 gy-biopsy-result-col"><!-- new Variable -->
                  <label class="form-label">Biopsy Result: Cervical Cancer</label>
                  <select class="form-select" id="biopsy_result">
                    <option value=""></option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                  </select>
                </div>
                <div class="col-sm-2 gy-management-col"><!-- new Variable need ID -->
                  <label class="form-label">Gynaecologist's management </label>
                  <select class="form-select" id="gy_management">
                    <option value=""></option>
                    <option value="No action b/c of VIA(-)ve">No action b/c of VIA(-)ve</option>
                    <option value="Thermal ablation done">Thermal ablation done</option>
                    <option value="LEEP">LEEP</option>
                    <option value="Other">Other</option> <!-- link to Other -->
                  </select>
                </div>
                <div class="col-sm-4 gy_manage_other" style="display:none;">
                  <label class="form-label">Other please specify</label>
                  <input class="form-control" id="complaint_spec_oth">
                </div>
          </div>
               
          <div class="row cercival-followup-row">
                <div class="col-sm-2 followup-date-col">
                  <label class="form-label">Next appointment date</label>
                  <div class="date-holder">
                    <input type="text" class="form-control Gdate" id="followup_date" placeholder="dd-mm-yyyy">
                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                  </div>
                </div>
                <div class="col-sm-3 followup-md-col"> <!-- new Variable -->
                  <label class="form-label">MD name</label>
                  <input class="form-control" id="md_name" >
                </div>
                <div class="col-sm-3 followup-csl-col"> <!-- new Variable -->
                  <label class="form-label">CSL name</label>
                  <input class="form-control" id="csl_name" >
                </div>
                <div class="col-sm-4 followup-validation-col">
                  <label class="form-label">Data Validation</label>
                 <div id="errorMsg" style="color:red;"></div>
                </div>
          </div>

          <div class="row cercival-btnBlock">
            <div class="col-sm-2">
              <button class="btn btn-info cercival-save" id="cercival_save"onclick="Cercival_saveUP()" disabled>Save Record</button>
            </div>
            <div class="col-sm-2">
              <button class="btn btn-warning" id="shift-sti" data-sti-base-url="{{ url('/sti_view') }}" style="display:none;" onclick="return goToStiFromCc();">Shift to STI</button>
            </div>
          </div>

        </div>

        <div class="cercival-history" id="cercival_historyBolck">
          <h3 class="header-text">Cervical Cancer Screening follow-up history</h3>
          <div class="row no-margin cercival-history-toolbar">
            <div class="col-sm-2 col-12 no-margin">
              <button class="btn btn-info cercival-goHome" onclick="gotoHome()">To Record</button>
            </div>
          </div>

          <div class="table-responsive cc-history-table-wrap">
            <table class="table table-bordered cc-history-table mb-0">
              <thead>
                <tr>
                  <th>NO.</th>
                  <th>General ID</th>
                  <th>Fuchia ID</th>
                  <th>Visit Date</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody id="history_ListData"></tbody>
            </table>
          </div>
        
        </div>
      </div>
      

      <div class="tab-pane fade" id="cancer_Export">
        <div class="header-text">
          <h2>Export Data</h2>
        </div>
        <form action="{{ route('cc_data1') }}" method="POST">
          @csrf
          <div class="row" style="justify-content:center;">
              <div class="col-sm-3">
                <label for="validationCustom01" class="form-label">From</label>
                
                <div class="date-holder">
                  <input type="text" class="form-control Gdate" id="cc_fromDate" name="cc_dateFrom" placeholder="dd-mm-yyyy">
                  <img src="../img/calendar3.svg" class="dateimg" alt="date">
                </div>
              </div>
              <div class="col-sm-3">
                <label for="validationCustom01" class="form-label">To</label>
                <div class="date-holder">
                  <input type="text" class="form-control Gdate" id="cc_ToDate" name="cc_dateTo" placeholder="dd-mm-yyyy">
                  <img src="../img/calendar3.svg" class="dateimg" alt="date">
                </div>
              </div>
             
              <div class="col-sm-1" style="display:none"><input  name="notice"  value="Export_Cancer"></div>
              <div class="col-sm-2">
                  <button class="btn btn-primary export-ccBtn">Export</button>
              </div>
              
          </div>
        </form>
      </div>
    </div>

</div>
@endauth
@endsection
<script type="text/javascript">
  let generalInfo,clinic_code,update_Id,Update_General;
  // Database column's name : id ( array structure )
  let cercival_his_fill=[
                        "clinic_code" ,"Clinic Code",
                        "General ID" ,"cercival_pid",
                        "fuchia_id" ,"cercival_fid",
                        "agey" ,"cervical_age",
                        "hiv_status" ,"crecival_hivStatus",

                        "Visit_date" ,"cercival_VDate",
                        "no_previous_preg" ,"num_prev_preg",

                        "ucg_test_date" ,"UCG_test_date",
                        "ucg_test_res" ,"UCG_test_res",
                        "hpv_test","hpv_test",
                        
                        "hpv_notdone","hpv_notdone",
                        "hpv_test_res","hpv_test_res",

                        "breast_self" ,"crecival_selfhave",
                        "breast_family_his" ,"crecival_familyHis_have",
                        "breast_examination" ,"crecival_breastExam",
                        "breast_abnormal_find_breast" ,"crecival_abnormal_breast",
                        "breast_remark" ,"breast_remark",

                        "via_screening_history" ,"via_screening_his",
                        "via_test" ,"via_test",
                        "numoffollowupYear","numoffollowupYear",

                        "very_ill" ,"very_ill",
                        "pregnancy" ,"Pregnancy",
                        "less_than_12wks_aft_deli" ,"less12wkDeli",
                        "evidence_genital_infection" ,"cli_evi_gen_inf",
                        "history_cervical_surgery" ,"pri_cur_his_cc",
                        "abnormal_growth" ,"ab_growth",
                        "bleed_on_touch" ,"bl_ontouch",
                        "via_notdone_other" ,"other_postpone_reason",
                        "via_other_specify" ,"via_postponed_reason_oth",

                        "scj" ,"SCJ",
                        "via_test_result" ,"via_test_res",
                        "counselling_via_result_done" ,"counselling_via_res_by",

                        "via_result_confirm_by" ,"via_res_comfirm_by",
                        "via_confirm_result" ,"via_test_confrim_res",
                        "thermal_abl_need" ,"needed_thermal_ablation",
                        "thermal_abl_need_date" ,"thermalNeedDate",

                        "eglible_thermal_ablation" ,"eligible_thermal_ablation",
                        "noteglible_evd_gen_inf" ,"evi_gen_inf",
                        "noteglible_loca_lesion" ,"lo_size_lesion",
                        "noteglible_other" ,"other_Nothermal_reason",
                        "noteglible_other_specify" ,"eligible_thermal_ablation_rea_oth",

                        "thermal_done_mam" ,"thermal_ablation",
                        "thermal_ablation_result" ,"thermal_ablation_res",
                        "thermal_counsel_by" ,"thermal_ablation_col_by",
                        "thermal_perform_by" ,"thermal_ablation_per_by",
                        "thermal_perform_date" ,"thermal_ablation_date",

                        "thermal_pt_refuse" ,"TAR_refuse_treat",
                        "thermal_postpone_to" ,"TAR_postpone",
                        "thermal_resource_notaval" ,"TAR_resource_need",
                        "nothermal_other" ,"TAR_other",
                        "nothermal_other_specify" ,"thermal_ablation_rea_oth",

                        "postpone_date" ,"eligible_postpone_date",

                        "financial_support" ,"financial_support",
                        "ref_gynaecologist" ,"ref_hos",
                        "reason_for_referral" ,"reason_for_referral",
                        "reason_other_ref_specify" ,"reason_ref_other",

                        "biopsy_done" ,"biopsy_done",
                        "biopsy_result" ,"biopsy_result",
                        "gy_management" ,"gy_management",
                        "gy_manage_other_specify" ,"complaint_spec_oth",
                        "followup_date" ,"followup_date",
                        "md_name" ,"md_name",
                        "csl_name" ,"csl_name",
                      
  ];
  
  function cercival_endisabled(){
        console.log("cercival endisabled function arrived.");
        hpv_test


        if($("#hpv_test").val()=="Not Done"){
            $("#hpv_notdone").prop("disabled",false);
        }else{
            $("#hpv_notdone").prop("disabled",true).val("");
        }



        if($("#via_test").val()=="Not Done"){
            $(".noviaScreeningReasons").show();
        }else{
           $("#noviaScreeningReasons").hide();
        }

        if($("#crecival_breastExam").val()=="Done"){
            $("#crecival_abnormal_breast").prop("disabled",false);
        }else{
            $("#crecival_abnormal_breast,#breast_remark").prop("disabled",true).val("");
        }

        if($("#crecival_abnormal_breast").val()=="Yes"){
            $("#breast_remark").prop("disabled",false);
        }else{
            $("#breast_remark").prop("disabled",true).val("");
        }

        if($("#needed_thermal_ablation").val()=="Not needed"){
            $("#eligible_thermal_ablation").prop("disabled",true);
        }else{
            $("#eligible_thermal_ablation").prop("disabled",false);
        }

        if($("#eligible_thermal_ablation").val()=="No"){
            $(".eligibleNoReasons").show();
        }else{
            $(".eligibleNoReasons").hide();
        }

        if($("#thermal_ablation").val()=="No"){
            $(".thermal_refuse_reasons").show();
            $(".thermal_data_tohide").hide();
        }else{
            $(".thermal_data_tohide").show();
            $(".thermal_refuse_reasons").hide();
        }

        
        if($("#reason_for_referral").val()=="Other"){
          $(".referal_other").show();
        }else{
            $(".referal_other").hide();
        }

        if($("#ref_hos").val()=="No"){
          $("#reason_for_referral").prop("disabled",true);
        }else{
            $("#reason_for_referral").prop("disabled",false);
        }

        

        if($("#gy_management").val()=="Other"){
          $(".gy_manage_other").show();
        }else{
          $(".gy_manage_other").hide();
        }

        if (typeof refreshCcYesNoSelectCheckboxUi === "function") {
          refreshCcYesNoSelectCheckboxUi();
        }
        
  }

  function findcercival_patient(callback){
   let find_Cercival={
    Pid:$("#cercival_pid").val(),
    Fid:$("#cercival_fid").val(),
    notice:"Find the Patient",
   }
   console.log(find_Cercival);
    $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                  }
    });
    $.ajax({
            type:'POST',
            url:"{{route('cc_data1')}}",
            dataType:'json',
            contentType: 'application/json',
            data: JSON.stringify(find_Cercival),
            success:function(response){
              console.log(response);
              generalInfo=response;
              function ccResolveSex(genderValue){
                var raw = $.trim(String(genderValue || ""));
                var lowered = raw.toLowerCase();
                if (raw === "195997324" || lowered === "male" || lowered === "m") {
                  return "Male";
                }
                if (raw === "2532925997326" || lowered === "female" || lowered === "f") {
                  return "Female";
                }
                return raw;
              }
              function ccSetPatientSummary(patient){
                var nameText = $.trim(String((patient && patient["Name"]) || ""));
                var ageText = $.trim(String((patient && patient["Agey"]) || ""));
                var sexText = ccResolveSex(patient ? patient["Gender"] : "");

                $("#cc_patient_name_value").text(nameText || "-");
                $("#cc_patient_age_value").text(ageText || "-");
                $("#cc_patient_sex_value").text(sexText || "-");
                $("#cervical_age").text(ageText || "");
              }
              function ccResetPatientSummary(){
                $("#cc_patient_name_value,#cc_patient_age_value,#cc_patient_sex_value").text("-");
                $("#cervical_age").text("");
              }
              function ccYmdToDisplay(ymd){
                var value = String(ymd || "").trim();
                if (!value) {
                  return "";
                }
                var parts = value.split("-");
                if (parts.length !== 3) {
                  return value;
                }
                return parts[2] + "-" + parts[1] + "-" + parts[0];
              }
              if(response[0][0]!=null){
                ccSetPatientSummary(generalInfo[0][0]);
                if(generalInfo[0][0]["Gender"]=="195997324"){// If male the data can't be saved.
                  alert("Male");
                  return
                } 
                $("#cercival_pid").val(generalInfo[0][0]["Pid"]);
                $("#cercival_fid").val(generalInfo[0][0]["FuchiaID"]);
                $("#cercival_pid,#cercival_fid,#cercival_ptFind").prop("disabled",true);
                $("#cercival_save").prop("disabled",false);
                clinic_code=generalInfo[0][0]["Clinic Code"];

                var currentVisitDate = $.trim(String($("#cercival_VDate").val() || ""));
                var latestFollowupDate = "";
                if (generalInfo[0][2] && generalInfo[0][2]["latest_followup_visit_date"]) {
                  latestFollowupDate = String(generalInfo[0][2]["latest_followup_visit_date"] || "").trim();
                }
                if ((!currentVisitDate || currentVisitDate === todayIn) && latestFollowupDate) {
                  $("#cercival_VDate").val(ccYmdToDisplay(latestFollowupDate));
                }

              }else{
                ccResetPatientSummary();
                alert("This ID isn't registered. Please ask to reception counter.")
              }  

                
                if(generalInfo[0][1].length>0){
                  
                  $("#cercival_historyAlert").text(generalInfo[0][1].length+" Records")
                  $("#cervical_history,#cercival_historyAlert").show();
                }
              
              if (typeof callback === "function") {
                callback();
              }
              
              
            }
    })
    
  }

  function Cercival_saveUP(){
    let Cercival_SaveUP_Data={};
    $("#screening_Info input,#screening_Info select,#screening_Info span").each(function(){
      var Id_name=$(this).attr("id");
      if (!Id_name) {
        return;
      }
      if ($(this).is('input[type="checkbox"]') && $(this).hasClass("cc-yesno-ui-proxy")) {
        return;
      }
      if($(this).is("input,select")){
        if($(this).hasClass("Gdate")){
          Cercival_SaveUP_Data[Id_name]=formatDate($(this).val());
        }else if ($(this).is('input[type="checkbox"]')) {
        if ($(this).is(':checked')) {
         Cercival_SaveUP_Data[Id_name] = 1;
        } else {
          Cercival_SaveUP_Data[Id_name] = 0;
        }
      }
        else{
          Cercival_SaveUP_Data[Id_name]=$(this).val();
        }
      }else if($(this).is("span")){
        Cercival_SaveUP_Data[Id_name]=$(this).text();
      }

    })
    Cercival_SaveUP_Data["notice"]="Cercival Save Record";
    Cercival_SaveUP_Data["Clinic Code"]=clinic_code;
    if(update_Id){
      Cercival_SaveUP_Data["notice"]="Cercival Updated Record";
      Cercival_SaveUP_Data["update_Id"]=update_Id;
      console.log(cercival_his_room);
      Cercival_SaveUP_Data["update_GenerlID"]=Update_General;


    }
    console.log(Cercival_SaveUP_Data);

    console.log(generalInfo[0][0]["Pid"]);
    console.log(Cercival_SaveUP_Data["Agey"]);
    if(Cercival_SaveUP_Data["cercival_pid"]==generalInfo[0][0]["Pid"] && (generalInfo[0][0]["Agey"]!="" && generalInfo[0][0]["Agey"]!="0" && generalInfo[0][0]["Agey"]<=100)){
      let allErrors = validator(Cercival_SaveUP_Data);
      if (allErrors.length > 0) {
        var formName="Register";
          showErrors(allErrors,formName); // animate error box
          playErrorSound(); 
          return; // 🚫 stop here
      }
          $.ajaxSetup({
                      headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                      }
          });
          $.ajax({
                  type:'POST',
                  url:"{{route('cc_data1')}}",
                  dataType:'json',
                  contentType: 'application/json',
                  data: JSON.stringify(Cercival_SaveUP_Data),
                  success:function(response){
                    console.log(response);
                    if(response=="This patients don't pass reception"||response=="Today, This patients has been collected"){
                      alert(response);
                      // $('html, body').animate({ scrollTop: 0 }, 'fast');
                    }else{
                      alert(response);
                      $('#shift-sti').show();
                      //history.go(0);
                    }
                    

                  }
          })
        

    }else{
      alert("Wrong creditial or wrong Age")
      
     // history.go(0);
    }
    
    
  }

  function cercival_History(){
    //console.log("cc + " + cercival_his_fill[]);
    var $row = $(event.target).closest("tr");
    update_Id=$(event.target).attr("id").match(/\d+/)[0];
    cercival_his_room=$row.children().first().text()-1;
    for(var i=0;i<cercival_his_fill.length;i=i+2){
      if($("#"+cercival_his_fill[i+1]).is("input,select")){
        if ($("#"+cercival_his_fill[i+1]).is('input[type="checkbox"]')) {
        $("#"+cercival_his_fill[i+1]).prop('checked', false);
         if (generalInfo[0][1][cercival_his_room][cercival_his_fill[i]] == '1') {
           $("#"+cercival_his_fill[i+1]).prop('checked', true);
         }
      } else{
        $("#"+cercival_his_fill[i+1]).val(generalInfo[0][1][cercival_his_room][cercival_his_fill[i]])
      }
        
      }else if($("#"+cercival_his_fill[i+1]).is("span")){
        $("#"+cercival_his_fill[i+1]).text(generalInfo[0][1][cercival_his_room][cercival_his_fill[i]])
      }
    }
    Update_General=generalInfo[0][1][cercival_his_room]["General ID"]
    DateTo_text();
    cercival_endisabled();
    $("#cercival_historyBolck").hide();
    $("#screening_Info").show();
    $("#cercival_save").text("Updated Record");
    $("#cercival_header h2").text("Update Cercival Cancer Screening");
    $(".cercival_IDchangeBlock").show();
    if (typeof refreshCcYesNoSelectCheckboxUi === "function") {
      refreshCcYesNoSelectCheckboxUi();
    }
    //cercival_endisabled();
  }

  function cercival_remove(){
   var $row = $(event.target).closest("tr");
   var rownumber=event.target.id.match(/\d+/)[0];
   var visit_date=$row.children().eq(3).text();
   var generalID=$row.children().eq(1).text();
   let cervical_remove={
    rownumber:rownumber,
    visit_date:visit_date,
    generalID:generalID,
    notice:"remove cercival data"
   }
   console.log(cervical_remove);
   if(confirm("Are you sure to Delete this cercival cancer data")){
    $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                  }
    });
    $.ajax({
              type:'POST',
              url:"{{route('cc_data1')}}",
              dataType:'json',
              contentType: 'application/json',
              data: JSON.stringify(cervical_remove),
              success:function(response){
                console.log(response);
                if(response=="Successfull Delete"){
                  alert(response);
                  findcercival_patient(function() {
                    $("#cervical_history").click();
                  });
                }else{
                  alert(response);
                }
              }
    })
   }
  }

  function gotoHome(){
    $("#cercival_historyBolck").hide();
    $("#screening_Info").show();
  }
  // Validation


function showErrors(errors,formName) {
    var errorBox = $("#errorMsg");
    if (errors.length > 0) {
        errorBox.stop(true, true)
            .html(errors.join("<br>"))
            .hide()
            .slideDown(300)
            .fadeTo(300, 1);
    } else {
        errorBox.slideUp(200);
    }
}
function validator(dataGroup) {
    let InvalidErrors = [];
    let firstInvalid = null;

    // Define validation rules in one place
    // Field name is Id 
    const rules = [
        {
            field: "cercival_VDate",
            checks: [{ type: "required", message: "Visit Date is required." }]
        },
        {
            field: "cercival_pid",
            checks: [{ type: "required", message: "General ID is required." }]
        }
        // 👉 Add more fields here easily
    ];

    rules.forEach(rule => {
        let value = dataGroup[rule.field];
        let errors = validateField(value, rule.checks);

        if (errors.length > 0) {
            showFieldError(rule.field, errors[0]);
            if (!firstInvalid) firstInvalid = "#" + rule.field;
            InvalidErrors.push(...errors);
        } else {
            showFieldError(rule.field, null);
        }
    });

    if (firstInvalid) {
        $(firstInvalid).focus();
    }

    return InvalidErrors;
}
</script>