@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/ANC/anc.js') }}"></script>



        <div class="container containers">
		
            <div class="position-relative  py-2">
                <ul class="nav nav-tabs toggle custom-tab-bar"style="padding-top: 1rem;padding-bottom: 1rem;font-size: 1.1rem;" id="">
                    <li class="nav-item">
                        <a class="nav-link active toggle-link " data-toggle="pill" id="register_tab"
                            href="#anc_register_tab">Register</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link toggle-link " data-toggle="pill" id="follow_tab" href="#anc_history_tab">Follow Up
                            History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link toggle-link " data-toggle="pill" href="#export">Export</a>
                    </li>
                </ul>
                
                <!-- Centered Decorative Title -->
		<div class="position-absolute w-100 text-center d-none d-sm-block" 
     			style="top: 38%; transform: translateY(-50%); pointer-events: none;">
    			<h2>ANC Register</h2>
		</div>
            </div>

            <div class="tab-content page-color">

                {{-- ANC Register Tab --}}
                <div class="tab-pane fade show active p-3" id="anc_register_tab" role="tabpanel"
                    aria-labelledby="anc-register-tab">
                    <div class="row" id="ancRegisterFormCard">
			<div class="col-sm-4">
		        	<button class="btn btn-primary" style="display: none" id="registerHistory">Register History</button>
		                <button class="btn btn-primary" style="" id="refresh">Refresh</button>
                        </div>
                       
                        <div class="col-md-12"> {{-- Changed to full width --}}
                            <div class="p-3">
                                <form id="ancForm">
                                    @csrf
                                    <input type="hidden" id="register_rowID" name="rowID" value="0">
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <label for="Pid" class="form-label">General ID</label>
                                            <input type="number" class="form-control" id="Pid" name="Pid"
                                                placeholder="Enter Patient ID" required>
                                        </div>
                                        <div class="col-sm-2">
                                            <label for="Registered_date" class="form-label">Registered Date</label>
                                            <div class="date-holder">
                                                    <input type="text" id="Registered_date" name="Registered_date"
                                                        class="form-control Gdate" placeholder="dd-mm-yyyy">
                                                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                            </div>
                                        </div>

                                        {{-- New Buttons at the top --}}
                                        <div class="col-sm-4" style="margin-top: 2.5rem">
                                            <button type="button" class="btn btn-primary"
                                                onclick="ANCdataSearch()">Search</button>
                                            <button type="button" class="btn btn-info" id="goToFollowUpBtn"
                                                style="display: none;">Go to Follow Up</button>
                                        </div>
                
                                        {{-- Patient Summary Span --}}
                                        <div class="col-sm-4">
                                            <h6 class="card-subtitle mb-2 text-muted"> <span id="patientSummary"></span></h6>
                                            <div class="form-group">
		                                    <input type="hidden" id="rowID" value="0">
		                                    <label for="" class="form-label">Info :</label>
		                                    <input type="text" id="pt_info" class="form-control" disabled>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- Removed Name, Father's Name, DOB, Mother's Name, Gender, Address input fields --}}
                                    
                                    <div class="row mb-3">
                                    <h3 class="subTb-header" styl="margin:0;">Relevant History</h3>
                                        <div class="col-md-2">
                                            <div class="date-holder">
                                                <label for="LMPdate" class="form-label">LMP Date</label>
                                                <div class="date-holder">
                                                    <input type="text" id="LMPdate" name="LMPdate"
                                                        class="form-control Gdate" placeholder="dd-mm-yyyy">
                                                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="date-holder">
                                                <label for="EDDdate" class="form-label">EDD Date</label>
                                                <div class="date-holder">
                                                    <input type="text" id="EDDdate" name="EDDdate"
                                                        class="form-control Gdate" placeholder="dd-mm-yyyy">
                                                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="Height" class="form-label">Height (cm)</label>
                                            <input type="number" step="0.1" class="form-control" id="Height"
                                                name="Height">
                                        </div>
                                        <div class="col-md-2">
                                            <label for="Heart_Disease" class="form-label">Heart Disease</label>
                                            <select class="form-control" id="Heart_Disease" name="Heart_Disease">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="Tuberculosis" class="form-label">Tuberculosis</label>
                                            <select class="form-control" id="Tuberculosis" name="Tuberculosis">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="Hypertension" class="form-label">Hypertension</label>
                                            <select class="form-control" id="Hypertension" name="Hypertension">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label for="Diabetes" class="form-label">Diabetes</label>
                                            <select class="form-control" id="Diabetes" name="Diabetes">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="Allergy" class="form-label">Allergy</label>
                                            <select class="form-control" id="Allergy" name="Allergy">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="Twins" class="form-label">Twins</label>
                                            <select class="form-control" id="Twins" name="Twins">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="Surgical_Operation" class="form-label">Surgical Operation</label>
                                            <select class="form-control" id="Surgical_Operation" name="Surgical_Operation">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <h3 class="subTb-header">Immunization (inj ATT)</h3>
                                            <div class="col-md-2">
                                                <div class="date-holder">
                                                    <label for="First_Dose_date" class="form-label">1st Dose Date (TT)</label>
                                                    <div class="date-holder">
                                                        <input type="text" id="First_Dose_date" name="First_Dose_date"
                                                            class="form-control Gdate" placeholder="dd-mm-yyyy">
                                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="date-holder">
                                                    <label for="Second_Dose_date" class="form-label">2nd Dose Date
                                                        (TT)
                                                    </label>
                                                    <div class="date-holder">
                                                        <input type="text" id="Second_Dose_date" name="Second_Dose_date"
                                                            class="form-control Gdate" placeholder="dd-mm-yyyy">
                                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                                    </div>

                                                </div>
                                            </div>
                                    </div>
                                    <div class="row mb-3">
                                    <h3 class="subTb-header">Investigation</h3>
                                        <div class="col-md-2">
                                            <label for="HepatitisB_Result" class="form-label">Hepatitis B Result</label>
                                            <Select class="form-control" id="HepatitisB_Result" name="HepatitisB_Result">
                                                <option value=""></option>
                                                <option value="Positive">Positive</option>
                                                <option value="Negative">Negative</option>
                                            </Select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="HepatitisB_Treatment" class="form-label">Hepatitis B Treatment</label>
                                            <input type="text" class="form-control" id="HepatitisB_Treatment"
                                                name="HepatitisB_Treatment">
                                        </div>
                                        <div class="col-md-2">
                                            <label for="HepatitisC_Result" class="form-label">Hepatitis C Result</label>
                                            <Select class="form-control" id="HepatitisC_Result" name="HepatitisC_Result">
                                                <option value=""></option>
                                                <option value="Positive">Positive</option>
                                                <option value="Negative">Negative</option>
                                            </Select>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="HepatitisC_Treatment" class="form-label">Hepatitis C Treatment</label>
                                            <input type="text" class="form-control" id="HepatitisC_Treatment"
                                                name="HepatitisC_Treatment">
                                        </div>
                                        <div class="col-md-2">
                                            <label for="HIV_Result" class="form-label">HIV Result</label>
                                            <Select class="form-control" id="HIV_Result" name="HIV_Result">
                                                <option value=""></option>
                                                <option value="Positive">Positive</option>
                                                <option value="Negative">Negative</option>
                                                <option value="Unknown">Unkonwn</option>
                                            </Select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="HIV_Treatment" class="form-label">HIV Treatment</label>
                                            <input type="text" class="form-control" id="HIV_Treatment"
                                                name="HIV_Treatment">
                                        </div>

                                        <div class="col-md-2">
                                            <label for="SyphilisRDT_Result" class="form-label">Syphilis RDT Result</label>
                                            <Select class="form-control" id="SyphilisRDT_Result" name="SyphilisRDT_Result">
                                                <option value=""></option>
                                                <option value="Positive">Positive</option>
                                                <option value="Negative">Negative</option>
                                            </Select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="SyphilisRDT_Treatment" class="form-label">Syphilis RDT
                                                Treatment</label>
                                            <input type="text" class="form-control" id="SyphilisRDT_Treatment"
                                                name="SyphilisRDT_Treatment">
                                        </div>
                                        <div class="col-md-2">
                                            <label for="SyphilisRPR_Result" class="form-label">Syphilis RPR Result</label>
                                            <Select class="form-control" id="SyphilisRPR_Result" name="SyphilisRPR_Result">
                                                <option value=""></option>
                                                <option value="Reactive">Reactive</option>
						<option value="Non Reactive">Non Reactive</option>
                                            </Select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="SyphilisRPR_Treatment" class="form-label">Syphilis RPR
                                                Treatment</label>
                                            <Input type="text" class="form-control" id="SyphilisRPR_Treatment"
                                                name="SyphilisRPR_Treatment"> </Input>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="RBS_Result" class="form-label">RBS Result(mg/dl)</label>
                                            <input type="number" step="0.01" class="form-control" id="RBS_Result"
                                                name="RBS_Result">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="RBS_Treatment" class="form-label">RBS Treatment</label>
                                            <input type="text" class="form-control" id="RBS_Treatment"
                                                name="RBS_Treatment">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-2">
                                            <label for="Hb_Result" class="form-label">Hb % Result</label>
                                            <input type="number" step="0.01" class="form-control" id="Hb_Result"
                                                name="Hb_Result">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="Hb_Treatment" class="form-label">Hb Treatment</label>
                                            <input type="text" class="form-control" id="Hb_Treatment"
                                                name="Hb_Treatment">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="Remark" class="form-label">Remark (Investigation)</label>
                                            <input type="text" class="form-control" id="Remark" name="Remark" ></input>
                                        </div>
                                    </div>
                                   
                                    <div class="row mb-3">
                                    <h3 class="subTb-header">Previous Obstetrical History</h3>
                                        <div class="col-md-2">
                                            <label for="G_status" class="form-label">G</label>
                                            <input type="number" class="form-control" id="G_status" name="G_status" ></input>
                                            
                                        </div>
                                        <div class="col-md-2">
                                            <label for="P_status" class="form-label">P</label>
                                            <input type="text" class="form-control"  id="P_status" name="P_status" ></input>
                                        </div>
                                        <div class="col-md-8">
                                            <label for="Other_Remark" class="form-label">Remark</label>
                                            <input type="text" class="form-control" id="Other_Remark"
                                                name="Other_Remark">
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-end">
                                        <button type="submit" class="btn btn-success me-2 register-btn ">Register</button>
                                        <button type="button" class="btn btn-danger me-2" id="remove_register"
                                            onclick="removeData(this)">Delete
                                            Register</button>
                                        {{-- The 'Show Follow Up Form' button is removed from here --}}
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="ancRegisterHistory" style="display: none">
                        <div class="p-3">
                            <h2 class="header-text">ANC Register History</h2>
                            <table class="table table-bordered table-striped table-sm " id="register_history">
                                <thead>
                                    <tr>
                                        <th>
                                            Registered Date
                                        </th>
                                        <th>General ID</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div class="row" style="justify-content: center">
                                <div class="col-sm-2"><button class="btn btn-info" id="reg_his_main">To register
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="p-3" id="ancFollowupSection" style="display: none;">
                        <div class="row">
                            <div class="col-sm-2">
                                <button class="btn btn-primary" id="toRegister">To Register</button>
                            </div>
                            <div class="col-sm-2">
                             	<h2 class="text-center">Follow Up Visits</h2>
                            </div>
                        </div>
                        
                        <form id="ancFollowupForm">
                            @csrf
                            <input type="hidden" id="fup_Pid" name="Pid">
                            <input type="hidden" id="fup_Registered_date" name="Registered_date">
                            <input type="hidden" id="fup_rowID" name="id" value="0">
                            {{-- For updating specific follow-up --}}

                            <div class="row">
                                <div class="col-md-2">
                                    <div class="date-holder">
                                        <label for="Follow_up_visit_date" class="form-label">Visit Date</label>
                                        <div class="date-holder">
                                            <input type="text" id="Follow_up_visit_date" name="Follow_up_visit_date"
                                                class="form-control Gdate" placeholder="dd-mm-yyyy">
                                            <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label for="Weight_fup" class="form-label">Weight (kg)</label>
                                    <input type="number" step="0.1" class="form-control" id="Weight_fup"
                                        name="Weight"> {{-- Keep name as Weight as in controller --}}
                                </div>
                            
                                <div class="col-md-2">
                                    <label for="Urine_Albumin_Sugar" class="form-label">Urine Albumin
                                        Sugar</label>
                                    <select class="form-control" id="Urine_Albumin_Sugar" name="Urine_Albumin_Sugar">
                                        <option value=""></option>
                                        <option value="0">0</option>
                                        <option value="1+">1+</option>
                                        <option value="2+">2+</option>
                                        <option value="3+">3+</option>
                                        <option value="4+">4+</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label for="BP_systolic" class="form-label">BP(Systolic)mmHg</label>
                                    <input type="number" class="form-control" id="BP_systolic" name="BP_systolic">
                                </div>
                                <div class="col-md-2">
                                    <label for="BP_diastolic" class="form-label">BP(Diastolic)mmHg</label>
                                    <input type="number" class="form-control" id="BP_diastolic" name="BP_diastolic">
                                </div>
                            
                                <div class="col-md-2">
                                    <label for="Ht_of_Uterus" class="form-label">Ht of Uterus (cm)</label>
                                    <input type="number" step="0.1" class="form-control" id="Ht_of_Uterus"
                                        name="Ht_of_Uterus">
                                </div>
                            </div>

                            <div class="row mb-2">
                            	 <div class="col-md-2">
                                    <label for="Presenting_Part" class="form-label">Presenting Part</label>
                                    <input type="text" class="form-control" id="Presenting_Part" name="Presenting_Part">
                                </div>
                                <div class="col-md-2">
                                    <label for="Engagement" class="form-label">Engagement</label>
                                    <input type="text" class="form-control" id="Engagement" name="Engagement">
                                </div>
                                <div class="col-md-1">
                                    <label for="FHS" class="form-label">FHS</label>
                                    <input type="text" class="form-control" id="FHS" name="FHS">
                                </div>
                                <div class="col-md-1">
                                    <label for="Oedema" class="form-label">Oedema</label>
                                    <select class="form-control" id="Oedema" name="Oedema">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="Complaints" class="form-label">Complaints</label>
                                    <input type="text" class="form-control" id="Complaints" name="Complaints">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-5">
                                    <label for="Treatment" class="form-label">Treatment</label>
                                    <input type="text" class="form-control" id="Treatment" name="Treatment">
                                </div>
                                <div class="col-md-4">
                                    <label for="Clean_Delivery_Kit_Distribution" class="form-label">Clean Delivery
                                        Kit
                                        Distribution</label>
                                    <select class="form-control" id="Clean_Delivery_Kit_Distribution"
                                        name="Clean_Delivery_Kit_Distribution">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-md-1">
                                    <label for="Refer" class="form-label">Refer</label>
                                    <select class="form-control" id="Refer" name="Refer">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label for="Referral_Place" class="form-label">Referral Place</label>
                                    <select class="form-control" id="Referral_Place" name="Referral_Place">
                                        <option value=""></option>
                                        <option value="TBA">TBA</option>
                                        <option value="RHC/UHC">RHC/UHC</option>
                                        <option value="Hospital">Hospital</option>
                                    </select>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-success me-2" id="fupSave"
                                    onclick="ANCdataFollowupSave()">Save
                                    Follow Up</button>
                                <button type="button" class="btn btn-info me-2" id="fupUpdate"
                                    onclick="UpdateFollowupVisit()">Update
                                    Follow Up</button>
                                <button type="button" class="btn btn-secondary me-2" onclick="refreshFollowUpForm()">Clear
                                    Follow Up</button>
                            </div>
                        </form>


                    </div>
                </div>
                <div class="tab-pane fade p-3" id="anc_history_tab" role="tabpanel" aria-labelledby="anc-history-tab">
                    <h2 class="card-title text-center mb-3 header-text">ANC Follow Up History</h2>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="p-3">
                                <input type="hidden" id="history_Pid">
                                <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                                    <table class="table table-bordered table-striped table-sm" id="follow_history">
                                        <thead>
                                            <tr>
                                                <th>Admission Date</th>
                                                <th>Visit Date</th>
                                                <th>Weight</th>
                                                <th>Urine Albumin Sugar</th>
                                                <th>BP (Sys/Dia)</th>
                                                <th>Ht of Uterus</th>
                                                <th>Presenting Part</th>
                                                <th>Engagement</th>
                                                <th>FHS</th>
                                                <th>Oedema</th>
                                                <th>Complaints</th>
                                                <th>Treatment</th>
                                                <th>CDK Dist.</th>
                                                <th>Refer</th>
                                                <th>Referral Place</th>
                                                <th>PID</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="anc_full_follow_history">
                                            {{-- Full history will be appended here, grouped by admission date --}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Export Tab --}}
                <div class="tab-pane fade p-3" id="export" role="tabpanel" aria-labelledby="export-tab">
                    <h2 class="card-title text-center header-text">Export Data</h2>
                    <form action="{{ route('ANC.anc_export') }}" method="post" id="exportForm">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label for="export_type" class="form-label">Export Type</label>
                                <select class="form-control" id="export_type" name="export_type" required>
                                    <option value="">Select Type</option>
                                    <option value="Register">ANC Register</option>
                                    <option value="FollowUp">ANC Follow Up</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                 <label for="from_date" class="form-label">From Date</label>
                                <div class="date-holder">
                                   
                                    <div class="date-holder">
                                        <input type="text" id="from_date" name="from_date" class="form-control Gdate"
                                            placeholder="dd-mm-yyyy">
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-3">
                                <label for="to_date" class="form-label">To Date</label>
                                <div class="date-holder">
                                    
                                    <input type="text" id="to_date" name="to_date" class="form-control Gdate"
                                        placeholder="dd-mm-yyyy">
                                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                </div>
                            </div>
                        
                        <div class="col-md-3">
                        	<br>
		                <div class="d-flex justify-content-center">
		                    <button type="submit" class="btn btn-lg btn-primary">Export</button>
		                </div>
                        </div>
                     </div>
                    </form>
                </div>

                {{-- Notes Tab (Placeholder) --}}
            </div>
        </div>
    @endauth
@endsection
<script>
    // Function to clear follow-up form fields
    function refreshFollowUpForm() {
        $('#fup_rowID').val('0'); // Reset ID for new entry
        $('#Follow_up_visit_date').val('');
        $('#Urine_Albumin_Sugar').val('');
        $('#Weight_fup').val('');
        $('#BP_systolic').val('');
        $('#BP_diastolic').val('');
        $('#Ht_of_Uterus').val('');
        $('#Presenting_Part').val('');
        $('#Engagement').val('');
        $('#FHS').val('');
        $('#Oedema').val('');
        $('#Complaints').val('');
        $('#Treatment').val('');
        $('#Clean_Delivery_Kit_Distribution').val('');
        $('#Refer').val('');
        $('#Referral_Place').val('');
    }

    // Function to clear main registration form and all related fields
    function refreshMainForm() {
        $('#Pid').val('');
        $('#Registered_date').val('');
        $('#register_rowID').val('0');
        $('#ANC_ID').val('');

        $('#patientSummary').text(''); // Clear patient summary span

        $('#LMPdate').val('');
        $('#EDDdate').val('');
        $('#First_Dose_date').val('');
        $('#Second_Dose_date').val('');
        $('#G_status').val('');
        $('#P_status').val('');
        $('#RBS').val('');
        $('#RBS_Result').val('');
        $('#RBS_Treatment').val('');
        $('#Hb_percent').val('');
        $('#Hb_Result').val('');
        $('#Hb_Treatment').val('');
        $('#Heart_Disease').val('');
        $('#Tuberculosis').val('');
        $('#Hypertension').val('');
        $('#Diabetes').val('');
        $('#Allergy').val('');
        $('#Twins').val('');
        $('#Surgical_Operation').val('');
        $('#Other_Remark').val('');
        $('#HepatitisB_Result').val('');
        $('#HepatitisB_Treatment').val('');
        $('#HepatitisC_Result').val('');
        $('#HepatitisC_Treatment').val('');
        $('#HIV_Result').val('');
        $('#HIV_Treatment').val('');
        $('#SyphilisRDT_Result').val('');
        $('#SyphilisRDT_Treatment').val('');
        $('#SyphilisRPR_Result').val('');
        $('#SyphilisRPR_Treatment').val('');
        $('#MUAC').val('');
        $('#Z_score').val('');
        $('#Weight').val('');
        $('#Height').val('');
        $('#Clinical').val('');
        $('#Other').val('');
        $('#Remark').val('');

        $('#current_anc_follow_history').empty(); // Clear current follow-up history
        $('#anc_register_history').empty(); // Clear register history table
        $('#anc_full_follow_history').empty(); // Clear full history tab
        refreshFollowUpForm(); // Clear follow up form too

        // Hide follow-up section and button when main form is cleared/refreshed
        $('#ancFollowupSection').hide();
        $('#goToFollowUpBtn').hide(); // Hide the new 'Go to Follow Up' button
    }

    function safeText(value) {
        return value ?? ''; // empty string if null or undefined
    }


    function ANCdataSearch() {
        const id = $('#Pid').val().trim();
        const registeredDate = formatDate($('#Registered_date').val().trim());

        $("#register_history,#fupsectionBtn").prop('disabled', true);
        $("#register_rowID").val(0);
        $(".clearForm input,.clearForm select").val('');
        $('#pt_info').val('');
        $("#registerHistory").hide();

        if (!id || !registeredDate) {
            alert('Please enter a Registered ID and Date.');
            return;
        }

        const data = {
            id: id,
            registered_date: registeredDate
        };
        let querystring = new URLSearchParams(data).toString();

        $.ajax({
            url: `/ANC/anc-confid-search?${querystring}`,
            type: 'GET',
            success: function(data) {
                if (data.error) {
                    alert(data.error);
                    return;
                }
                console.log(data);
                const registerData = data.register;
                const ptinfo = data.pt_info;
                const followUps = data.followUps;
                const registerHis = data.register_history;

                if (!ptinfo) {
                    alert('There is no data for this ID.');
                    return;
                }

                // Fill form


                $('.register-btn').text(registerData ? 'Update' : 'Register');

                if (registerData && ptinfo["Gender"]=="Female") {

                    $("#ancForm input, #ancForm select,#ancForm textarea").each(function() {
                        let key = $(this).attr("name");
                        $(this).val(registerData[key]);
                    });
                    $('#register_rowID').val(registerData.id);
                    $('#fup_Registered_date').val(registerData.Registered_date)
                    $("#fup_Pid").val(registerData.Pid)
                    // more fields like above...
                    $('#fupsectionBtn').prop('disabled', false);
                    $("#remove_register").attr({
                        "data-id": registerData.id,
                        "data-delete": 'Register',
                        "data-vdate": registerData.Registered_date,
                        "data-pid": registerData.Pid
                    });
                    $("#register_history tbody").empty();
                    
                    DateTo_text();
                    registerHis.forEach(item => {
                        console.log(item.id);
                        if (item.id != registerData.id) {
                            let reg_table = $("<tr>").append(
                                $("<td class='pt-3 text-white'>").text(safeText(item.Registered_date)),
                                $("<td class='pt-3 text-white'>").text(safeText(item.Pid)),
                                $("<td class='pt-1'>").html(`
                                                <button class="btn btn-primary regHis-show" onclick="regDetailShow(this)" data-pid="${safeText(item.Pid)}" data-vdate="${safeText(formatDate(item.Registered_date))}">Show</button> 
                                                <button class="btn btn-danger regHis-delete" onclick="removeData(this)" data-id="${safeText(item.id)}"
                                                data-delete="Register" data-pid="${safeText(item.Pid)}" data-vdate="${safeText(formatDate(item.Registered_date))}">Delete</button>
                                            `)
                            );

                            $("#register_history tbody").append(reg_table);
                            $("#registerHistory").show();
                        }

                    });
                }

                $('#pt_info').val(
                    `👤 Name: ${ptinfo.Name} • 🚻 Sex: ${ptinfo.Gender} • 🎂 Age: ${ptinfo['Current Agey']} yrs`
                );
                if(ptinfo.Gender == "Male"){
                	$('.register-btn').prop('disabled',true);
                }

                // Follow Up visit buttons
                const followUpDiv = $('#followUpButtons');
                followUpDiv.empty();
                $("#anc_full_follow_history").empty();
                if (followUps && followUps.length > 0) {
                    followUps.forEach(item => {
                        let follow_table = $("<tr>").append(
                            $("<td class='pt-3'>").text(safeText(item.Registered_date)),
                            $("<td class='pt-3'>").text(safeText(item.Visitdate)),
                            $("<td class='pt-3'>").text(safeText(item.Weight)),
                            $("<td class='pt-3'>").text(safeText(item.Urine_Albumin_Sugar)),
                            $("<td class='pt-3'>").text(safeText(item.BP_systolic) + '/' +
                                safeText(
                                    item.BP_diastolic)),
                            $("<td class='pt-3'>").text(safeText(item.Ht_of_Uterus)),
                            $("<td class='pt-3'>").text(safeText(item.Presenting_Part)),
                            $("<td class='pt-3'>").text(safeText(item.Engagement)),
                            $("<td class='pt-3'>").text(safeText(item.FHS)),
                            $("<td class='pt-3'>").text(safeText(item.Oedema)),
                            $("<td class='pt-3'>").text(safeText(item.Complaints)),
                            $("<td class='pt-3'>").text(safeText(item.Treatment)),
                            $("<td class='pt-3'>").text(safeText(item
                                .Clean_Delivery_Kit_Distribution)),
                            $("<td class='pt-3'>").text(safeText(item.Refer)),
                            $("<td class='pt-3'>").text(safeText(item.Referral_Place)),
                            $("<td class='pt-3'>").text(safeText(item.Pid)),
                            $("<td class='pt-1'>").html(`
                                <button class="btn btn-primary follow-show" onclick="fetchFollowvisit(${safeText(item.id)})">Show</button> 
                                <button class="btn btn-danger follow-delete" onclick="removeData(this)" data-id="${safeText(item.id)}"
                                 data-delete="Follow" data-pid="${safeText(item.Pid)}" data-vdate="${safeText(formatDate(item.Visitdate))}">Delete</button>
                            `)
                        );

                        $("#anc_full_follow_history").append(follow_table);
                    });
                    $('#goToFollowUpBtn').prop('disabled', false);
                    $('#goToFollowUpBtn').show();
                } else {
                    followUpDiv.append(`<p>No follow-up visits found.</p>`);
                    $('#goToFollowUpBtn').prop('disabled', false);
                    $('#goToFollowUpBtn').show();
                }

            },
            error: function() {
                alert('Error fetching ANC data. Please contact admin.');
            }
        });
    }

    function regDetailShow(button) {
        $('#Pid').val($(button).data('pid'));
        $('#Registered_date').val($(button).data('vdate'))
        DateTo_text();
        ANCdataSearch();
        $("#ancRegisterFormCard").show();
        $("#ancRegisterHistory").hide();
    }


    // Function to load a specific register from the history table
    function loadSpecificRegister(pid, registeredDate) {
        $('#Pid').val(pid);
        $('#Registered_date').val(registeredDate);
        ANCdataSearch(); // Re-run search with specific PID and Registered Date
    }

    function ANCdataFollowupSave() {
        let Pid = $('#fup_Pid').val();
        let Registered_date = $('#fup_Registered_date').val();
        let anc_register_id = $('#register_rowID').val();
        let Follow_up_visit_date = $('#Follow_up_visit_date').val();

        if (!Pid || !Registered_date || !anc_register_id) {
            alert('Please load or save an ANC registration first.');
            return;
        }
        if (!Follow_up_visit_date) {
            alert('Please enter a Follow-up Visit Date.');
            return;
        }

        let followUpData = {
            Pid: Pid,
            Registered_date: Registered_date,
            Follow_up_visit_date: formatDate(Follow_up_visit_date),
            anc_register_id: anc_register_id,
            Urine_Albumin_Sugar: $('#Urine_Albumin_Sugar').val(),
            Weight: $('#Weight_fup').val(),
            BP_systolic: $('#BP_systolic').val(),
            BP_diastolic: $('#BP_diastolic').val(),
            Ht_of_Uterus: $('#Ht_of_Uterus').val(),
            Presenting_Part: $('#Presenting_Part').val(),
            Engagement: $('#Engagement').val(),
            FHS: $('#FHS').val(),
            Oedema: $('#Oedema').val(),
            Complaints: $('#Complaints').val(),
            Treatment: $('#Treatment').val(),
            Clean_Delivery_Kit_Distribution: $('#Clean_Delivery_Kit_Distribution').val(),
            Refer: $('#Refer').val(),
            Referral_Place: $('#Referral_Place').val(),
        };
        console.log(followUpData);
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        });

        $.ajax({
            type: 'POST',
            url: "{{ route('anc_follow') }}",
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(followUpData),
            success: function(response) {
                alert(response['message']);
                refreshFollowUpForm(); // Clear follow-up form
                ANCdataSearch(); // Refresh data to show new follow-up
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let message = xhr.responseJSON.message || 'An error occurred.';
                if (errors) {
                    for (let key in errors) {
                        message += '\n' + errors[key][0];
                    }
                }
                alert(message);
            }
        });
    }

    function UpdateFollowupVisit() {
        let fup_rowID = $('#fup_rowID').val();

        if (fup_rowID == 0) {
            alert('Please select a follow-up visit to update.');
            return;
        }

        let followUpData = {
            id: fup_rowID, // ID of the follow-up record
            Follow_up_visit_date: $('#Follow_up_visit_date').val(),
            Urine_Albumin_Sugar: $('#Urine_Albumin_Sugar').val(),
            Weight: $('#Weight_fup').val(),
            BP_systolic: $('#BP_systolic').val(),
            BP_diastolic: $('#BP_diastolic').val(),
            Ht_of_Uterus: $('#Ht_of_Uterus').val(),
            Presenting_Part: $('#Presenting_Part').val(),
            Engagement: $('#Engagement').val(),
            FHS: $('#FHS').val(),
            Oedema: $('#Oedema').val(),
            Complaints: $('#Complaints').val(),
            Treatment: $('#Treatment').val(),
            Clean_Delivery_Kit_Distribution: $('#Clean_Delivery_Kit_Distribution').val(),
            Refer: $('#Refer').val(),
            Referral_Place: $('#Referral_Place').val(),
        };

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        });

        $.ajax({
            type: 'POST',
            url: "{{ route('anc-followup-update') }}",
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(followUpData),
            success: function(response) {
                alert(response['message']);
                refreshFollowUpForm(); // Clear follow-up form
                ANCdataSearch(); // Refresh data to show updated follow-up
                $("#fupSave").show();
                $("#fupUpdate").hide();
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let message = xhr.responseJSON.message || 'An error occurred.';
                if (errors) {
                    for (let key in errors) {
                        message += '\n' + errors[key][0];
                    }
                }

                alert(message);
            }
        });
    }

    function fetchFollowvisit(fup_id) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'GET',
            url: "{{ route('anc.follow-list') }}",
            dataType: 'json',
            data: {
                Rowid: fup_id
            },
            success: function(response) {
                console.log(response);
                if (response) {
                    $('#fup_rowID').val(response.id);
                    $('#Follow_up_visit_date').val(response.Visitdate);
                    $('#Urine_Albumin_Sugar').val(response.Urine_Albumin_Sugar || '');
                    $('#Weight_fup').val(response.Weight || '');
                    $('#BP_systolic').val(response.BP_systolic || '');
                    $('#BP_diastolic').val(response.BP_diastolic || '');
                    $('#Ht_of_Uterus').val(response.Ht_of_Uterus || '');
                    $('#Presenting_Part').val(response.Presenting_Part || '');
                    $('#Engagement').val(response.Engagement || '');
                    $('#FHS').val(response.FHS || '');
                    $('#Oedema').val(response.Oedema || '');
                    $('#Complaints').val(response.Complaints || '');
                    $('#Treatment').val(response.Treatment || '');
                    $('#Clean_Delivery_Kit_Distribution').val(response.Clean_Delivery_Kit_Distribution ||
                        '');
                    $('#Refer').val(response.Refer || '');
                    $('#Referral_Place').val(response.Referral_Place || '');

                    DateTo_text();
                    $('#fupSave').hide(); // Hide the save button
                    $("#follow_tab,#anc_history_tab").removeClass('active');
                    $("#follow_tab,#anc_history_tab").removeClass('fade');
                    $("#register_tab,#anc_register_tab").addClass('active');
                    $("#register_tab,#anc_register_tab").removeClass('fade');
                    $("#ancRegisterFormCard,#fupSave").hide();
                    $('#ancFollowupSection,#fupUpdate').show();
                } else {
                    alert('Follow-up record not found.');
                }
            },
            error: function(xhr) {
                alert('Error fetching follow-up data.');
            }
        });
    }

    function removeData(button) {
        let type = $(button).data('delete');
        let id = $(button).data('id');
        let Pid = $(button).data('pid'); // Pid from data attribute
        let vdate = $(button).data('vdate'); // Date from data attribute

        if (!confirm('Are you sure you want to delete this ' + type + ' record?')) {
            return;
        }

        let deleteData = {
            Pid: Pid,
            vdate: vdate,
            id: id,
            type: type
        };
        console.log(deleteData);

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        });

        $.ajax({
            type: 'DELETE',
            url: "{{ route('ANC.anc-delete') }}",
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(deleteData),
            success: function(response) {
                alert(response['message']);
                ANCdataSearch(); // Refresh data after deletion
                removeFollowHistory(); // Also refresh full history tab
            },
            error: function(xhr) {
                let message = xhr.responseJSON.message || 'An error occurred during deletion.';
                alert(message);
            }
        });
    }
</script>