@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></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">
                     
                        <h2 class="card-title text-center mb-3 position-relative header-text">
                            <div class="position-absolute m-0">
                                <button class="btn btn-primary" style="" id="refresh">Refresh</button>
                                <button class="btn btn-primary"  style="display: none;" id="registerHistory">Register History</button>
                            </div>
                            
                            ANC Register
                        </h2>

                        <div class="col-sm-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-sm-2">
                                            <label for=""class="form-label">Husband's Name</label>
                                            <input type="text" id="hus_name" name="hus_name" class="form-control">
                                        </div>
                                        <div class="col-sm-2">
                                            <label for=""class="form-label">Age of Marriage</label>
                                            <input type="number" id="age_of_marriage" name="age_of_marriage"
                                                class="form-control">
                                        </div>
                                        <div class="col-sm-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-sm-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-sm-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-sm-2">
                                            <label for=""class="form-label">Contact Number</label>
                                            <input type="number" id="contactNum"name="contactNum" class="form-control"
                                                placeholder="09123456789">
                                        </div>
                                        <div class="col-sm-4">
                                            <label for=""class="form-label">Address</label>
                                            <input type="text" id="address" name="address" class="form-control">
                                        </div>
                                        <div class="col-sm-4">
                                            <label for="ls_menstrual_p" class="form-label">Last Menstrual Period*</label>
                                            <select class="form-control" id="ls_menstrual_p" name="ls_menstrual_p">
                                                <option value=""></option>
                                                <option value="Known">Known</option>
                                                <option value="Unknown">Unknown</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">

                                            <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 class="col-sm-2">

                                            <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 class="col-sm-12">
                                            <label for=""class="form-label">History of contraception</label>
                                            <input type="text" id="his_of_contraception" name="his_of_contraception"
                                                class="form-control">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <h3 class="subTb-header">Family History</h3>
                                        <div class="col-sm-2">
                                            <label for="Hypertension" class="form-label">Hypertension</label>
                                            <select class="form-control" id="Family_Hypertension" name="Family_Hypertension">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <label for="Diabetes" class="form-label">Diabetes</label>
                                            <select class="form-control" id="Family_Diabetes" name="Family_Diabetes">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <label for="Tuberculosis" class="form-label">Tuberculosis</label>
                                            <select class="form-control" id="Family_Tuberculosis" name="Family_Tuberculosis">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <label for="Twins" class="form-label">Twins</label>
                                            <select class="form-control" id="Family_Twins" name="Family_Twins">
                                                <option value=""></option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <h3 class="subTb-header">Patient History</h3>
                                        <div class="col-sm-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 class="col-sm-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-sm-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-sm-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-sm-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-sm-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-sm-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 class="col-sm-10">
                                            <label for="Patient_specify" class="form-label">Other (specify):</label>
                                            <input type="text" name="Patient_specify" id="Patient_specify"
                                                class="form-control">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <h3 class="subTb-header">Immunization (inj ATT)</h3>
                                        <div class="col-sm-3">

                                            <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 class="col-sm-3">

                                            <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 class="row mb-3">
                                        <h3 class="subTb-header">Previous Obstetrical History</h3>
                                        <section id="child-container">

                                        </section>

                                    </div>

                                    <div class="row mb-3">
                                        <h3 class="subTb-header">Investigation</h3>
                                        <div class="col-sm-2">

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


                                        </div>
                                        <div class="col-sm-2">
                                            <label for="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-sm-3">

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


                                        </div>
                                        <div class="col-sm-2">
                                            <label for="HBsAg_result" class="form-label">HBsAg Result</label>
                                            <Select class="form-control" id="HBsAg_result" name="HBsAg_result">
                                                <option value=""></option>
                                                <option value="Positive">Positive</option>
                                                <option value="Negative">Negative</option>
                                                <option value="UnKnow">Unknow</option>
                                            </Select>
                                        </div>
                                        <div class="col-sm-3">

                                            <label for="Anti_HCV_tested_date" class="form-label">Anti HCV Tested Date</label>
                                            <div class="date-holder">
                                                <input type="text" id="Anti_HCV_tested_date" name="Anti_HCV_tested_date"
                                                    class="form-control Gdate" placeholder="dd-mm-yyyy">
                                                <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                            </div>


                                        </div>
                                        <div class="col-sm-2">
                                            <label for="Anti_HCV_result" class="form-label">Anti HCV result</label>
                                            <Select class="form-control" id="Anti_HCV_result" name="Anti_HCV_result">
                                                <option value=""></option>
                                                <option value="Positive">Positive</option>
                                                <option value="Negative">Negative</option>
                                                <option value="UnKnow">Unknow</option>
                                            </Select>
                                        </div>
                                        {{-- <div class="col-sm-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-sm-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-sm-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-sm-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-sm-3">

                                            <label for="Syphilis_RDT_tested_date" class="form-label">Syphilis RDT Tested
                                                Date</label>
                                            <div class="date-holder">
                                                <input type="text" id="Syphilis_RDT_tested_date"
                                                    name="Syphilis_RDT_tested_date" class="form-control Gdate"
                                                    placeholder="dd-mm-yyyy">
                                                <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                            </div>


                                        </div>
                                        <div class="col-sm-2">
                                            <label for="SyphilisRDT_Result" class="form-label">Syphilis RDT Result</label>
                                            <Select class="form-control" id="SyphilisRDT_Result" name="SyphilisRDT_Result">
                                                <option value=""></option>
                                                <option value="Reactive">Reactive</option>
                                                <option value="Non-reactive">Non-reactive</option>
                                            </Select>
                                        </div>
                                        {{-- <div class="col-sm-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-sm-3">

                                            <label for="Syphilis_RDT_tested_date" class="form-label">Syphilis RPR Tested
                                                Date</label>
                                            <div class="date-holder">
                                                <input type="text" id="Syphilis_RPR_tested_date"
                                                    name="Syphilis_RPR_tested_date" class="form-control Gdate"
                                                    placeholder="dd-mm-yyyy">
                                                <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                            </div>


                                        </div>
                                        <div class="col-sm-2">
                                            <label for="SyphilisRPR_Result" class="form-label">Syphilis RPR Result</label>
                                            <input type="text" name="SyphilisRPR_Result" id="SyphilisRPR_Result" class="form-control">
                                        </div>
                                        <div class="col-sm-1">
                                            <label for="Diabetes" class="form-label">Blood Group</label>
                                            <select class="form-control" id="Blood_Group" name="Blood_Group">
                                                <option value=""></option>
                                                <option value="A+">A+</option>
                                                <option value="A-">A-</option>
                                                <option value="B+">B+</option>
                                                <option value="B-">B-</option>
                                                <option value="AB+">AB+</option>
                                                <option value="AB-">AB-</option>
                                                <option value="O+">O+</option>
                                                <option value="O-">O-</option>
                                                <option value="Unknown">Unknown</option>
                                                
                                            </select>
                                        </div>
                                        <div class="col-sm-3">
                                            <label for="Blood_Group_Rh_tested_date" class="form-label">Blood Group and Rh
                                                Tested Date</label>
                                            <div class="date-holder">
                                                <input type="text" id="Blood_Group_Rh_tested_date"
                                                    name="Blood_Group_Rh_tested_date" class="form-control Gdate"
                                                    placeholder="dd-mm-yyyy">
                                                <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                            </div>


                                        </div>
                                        <div class="col-sm-3">

                                            <label for="Blood_Sugar_tested_date" class="form-label">Blood Sugar Tested
                                                Date</label>
                                            <div class="date-holder">
                                                <input type="text" id="Blood_Sugar_tested_date"
                                                    name="Blood_Sugar_tested_date" class="form-control Gdate"
                                                    placeholder="dd-mm-yyyy">
                                                <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                            </div>

                                        </div>
                                        <div class="col-sm-2">
                                            <label class="form-label">Blood Sugar Result</label>
                                            <input type="text" class="form-control" id="Blood_Sugar_result"
                                                name="Blood_Sugar_result">
                                        </div>
                                        <div class="col-sm-3">
                                    <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-sm-2">
                                    <label for="delivery_date" class="form-label">CDK Distributed Date</label>
                                    <div class="date-holder">
                                        <input type="text" id="delivery_date" name="delivery_date"
                                            class="form-control Gdate" placeholder="dd-mm-yyyy" disabled>
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>



                                <div class="col-sm-2">
                                    <label for="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-sm-2">
                                    <label for="refer_date" class="form-label">Referral Date</label>
                                    <div class="date-holder">
                                        <input type="text" id="refer_date" name="refer_date" class="form-control Gdate" disabled
                                            placeholder="dd-mm-yyyy">
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <label for="Referral_Place" class="form-label">Referral Place</label>
                                    <select class="form-control" id="Referral_Place" name="Referral_Place" disabled>
                                        <option value=""></option>
                                        <option value="TBA">TBA</option>
                                        <option value="RHC/UHC">RHC/UHC</option>
                                        <option value="Hospital">Hospital</option>
                                    </select>
                                </div>

                                        {{-- <div class="col-sm-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-sm-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-sm-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-sm-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-sm-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-sm-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="d-flex justify-content-center">
                                        <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;">
                        <h2 class="header-text">Follow Up Visits</h2>
                        <div class="row">
                            <div class="col-sm-2">
                                <button class="btn btn-primary" id="toRegister">To Register</button>
                            </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-sm-2">
                                    <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 class="col-sm-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>
                            <div class="row">
                                <div class="col-sm-4 border p-3">
                                    <div class="row">
                                        <h2 class="header-text">
                                            Blood Pressure
                                        </h2>
                                        <div class="col-sm-6">
                                            <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-sm-6">
                                            <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>

                                </div>
                                <div class="col-sm-8 border p-3">
                                    <div class="row">
                                        <h2 class="header-text">Urine</h2>
                                        <div class="col-sm-3">
                                            <label for="" class="form-label">Pr</label>
                                            <select name="pr_follow" id="pr_follow" class="form-select">
                                                <option value="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-sm-3">
                                            <label for="" class="form-label">Glu</label>
                                            <select name="glu_follow" id="glu_follow" class="form-select">
                                                <option value="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-sm-6"><label for="" class="form-label">Other</label>
                                            <input type="text" class="form-control" name="urine_other"
                                                id="urine_other"></label>
                                        </div>
                                    </div>


                                </div>
                                {{-- <div class="col-sm-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-sm-2"><label for="" class="form-label">Gestational period
                                        (week)</label>
                                    <input type="text" class="form-control" name="gestational_peirod"
                                        id="gestational_peirod"></label>
                                </div>
                                <div class="col-sm-2"><label for="" class="form-label">Fundal Height (cm)</label>
                                    <input type="number" class="form-control" name="fundal_height"
                                        id="fundal_height"></label>
                                </div>
                                <div class="col-sm-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-sm-2">
                                    <label for="Engagement" class="form-label">Engagement</label>
                                    <input type="text" class="form-control" id="Engagement" name="Engagement">
                                </div>
                                <div class="col-sm-2">
                                    <label for="FHS" class="form-label">FHS</label>
                                    <input type="text" class="form-control" id="FHS" name="FHS">
                                </div>
                                <div class="col-sm-2">
                                    <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-sm-2">
                                    <label for="FHS" class="form-label">RPR recheck</label>
                                    <input type="text" class="form-control" id="rpr_rechack" name="rpr_rechack">
                                </div>
                                <div class="col-sm-4">
                                    <label for="Complaints" class="form-label">Complaints</label>
                                    <input type="text" class="form-control" id="Complaints" name="Complaints">
                                </div>
                                <div class="col-sm-6">
                                    <label for="Treatment" class="form-label">Treatment</label>
                                    <input type="text" class="form-control" id="Treatment" name="Treatment">
                                </div>
                                <div class="col-sm-10">
                                    <label for="FHS" class="form-label">USG result</label>
                                    <input type="text" class="form-control" id="usg_result" name="usg_result">
                                </div>
                                
                                <div class="col-sm-2">
                                    <label for="FHS" class="form-label">MD Name</label>
                                    <input type="text" class="form-control" id="md_name" name="md_name">
                                </div>
                                {{-- <div class="col-sm-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="d-flex justify-content-center">
                                <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-sm-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-sm-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-sm-3">
                                <label for="from_date" class="form-label">From Date</label>


                                <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 class="col-sm-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-sm-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>
    let childCount = 0;
    // Function to clear follow-up form fields
    function refreshFollowUpForm() {
        $('#fup_rowID').val('0'); // Reset ID for new entry
        $("#ancFollowupForm .row input,#ancFollowupForm .row select").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 childInsert(childData) {
        childCount = 0;
        childData.forEach((data, index) => {
            childCreate(); // create child section dynamically


            $(`#TA_prem_${index + 1}`).val(data.TA_prem);
            $(`#Spont_Induced_${index + 1}`).val(data.Spont_Induced);
            $(`#stage_complication_${index + 1}`).val(data.stage_complication);
            $(`#Condition_child_${index + 1}`).val(data.Condition_child);
            $(`#Other_Remark_${index + 1}`).val(data.Other_Remark);
            $(`#child_update_id${index + 1}`).val(data.id);


            if (index + 1 === childData.length) {
                let button = `
                    <div class="col-sm-2 from-db-row">
                        <li class="btn btn-danger from-db" onclick="deleteChild(this)" data-id="${data.id}">Delete</li>
                        <li class="btn btn-info" onclick="addChild()">Add Child</li>
                    </div>
                `;

                $(`#child_${index + 1}`).append(button);
            }


        });



    }

    function deleteChild(button) {
        let id = $(button).data('id');
        let g_status = $("#G_status").val();
        if (!confirm('Are you sure you want to delete this child record?')) {
            return;
        }

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

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

    function addChild() {

        childCreate()
        $(".add-current").remove();
        $(".anc-child-row .btn-info").remove();
        let button = `
            <div class="col-sm-2 add-current">
                <li type="button" class="btn btn-danger" onclick="removeChildRow()">Delete</li>
                <li type="button" class="btn btn-info" onclick="addChild()">Add Child</li>
            </div>
        `;
        $(".anc-child-row:last-child").append(button);
        $(".anc-child-row:last-child").addClass('current-add-row');
        let g_status_value = Number($("#G_status").val());
        $(`.anc-child-row:last-child #child_update_id${g_status_value}`).remove();
        $("#G_status").val(g_status_value + 1);

    }

    function removeChildRow() {
        console.log('hello remove')
        $(".anc-child-row:last-child").remove();
        childCount--;
        let button = `
            <div class="col-sm-2 add-current">
                <li type="button" class="btn btn-danger" onclick="removeChildRow()">Delete</li>
                <li type="button" class="btn btn-info" onclick="addChild()">Add Child</li>
            </div>
        `;
        if ($(".anc-child-row:last-child").hasClass('current-add-row')) {
            $(".anc-child-row:last-child").append(button);
        } else {
            let button = `<li type="button" class="btn btn-info" onclick="addChild()">Add Child</li>`
            $(".anc-child-row:last-child .from-db-row").append(button);
        }




        let g_status_value = Number($("#G_status").val());
        $("#G_status").val(g_status_value - 1);
    }


    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) {
                    $('.register-btn').prop('disabled', false)
                    $("#remove_register").attr({
                        "data-id": registerData.id,
                        "data-delete": 'Register',
                        "data-vdate": registerData.Registered_date,
                        "data-pid": registerData.Pid
                    });
                    $("#ancForm input, #ancForm select,#ancForm textarea").each(function() {
                        let key = $(this).attr("name");
                        $(this).val(registerData[key]);
                    });
                    deliverDate();// on/off
                    referOnoff();
                    $("#child-container").empty();
                    childInsert(registerData.anc_child);

                    if (registerData.anc_child.length != 0) {
                        $("#G_status").prop('disabled', true)
                    } else {
                        $("#G_status").prop('disabled', false)
                    }

                    $('#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);

                    $("#register_history tbody").empty();

                    DateTo_text();
                    registerHis.forEach(item => {

                        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))}">Detail</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();
                        }

                    });
                }
                if (ptinfo.Gender == "Male") {
                    $('.register-btn').prop('disabled', true);
                }

                $('#pt_info').val(
                    `👤 Name: ${ptinfo.Name} • 🚻 Sex: ${ptinfo.Gender} • 🎂 Age: ${ptinfo['Current Agey']} yrs`
                );

                // 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.Pid)),
                            $("<td class='pt-1'>").html(`
                                <button class="btn btn-primary follow-show" onclick="fetchFollowvisit(${safeText(item.id)})">Detail</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(),
            
            pr_follow: $('#pr_follow').val(),
            glu_follow: $('#glu_follow').val(),
            gestational_peirod: $('#gestational_peirod').val(),
            fundal_height: $('#fundal_height').val(),
            urine_other: $('#urine_other').val(),
            rpr_rechack: $('#rpr_rechack').val(),
            
            
            
            md_name: $('#md_name').val(),
            usg_result: $('#usg_result').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 childCreate() {
        childCount++;
        let childHTML = `
            <div class="row  anc-child-row  justify-content-center border border-1 p-2" id="child_${childCount}">
                <div class="col-sm-1 mt-5">
                    <h2 for="" class="subTb-header">${childCount}.</label>
                </div>
                <div class="col-sm-2">
                    <label for="TA_prem_${childCount}" class="form-label">TA/Prem</label>
                    <select name="TA_prem_${childCount}" id="TA_prem_${childCount}" class="form-select">
                        <option value=""></option>
                        <option value="TA">TA</option>
                        <option value="Prem">Prem</option>
                    </select>
                </div>

                <div class="col-sm-2">
                    <label for="Spont_Induced_${childCount}" class="form-label">Spont/Induced</label>
                    <select name="Spont_Induced_${childCount}" id="Spont_Induced_${childCount}" class="form-select">
                        <option value=""></option>
                        <option value="Spont">Spont</option>
                        <option value="Induced">Induced</option>
                    </select>
                </div>

                <div class="col-sm-3">
                    <label for="stage_complication_${childCount}" class="form-label">3rd stage complication</label>
                    <input type="text" class="form-control" id="stage_complication_${childCount}" name="stage_complication_${childCount}">
                </div>

                <div class="col-sm-2">
                    <label for="Condition_child_${childCount}" class="form-label">Condition of child</label>
                    <select name="Condition_child_${childCount}" id="Condition_child_${childCount}" class="form-select">
                        <option value=""></option>
                        <option value="Stillbirth">Stillbirth</option>
                        <option value="Alive">Alive</option>
                        <option value="End">End</option>
                    </select>
                </div>

                <div class="col-sm-2">
                    <label for="Other_Remark_${childCount}" class="form-label">Remark</label>
                    <input type="text" class="form-control" id="Other_Remark_${childCount}" name="Other_Remark_${childCount}">
                </div>
                <input type='hidden' name='child_update_id${childCount}' id='child_update_id${childCount}'>
            </div>
        `;

        $("#child-container").append(childHTML);
    }

    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(),
            
            pr_follow: $('#pr_follow').val(),
            glu_follow: $('#glu_follow').val(),
            gestational_peirod: $('#gestational_peirod').val(),
            fundal_height: $('#fundal_height').val(),
            urine_other: $('#urine_other').val(),
            rpr_rechack: $('#rpr_rechack').val(),
           
            md_name: $('#md_name').val(),
            usg_result: $('#usg_result').val(),
        };

        console.log(followUpData);

        $.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 || '');
                    

                    $('#pr_follow').val(response.pr_follow || '');

                    $('#glu_follow').val(response.glu_follow || '');

                    $('#urine_other').val(response.urine_other || '');

                    $('#gestational_peirod').val(response.gestational_peirod || '');
                    $('#fundal_height').val(response.fundal_height || '');
                    $('#rpr_rechack').val(response.rpr_rechack || '');
                    $('#usg_result').val(response.usg_result || '');

                   
                    $('#md_name').val(response.md_name || '');



                    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);
            }
        });
    }

    function deliverDate() {
        let distribtion_date = $('#Clean_Delivery_Kit_Distribution').val();
        if (distribtion_date == "Yes") {
            $('#delivery_date').prop('disabled', false)
        } else {
            $('#delivery_date').prop('disabled', true)
        }
    }
    function referOnoff(){
        let referYes = $('#Refer').val();
        if (referYes == "Yes") {
            $('#refer_date').prop('disabled', false);
            $('#Referral_Place').prop('disabled', false);
        } else {
            $('#refer_date').prop('disabled', true);
            $('#Referral_Place').prop('disabled', true);
        }
        }
</script>