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


<div class="container containers">
    @csrf
    <div class="position-relative bg-darkblue py-2">
        <ul class="nav nav-tabs toggle custom-tab-bar" id="">
        <li class="nav-item">
                <a class="nav-link active toggle-link " data-toggle="pill" href="#feed">Register</a>
        </li>
        <li class="nav-item">
                <a class="nav-link toggle-link " data-toggle="pill" href="#history">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: 35%; transform: translateY(-50%); pointer-events: none;">
            <div class="title-badge">
                Feeding Center Register
            </div>
        </div>
    </div>

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

        <div class="tab-pane active container containers card-body" id="feed">
            <!-- Register Section -->
            
                <div class="" id="registerSection">
                    <div class="row">
                        <div class="col-sm-2">
                            <button type="Button" id="fupsectionBtn" disabled class="btn btn-warning fupshow-btn">Go to Follow Up</button>
                        </div>
                        <div class="col-sm-2">
                            <button type="Button" id="register_history" disabled class="btn btn-warning">Register Histroy</button>
                        </div>
                        <div class="col-sm-1">
                            <button class="btn btn-success" onclick="refresh()">Refresh</button>
                        </div>
                    </div>
           <form id="feedingForm" action="/FeedingCenter/feeding_register">
                    <div class="row">
                        <div class="col-sm-2" style="display: none;">
                            <input type="number" name="register_rowID" value="0" id='rowID'>
                        </div>
                        <div class="col-sm-2">
                            <label for="Date_of_admission">Date of admission</label>
                            <div class="date-holder">
                                <input type="text"
                                    id="Date_of_admission" name="Date_of_admission" 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="General_ID">General ID</label>
                            <input type="number" name="Pid" id="Pid" class="form-control" />
                        </div>
                        <div class="col-sm-1" style="padding-top: 35px;Height:100px;">
                            <button type="Button" id="searchBtn" class="btn btn-info search-btn">Search</button>
                        </div>
                         <div class="col-sm-2">
                            <label for="Feeding_ID">Feeding Center ID</label>
                            <input type="text" name="Feeding_ID" id="Feeding_ID" class="form-control" />
                        </div>
                        <div class="col-sm-5">
                            <label for="Name_of_Patient">Patient's Info:</label>
                            <input type="text" name="pt_info" id="pt_info" class="form-control" disabled />

                        </div>
                        
                       
                    </div>
                    <div class="row clearForm">
                        <div class="col-sm-2">
                            <label for="Patient_Type">Patient Type</label>
                            <select name="Patient_Type" id="Patient_Type" class="form-control">
                                <option value=""></option>
                                <option value="ART">ART</option>
                                <option value="ART+TB">ART+TB</option>
                                <option value="PHA">PHA</option>
                                <option value="PHA+TB">PHA+TB</option>
                                <option value="General">General</option>
                                <option value="General+TB">General+TB</option>
                                <option value="ANC">ANC</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <label for="Diagnosis">Diagnosis</label>
                            <select name="Diagnosis" id="Diagnosis" class="form-control">
                                <option value=""></option>
                                <option value="MAM">MAM </option>
                                <option value="SAM without medical complication">SAM without medical complication</option>
                                <option value="SAM with medical complication">SAM with medical complication</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <label for="Enter_from">Enter from</label>
                            <select name="Enter_from" id="Enter_from" class="form-control">
                                <option value=""></option>
                                <option value="MCH clinic">MCH clinic</option>
                                <option value="Outreach">Outreach</option>
                                <option value="FC staff">FC staff</option>
                                <option value="Hospital">Hospital</option>
                                <option value="Self">Self</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>

                        <div class="col-sm-2">
                            <label for="Distance_to_clinicMile">Distance to clinic(Mile)</label>
                            <select name="Distance_to_clinicMile" id="Distance_to_clinicMile" class="form-control">
                                <option value=""></option>
                                <option value="A= 0 - 5 miles">A= 0 - 5 miles</option>
                                <option value="B=5 to 10 miles">B=5 to 10 miles</option>
                                <option value="C=>10 miles">C=>10 miles</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <label for="Screening_Criteria">Screening Criteria</label>
                            <select name="Screening_Criteria" id="Screening_Criteria" class="form-control">
                                <option value=""></option>
                                <option value="1.Children 6 to 59 month">1.Children 6 to 59 month</option>
                                <option value="2. PLW">2. PLW</option>
                                <option value="3.Patients with chronic disease">3.Patients with chronic disease</option>
                                <option value="4. Children <6 month or >59 month">4. Children <6 month or>59 month</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <label for="Admission_Type">Admission Type</label>
                            <select name="Admission_Type" id="Admission_Type" class="form-control">
                                <option value=""></option>
                                <option value="New">New</option>
                                <option value="Relaps">Relaps</option>
                                <option value="Readmission">Readmission</option>
                                <option value="Internal Transfer">Internal Transfer</option>
                            </select>
                        </div>
                        <div class="dropdown col-sm-2">
                            <button class="btn btn-secondary dropdown-toggle cbs-serviceTK"
                                type="button"
                                id="dropdownMenuButton"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                                Medical Complication
                            </button>
                            <div class="dropdown-menu"
                                id="cbs_Check"
                                aria-labelledby="dropdownMenuButton">
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        onchange="cbs_check()"
                                        name="anorexia"
                                        value="1"
                                        id="mc_anorexia"
                                        data-value="Anorexia (no appetite)"> Anorexia (no appetite)
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        onchange="cbs_check()"
                                        name="intractable_vomitting"
                                        value="1"
                                        id="mc_intractable"
                                        data-value="Intractable vomitting"> Intractable vomitting
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        onchange="cbs_check()"
                                        id="mc_convulsions"
                                        name="convulsions"
                                        value="1"
                                        data-value="Convulsions"> Convulsions
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        onchange="cbs_check()"
                                        name="lethargy"
                                        value="1"
                                        id="mc_lethargy"
                                        data-value="Lethargy (not alert)"> Lethargy (not alert)
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        id="mc_unconsciousness"
                                        name="unconsciousness"
                                        onchange="cbs_check()"
                                        value="1"
                                        data-value="Unconsciousness"> Unconsciousness
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        id="mc_LRTI"
                                        name="lrti"
                                        value="1"
                                        onchange="cbs_check()"
                                        data-value="LRTI"> LRTI
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        id="mc_highfever"
                                        name="high_fever"
                                        onchange="cbs_check()"
                                        value="1"
                                        data-value="High fever"> High fever
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        id="mc_severe_dehydration"
                                        onchange="cbs_check()"
                                        name="severe_dehydration"
                                        value="1"
                                        data-value="Severe dehydration"> Severe dehydration
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        id="mc_severe_anemia"
                                        name="severe_anaemia"
                                        onchange="cbs_check()"
                                        value="1"
                                        data-value="Severe anaemia"> Severe anaemia
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        id="mc_hypoglycemia"
                                        onchange="cbs_check()"
                                        name="hypoglycemia"
                                        value="1"
                                        data-value="Hypoglycemia"> Hypoglycemia
                                </label>
                                <label class="dropdown-item">
                                    <input type="checkbox"
                                        id="mc_hypothermia"
                                        name="hypothermia"
                                        onchange="cbs_check()"
                                        value="1"
                                        data-value="Hypothermia"> Hypothermia
                                </label>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <textarea id="Medical_complications" name="medical_complications" class="feeding-medical freeze-body  form-control" style="margin-top: 20px;"></textarea>
                        </div>
                        <div class="col-sm-2">
                            <label for="FINAL_MUAC">FINAL MUAC</label>
                            <select name="FINAL_MUAC" id="FINAL_MUAC" class="form-control">
                                <option value=""></option>
                                <option value="Red &lt;115mm">Red &lt;115mm </option>
                                <option value="Yellow(115 to 125mm)">Yellow (115 to125mm)</option>
                                <option value="Green &gt;125mmn">Green &gt;125mm</option>
                            </select>
                        </div>
                        <div class="col-sm-1">
                            <label for="MUAC">MUAC (mm)</label>
                            <input type="text" name="MUAC" id="MUAC" class="form-control" />
                        </div>

                        <div class="col-sm-1">
                            <label for="Z_score">Z-score</label>
                            <select name="Z_score" id="Z_score" class="form-control">
                                <option value=""></option>
                                <option value="&lt;-3z">&lt;-3z</option>
                                <option value="&gt;-2z">&gt;-2z</option>
                                <option value="between">between</option>
                            </select>
                        </div>

                        <div class="col-sm-1">
                            <label for="Weight">Weight (kg)</label>
                            <input type="number" name="Weight" step="0.01" min="0" id="Weight" class="form-control" />
                        </div>
                        <div class="col-sm-1">
                            <label for="Height">Height (cm)</label>
                            <input type="number" name="Height" id="Height" step="0.01" min="0" class="form-control" />
                        </div>
                        <div class="col-sm-3">
                            <label for="Clinical">Clinical</label>
                            <select name="Clinical" id="Clinical" class="form-control">
                                <option value=""></option>
                                <option value="Oedema of feet">Oedema of feet</option>
                                <option value="Oedema of face">Oedema of face</option>
                                <option value="Oedema of feet & face">Oedema of feet & face</option>
                                <option value="Absence of oedema">Absence of oedema</option>
                                <option value="Absence of acute medical problem">Absence of acute medical problem</option>
                            </select>
                        </div>

                        <div class="col-sm-4">
                            <label for="Others">Others</label>
                            <input type="text" name="Others" id="Others" class="form-control" />
                        </div>

                    </div>
                    <div class="row clearForm card-body">
                        <div class="col-sm-2">
                            <label for="Date_of_transfer_to_ATFP">Date of transfer to ATFP</label>
                            <div class="date-holder">
                                <input type="text"
                                    name="Date_of_transfer_to_ATFP" id="Date_of_transfer_to_ATFP" 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="Date_of_Discharge">Date of Discharge</label>
                            <div class="date-holder">
                                <input type="text"
                                    name="Date_of_Discharge" id="Date_of_Discharge" class="form-control Gdate" placeholder="dd-mm-yyyy">
                                <img src="../img/calendar3.svg" class="dateimg" alt="date">
                            </div>
                        </div>
                        <div class="col-sm-1">
                            <label for="MUAC">MUAC (mm)</label>
                            <input type="text" name="MUAC1" id="MUAC1" class="form-control" />
                        </div>

                        <div class="col-sm-1">
                            <label for="Z_score">Z-score</label>
                            <select name="Z_score1" id="Z_score1" class="form-control">
                                <option value=""></option>
                                <option value="&lt;-3z">&lt;-3z</option>
                                <option value="&gt;-2z">&gt;-2z</option>
                                <option value="between">between</option>
                            </select>
                        </div>

                        <div class="col-sm-1">
                            <label for="Weight">Weight (kg)</label>
                            <input type="number" name="Weight1" step="0.01" min="0" id="Weight1" class="form-control" />
                        </div>
                        <div class="col-sm-1">
                            <label for="Height1">Height (cm)</label>
                            <input type="number" name="Height1" step="0.01" min="0" id="Height1" class="form-control" />
                        </div>
                        <div class="col-sm-3">
                            <label for="Clinical1">Clinical.1</label>
                            <select name="Clinical1" id="Clinical1" class="form-control">
                                <option value=""></option>
                                <option value="Oedema of feet">Oedema of feet</option>
                                <option value="Oedema of face">Oedema of face</option>
                                <option value="Oedema of feet & face">Oedema of feet & face</option>
                                <option value="Absence of oedema">Absence of oedema</option>
                                <option value="Absence of acute medical problem">Absence of acute medical problem</option>
                            </select>
                        </div>

                        <div class="col-sm-4">
                            <label for="Others1">Others.1</label>
                            <input type="text" name="Others1" id="Others1" class="form-control" />
                        </div>
                    </div>
                    <div class="row clearForm card-body">
                        <div class="col-sm-2">
                            <label for="Outcome">Outcome</label>
                            <select name="Outcome" id="Outcome" class="form-control">
                                <option value=""></option>
                                <option value="Discharged">Discharged</option>
                                <option value="Defaulter">Defaulter</option>
                                <option value="Non-responder">Non-responder</option>
                                <option value="Refer to hospital">Refer to hospital</option>
                                <option value="Still on FC">Still on FC</option>
                                <option value="Transfer Out">Transfer Out</option>
                                <option value="Death">Death</option>
                            </select>
                        </div>

                        <div class="col-sm-3">
                            <label for="Hospital_Outcome">Hospital Outcome</label>
                            <select name="Hospital_Outcome" id="Hospital_Outcome" class="form-control">
                                <option value=""></option>
                                <option value="Cured">Cured</option>
                                <option value="Expired">Expired</option>
                                <option value="Return to clinic">Return to clinic</option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <label for="Length_of_Stay_in">Length of Stay in Day care (days)</label>
                            <input type="number" name="Length_of_Stay_in" id="Length_of_Stay_in" class="form-control" />
                        </div>
                        <div class="col-sm-2">
                            <label for="Total_Length_of_Stay_days_">Total Length of Stay(days)</label>
                            <input type="number" name="Total_Length_of_Stay_days_" id="Total_Length_of_Stay_days_" class="form-control" />
                        </div>
                        <div class="col-sm-2">
                            <label for="Parents_Status">Parent's Status</label>
                            <select name="Parents_Status" id="Parents_Status" class="form-control">
                                <option value=""></option>
                                <option value="Both alive">Both alive</option>
                                <option value="Single Mother">Single Mother</option>
                                <option value="Single Father">Single Father</option>
                                <option value="Orphan">Orphan</option>
                            </select>
                        </div>

                        <div class="col-sm-2">
                            <label for="Parent_HIV_status">Parent HIV status</label>
                            <select name="Parent_HIV_status" id="Parent_HIV_status" class="form-control">
                                <option value=""></option>
                                <option value="Both Positive">Both Positive</option>
                                <option value="Both Negative">Both Negative</option>
                                <option value="Mother only positive">Mother only positive</option>
                                <option value="Father only positive">Father only positive</option>
                            </select>
                        </div>

                        <div class="col-sm-2">
                            <label for="Caretaker">Caretaker</label>
                            <select name="Caretaker" id="Caretaker" class="form-control">
                                <option value=""></option>
                                <option value="Mother">Mother</option>
                                <option value="Father">Father</option>
                                <option value="Grandmother">Grandmother</option>
                                <option value="Grandfather">Grandfather</option>
                                <option value="Elder sister">Elder sister</option>
                                <option value="Elder brother">Elder brother</option>
                                <option value="Aunty">Aunty</option>
                                <option value="Uncle">Uncle</option>
                                <option value="Other(neighbour)">Other(neighbour)</option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <label for="Remark">Remark</label>
                            <input type="text" name="Remark" id="Remark" class="form-control" />
                        </div>
                        <div class="col-sm-1">
                            <label for="MUAC_Colour">MUAC Colour</label>
                            <select name="MUAC_Colour" id="MUAC_Colour" class="form-control">
                                <option value=""></option>
                                <option value="Green">Green</option>
                                <option value="Yellow">Yellow</option>
                                <option value="Red">Red</option>
                                <option value="Orange">Orange</option>
                            </select>
                        </div>

                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-auto px-2">
                            <button type="submit" class="btn btn-primary register-btn">Register</button>
                        </div>
                        <div class="col-auto">
                            <li  class="btn btn-danger Delete-btn" id="register_remove" style="display: none;">Delete</button>
                        </div>
                    </div>
                </div>
            </form>


            <!--Follow Up -->
            <div class="" style="display: none;" id="followUpSection">
                <div class="row">
                    <h3>Follow-up Visit</h3>
                </div>

                <div class="row">
                    <div class="col-sm-12 " id="followUpButtons">
                        <p>Click on the date to view/edit follow-up visit details.</p>
                    </div>
                    <div class="col-sm-2">
                        <label for="Follow_up_visit_date">Follow up visit date</label>
                        <div class="date-holder">
                            <input type="text"
                                name="Follow_up_visit_date" id="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="MUAC_fup">MUAC (mm)</label>
                        <input type="number" name="MUAC_fup" id="MUAC_fup" class="form-control" />
                    </div>
                    <div class="col-sm-2">
                        <label for="Z_score_fup">Z-score</label>
                        <select name="Z_score_fup" id="Z_score_fup" class="form-control">
                            <option value=""></option>
                            <option value="&lt;-3z">&lt;-3z</option>
                            <option value="&gt;-2z">&gt;-2z</option>
                            <option value="between">between</option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <label for="Weight_fup">Weight(kg)</label>
                        <input type="number" name="Weight_fup" step="0.01" min="0" id="Weight_fup" class="form-control" />
                    </div>
                    <div class="col-sm-2">
                        <label for="Height">Height (cm)</label>
                        <input type="number" name="Height_fup" step="0.01" min="0" id="Height_fup" class="form-control" />
                    </div>
                    <div class="col-sm-3">
                        <label for="Clinical1">Clinical</label>
                        <select name="Clinical_fup" id="Clinical_fup" class="form-control">
                            <option value=""></option>
                            <option value="Oedema of feet">Oedema of feet</option>
                            <option value="Oedema of face">Oedema of face</option>
                            <option value="Oedema of feet & face">Oedema of feet & face</option>
                            <option value="Absence of oedema">Absence of oedema</option>
                            <option value="Absence of acute medical problem">Absence of acute medical problem</option>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <label for="Others1">Others</label>
                        <input type="text" name="Others_fup" id="Others_fup" class="form-control" />
                    </div>
                    <div class="col-sm-4">
                        <label for="Remark">Remark</label>
                        <input type="text" name="Remark_fup" id="Remark_fup" class="form-control" />
                    </div>
                    <div class="col-sm-2">
                        <button id="fupSave" class="btn btn-primary fupSave-btn"> Follow Up Save</button>
                        <button id="fupUpdate" style="display:none" class="btn btn-primary fupUpdate-btn"> Follow Up Update</button>
                    </div>
                    <div class="col-sm-2">
                        <button type="Button" id="" class="btn btn-info regshow-btn"> To Register</button>
                    </div>
                </div>
            </div>

            <section id="register_history_section" style="display: none;">
                <h2 class="header-text">Register History</h2>

                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Admission Date</th>
                            <th>General ID</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="feeding_register_hitory">
                    </tbody>

                </table>
                <div class="row" style="justify-content: center;">
                    <div class="col-sm-2">
                        <button type="Button" id="" class="btn btn-info regshow-btn"> To Register</button>
                    </div>
                </div>

            </section>

        </div>
        <div class="tab-pane container containers card-body" id="history">
            <h3 class="header-text">View Follow Up History</h3>
            <br>
            <div class="row">
                <div class="col-sm-2">
                    <input type="number" class="form-control" id="follow_his_search_id" placeholder="Enter General ID" />
                </div>
                <div class="col-sm-2">
                    <button type="Button" id="followHistorySearchBtn" class="btn btn-info">Search</button>
                </div>
            </div>
            <br>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Admission Date</th>
                        <th>Visit Date</th>
                        <th>General ID</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="feeding_follow_hitory">
                </tbody>

            </table>


        </div>
        <div class="tab-pane container containers card-body" id="export">
            <form action="{{ route('FeedingCenter.feeding_export') }}" method="post">
                @csrf
                <h2 class="header-text">Feeding Center Export Section</h2>
                <div class="row">

                    <div class="col-sm-2">
                        <label for="" class="form-label">Export Type</label>
                        <select name="export_type" id="" class="form-select">
                            <option value="Register">Register</option>
                            <option value="FollowUp">Follow Up</option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <label for="" 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>
                        @error('from_date')
                        <div class="alert alert-danger">Please input date</div>
                        @enderror
                    </div>
                    <div class="col-sm-2">
                        <label for="" 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>
                        @error('to_date')
                        <div class="alert alert-danger">Please input date</div>
                        @enderror
                    </div>
                    <div class="col-sm-1 no-margin ">
                        <button class="btn btn-primary lab-export">Export</button>
                    </div>


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


</div>

@endauth
@endsection
<meta name="csrf-token" content="{{ csrf_token() }}">
<script type="text/javascript">
    function cbs_check() {
        $("#Medical_complications").text("");
        var check_text = {};
        $("#cbs_Check input[type='checkbox']").each(function(index) {
            if ($(this).prop('checked')) {
                check_text[$(this).data('value')] = $(this).data('value');

            }
        })
        Object.values(check_text).forEach(value => {
            var cbs_text = $("#Medical_complications").text();
            $("#Medical_complications").html(cbs_text + "\t" + " , " + value);
        });
    }

    function fetchFollowvisit(id) {

        let Rowid = id;
        let Signal = "FetchFollowVisit";
        let data = {
            Rowid: Rowid
        };

        let querystring = new URLSearchParams(data).toString();

        console.log(data);

        // Setup CSRF token for all AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: `/FeedingCenter/feeding-follow-list?${querystring}`,
            type: 'GET',
            data: data,
            success: function(data) {
                console.log(data);
                const followUpData = data;
                if (followUpData) {
                    $('#Follow_up_visit_date').val(followUpData.Visitdate);
                    $('#MUAC_fup').val(followUpData.MUAC);
                    $('#Z_score_fup').val(followUpData.Z_score);
                    $('#Weight_fup').val(followUpData.Weight);
                    $('#Height_fup').val(followUpData.Height);
                    $('#Clinical_fup').val(followUpData.Clinical);
                    $('#Others_fup').val(followUpData.Other);
                    $('#Remark_fup').val(followUpData.Remark);
                    DateTo_text();
                    $('#fupSave').hide(); // Hide the save button
                    const recordId = followUpData.id; // 
                    if (recordId) {
                        $('#fupUpdate').data('record-id', recordId);
                        $('#fupUpdate').show(); // Show the update button
                    } else {
                        console.warn("No 'id' found in the first follow-up record.");
                        $('#fupUpdate').hide(); // Hide if no ID to associate
                    }

                } else {
                    alert('No follow-up visit found for this ID.');
                }
            },
            error: function() {
                alert('Error fetching follow-up visit data.');
            }
        });
    }

    function UpdateFollowupVisit(id) {
        const recordId = $('#fupUpdate').data('record-id'); // Get the record ID from the button data
        const followUpDate = formatDate($('#Follow_up_visit_date').val().trim());
        const muacFup = $('#MUAC_fup').val().trim();
        const zScoreFup = $('#Z_score_fup').val().trim();
        const weightFup = $('#Weight_fup').val().trim();
        const heightFup = $('#Height_fup').val().trim();
        const clinicalFup = $('#Clinical_fup').val().trim();
        const othersFup = $('#Others_fup').val().trim();
        const remarkFup = $('#Remark_fup').val().trim();
        const url = '{{ route("followup-update") }}';

        if (!id) {
            alert('Please enter a General_ID to search.');
            return;
        }
        let data = {
            Follow_up_visit_date: followUpDate,
            MUAC_fup: muacFup,
            Z_score_fup: zScoreFup,
            Weight_fup: weightFup,
            Height_fup: heightFup,
            Clinical_fup: clinicalFup,
            Others_fup: othersFup,
            Remark_fup: remarkFup,
            id: recordId // Include the record ID for update
        };
        console.log(data);
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function(data) {
                console.log(data);
                alert(data.message);
                //$('#feedingForm')[0].reset(); // Optional: clear form
                fetchFollowvisit(id); // Refresh follow-up visits after update
            },
            error: function(xhr) {
                console.error('Error:', xhr.responseText);
                alert('An error occurred while updating the follow-up visit.');
            }
        });
    }

    function printDateChange(date) {
        if (date != "") {
            var dateData = date;
            var dateSplit = dateData.split('-');
            if (dateSplit[0].length > 3) {
                var date_yy = dateSplit[0];
                var date_mm = dateSplit[1];
                var date_dd = dateSplit[2];
                printDate = date_dd + "-" + date_mm + "-" + date_yy;
                return printDate;
            }
            return;
        } else {
            return;
        }
    } //for show date in update 
    function FeedingdataSearch() {
        const id = $('#Pid').val().trim();
        const date_of_admission = $('#Date_of_admission').val().trim();
        $("#register_history,#fupsectionBtn").prop('disabled', true)
        $("#rowID").val(0);
        $(".clearForm input,.clearForm select,#Feeding_ID,#pt_info").val('');
        $("#Medical_complications").text('');
        $('.clearForm input[type="checkbox"]').prop('checked', false).val("1");
        if (!id || !date_of_admission) {
            alert('Please enter a General_ID with Date of Admission to search.');
            return;
        }
        data = {
            id: id,
            date_of_admission: date_of_admission
        }

        let querystring = new URLSearchParams(data).toString();

        $.ajax({
            url: `/FeedingCenter/feeding-confid-search?${querystring}`,
            type: 'GET',
            success: function(data) {
                console.log(data);
                const registerData = data.register;
                const followUps = data.followUps;
                const ptinfo = data.pt_info;
                const register_history = data.register_history;
                if (!ptinfo) {
                    alert('No patient info found. Please check the General ID');
                    $('#feedingForm')[0].reset(); // Clear the form
                    return;
                } else if (data.register) {
                    $("#rowID").val(data.register.id);
                    $('.register-btn').text('Update');
                     $("#register_remove").show();
                    $('#Pid').val(registerData.Pid);
                    $('#Age').val(registerData.Age); 
                    $('#Feeding_ID').val(registerData.Feeding_ID);
                    $('#Age_unit').val(registerData.Age_unit);
                    $('#Date_of_Birth').val(registerData.Date_of_Birth);
                    $('#pt_info').val(`
                            👤 Name: ${ptinfo.Name} • 🚻 Sex: ${ptinfo.Gender} • 🎂 Age: ${ptinfo['Current Agey']} Yrs, ${ptinfo.Agem} Mths
                        `.trim());
                    $('#Patient_Type').val(registerData.Patient_Type);
                    $('#Diagnosis').val(registerData.Diagnosis);
                    $('#Enter_from').val(registerData.Enter_from);
                    $('#Distance_to_clinicMile').val(registerData.Distance_to_clinicMile);
                    $('#Screening_Criteria').val(registerData.Screening_Criteria);
                    $('#Admission_Type').val(registerData.Admission_Type);
                    $('#Date_of_admission').val(registerData.Date_of_admission);
                    $('#FINAL_MUAC').val(registerData.FINAL_MUAC);
                    $('#MUAC').val(registerData.MUAC);
                    $('#Z_score1').val(registerData.Z_score1);
                    $('#Weight1').val(registerData.Weight1);
                    $('#Clinical').val(registerData.Clinical);
                    $('#Others').val(registerData.Others);
                    $('#Date_of_transfer_to_ATFP').val(registerData.Date_of_transfer_to_ATFP);
                    $('#Date_of_Discharge').val(registerData.Date_of_Discharge);
                    $('#MUAC1').val(registerData.MUAC1);
                    $('#Z_score').val(registerData.Z_score);
                    $('#Weight').val(registerData.Weight);
                    $('#Height').val(registerData.Height);
                    $('#Height1').val(registerData.Height1);
                    $('#Clinical1').val(registerData.Clinical1);
                    $('#Others1').val(registerData.Others1);
                    $('#Outcome').val(registerData.Outcome);
                    $('#Hospital_Outcome').val(registerData.Hospital_Outcome);
                    $('#Length_of_Stay_in').val(registerData.Length_of_Stay_in);
                    $('#Total_Length_of_Stay_days_').val(registerData.Total_Length_of_Stay_days_);
                    $('#Parents_Status').val(registerData.Parents_Status);
                    $('#Parent_HIV_status').val(registerData.Parent_HIV_status);
                    $('#Caretaker').val(registerData.Caretaker);
                    $('#Remark').val(registerData.Remark);
                    $('#MUAC_Colour').val(registerData.MUAC_Colour);
                    $('#Day_care__days_').val(registerData.Day_care__days_);

                    $("#Medical_complications").text('');
                    $("#cbs_Check input[type='checkbox']").each(function(index) {
                        if (registerData[$(this).attr('name')] == "1") {
                            let cbs_text_return = $("#Medical_complications").text();
                            $(this).prop('checked', true);
                            $("#Medical_complications").html(cbs_text_return + "\t" + " , " + $(this).data("value"));
                        }
                    })
                    if (registerData.Outcome != null && registerData.Outcome != '')
                        alert('Already Outcome Result')

                    $('#responseMsg').text('Record loaded. You can now update it.');
                    $('#fupsectionBtn').prop('disabled', false); // Disable follow-up button if no visits



                } else {

                    $('#pt_info').val(`
                        👤 Name: ${ptinfo.Name} • 🚻 Sex: ${ptinfo.Gender} • 🎂 Age: ${ptinfo['Current Agey']} Yrs, ${ptinfo.Agem} Mths
                    `.trim());
                    $('.register-btn').text('Register');
                    $("#register_remove").hide();

                    alert('Feeding Center New Patient');
                }
                if (data.register_history) {
                    $("#register_history").prop('disabled', false);
                    registerHistory(data);

                }
                const followUpDiv = $('#followUpButtons');
                followUpDiv.empty(); // clear previous buttons

                if (followUps.length) {
                    followUps.forEach(item => {
                        followUpDiv.append(
                            `<button type="button" class="follow-up-btn btn-success" data-id="${item.id}">${item.Visitdate}</button>`
                        );
                    });

                } else {
                    followUpDiv.append(`<p>No follow-up visits found.</p>`);
                }

                $('#responseMsg').text('Register and follow-up data loaded.');
                DateTo_text();
            },
            error: function() {
                alert('Something wrong please contact admin');
            }
        });
    }

    function FeedingdataRegister() {
        // Setup CSRF token for all AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Handle form submit for Create or Update
        $('#feedingForm').on('submit', function(e) {
            e.preventDefault();

            const generalId = $('#Pid').val().trim();
            const url = '{{ route("feeding_register") }}';
            const method = 'POST'; // Always POST to store()

            $.ajax({
                url: url,
                type: method,
                data: $(this).serialize(),
                success: function(res) {
                    alert(res['message']);
                    $('#fupsectionBtn').prop('disabled', false); // Enable follow-up button if no visits
                },
                error: function(xhr) {
                    console.error('Error:', xhr.responseText);
                    const errors = xhr.responseJSON?.errors;
                    if (errors) {
                        let message = Object.values(errors).flat().join('\n');
                        alert(message);
                    } else {
                        //console.log(xhr.responseText);
                        alert('An error occurred while submitting the form.');
                    }
                }
            });
        });
    }

    function FeedingdataFollowupSave() {
        const Signal = "FollowupSave";
        const id = $('#Pid').val().trim();
        const date_of_admission = $('#Date_of_admission').val().trim();
        const followUpDate = $('#Follow_up_visit_date').val().trim();
        const muacFup = $('#MUAC_fup').val().trim();
        const zScoreFup = $('#Z_score_fup').val().trim();
        const weightFup = $('#Weight_fup').val().trim();
        const heightFup = $('#Height_fup').val().trim();
        const clinicalFup = $('#Clinical_fup').val().trim();
        const othersFup = $('#Others_fup').val().trim();
        const remarkFup = $('#Remark_fup').val().trim();
        const url = '{{ route("feeding_follow") }}';

        if (!id) {
            alert('Please enter a General_ID to search.');
            return;
        }
        let data = {
            Signal: Signal,
            Pid: id,
            Date_of_admission: date_of_admission,
            Follow_up_visit_date: followUpDate,
            MUAC_fup: muacFup,
            Z_score_fup: zScoreFup,
            Weight_fup: weightFup,
            Height_fup: heightFup,
            Clinical_fup: clinicalFup,
            Others_fup: othersFup,
            Remark_fup: remarkFup,
            feeding_register_id:$("#Feeding_ID").val(),
        };
        console.log(data);
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function(data) {
                console.log(data);
                alert(data.message);
                const followUpDiv = $('#followUpButtons');
                followUpDiv.empty(); // clear previous buttons

                if (followUps.length) {
                    followUps.forEach(item => {
                        followUpDiv.append(
                            `<button type="button" class="follow-up-btn" data-id="${item.id}">${item.Visitdate}</button>`
                        );
                    });
                } else {
                    followUpDiv.append(`<p>No follow-up visits found.</p>`);
                }
                //$('#feedingForm')[0].reset(); // Optional: clear form
            },
            error: function(xhr) {
                console.error('Error:', xhr.responseText);
                response = JSON.parse(xhr.responseText);
                alert('An error occurred while saving the follow-up visit. Reason::' + response.message);
            }
        });
    }

    function removeData(target) {
        let removeType = $(target).parent().children().eq(1).val();
        let type = $(target).data('delete');
        if (type == 'Follow') {
            vdate = formatDate($(target).parent().parent().children().eq(2).text());
            Pid = $(target).parent().parent().children().eq(3).text();
        } else {
            vdate = formatDate($(target).parent().parent().children().eq(1).text());
            Pid = $(target).parent().parent().children().eq(2).text();
        }


        let deleteData = {
            Pid: Pid,
            vdate: vdate,
            id: $(target).data('id'),
            type: type
        };
        console.log(deleteData);
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        });
        $.ajax({
            type: 'DELETE',
            url: "{{ route('FeedingCenter.feeding-center-delete') }}",

            dataType: 'json',
            //  processData:false,
            contentType: 'application/json',
            data: JSON.stringify(deleteData),
            success: function(response) {
                alert(response['message']);
               removeFollowHistory();
            }
        })
    } //Followup

    function registerHistory(data) {
        $('#feeding_register_hitory').empty();
        Object.values(data.register_history).forEach(function(value, key) {
            let printDate = printDateChange(value['Date_of_admission']);
            var result_body1 =
                "<tr style='background-color:#A7DBD8;'>" +
                "<td style='color:#000000'>" + (key + 1) + "</td>" +
                "<td style='color:#000000'>" + printDate + "</td>" +
                "<td style='color:#000000'>" + value['Pid'] + "</td>" +
                "<td>" +
                // Add the delete button unconditionally
                "<button class='btn btn-danger' data-delete='Register' data-id='" + value['id'] + "' onclick='removeData(this)'>Delete</button>" +
                "</td></tr>"; // Close the <td> and <tr> tags here

            $("#feeding_register_hitory").append(result_body1);
        });
    }

    function removeFollowHistory(){
         let searchID = {
            Pid: $("#follow_his_search_id").val(),
        };
        let querystring = new URLSearchParams(searchID).toString();
        console.log(querystring);
        $("#feeding_follow_hitory").empty();
        fetch(`/FeedingCenter/follow-history?${querystring}`, {
            method: "GET",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                "Content-Type": "application/json",
            },
        })
            .then((response) => response.json())
            .then((data) => {
                console.log(data);
                Object.keys(data).forEach(function (value, key) {
                    
                    let printDate = printDateChange(value);
                    
                    Object.values(data[value]).forEach(function (history,index) {
                        let visitDate = printDateChange(history["Visitdate"]);
                        console.log(visitDate+'Visit DAte')
                        console.log(printDate+'Admission Date');
                        var result_body1 =
                            "<tr style='background-color:#A7DBD8;'>" +
                            "<td style='color:#000000'>" +
                            (index + 1) +
                            "</td>" +
                            "<td style='color:#000000'>" +
                            printDate +
                            "</td>" +
                            "<td style='color:#000000'>" +
                            visitDate +
                            "</td>" +
                            "<td style='color:#000000'>" +
                            history["Pid"] +
                            "</td>" +
                            "<td>" +
                            "<button  class='btn btn-danger' data-delete='Follow' data-id='" +
                            history["id"] +
                            "' onclick='removeData(this)'>Delete</button>" +
                            "</td>" +
                            "</tr>";

                        $("#feeding_follow_hitory").append(result_body1);
                    });
                });
            });
    }

    function removeRegister(){
        let type = 'Register';
        vdate = formatDate($("#Date_of_admission").val());
        Pid = $("#Pid").val();
        id=$("#rowID").val();

        let deleteData = {
            Pid: Pid,
            vdate: vdate,
            id: id,
            type: type
        };
         $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        });
        $.ajax({
            type: 'DELETE',
            url: "{{ route('FeedingCenter.feeding-center-delete') }}",

            dataType: 'json',
            //  processData:false,
            contentType: 'application/json',
            data: JSON.stringify(deleteData),
            success: function(response) {
                alert(response['message']);
                FeedingdataSearch();
            }
        })
    }
</script>