<?php
session_start();
if (!isset($_SESSION['MEM_ID'])) {
   header("location: index.php");
}
?>

<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Edit Profile</title>
   <!-- using online links -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

   <link rel="stylesheet" href="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">

   <!-- CSS only -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
   <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
   <!-- sweet alert  -->
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <style>
      select[readonly] {
         background: #eee;
         /Simular campo inativo - Sugestão @GabrielRodrigues/
         pointer-events: none;
         touch-action: none;
      }

      h2,
      h3,
      label {
         color: #0c0a8a
      }


      .header img {
         float: left;
         width: 100px;
         height: 100px;
         /* background: #555; */
      }

      .header h1,
      h3,
      h4,
      h5,
      h6 {
         position: relative;
         top: 18px;
         left: 10px;
      }

      #personal::placeholder {
    color: white; /* Placeholder text color white */
    opacity: 1; /* Full visibility */
    font-weight: bold;
    text-align: center;
}
   </style>
</head>





<body>
<?php
$capchaval = substr(str_shuffle("1234abcdefghijkmnpqrABCDEFGHIJKL123456789stvwxyzMNPQRSTVWXYZ56789"), 0, 8);
include "fetch_data.php";
include "connection.php";
error_reporting(0);


$MEM_ID = $_SESSION['MEM_ID'];
$sql = "SELECT *  FROM NAA_MEMBERS WHERE MEM_ID = '$MEM_ID '";
// $sql = "SELECT MEM_ID,MEM_PHOTO, MEM_NAME, MEM_MOBILE_NO, COLL_ROLL_NO, CAT_CODE, COLL_SEC, (SELECT NAA_SECTION.SECT_NAME FROM NAA_SECTION WHERE NAA_MEMBERS.COLL_SEC=NAA_SECTION.SECT_ID ) AS SEC_NAME,
// YR_OF_PASS, F_NAME, M_NAME, PRE_ADDR,PRE_DIV, PRE_DIST, (SELECT NAA_DISTRICT_MST.DIST_DESC FROM NAA_DISTRICT_MST WHERE NAA_MEMBERS.PRE_DIST=NAA_DISTRICT_MST.DIST_CODE ) AS DIST_NAME,PRE_THANA,
// (SELECT NAA_THANA_MST.THANA_DESC FROM NAA_THANA_MST WHERE NAA_MEMBERS.PRE_THANA=NAA_THANA_MST.THANA_ID ) AS THANA_NAME, PRE_EMAIL, PER_ADDR, PER_DIV ,PER_DIST,
// (SELECT NAA_DISTRICT_MST.DIST_DESC FROM NAA_DISTRICT_MST WHERE NAA_MEMBERS.PER_DIST=NAA_DISTRICT_MST.DIST_CODE ) AS PER_DIST_NAM, PER_THANA, (SELECT NAA_THANA_MST.THANA_DESC FROM NAA_THANA_MST WHERE NAA_MEMBERS.PER_THANA=NAA_THANA_MST.THANA_ID ) AS PER_THANA_NAM,
// PROF_CODE,DESIGNATION,OFFICE_NAME, OFF_ADDR,OFF_DIV, OFF_DIST, (SELECT NAA_DISTRICT_MST.DIST_DESC FROM NAA_DISTRICT_MST WHERE NAA_MEMBERS.OFF_DIST=NAA_DISTRICT_MST.DIST_CODE ) AS OFF_DIST_NAM,OFF_THANA,(SELECT NAA_THANA_MST.THANA_DESC FROM NAA_THANA_MST WHERE NAA_MEMBERS.OFF_THANA=NAA_THANA_MST.THANA_ID ) AS OFF_THANA_NAM,
// OFF_PHONE, OFF_EMAIL, LM_NO, LM_DATE,MEM_TYPE,PER_PHONE , PER_EMAIL, PAYMENT_STATUS, MEM_ROLL_NO, MEM_CODE, PASSWORD, DOB, DOM, PRE_POST_CODE FROM NAA_MEMBERS  WHERE MEM_ID  = '$MEM_ID '";
$parse = ociparse($conn, $sql);
oci_execute($parse);

// print_r($sql);
while ($row = oci_fetch_assoc($parse)) {
   $user_row[] = $row;
}

// var_dump($division);
// echo count($division);
oci_free_statement($parse);



$selected_division = $user_row[0]['PRE_DIV'];
$selected_division1 = $user_row[0]['PER_DIV'];
$selected_division2 = $user_row[0]['OFF_DIV'];
$selected_district = $user_row[0]['PRE_DIST'];
$selected_thana = $user_row[0]['PRE_THANA'];
$selected_thana1 = $user_row[0]['PER_THANA'];
$selected_thana2 = $user_row[0]['OFF_THANA'];
// echo "$selected_district";

$sql3 = "SELECT * FROM NAA_THANA_MST WHERE THANA_CODE  = '$selected_thana2'";

$parse = ociparse($conn, $sql3);
oci_execute($parse);

// print_r($sql3);
while ($row = oci_fetch_assoc($parse)) {
   $OFF_THANA[] = $row;
}

// var_dump($division);
// echo count($division);
oci_free_statement($parse);

$sql1 = "SELECT * FROM NAA_THANA_MST WHERE THANA_CODE  = '$selected_thana1'";

$parse = ociparse($conn, $sql1);
oci_execute($parse);

// print_r($sql1);
while ($row = oci_fetch_assoc($parse)) {
   $PER_THANA[] = $row;
}

// var_dump($division);
// echo count($division);
oci_free_statement($parse);



$sql2 = "SELECT * FROM NAA_THANA_MST WHERE THANA_CODE  = '$selected_thana'";

$parse = ociparse($conn, $sql2);
oci_execute($parse);

// print_r($sql2);
while ($row = oci_fetch_assoc($parse)) {
   $DIST_CODE[] = $row;
}

// var_dump($division);
// echo count($division);
oci_free_statement($parse);






if (isset($_POST['submit'])) {

   $MEM_PHOTO = $_POST['basedata'];
   $MEM_NAME = $_POST['MEM_NAME'];
   $MEM_MOBILE_NO = $_POST['MEM_MOBILE_NO'];
   $COLL_ROLL_NO = $_POST['COLL_ROLL_NO'];
   $CAT_CODE = $_POST['CAT_CODE'];
   $COLL_SEC = $_POST['COLL_SEC'];
   $YR_OF_PASS = $_POST['YR_OF_PASS'];
   $F_NAME = $_POST['F_NAME'];
   $M_NAME = $_POST['M_NAME'];
   $PRE_ADDR  = $_POST['PRE_ADDR'];
   $PRE_DIV = $_POST['PRE_DIV'];
   $PRE_DIST = $_POST['PRE_DIST'];
   $PRE_THANA = $_POST['PRE_THANA'];
   // echo "$PRE_THANA";
   // $PRE_PHONE = $_POST['reg_number'];
   $PRE_EMAIL = $_POST['PRE_EMAIL'];
   $PER_ADDR  = $_POST['PER_ADDR'];
   $PER_DIV = $_POST['PER_DIV'];
   $PER_DIST = $_POST['PER_DIST'];

   $PER_THANA = $_POST['PER_THANA'];
   $PER_PHONE = $_POST['PER_PHONE'];
   $PER_EMAIL = $_POST['PER_EMAIL'];
   $PROF_CODE = $_POST['PROF_CODE'];
   $DESIGNATION = $_POST['DESIGNATION'];
   $OFFICE_NAME = $_POST['OFFICE_NAME'];
   $OFF_ADDR = $_POST['OFF_ADDR'];
   $OFF_DIV = $_POST['OFF_DIV'];
   $OFF_DIST = $_POST['OFF_DIST'];
   $OFF_THANA = $_POST['OFF_THANA'];
   $OFF_PHONE = $_POST['OFF_PHONE'];
   $OFF_EMAIL = $_POST['OFF_EMAIL'];
   $mem_type = $_POST['MEM_TYPE'];
   $DOB = $_POST['DOB'];
   $DOM = $_POST['DOM'];
   $PRE_POST_CODE = $_POST['PRE_POST_CODE'];



   $returnval = 0;




   $stid = oci_parse($conn, "begin PKG__member.DPD_naa_members_UPDATE(:o_status,:MEM_ID,:MEM_PHOTO,:MEM_NAME,:MEM_MOBILE_NO,:COLL_ROLL_NO,:CAT_CODE,:COLL_SEC,:YR_OF_PASS,:F_NAME,:M_NAME,:PRE_ADDR,:PRE_DIV,:PRE_DIST,:PRE_THANA,:PRE_PHONE,:PRE_EMAIL,:PER_ADDR,:PER_DIV,:PER_DIST,:PER_THANA, :PER_PHONE, :PER_EMAIL,:PROF_CODE,:DESIGNATION,:OFFICE_NAME,:OFF_ADDR,
  :OFF_DIV,:OFF_DIST,:OFF_THANA,:OFF_PHONE,:OFF_EMAIL,:mem_type,:DOB,:DOM,:PRE_POST_CODE); end;");


   oci_bind_by_name($stid, ":o_status", $returnval, -1, SQLT_INT);
   oci_bind_by_name($stid, ":MEM_ID", $MEM_ID, -1, SQLT_INT);
   oci_bind_by_name($stid, ":MEM_PHOTO", $MEM_PHOTO, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":MEM_NAME", $MEM_NAME, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":MEM_MOBILE_NO", $MEM_MOBILE_NO, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":COLL_ROLL_NO", $COLL_ROLL_NO, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":CAT_CODE", $CAT_CODE, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":COLL_SEC", $COLL_SEC, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":YR_OF_PASS", $YR_OF_PASS, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":F_NAME", $F_NAME, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":M_NAME", $M_NAME, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PRE_ADDR", $PRE_ADDR, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PRE_DIV", $PRE_DIV, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PRE_DIST", $PRE_DIST, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PRE_THANA", $PRE_THANA, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PRE_PHONE", $PRE_PHONE, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PRE_EMAIL", $PRE_EMAIL, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PER_ADDR", $PER_ADDR, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PER_DIV", $PER_DIV, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PER_DIST", $PER_DIST, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PER_THANA", $PER_THANA, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PER_PHONE", $PER_PHONE, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PER_EMAIL", $PER_EMAIL, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PROF_CODE", $PROF_CODE, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":DESIGNATION", $DESIGNATION, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":OFFICE_NAME", $OFFICE_NAME, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":OFF_ADDR", $OFF_ADDR, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":OFF_DIV", $OFF_DIV, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":OFF_DIST", $OFF_DIST, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":OFF_THANA", $OFF_THANA, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":OFF_PHONE", $OFF_PHONE, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":OFF_EMAIL", $OFF_EMAIL, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":mem_type", $mem_type, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":DOB", $DOB, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":DOM", $DOM, -1, SQLT_CHR);
   oci_bind_by_name($stid, ":PRE_POST_CODE", $PRE_POST_CODE, -1, SQLT_CHR);



   oci_execute($stid);

   //print $returnval;
   if ($returnval === 0) {
      echo '<script>alert("Please carefully fill up all the fields.")</script>';
   } else if ($returnval === 1) {
       echo '<script>
                Swal.fire({
                    icon: "success",
                    text: "Your Profile Successfully Updated",
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "OK"
                    }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = "edit.php";
                    }
                    })


            </script>';
   } else if ($returnval === 2) {
      echo '<script>alert("Your SMS contact number is a duplicate! Please try another number!")</script>';
   }

   oci_free_statement($stid);
   // oci_close($conn);







}






?>






   <!-- dashboard start -->
  <!-- dashboard start -->
   <?php include 'dashboard.php';
   session_start();  ?>
   <!-- dashboard end -->


   <div class="form-body">
      <div class="m-5">
      <?php if ($payment_status == 'P'): ?>
    <?php 
    $MEM_ID = $_SESSION['MEM_ID']; 
    ?>
    <a href="../itbl.php?id=<?php echo $MEM_ID; ?>" class="btn btn-danger btn-sm">
        Download PDF
    </a>
<?php endif; ?>
      </div>


   <div class="form-body">
      <form action="" method="post" enctype="multipart/form-data">
         <div class="row" style="margin-top: 20px;">
            <div class="row">
               <div class="col-md-2"></div>
               <div class="col-md-8 col-sm-8">
                        <div class="header" >
                            <img src="assets/img/Holy_cross.png" style="border: 3px solid black;" class="mr-4 " alt="BD Logo">
                             <h3 style="color: #ddbe4d; font-style: oblique;">
                                75<sup style="font-size: 0.6em; vertical-align: super;">th</sup> Foundation Of Holy Cross Girls High School
                               </h3>
                            
                          </div>
                    </div>
               <div class="col-md-2"></div>
            </div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4">
               <div class="row" style="margin-top: 20px;">
               </div>
            </div>
         </div>

                                <div class="row m-3">
                                   <div class="col-md-12" >
                                   
                                    <div class="col-md-12">
                                        <input type="text" class="form-control" name="personal" id="personal" placeholder="Profile Update Form" value="" disabled="" style="background-color: #ddbe4d; color: white;" >
                                    </div>
                                   
                                </div>
                                 </div>


       


         <div class="row m-3" style="padding-top: 20px;">
            
          <!-- First Div -->
        <div class="row m-3">
                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <label class="font-weight-bold">Photograph <span style="color:red"></span>:</label>
                        <input type="file" accept="image/*" name="file" id="file" onchange="preview_image(event)">
                    </div>

                    <div class="col-lg-4 col-md-4 col-sm-12 text-center">
                        <img src="data:image/jpeg;base64,<?php echo $photoout; ?>" id="output_image" width="130px"
                            height="130px">
                    </div>

                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <input type="text" name="basedata" id="basedata" hidden value="<?php echo $photoout; ?>">
                        
                    </div>
                </div>


   

   <!-- Row 2: Name, Year of Passing, Profession -->
    <div class="row m-3">
       <div class="col-lg-4 col-md-4 col-sm-12">
      <label class="font-weight-bold">Name  <span style="color:red">*</span>:</label>
      <input type="text" class="form-control is-invalid" Required name="MEM_NAME" id="MEM_NAME" placeholder="Enter Name"
      value="<?php echo $user_row[0]['MEM_NAME']; ?>">
         
         <div id="nameError" class="text-danger" style="display: none; font-size: 0.9rem;">Maximum 50 characters allowed</div>
   </div>

   
      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Passing Year <span style="color:red">*</span>:</label>
         <?php
            include 'connection.php';
            $sql = "SELECT * FROM NAA_YEAR_MST";
            $parseresults = ociparse($conn, $sql);
            ociexecute($parseresults);
            echo '<select class="form-select is-invalid" name="YR_OF_PASS" Required>';
            echo '<option value="">Select Year</option>';
            while ($row = oci_fetch_assoc($parseresults)) {
               $selected = ($row['YEAR_CODE'] == $user_row[0]['YR_OF_PASS']) ? 'selected' : '';
               echo "<option value='{$row['YEAR_CODE']}' $selected>{$row['YEAR_NAME']}</option>";
            }
            echo '</select>';
            oci_free_statement($parseresults);
            oci_close($conn);
         ?>
         
      </div>

      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Profession <span style="color:red">*</span>:</label>
         <?php
            include 'connection.php';
            $sql = "SELECT * FROM NAA_PROF_MST";
            $parseresults = ociparse($conn, $sql);
            ociexecute($parseresults);
            echo '<select name="PROF_CODE" id="PROF_CODE" Required class="form-select is-invalid">';
            echo '<option value="">Select Profession</option>';
            while ($row = oci_fetch_assoc($parseresults)) {
               $selected = ($row['PROF_CODE'] == $user_row[0]['PROF_CODE']) ? 'selected' : '';
               echo "<option value='{$row['PROF_CODE']}' $selected>{$row['PROF_NAME']}</option>";
            }
            echo '</select>';
            oci_free_statement($parseresults);
            oci_close($conn);
         ?>
        
      </div>
   </div>

   <!-- Row 3: College Roll, Current Address, Institute -->
   <div class="row m-3">
      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">School Roll No:</label>
         <input type="text" class="form-control" name="COLL_ROLL_NO" id="COLL_ROLL_NO" placeholder="School Roll No" value="<?php echo $user_row[0]['COLL_ROLL_NO']; ?>" style="border: 2px solid #ddbe4d; ">
      </div>

      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Current Address <span style="color:red">*</span>:</label>
         <input type="text" class="form-control is-invalid" Required name="PRE_ADDR" id="PRE_ADDR" placeholder="Current Address" value="<?php echo $user_row[0]['PRE_ADDR']; ?>">
         
         <div id="currentaddressError" class="text-danger" style="display: none; font-size: 0.9rem;">Maximum 150 characters allowed</div>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Permanent Address <span style="color:red">*</span>:</label>
         <input type="text" class="form-control is-invalid" Required name="PER_ADDR" id="PER_ADDR" placeholder="Permanent Address" value="<?php echo $user_row[0]['PER_ADDR']; ?>">
         
         <div id="peraddressError" class="text-danger" style="display: none; font-size: 0.9rem;">Maximum 150 characters allowed</div>
      </div>

      
   </div>

   <!-- Row 4: Permanent Address, Phone, Office Address -->
   <div class="row m-3">
      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Institute/Organization:</label>
         <input type="text" class="form-control" name="OFFICE_NAME" id="OFFICE_NAME" placeholder="Institute/Organization" value="<?php echo $user_row[0]['OFFICE_NAME']; ?>" style="border: 2px solid #ddbe4d; ">
         <div id="officeNameError" class="text-danger" style="display: none; font-size: 0.9rem;">Maximum 150 characters allowed</div>
      </div>

      

      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Office Address:</label>
         <input type="text" class="form-control" name="OFF_ADDR" id="OFF_ADDR" placeholder="Office Address" value="<?php echo $user_row[0]['OFF_ADDR']; ?>" style="border: 2px solid #ddbe4d; ">
         <div id="officeaddressError" class="text-danger" style="display: none; font-size: 0.9rem;">Maximum 150 characters allowed</div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Designation:</label>
         <input type="text" class="form-control" name="DESIGNATION" id="DESIGNATION" placeholder="Designation" value="<?php echo $user_row[0]['DESIGNATION']; ?>" style="border: 2px solid #ddbe4d; ">
          <div id="desigError" class="text-danger" style="display: none; font-size: 0.9rem;">Maximum 150 characters allowed</div>
      </div>

   </div>

   <!-- Row 5: Email, Save button, Designation -->
   <div class="row m-3">
      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Phone:</label>
         <input type="number" class="form-control" name="MEM_MOBILE_NO" id="MEM_MOBILE_NO" placeholder="Phone No" value="<?php echo $user_row[0]['MEM_MOBILE_NO']; ?>" disabled style="border: 2px solid #ddbe4d; ">
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
         <label class="font-weight-bold">Email <span style="color:red">*</span>:</label>
         <input type="email" class="form-control is-invalid" Required name="PRE_EMAIL" id="PRE_EMAIL" placeholder="Email" value="<?php echo $user_row[0]['PRE_EMAIL']; ?>">
         
      </div>
      
   </div>



   <div class="row m-3">
      <div class="col-lg-4 col-md-4 col-sm-12">
         
      </div>

      <div class="col-lg-4 col-md-4 col-sm-12 d-flex justify-content-center" style="margin-top: 20px;">
      <button type="submit" class="btn btn-success" name="submit" id="submit" onclick="return Validate();">Update</button>
     </div>
     <div class="col-lg-4 col-md-4 col-sm-12">       
      </div>
      
   </div>

                                  <div class="row" style="margin-top: 20px;">
                                        <div class="col-xs-4 col-lg-4 col-md-4 col-sm-12 ">

                                        </div>

                                        <div class="col-xs-4 col-lg-4 col-md-4 col-sm-12 justify-content-center">
                                            <p class="lead marginbottom" style="color: #140178;font-family: Monotype Corsiva; font-size: 20px; font-weight: bold;">Powered by </p>
                                            <img src="img/itbl_icon_1.jpeg" height="60px" width="350px" alt="">


                                        </div>


                                        <div class="col-xs-4 col-lg-4 col-md-4 col-sm-12 ">
                                        </div>


                                    </div>

   


      </form>



   </div>
   </div>


   <!-- using online scripts -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
   <script src="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>


    <!-- <Creactor validation start> -->

                <script>
               const memNameInput = document.getElementById('MEM_NAME');
               const errorDiv = document.getElementById('nameError');

               memNameInput.addEventListener('input', function () {
                  if (this.value.length > 50) {
                     errorDiv.style.display = 'block';
                     this.value = this.value.slice(0, 50); // Trim to 100 chars
                  } else {
                     errorDiv.style.display = 'none';
                  }
               });
            </script>

                    <script>
                   const officeNameInput = document.getElementById('OFFICE_NAME');
                   const officeErrorDiv = document.getElementById('officeNameError');

                   officeNameInput.addEventListener('input', function () {
                      if (this.value.length > 150) {
                         officeErrorDiv.style.display = 'block';
                         this.value = this.value.slice(0, 150); // Trim if over
                      } else {
                         officeErrorDiv.style.display = 'none';
                      }
                   });
                </script>

                
                  <script>
                   const currentaddressInput = document.getElementById('PRE_ADDR');
                   const currenErrorDiv = document.getElementById('currentaddressError');

                   currentaddressInput.addEventListener('input', function () {
                      if (this.value.length > 150) {
                         currenErrorDiv.style.display = 'block';
                         this.value = this.value.slice(0, 150); // Trim if over
                      } else {
                         currenErrorDiv.style.display = 'none';
                      }
                   });
                </script>
                

                 <script>
                   const officeaddressInput = document.getElementById('OFF_ADDR');
                   const officeaddressErrorDiv = document.getElementById('officeaddressError');

                   officeaddressInput.addEventListener('input', function () {
                      if (this.value.length > 150) {
                         officeaddressErrorDiv.style.display = 'block';
                         this.value = this.value.slice(0, 150); // Trim if over
                      } else {
                         officeaddressErrorDiv.style.display = 'none';
                      }
                   });
                </script>
                
                <script>
                   const peraddressErrorInput = document.getElementById('PER_ADDR');
                   const peraddressErrorrDiv = document.getElementById('peraddressError');

                   peraddressErrorInput.addEventListener('input', function () {
                      if (this.value.length > 150) {
                         peraddressErrorrDiv.style.display = 'block';
                         this.value = this.value.slice(0, 150); // Trim if over
                      } else {
                         peraddressErrorrDiv.style.display = 'none';
                      }
                   });
                </script>
                

                <script>
                   const desigErrorInput = document.getElementById('DESIGNATION');
                   const desigErrorDiv = document.getElementById('desigError');

                   desigErrorInput.addEventListener('input', function () {
                      if (this.value.length > 150) {
                         desigErrorDiv.style.display = 'block';
                         this.value = this.value.slice(0, 150); // Trim if over
                      } else {
                         desigErrorDiv.style.display = 'none';
                      }
                   });
                </script>


           <!-- < Creactor validation End> -->

   <script>
      $('#ad_cat').on('change', function() {
         var ad_cat = this.value;
         $.ajax({
            type: "POST",
            url: "getVersion.php",
            data: 'CAT_CODE=' + ad_cat,
            success: function(result) {
               console.log(result);
               $("#version_ssc").html(result);
            }
         });
      });
   </script>

   <script>
      $('#ad_cat').on('change', function() {
         var ad_cat = this.value;
         $.ajax({
            type: "POST",
            url: "getGrp.php",
            data: 'CAT_CODE=' + ad_cat,
            success: function(result) {
               console.log(result);
               $("#ssc_group").html(result);
            }
         });
      });
   </script>



   <script type='text/javascript'>
      $(document).ready(function() {
         $("#ssc_group").change(function() {
            $(this).find("option:selected").each(function() {
               var optionValue = $(this).attr("value");
               if (optionValue) {
                  $(".group").not("." + optionValue).hide();
                  $("." + optionValue).show();
               } else {
                  $(".group").hide();
               }
            });
         }).change();
      });

      /*function preview_image(event) 
      {
         var reader = new FileReader();
         reader.onload = function()
         {
            var output = document.getElementById('output_image');
            output.src = reader.result;
         }
         reader.readAsDataURL(event.target.files[0]);
      }*/
      const MAX_WIDTH = 90;
      const MAX_HEIGHT = 108;
      const MIME_TYPE = "image/jpeg";
      const QUALITY = 0.9;

      const input = document.getElementById("file");
      input.onchange = function(ev) {
         const file = ev.target.files[0]; // get the file
         const blobURL = URL.createObjectURL(file);
         const img = new Image();
         img.src = blobURL;
         img.onerror = function() {
            URL.revokeObjectURL(this.src);
            // Handle the failure properly
            console.log("Cannot load image");
         };
         img.onload = function() {
            URL.revokeObjectURL(this.src);
            const [newWidth, newHeight] = calculateSize(img, MAX_WIDTH, MAX_HEIGHT);
            const canvas = document.createElement("canvas");
            canvas.width = newWidth;
            canvas.height = newHeight;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, newWidth, newHeight);
            canvas.toBlob(
               (blob) => {
                  // Handle the compressed image. es. upload or save in local state
                  //displayInfo('Original file', file);
                  //displayInfo('Compressed file', blob);
               },
               MIME_TYPE,
               QUALITY
            );
            var dataURL = canvas.toDataURL();
            document.getElementById('output_image')
               .setAttribute(
                  'src', dataURL
               );
            dataURL = dataURL.replace(/^data:image\/[a-z]+;base64,/, "");
            document.getElementById('basedata').value = dataURL;
            console.log(dataURL);

         };
      };

      function calculateSize(img, maxWidth, maxHeight) {
         let width = img.width;
         let height = img.height;

         // calculate the width and height, constraining the proportions
         if (width > height) {
            if (width > maxWidth) {
               height = Math.round((height * maxWidth) / width);
               width = maxWidth;
            }
         } else {
            if (height > maxHeight) {
               width = Math.round((width * maxHeight) / height);
               height = maxHeight;
            }
         }
         return [width, height];
      }
   </script>
   <script>
      $(document).ready(function() {
         $("#Verify").click(function() {
            var bla = $('#iptval').val();
            var php_var = "<?php echo $capchaval; ?>";
            if (bla === "") {
               document.getElementById('levelcap').innerHTML = 'To Enable Submit Button Please Verify';
            } else {
               if (bla === php_var) {
                  document.getElementById('levelcap').innerHTML = 'Successfully Verified. Now You Can Update Your Information.';
                  document.getElementById("submit").disabled = false;
               } else {
                  document.getElementById("submit").disabled = true;
                  document.getElementById('levelcap').innerHTML = 'Failed To Verify';
               }
            }

            return false;
         });
      });
      $('#notcp').bind('cut copy paste', function(e) {
         e.preventDefault();
      });
   </script>


 





   <!-- present ajax start -->

   
<script>
// Trigger change event on page load with the selected division
$(document).ready(function() {
   var selectedDivision = "<?php echo $selected_division; ?>";
   $('#p_division').val(selectedDivision).trigger('change');
});

// District code cascading starts
$('#p_division').on('change', function() {
   var divisionID = $(this).val();

   if (divisionID) {
      $.ajax({
         type: 'POST',
         url: 'ajaxDataCascading_div_dist.php',
         data: 'div_id=' + divisionID,
         success: function(html) {
            $('#p_district').html(html);
         }
      });
   } else {
      $('#p_district').html('<option value="">Select division first</option>');
   }
});
// District code cascading ends
</script>

   <script>
      
      // district code cascading starts 
      $('#p_district').on('change', function() {
         var districtID = $(this).val();

         // console.log(divisionID);
         if (districtID) {
            $.ajax({
               type: 'POST',
               url: 'ajaxDataCascading_dis_upo.php',
               data: 'dis_id=' + districtID,
               success: function(html) {
                  $('#p_upazilla').html(html);
               }
            });
         } else {
            $('#p_upazilla').html('<option value="">Select upazilla first</option>');
         }
      });
      // distirct code cascading ends
   </script>


   <!-- present ajax end -->




   <!-- permanent ajax start -->

   <script>
      // Trigger change event on page load with the selected division
      $(document).ready(function() {
         var selectedDivision1 = "<?php echo $selected_division1; ?>";
         $('#per_division').val(selectedDivision1).trigger('change');
      });
      // district code cascading starts 
      $('#per_division').on('change', function() {
         var divisionID = $(this).val();

         // console.log(divisionID);
         if (divisionID) {
            $.ajax({
               type: 'POST',
               url: 'ajaxDataCascading_div_dist.php',
               data: 'div_id=' + divisionID,
               success: function(html) {
                  $('#per_district').html(html);
               }
            });
         } else {
            $('#per_district').html('<option value="">Select division first</option>');
         }
      });
      // distirct code cascading ends
   </script>
   <script>
      // district code cascading starts 
      $('#per_district').on('change', function() {
         var districtID = $(this).val();

         // console.log(divisionID);
         if (districtID) {
            $.ajax({
               type: 'POST',
               url: 'ajaxDataCascading_dis_upo.php',
               data: 'dis_id=' + districtID,
               success: function(html) {
                  $('#per_upazilla').html(html);
               }
            });
         } else {
            $('#per_upazilla').html('<option value="">Select upazilla first</option>');
         }
      });
      // distirct code cascading ends
   </script>


   <!-- permanent ajax end -->




   <!-- office ajax start -->

   <script>
      // Trigger change event on page load with the selected division
$(document).ready(function() {
   var selectedDivision2 = "<?php echo $selected_division2; ?>";
   $('#off_division').val(selectedDivision2).trigger('change');
});
      // district code cascading starts 
      $('#off_division').on('change', function() {
         var divisionID = $(this).val();

         // console.log(divisionID);
         if (divisionID) {
            $.ajax({
               type: 'POST',
               url: 'ajaxDataCascading_div_dist.php',
               data: 'div_id=' + divisionID,
               success: function(html) {
                  $('#off_district').html(html);
               }
            });
         } else {
            $('#off_district').html('<option value="">Select division first</option>');
         }
      });
      // distirct code cascading ends
   </script>
   <script>
      // district code cascading starts 
      $('#off_district').on('change', function() {
         var districtID = $(this).val();

         // console.log(divisionID);
         if (districtID) {
            $.ajax({
               type: 'POST',
               url: 'ajaxDataCascading_dis_upo.php',
               data: 'dis_id=' + districtID,
               success: function(html) {
                  $('#off_upazilla').html(html);
               }
            });
         } else {
            $('#off_upazilla').html('<option value="">Select upazilla first</option>');
         }
      });
      // distirct code cascading ends
   </script>


   <!-- office ajax end -->




   <!-- section ajax start -->

   <script>
      // district code cascading starts 
      $('#CAT_CODE').on('change', function() {
         var sectionID = $(this).val();

         // console.log(divisionID);
         if (sectionID) {
            $.ajax({
               type: 'POST',
               url: 'ajaxDataCascading_div_section.php',
               data: 'sec_id=' + sectionID,
               success: function(html) {
                  $('#naa_section').html(html);
               }
            });
         } else {
            $('#naa_section').html('<option value="">Select Section first</option>');
         }
      });
      // distirct code cascading ends
   </script>




   <!-- section ajax end -->



   <script type="text/javascript">
      function Validate() {
         var MEM_TYPE = document.getElementById("MEM_TYPE");
         var basedata = document.getElementById("basedata");

         var MEM_NAME = document.getElementById("MEM_NAME");
         var DOB = document.getElementById("DOB");
         var YR_OF_PASS = document.getElementById("YR_OF_PASS");
         var CAT_CODE = document.getElementById("CAT_CODE");
         var p_division = document.getElementById("p_division");
         var p_district = document.getElementById("p_district");
         var p_upazilla = document.getElementById("p_upazilla");
         var MEM_MOBILE_NO = document.getElementById("MEM_MOBILE_NO");
         var PRE_EMAIL = document.getElementById("PRE_EMAIL");
         var PRE_POST_CODE = document.getElementById("PRE_POST_CODE");
         var PRE_ADDR = document.getElementById("PRE_ADDR");
         var PROF_CODE = document.getElementById("PROF_CODE");
         var DESIGNATION = document.getElementById("DESIGNATION");
         var OFFICE_NAME = document.getElementById("OFFICE_NAME");




         if (MEM_TYPE.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Select Your Membership Type!");
            return false;
         }

         if (basedata.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Enter Image!");
            return false;
         }




         if (MEM_NAME.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please enter application name!");
            return false;
         }


         if (DOB.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Enter Your Date of Birth!");
            return false;
         }

         if (YR_OF_PASS.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Enter Your Passing Year!");
            return false;
         }


         if (CAT_CODE.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Enter Your Group");
            return false;
         }


         if (p_division.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Select Your Present Division");
            return false;
         }


         if (p_district.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Select Your Present District");
            return false;
         }



         if (p_upazilla.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Select Your Present Upazilla/Thana");
            return false;
         }


         if (MEM_MOBILE_NO.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please Enter Your Phone Number");
            return false;
         }


         if (PRE_EMAIL.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please enter Your  Email Address!");
            return false;
         }


         if (PRE_POST_CODE.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please enter Your Post Code!");
            return false;
         }


         if (PRE_ADDR.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please enter Your Present Address!");
            return false;
         }


         if (PROF_CODE.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please enter Your Profession!");
            return false;
         }


         if (DESIGNATION.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please enter Your Designation!");
            return false;
         }


         if (OFFICE_NAME.value == "") {
            //If the "Please Select" option is selected display error.
            alert("Please enter Your Office Name!");
            return false;
         }



         return true;
      }


   </script>

</body>

</html>