@extends('layouts.app')
@section('content')
    @auth

        {{-- <script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script> --}}

        <div class="container containers">

            <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="#hbv_register_tab">Register</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link toggle-link " data-toggle="pill" href="#hbv_export">Export</a>
                    </li>
                </ul>

                <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">
                        HBV Register
                    </div>
                </div>
            </div>

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

                {{-- HBV Register Tab --}}

                <div class="tab-pane fade show active p-3" id="hbv_register_tab" role="tabpanel"
                    aria-labelledby="hbv-register-tab">
                    <form action="" id="hbv_register_form">
                        @csrf
                        <div class="row">

                            <!-- Field 1: Genreal ID -->
                            <div class="col-sm-2">
                                <label for="generalId">General ID</label>
                                <input type="number" name="generalId" id="generalId" class="form-control" />
                            </div>

                            <!-- Field 2: Date of registration -->
                            <div class="col-sm-2">
                                <label for="dateOfRegistration">Date of Registration</label>
                                <div class="date-holder">
                                    <input type="text" id="dateOfRegistration" name="dateOfRegistration"
                                        class="form-control Gdate" placeholder="dd-mm-yyyy">
                                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                </div>
                            </div>

                            <div class="col-auto">
                                <input type="button" class="btn btn-primary" id="genera_search" value="Search"
                                    style="margin-top: 39px">
                                <input type="hidden" name="" id="clinic_code">

                            </div>
                            <h4 style="color:yellow;">Patient Demographics</h4>
                            <div class="row">
                                <div class="col-sm-2">
                                    <label for="maritalStatus">Marital status</label>
                                    <select name="maritalStatus" id="maritalStatus" class="form-control">
                                        <option value=""></option>
                                        <option value="Single">Single</option>
                                        <option value="Married">Married</option>
                                        <option value="Divorced">Divorced</option>
                                        <option value="Widow">Widow</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="partnerHivStatus">Partner HIV status</label>
                                    <select name="partnerHivStatus" id="partnerHivStatus" class="form-control">
                                        <option value=""></option>
                                        <option value="Positive">Positive</option>
                                        <option value="Negative">Negative</option>
                                        <option value="Unknown">Unknown</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="partnerHbvStatus">Partner HBV status</label>
                                    <select name="partnerHbvStatus" id="partnerHbvStatus" class="form-control">
                                        <option value=""></option>
                                        <option value="Positive">Positive</option>
                                        <option value="Negative">Negative</option>
                                        <option value="Unknown">Unknown</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="partnerHcvStatus">Partner HCV status</label>
                                    <select name="partnerHcvStatus" id="partnerHcvStatus" class="form-control">
                                        <option value=""></option>
                                        <option value="Positive">Positive</option>
                                        <option value="Negative">Negative</option>
                                        <option value="Unknown">Unknown</option>
                                    </select>
                                </div>

                            </div>
                            <h4 style="color:yellow;">Hepatitis B Risk assessment ( please tick all that apply)</h4>
                            <div class="row">
                                <div class="col-sm-2">
                                    <label for="pwid">PWID</label>
                                    <select name="pwid" id="pwid" class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="ifPwidYes">If PWID Yes,</label>
                                    <select name="ifPwidYes" id="ifPwidYes" class="form-control" disabled>
                                        <option value=""></option>
                                        <option value="Active">Active</option>
                                        <option value="Ex">Ex</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="ifEx_ost">If Ex, OST</label>
                                    <select name="ifEx_ost" id="ifEx_ost" class="form-control" disabled>
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="pwud">PWUD</label>
                                    <select name="pwud" id="pwud" class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="fsw">FSW</label>
                                    <select name="fsw" id="fsw" class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="partnersOf3Kap">Partners of 3-KAP</label>
                                    <select name="partnersOf3Kap" id="partnersOf3Kap" class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="bloodTransfusion">Blood transfusion</label>
                                    <select name="bloodTransfusion" id="bloodTransfusion" class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label for="generalPopulation">General population</label>
                                    <select name="generalPopulation" id="generalPopulation" class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <!-- Field 11: Other -->
                                <div class="col-sm-2">
                                    <label for="other">Other</label>
                                    <input type="text" name="other" id="other" class="form-control" />
                                </div>
                            </div>
                            <h4 style="color:yellow;">HBV,HCV,HIV background information</h4>
                            <div class="row">
                                <!-- Field 3: HBs Ag pos date -->
                                <div class="col-sm-2">
                                    <label for="hbsAgPosDate">HBs Ag pos date</label>
                                    <div class="date-holder">
                                        <input type="text" id="hbsAgPosDate" name="hbsAgPosDate"
                                            class="form-control Gdate" placeholder="dd-mm-yyyy">
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>

                                <!-- Field 4: HCV Ab date -->
                                <div class="col-sm-2">
                                    <label for="hcvAbDate">HCV Ab date</label>
                                    <div class="date-holder">
                                        <input type="text" id="hcvAbDate" name="hcvAbDate" 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="Hcv_Ab_Result">Result</label>
                                    <select name="Hcv_Ab_Result" id="Hcv_Ab_Result" class="form-control">
                                    	<option value=""></option>
                                        <option value="Positive">Positive</option>
                                        <option value="Negative">Negative</option>
                                        <option value="Unknown">Unknown</option>
                                    </select>
                                </div>
                                <!-- Field 12: HIV test date -->
                                <div class="col-sm-2">
                                    <label for="hivTestDate">HIV test date</label>
                                    <div class="date-holder">
                                        <input type="text" id="hivTestDate" name="hivTestDate" class="form-control Gdate"
                                            placeholder="dd-mm-yyyy">
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <label for="Hiv_Result">Result</label>
                                    <select name="Hiv_Result" id="Hiv_Result" class="form-control">
                                    	<option value=""></option>
                                        <option value="Positive">Positive</option>
                                        <option value="Negative">Negative</option>
                                        <option value="Unknown">Unknown</option>
                                    </select>
                                </div>
                            </div>
                            <h4 style="color:yellow;">History of pregnancy and child birth</h4>
                            <div class="row">
                                <!-- Field 5: Gravida -->
                                <div class="col-sm-2">
                                    <label for="gravida">Gravida</label>
                                    <input type="number" name="gravida" id="gravida" class="form-control" />
                                </div>

                                <!-- Field 6: Parity -->
                                <div class="col-sm-2">
                                    <label for="parity">Parity</label>
                                    <input type="text" name="parity" id="parity" class="form-control" />
                                </div>
                                <div class="col-sm-2">
                                    <label for="lmp">LMP</label>
                                    <select name="lmp" id="lmp" class="form-control">
                                        <option value=""></option>
                                        <option value="Known">Known</option>
                                        <option value="Unknown">Unknown</option>
                                    </select>
                                </div>
                                <!-- Field 7: LMP -->
                                <div class="col-sm-2">
                                    <label for="lmp">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>

                                <!-- Field 8: EDD -->
                                <div class="col-sm-2">
                                    <label for="edd">EDD</label>
                                    <div class="date-holder">
                                        <input type="text" id="edd" name="edd" 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="usgScan">USG Scan</label>
                                    <select name="usgScan" id="usgScan" class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <!-- Field 9: USG date -->
                                <div class="col-sm-2">
                                    <label for="usgDate">USG date</label>
                                    <div class="date-holder">
                                        <input type="text" id="usgDate" name="usgDate" class="form-control Gdate"
                                            placeholder="dd-mm-yyyy">
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>


                                <!-- Field 10: EDD by scan -->
                                <div class="col-sm-2">
                                    <label for="eddByScan">EDD by scan</label>
                                    <div class="date-holder">
                                        <input type="text" id="eddByScan" name="eddByScan" class="form-control Gdate"
                                            placeholder="dd-mm-yyyy">
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <!-- Field 13: No. of children alive -->
                                <div class="col-sm-2">
                                    <label for="noOfChildrenAlive">No. of children alive</label>
                                    <input type="number" name="noOfChildrenAlive" id="noOfChildrenAlive"
                                        class="form-control" />
                                </div>

                                <!-- Field 14: No. of children with HBsAg Pos -->
                                <div class="col-sm-2">
                                    <label for="noOfChildrenWithHbsagPos">No. of children with HBsAg Pos</label>
                                    <input type="number" name="noOfChildrenWithHbsagPos" id="noOfChildrenWithHbsagPos"
                                        class="form-control" />
                                </div>

                                <!-- Field 15: Gestational age at registration -->
                                <div class="col-sm-2">
                                    <label for="gestationalAgeAtRegistration">Gestational age at registration</label>
                                    <input type="text" name="gestationalAgeAtRegistration"
                                        id="gestationalAgeAtRegistration" class="form-control" />
                                </div>
                            </div>
                            <h4 style="color:yellow;">Investigations</h4>

                            <div class="row">
                                <!-- Field 16: Date -->
                                <h5 style="color:orange;" class="text-center">Baseline</h5>
                                <div class="col-sm-2">
                                    <label for="date">Date</label>
                                    <div class="date-holder">
                                        <input type="text" id="base_inv_date" name="base_inv_date"
                                            class="form-control Gdate" placeholder="dd-mm-yyyy">
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>

                                <!-- Field 17: AST(U/L) -->
                                <div class="col-sm-2">
                                    <label for="astul">AST(U/L)</label>
                                    <input type="number" name="astul" step="0.01" id="astul" class="form-control" />
                                </div>

                                <!-- Field 18: Platelet count -->
                                <div class="col-sm-2">
                                    <label for="plateletCount">Platelet count</label>
                                    <input type="number" name="plateletCount" step="0.01" id="plateletCount" class="form-control" />
                                </div>

                                <!-- Field 19: APRI -->
                                <div class="col-sm-2">
                                    <label for="apri">APRI</label>
                                    <input type="number" name="apri" step="0.01" id="apri" class="form-control" />
                                </div>

                                <!-- Field 20: ALT(U/L) -->
                                <div class="col-sm-2">
                                    <label for="altul">ALT(U/L)</label>
                                    <input type="number" name="altul" step="0.01" id="altul" class="form-control" />
                                </div>

                                <!-- Field 21: Creatinine (mg/dl) -->
                                <div class="col-sm-2">
                                    <label for="creatinineMgdl">Creatinine (mg/dl)</label>
                                    <input type="number" name="creatinineMgdl" step="0.01" id="creatinineMgdl" class="form-control" />
                                </div>

                                <!-- Field 22: Cr CL -->
                                <div class="col-sm-2">
                                    <label for="crCl">Cr CL</label>
                                    <input type="number" name="crCl" id="crCl" step="0.01" class="form-control" />
                                </div>

                                <!-- Field 23: HBV VL (if available) -->
                                <div class="col-sm-2">
                                    <label for="hbvVlIfAvailable">HBV VL (if available)</label>
                                    <input type="number" name="hbvVlIfAvailable" id="hbvVlIfAvailable"
                                        class="form-control" />
                                </div>

                                <!-- Field 24: Hbe Ag (if available) -->
                                <div class="col-sm-2">
                                    <label for="hbeAgIfAvailable">Hbe Ag (if available)</label>
                                    <input type="number" name="hbeAgIfAvailable" id="hbeAgIfAvailable"
                                        class="form-control" />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    
                                </div>
                                <div class="col-sm-2">
                                   
                                </div>
                                <div class="col-sm-2">
                                    
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 row">
                                    <h5 style="color:orange;" class="text-center">3 Months after delivery</h5>
                                    <div class="col-sm-4">
                                        <label for="altul1">ALT(U/L)</label>
                                        <input type="number" name="3mth_af_deli_altul1" step="0.01" id="3mth_af_deli_altul1"
                                            class="form-control" />
                                    </div>

                                    <!-- Field 26: Creatinine (mg/dl) -->
                                    <div class="col-sm-4">
                                        <label for="creatinineMgdl1">Creatinine (mg/dl)</label>
                                        <input type="number" name="3mth_af_deli_creatinine" step="0.01" id="3mth_af_deli_creatinine"
                                            class="form-control" />
                                    </div>

                                    <!-- Field 27: Cr CL -->
                                    <div class="col-sm-4">
                                        <label for="crCl1">Cr CL</label>
                                        <input type="number" name="3mth_af_deli_crCl1" step="0.01" id="3mth_af_deli_crCl1"
                                            class="form-control" />
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="eligibleForTreatment">Eligible for treatment</label>
                                        <select name="eligibleForTreatment" id="eligibleForTreatment" class="form-control">
                                            <option value=""></option>
                                            <option value="Yes">Yes</option>
                                            <option value="No">No</option>
                                        </select>
                                    </div>
                                    <!-- Field 30: If Yes,planned date -->
                                    <div class="col-sm-4">
                                        <label for="ifYesplannedDate">If Yes,planned date</label>
                                        <div class="date-holder">
                                            <input type="text" id="ifYesplannedDate" name="ifYesplannedDate"
                                                class="form-control Gdate" placeholder="dd-mm-yyyy">
                                            <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                        </div>
                                    </div>

                                    <!-- Field 31: If No, reason -->
                                    <div class="col-sm-4">
                                        <label for="ifNoReason">If No, reason</label>
                                        <input type="text" name="ifNoReason" id="ifNoReason" class="form-control" />
                                    </div>
                                </div>
                               

                                <!-- Field 25: ALT(U/L) -->


                                <!-- Field 28: ALT(U/L) -->
                                <div class="col-sm-2">
                                     <h5 style="color:orange;" class="text-center">6 Months after delivery</h5>
                                    <label for="6mth_altul2">ALT(U/L)</label>
                                    <input type="number" name="6mth_altul2" step="0.01" id="6mth_altul2" class="form-control" />
                                </div>



                                <!-- Field 29: ALT(U/L) -->
                                <div class="col-sm-2">
                                    <h5 style="color:orange;" class="text-center">9 Months after delivery</h5>
                                    <label for="9mth_altul3">ALT(U/L)</label>
                                    <input type="number" name="9mth_altul3" id="9mth_altul3" step="0.01" class="form-control" />
                                </div>



                            </div>

                        </div>

                        <h4 style="color:yellow;">HBV Treatment Summary</h4>
                        <div class="row">
                            <!-- Field 32: Treatment regimen & Dose -->
                            <div class="col-sm-2">
                                <label for="treatmentRegimenDose">Treatment regimen & Dose</label>
                                <input type="text" name="treatmentRegimenDose" id="treatmentRegimenDose"
                                    class="form-control" />
                            </div>

                            <!-- Field 33: Treatment start date -->
                            <div class="col-sm-2">
                                <label for="treatmentStartDate">Treatment start date</label>
                                <div class="date-holder">
                                    <input type="text" id="treatmentStartDate" name="treatmentStartDate"
                                        class="form-control Gdate" placeholder="dd-mm-yyyy">
                                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                </div>
                            </div>

                            <!-- Field 34: Treatment stopped date -->
                            <div class="col-sm-2">
                                <label for="treatmentStoppedDate">Treatment stopped date</label>
                                <div class="date-holder">
                                    <input type="text" id="treatmentStoppedDate" name="treatmentStoppedDate"
                                        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="patientReceivedCompleteTreatment">Patient received complete treatment</label>
                                <select name="patientReceivedCompleteTreatment" id="patientReceivedCompleteTreatment"
                                    class="form-control">
                                    <option value=""></option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                            <!-- Field 35: If No, reason -->
                            <div class="col-sm-3">
                                <label for="hbv_treatment_ifNoReason">If No, reason</label>
                                <input type="text" name="hbv_treatment_ifNoReason" id="hbv_treatment_ifNoReason"
                                    class="form-control"  disabled/>
                            </div>
                        </div>
                        <h4 style="color:yellow;">Child delivery information</h4>
                        <div class="row">
                            <!-- Field 36: Date -->
                            <div class="col-sm-2">
                                <label for="deliver_date">Date</label>
                                <div class="date-holder">
                                    <input type="text" id="deliver_date" name="deliver_date" class="form-control Gdate"
                                        placeholder="dd-mm-yyyy">
                                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                </div>
                            </div>

                            <!-- Field 37: Time -->
                            <div class="col-sm-2">
                                <label for="child_deliver_time">Time</label>
                                <input type="time" name="child_deliver_time" id="child_deliver_time"
                                    class="form-control" />
                            </div>

                            <!-- Field 38: Place of delivery -->
                            <div class="col-sm-2">
                                <label for="placeOfDelivery">Place of delivery</label>
                                <input type="text" id="placeOfDelivery" name="placeOfDelivery" class="form-control">
                            </div>
                            <div class="col-sm-2">
                                <label for="typeOfDelivery">Type of delivery</label>
                                <select name="typeOfDelivery" id="typeOfDelivery" class="form-control">
                                    <option value=""></option>
                                    <option value="NSVD">NSVD</option>
                                    <option value="OVD">OVD(forceps or vacuum)</option>
                                    <option value="LSCS">LSCS</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <label for="outcomeOfDeliveryBaby">Outcome of delivery (baby)</label>
                                <select name="outcomeOfDeliveryBaby" id="outcomeOfDeliveryBaby" class="form-control">
                                    <option value=""></option>
                                    <option value="Alive">Alive</option>
                                    <option value="Dead">Dead</option>
                                </select>
                            </div>
                        </div>

                        <h4 style="color:yellow;">HBV vaccination status of the baby</h4>
                        <div class="row">
                            <div class="col-sm-2">
                                <label for="HBIG">HBIG</label>
                                <select name="HBIG" id="HBIG" class="form-control">
                                    <option value=""></option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <label for="active_vaccination_baby">If Yes, date</label>
                                <div class="date-holder">
                                    <input type="text" id="active_vaccination_baby" name="active_vaccination_baby"
                                        class="form-control Gdate" placeholder="dd-mm-yyyy" disabled>
                                    <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                </div>
                            </div>
                            <!-- Field 37: Time -->
                            <div class="col-sm-2">
                                <label for="hbv_vaccy_baby_time">Time</label>
                                <input type="time" name="hbv_vaccy_baby_time" id="hbv_vaccy_baby_time"
                                    class="form-control" disabled/>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-sm-4 row">
                                <h5 style="color:orange;" class="text-center">Birth dose within 24hrs after delivery</h5>
                                <div class="col-sm-6">
                                    <label for="24hr_hbvActiveVaccination">HBV active vaccination</label>
                                    <select name="24hr_hbvActiveVaccination" id="24hr_hbvActiveVaccination"
                                        class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-sm-6">
                                    <label for="24hr_dose_after_deliver_date">Date of active vaccination</label>
                                    <div class="date-holder">
                                        <input type="text" id="24hr_dose_after_deliver_date"
                                            name="24hr_dose_after_deliver_date" class="form-control Gdate"
                                            placeholder="dd-mm-yyyy" disabled>
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <!-- Field 39: If Yes, date of active vaccination -->

                            </div>
                            <div class="col-sm-4 row">
                                <h5 style="color:orange;"class="text-center">2nd dose (8 weeks after delivery)</h5>
                                <div class="col-sm-6">
                                    <label for="8week_hbvActiveVaccination">HBV active vaccination</label>
                                    <select name="8week_hbvActiveVaccination" id="8week_hbvActiveVaccination"
                                        class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>

                                <!-- Field 39: If Yes, date of active vaccination -->
                                <div class="col-sm-6">
                                    <label for="8week_after_vaccination_date">Date of active vaccination</label>
                                    <div class="date-holder">
                                        <input type="text" id="8week_after_vaccination_date"
                                            name="8week_after_vaccination_date" class="form-control Gdate"
                                            placeholder="dd-mm-yyyy" disabled>
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 row">
                                <h5 style="color:orange;" class="text-center">3rd dose (16 weeks after delivery)</h5>
                                <div class="col-sm-6">
                                    <label for="16week_hbvActiveVaccination">HBV active vaccination</label>
                                    <select name="16week_hbvActiveVaccination" id="16week_hbvActiveVaccination"
                                        class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <!-- Field 39: If Yes, date of active vaccination -->
                                <div class="col-sm-6">
                                    <label for="16week_after_vaccination_date">Date of active vaccination</label>
                                    <div class="date-holder">
                                        <input type="text" id="16week_after_vaccination_date"
                                            name="16week_after_vaccination_date" class="form-control Gdate"
                                            placeholder="dd-mm-yyyy" disabled>
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">

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

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

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4 row">
                                <h5 style="color:orange;" class="text-center">4th dose (24 weeks after delivery)</h5>
                                <div class="col-sm-6">
                                    <label for="24week_hbvActiveVaccination">HBV active vaccination</label>
                                    <select name="24week_hbvActiveVaccination" id="24week_hbvActiveVaccination"
                                        class="form-control">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-sm-6">
                                    <label for="24week_after_vaccination_date">Date of active vaccination</label>
                                    <div class="date-holder">
                                        <input type="text" id="24week_after_vaccination_date"
                                            name="24week_after_vaccination_date" class="form-control Gdate"
                                            placeholder="dd-mm-yyyy" disabled>
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>

                                </div>
                            </div>

                            <div class="col-sm-2"></div>
                            <div class="col-sm-4 row">
                                <h4 style="color:orange;" class="text-center">HBV status of baby at 9 months after delivery
                                </h4>
                                <div class="col-sm-6">
                                    <label for="date">HBsAG Date</label>
                                    <div class="date-holder">
                                        <input type="text" id="babyHbsAgDate" name="babyHbsAgDate"
                                            class="form-control Gdate" placeholder="dd-mm-yyyy">
                                        <img src="../img/calendar3.svg" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label for="after_9month_result">HBsAG Result</label>
                                    <select name="after_9month_result" id="after_9month_result" class="form-control">
                                        <option value=""></option>
                                        <option value="Positive">Positive</option>
                                        <option value="Negative">Negative</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="row justify-content-start">
                            <div class="col-auto">
                                <input type="hidden" name="id" id="id">
                                <button type="submit" class="btn btn-primary d-none" id="submit"
                                    data-route="{{ route('hbv.store') }}">Save Data</button>
                            </div>
                            <div class="col-auto">
                                <input type="button" class="btn btn-danger d-none delete" id="delete"
                                    value="Delete Data">
                            </div>
                        </div>
                    </form>

                    <div id="confirmModal" class="modal fade" role="dialog">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content text-dark">
                                <div class="modal-header">
                                    <h2 class="modal-title">Confirmation</h2>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <h4 align="center" style="margin:0;">
                                        {{ __('Are you sure you want to remove this data?') }}</h4>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" name="ok_button" id="ok_button"
                                        class="btn btn-danger">{{ trans('OK') }}</button>
                                    <button type="button" class="close btn-default"
                                        data-dismiss="modal">{{ trans('Cancel') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>


                <div class="tab-pane fade p-3" id="hbv_export" role="tabpanel">
                    <form action="{{ route('Hbv.hbv-register-export') }}" method="post">
                        @csrf
                        <h2 class="header-text">Export Section</h2>
                        <div class="row justify-content-center">
                            <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
@push('scripts')
    <script type="text/javascript">
        (function($) {
            "use strict";

            $(document).ready(function() {
                $("#genera_search").click(function() {
                
                    let data = {
                        Pid: $("#generalId").val(),
                        //date: formatDate($('#dateOfRegistration').val())
                    }
                    
                    $.ajax({
                        url: "{{ route('hbv.confid_search') }}",
                        method: "GET",
                        data: data,
                        success: function(result) {
                            alert(result.message);

                            $("#submit").removeClass("d-none").show();

                            console.log(result);
                            if (result.status == 200 && result.data != null) {
                                let old_data = result.data;
                                Object.entries(old_data).forEach(([key, value]) => {
                                    $(`#${key}`).val(value);
                                });
                                $('#submit').val('update').text('Update Data').attr(
                                    "data-route",
                                    "{{ route('hbv.update') }}");
                                $('#id').val(old_data.id);
                                $("#delete").removeClass('d-none').show();
                                DateTo_text();
                                pwid();
                                ifPwidYes();
                                patientReceiveTreatment();
                                Hbig();
                                hour();
                                vaccination();




                            } else {
                                $('#submit').val('save').text('Save Data').attr("data-route",
                                    "{{ route('hbv.store') }}");
                                $('#id').val('0');
                                $("#delete").hide();

                            }

                        },
                        error: function() {

                        }
                    });
                })
                // let label = [];
                // $("#hbv_register_form label").each(function() {
                //     label.push($(this).text());
                // });
                // console.log(label);
                $('#hbv_register_form').on('submit', function(event) {
                    event.preventDefault();
                    const routeUrl = $("#submit").data('route');
                    $.ajax({
                        url: routeUrl,
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        dataType: "json",
                        success: function(data) {
                            console.log(data);
                            if (data.status === 'error') {
                                let messages = [];

                                $.each(data.errors, function(key, value) {
                                    messages.push(value[
                                        0]);
                                });

                                alert(messages.join("\n"));

                            }
                            if (data.status == 200) {
                                alert(data.message);
                                location.reload();
                            }

                        },
                        error: function(xhr) {
                            alert('Somthing went wrong')
                        }
                    });
                });
                let hbv_delete_id;
                $(document).on('click', '.delete', function() {
                    hbv_delete_id = $('#id').val();
                    console.log("hbv_row_id" + hbv_delete_id);
                    $('#confirmModal').modal('show');
                    $('.modal-title').text('DELETE RECORD');
                    $('#ok_button').text('Ok');
                });
                $('.close').on('click', function() {
                    $('#confirmModal').modal('hide');
                });
                $('#ok_button').click(function() {
                    let target = "{{ url('HbvRegister') }}/" + hbv_delete_id + "/delete";
                    $.ajax({
                        url: target,
                        beforeSend: function() {
                            $('#ok_button').text('Deleting....');
                        },
                        success: function(data) {
                            var html = '';
                            if (data.success) {
                                html = data.success;
                                $('#submit').val('save').text('Save Data').attr("data-route",
                                    "{{ route('hbv.store') }}");
                                $('#id').val('0');
                                $("#delete").hide();
                                $('#hbv_register_form')[0].reset();
                            }
                            if (data.error) {
                                html = data.error
                            }
                            alert(html);
                            $('#confirmModal').modal('hide');



                        }
                    })
                });
                
                $("#pwid").change(function () {
                    pwid();
                })
                function pwid(){
                    let pwid=$("#pwid").val();
                    if(pwid=='Yes'){
                        $("#ifPwidYes").prop('disabled',false)
                    }else{
                        $("#ifPwidYes,#ifEx_ost").prop('disabled',true).val('');
                    }
                }

                $("#ifPwidYes").change(function () {
                    ifPwidYes();
                })
                function ifPwidYes() {
                     let pwidYes=$("#ifPwidYes").val();
                    if(pwidYes=='Ex'){
                        
                        $("#ifEx_ost").prop('disabled',false)
                    }else{
                        $("#ifEx_ost").prop('disabled',true).val('');
                    }
                }

                $("#patientReceivedCompleteTreatment").change(function () {
                    patientReceiveTreatment();
                })
                function patientReceiveTreatment() {
                    let patientTreatment=$("#patientReceivedCompleteTreatment").val();
                    if(patientTreatment=="No"){
                        $("#hbv_treatment_ifNoReason").prop('disabled',false)
                    }else{
                        $("#hbv_treatment_ifNoReason").prop('disabled',true).val('');
                    }
                }

                $("#HBIG").change(function () {
                    Hbig();
                })

                function Hbig() {
                    let hbig=$('#HBIG').val();
                    if(hbig=="Yes"){
                        $("#active_vaccination_baby,#hbv_vaccy_baby_time").prop('disabled',false)
                    }else{
                         $("#active_vaccination_baby,#hbv_vaccy_baby_time").prop('disabled',true).val('');
                    }
                }

                $("#24hr_hbvActiveVaccination").change(function () {
                    hour();
                })
                function hour(params) {
                    let start=$("#24hr_hbvActiveVaccination").val();
                    if (start=="Yes") {
                        $("#24hr_dose_after_deliver_date").prop('disabled',false)
                    }else{
                        $("#24hr_dose_after_deliver_date").prop('disabled',true).val("");
                    }
                }

                $("#8week_hbvActiveVaccination,#16week_hbvActiveVaccination,#24week_hbvActiveVaccination").change(function () {
                    vaccination();
                })

                function vaccination() {
                    let hour=['8','16','24'];
                    console.log('heello')
                    hour.forEach(value => {
                        let index_data=$(`#${value}week_hbvActiveVaccination`).val();
                        console.log('ok pr')
                        if (index_data=='Yes') {
                            $(`#${value}week_after_vaccination_date`).prop('disabled',false);
                        }else{
                            $(`#${value}week_after_vaccination_date`).prop('disabled',true).val('');
                        }
                    });
                }


            });
        })(jQuery);
    </script>
@endpush