1#@!#!123s

��JFIF�� 1#@!#!123s
: / home4 / mcspunei / www / chitpavan.in /
Filename : chitpavan_membership_form.php
back
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Maharashtra Chitpavan Sangh</title>
      <meta content="width=device-width, initial-scale=1.0" name="viewport">
      <meta content="" name="keywords">
      <meta content="" name="description">
      <!-- Favicon -->
      <!--<link href="img/favicon.ico" rel="icon">-->
      <!-- Google Web Fonts -->
      <!--<link rel="preconnect" href="https://fonts.googleapis.com">-->
      <!--<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>-->
      <!--<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto:wght@500;700&display=swap" rel="stylesheet">-->
      <!-- Icon Font Stylesheet -->
      <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">-->
      <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">-->
      <!-- Libraries Stylesheet -->
      <!--<link href="lib/animate/animate.min.css" rel="stylesheet">-->
      <!--<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">-->
      <!--<link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />-->
      <!-- Customized Bootstrap Stylesheet -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <!-- Template Stylesheet -->
      <link href="css/style.css" rel="stylesheet">

  <style>
    .form-section {
      margin-bottom: 1.5rem;
    }
    label {
      font-weight: bold;
    }
  </style>
  <style>
    /* General body and html styles */
    /*body, html {*/
    /*  height: 100%;*/
    /*  margin: 0;*/
    /*  display: flex;*/
    /*  justify-content: center;*/
    /*  align-items: center;*/
    /*  background-color: #f8f9fa;*/
    /*}*/

    /* Form container */
    .form-container {
      width: 100%;
      max-width: 500px; /* Reduced width */
      background-color: white;
      padding: 60px; /* Reduced padding */
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Label styling */
    label {
      font-weight: bold;
       font-size: 0.85rem;
    }

    /* Smaller input fields */
    .form-control {
      padding: 0.375rem; /* Smaller padding */
      font-size: 0.80rem;  /* Smaller font size */
      height: auto;
    }

    /* Section spacing */
    .form-section {
      margin-bottom: 1rem; /* Reduced spacing */
    }

    /* Heading styling */
    .form-heading {
      text-align: center;
      margin-bottom: 15px; /* Reduced margin */
      color: #007bff;
     /* font-size: 1.25rem; /* Slightly smaller heading */
       font-size: 0.75rem;
    }

    /* Make the form inputs responsive */
    @media (max-width: 576px) {
      .form-control {
        width: 100%;
      }
    }

    /* Button styling */
    .btn {
      font-size: 0.875rem; /* Smaller button text */
      padding: 0.5rem 1rem; /* Reduced padding */
    }
      
    @media (min-width: 1400px) {
  .container, 
  .container-lg, 
  .container-md, 
  .container-sm, 
  .container-xl, 
  .container-xxl {
    max-width: 1000px !important;
  }
}
 @media (max-width: 576px) {
    .col-12 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  </style>
  <style>
  .active-button {
    background-color: #ffa500; /* Change to your preferred color */
    color: white;
  }

  .active-button a {
    color: white !important;
  }
        .error-message {
            color: red;
            font-size: 12px;
        }
        .alert {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .alert-success {
            background-color: #d4edda;
            color: #155724;
        }
        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>

</head>
<body>
     <!-- Navbar Start -->
      <?php
         include('header.php');
         ?>


  <h1 class="text-center" style="color: #1c013c;">Applications</h1>
   <div class="separator"></div>
  <!--<hr>-->

 <!-- Navigation Buttons -->
<div class="container">
  <div class="row justify-content-center mb-4">
    <div class="col-12 col-sm-6 col-md-3 mb-2">
      <button class="btn btn-light w-100 ">
        <a href="forms.php" class="text-dark text-decoration-none">Education Assistance</a>
      </button>
    </div>
    <div class="col-12 col-sm-6 col-md-3 mb-2">
      <button class="btn btn-light w-100">
        <a href="health_form.php" class="text-dark text-decoration-none">Health Assistance</a>
      </button>
    </div>
    <div class="col-12 col-sm-6 col-md-3 mb-2">
      <button class="btn btn-light w-100 active-button">
        <a href="steps.php" class="text-dark text-decoration-none">Sangh Membership</a>
      </button>
    </div>
    <div class="col-12 col-sm-6 col-md-3 mb-2">
      <button class="btn btn-light w-100">
        <a href="other_form.php" class="text-dark text-decoration-none">Other Assistance</a>
      </button>
    </div>
  </div>
</div>

<!--<div class="container">-->
  <!-- Form Start -->
<!--  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data" id="form">-->
    

  
<div class="container">
  <!-- Form Start -->
  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data" id="form" onsubmit="return validateForm()">
    
    <!-- Name Section -->
    <div class="form-section">
      <h4 class="mb-3">Basic Details</h4>
      <div class="row g-3">
        <div class="col-md-4">
          <label for="username" class="form-label">Full Name</label>
          <input type="text" id="username" name="username" class="form-control" placeholder="Enter your full name" required>
         <span id="error-username" class="error-message"></span>
        </div>
        <div class="col-md-4">
          <label for="mobile" class="form-label">Mobile Number</label>
          <input type="text" id="mobile" name="middle_name" class="form-control" placeholder="Enter your Mobile number (10 digits)" required pattern="^\d{10}$">
          <span id="error-mobile" class="error-message"></span>
        </div>
        <div class="col-md-4">
          <label for="alternate_mobile" class="form-label">Alternate Mobile Number</label>
          <input type="text" id="alternate_mobile" name="surname" class="form-control" placeholder="Enter your alternate Mobile number (10 digits) " required pattern="^\d{10}$">
          <span id="error-alternate_mobile" class="error-message"></span>
        </div>
      </div>
    </div>

    <!-- Email & Password Section -->
    <div class="form-section">
      <div class="row g-3">
        <div class="col-md-4">
          <label for="email" class="form-label">Email</label>
          <input type="email" id="email" name="email" class="form-control" placeholder="Enter your Email" required>
          <span id="error-email" class="error-messager"></span>
        </div>
<div class="col-md-4">
  <label for="password" class="form-label">Password</label>
  <div class="input-group">
    <input type="password" id="password" name="password" class="form-control" placeholder="Enter your Password" required autocomplete="new-password"> 
    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('password', 'togglePasswordIcon')">
      <i id="togglePasswordIcon" class="fas fa-eye"></i>
    </button>
  </div>
  <span id="error-password" class="error-message"></span>
</div>

<div class="col-md-4">
  <label for="confirm_password" class="form-label">Confirm Password</label>
  <div class="input-group">
    <input type="password" id="confirm_password" name="cpassword" class="form-control" placeholder="Confirm your Password" required autocomplete="new-password">
    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('confirm_password', 'toggleConfirmPasswordIcon')">
      <i id="toggleConfirmPasswordIcon" class="fas fa-eye"></i>
    </button>
  </div>
  <span id="error-confirm_password" class="error-message"></span>
</div>
      </div>
    </div>

    <!-- Membership Details -->
    <div class="form-section">
      <div class="row g-3">
        <div class="col-md-4">
          <label for="membership-type" class="form-label">Membership Type</label>
          <input type="text" id="membership-type" name="membership_type" class="form-control" value="Sangh Member" readonly required>
        </div>
        <div class="col-md-4">
          <label for="mvalidity" class="form-label">Membership Validity</label>
          <select name="mvalidity" id="mvalidity" class="form-control" required>
            <option value="Life">Lifetime</option>
            <option value="1 Year">1 Year</option>
            <option value="5 Years">5 Years</option>
          </select>
        </div>
        <div class="col-md-4">
          <label for="amount" class="form-label">Membership Amount</label>
          <input type="text" id="amount" name="amount" class="form-control" value="1000" readonly required>
                    <span id="error_amount" class="error-message"></span>

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

    <!-- Remark Section -->
    <div class="form-section">
      <label for="remark" class="form-label">Remark</label>
      <textarea id="remark" name="remark" class="form-control" placeholder="Remark here..." required></textarea>
      <span id="error-remark" class="error-message"></span>
    </div>

    <!-- Attachments -->
    <div class="form-section">
      <h4 class="mb-3">Attachments</h4>
      <div class="row g-3">
        <div class="col-md-4">
          <label for="id-photo" class="form-label text-truncate d-block">A. ID Size Photo</label>
          <input type="file" id="id-photo" name="id-photo" class="form-control" accept="image/*" required>
          <span id="error-id-photo" class="error-message"></span>
         <?php echo isset($errors['id-photo']) ? $errors['id-photo'] : ''; ?>
        </div>
        <div class="col-md-4">
          <label for="aadhaar-copy" class="form-label text-truncate d-block">B. Aadhaar Copy (ID Proof)</label>
          <input type="file" id="adharcard" name="aadhaar-copy" class="form-control" accept="application/pdf,image/*" required>
         <span id="error-adharcard" class="error-message"></span>
         <?php echo isset($errors['adharcard']) ? $errors['adharcard'] : ''; ?>
        </div>
        <div class="col-md-4">
          <label for="address-proof" class="form-label text-truncate">C. Address Proof: Aadhaar, Voter ID, or Driver License</label>
          <input type="file" id="address-proof" name="address-proof" class="form-control" accept="application/pdf,image/*" required>
          <span id="address-proof" class="error-message"></span>
         <?php echo isset($errors['address-proof']) ? $errors['address-proof'] : ''; ?>
        </div>
      </div>
    </div>

    <!-- Payment Details -->
    <div class="form-section">
      <h4 class="mb-3">Payment Details</h4>
      <div class="row g-3">
        <!--<div class="col-md-4">-->
        <!--  <label for="account-number" class="form-label">Account Number (Bank of Baroda)</label>-->
        <!--  <input type="text" id="account-number" name="account-number" class="form-control" value="72310100002678" readonly disabled required>-->
        <!--</div>-->
        <div class="col-md-4">
          <label for="amount" class="form-label">Amount</label>
          <input type="text" id="tamount" name="tamount" class="form-control" placeholder="Enter amount" required>
          <span id="error-tamount" class="error-message"></span>
        </div>
        <div class="col-md-4">
          <label for="reference-number" class="form-label">Reference / UTR Number</label>
          <input type="text" id="reference-number" name="reference-number" class="form-control" placeholder="Enter reference number of your transaction" required>
          <span id="error-reference-number" class="error-message"></span>
        </div>
      </div>
    </div>

    <!-- Submit Button -->
    <div class="form-section text-center">
      <button type="submit" class="btn btn-primary">Submit Application</button>
    </div>

  </form>
</div>
      <script>
    document.getElementById('form').addEventListener('submit', function(event) {
        let isValid = true;

        // Clear previous errors
        document.querySelectorAll('.error-message').forEach(function(error) {
            error.textContent = '';
        });

        // Validate Email
        const email = document.getElementById('email');
        const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        if (!email.value.match(emailRegex)) {
            isValid = false;
            document.getElementById('error-email').textContent = 'Please enter a valid email address.';
            email.focus();
        }

        // Validate Required Fields
        const requiredFields = ['username', 'membership_type','remark'];
        requiredFields.forEach(function(field) {
            const fieldElement = document.getElementById(field);
            if (fieldElement && !fieldElement.value.trim()) {
                isValid = false;
                document.getElementById('error-' + field).textContent = `${fieldElement.placeholder} is required.`;
                fieldElement.focus();
            }
        });

        // Validate File Uploads
        const files = [
            { id: 'adharcard', name: 'Aadhar Card' },
            { id: 'hospital_estimate', name: 'Hospital Estimate' },
            { id: 'other_documents', name: 'Other Documents' }
        ];
        const allowedExtensions = ['pdf', 'jpeg', 'jpg', 'png'];
        files.forEach(function(file) {
            const fileInput = document.getElementById(file.id);
            if (fileInput && fileInput.files.length > 0) {
                const fileExtension = fileInput.files[0].name.split('.').pop().toLowerCase();
                if (!allowedExtensions.includes(fileExtension)) {
                    isValid = false;
                    document.getElementById('error-' + file.id).textContent = `${file.name} must be a PDF, JPEG, JPG, or PNG file.`;
                    fileInput.focus();
                }
            } else if (fileInput && !fileInput.files.length) {
                isValid = false;
                document.getElementById('error-' + file.id).textContent = `Please upload your ${file.name}.`;
                fileInput.focus();
            }
        });

        // Prevent form submission if validation fails
        if (!isValid) {
            event.preventDefault();
            showAlert('Please fix the highlighted errors and try again.', 'danger');
        } else {
            showAlert('Form submitted successfully!', 'success');
        }
    });

    function showAlert(message, type) {
        const alertDiv = document.getElementById('error-message');
        alertDiv.textContent = message;
        alertDiv.classList.remove('alert-success', 'alert-danger');
        alertDiv.classList.add('alert', type === 'success' ? 'alert-success' : 'alert-danger');
    }

// Function to prevent numbers and special characters
// Function to validate input for letters only
function validateLettersOnly(event) {
    const inputElement = event.target;
    const value = inputElement.value;

    // Regular expression to allow only letters and spaces
    const lettersOnlyRegex = /^[a-zA-Z\s]*$/;

    if (!lettersOnlyRegex.test(value)) {
        // Remove the last entered character if it's not valid
        inputElement.value = value.slice(0, -1);
        // Show error message
        const errorElement = document.getElementById('error-' + inputElement.id);
        errorElement.textContent = 'Only letters are allowed.';
    } else {
        // Clear error message if valid
        const errorElement = document.getElementById('error-' + inputElement.id);
        errorElement.textContent = '';
    }
}

// Add input event listeners to the name fields
document.getElementById('username').addEventListener('input', validateLettersOnly);
document.getElementById('remark').addEventListener('input', validateLettersOnly);



// Function to validate mobile number input
// Function to validate input fields for numbers
// Function to validate input fields for numbers
function validateNumberInput(event) {
    const inputElement = event.target;
    const value = inputElement.value;

    // Allow only numbers using regex
    const numbersOnlyRegex = /^[0-9]*$/;

    if (!numbersOnlyRegex.test(value)) {
        // Remove invalid characters
        inputElement.value = value.replace(/[^0-9]/g, '');
    }

    // Limit the length based on the input field
    let maxLength;
    if (inputElement.id === 'mobile' || inputElement.id === 'alternate_mobile') {
        maxLength = 10; // Mobile numbers have a maximum length of 10 digits
    } 
    else if (inputElement.id === 'tamount') {
        maxLength = 15; // Allow up to 15 digits for amount fields
    }

    if (value.length > maxLength) {
        inputElement.value = value.slice(0, maxLength);
    }

    // Find error message element
    const errorElement = document.getElementById('error-' + inputElement.id);
    if (errorElement) {
        if (inputElement.id === 'mobile' || inputElement.id === 'alternate_mobile') {
            const expectedLength = 10;
            if (inputElement.value.length !== expectedLength) {
                errorElement.textContent = `${inputElement.placeholder}`;
            } else {
                errorElement.textContent = '';
            }
        } else if (inputElement.id === 'tamount') {
            if (!numbersOnlyRegex.test(value)) {
                errorElement.textContent = 'Only numbers allowed.';
            } else {
                errorElement.textContent = '';
            }
        }
    }
}

// Add input event listener to relevant fields
document.getElementById('mobile').addEventListener('input', validateNumberInput);
document.getElementById('alternate_mobile').addEventListener('input', validateNumberInput);
document.getElementById('tamount').addEventListener('input', validateNumberInput);
// document.getElementById('tution_fee').addEventListener('input', validateNumberInput);
// document.getElementById('other_amount').addEventListener('input', validateNumberInput);
// document.getElementById('m1').addEventListener('input', validateNumberInput);
// document.getElementById('m2').addEventListener('input', validateNumberInput);
// document.getElementById('m3').addEventListener('input', validateNumberInput);




</script>
<style>
  .text-danger {
    color: red;
  }
</style>


<script>
// Function to validate the form
document.getElementById('form').addEventListener('submit', function (event) {
  let password = document.getElementById('password').value;
  let confirmPassword = document.getElementById('confirm_password').value;
  let passwordError = document.getElementById('error-password');
  let confirmPasswordError = document.getElementById('error-confirm_password');

  // Reset error messages
  passwordError.innerText = '';
  confirmPasswordError.innerText = '';

  // Password strength regex (Minimum 8 characters, at least one uppercase, one lowercase, and one number)
  let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d@$!%*?&]{8,}$/;

  if (!passwordPattern.test(password)) {
    passwordError.innerText = 'Password must be at least 8 characters long, with uppercase, lowercase, and a number.';
    event.preventDefault();
  }

  if (password !== confirmPassword) {
    confirmPasswordError.innerText = 'Passwords do not match.';
    event.preventDefault();
  }
});
</script>
<script>
  function togglePassword(inputId, iconId) {
    const passwordInput = document.getElementById(inputId);
    const icon = document.getElementById(iconId);
    
    if (passwordInput.type === "password") {
      passwordInput.type = "text";
      icon.classList.remove("fa-eye");
      icon.classList.add("fa-eye-slash");
    } else {
      passwordInput.type = "password";
      icon.classList.remove("fa-eye-slash");
      icon.classList.add("fa-eye");
    }
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php
// Include database connection
include('config.php'); 

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
    // Sanitize and get the form values
    $username = $_POST['username'];
    $middle_name = $_POST['middle_name'];
    $surname = $_POST['surname'];
    $email = $_POST['email'];
    $password = $_POST['password'];
    $cpassword = $_POST['cpassword'];
    $remark = $_POST['remark'];
    $membership_type = $_POST['membership_type'];
    $mvalidity = $_POST['mvalidity'];
    $amount = $_POST['amount'];
     $tamount = $_POST['tamount'];
        $ref_no = $_POST['reference-number'];


    // File upload paths
    $id_photo = $_FILES['id-photo']['name'];
    $aadhaar_copy = $_FILES['aadhaar-copy']['name'];
    $address_proof = $_FILES['address-proof']['name'];

    // File upload destinations
    $id_photo_path = 'uploads/chitpavan_sangh_membership/' . basename($id_photo);
    $aadhaar_copy_path = 'uploads/chitpavan_sangh_membership/' . basename($aadhaar_copy);
    $address_proof_path = 'uploads/chitpavan_sangh_membership/' . basename($address_proof);

    // Move uploaded files to the server
    move_uploaded_file($_FILES['id-photo']['tmp_name'], $id_photo_path);
    move_uploaded_file($_FILES['aadhaar-copy']['tmp_name'], $aadhaar_copy_path);
    move_uploaded_file($_FILES['address-proof']['tmp_name'], $address_proof_path);

    // Insert data into the database
    $sql = "INSERT INTO chitpavan_sangh_membership (username, mobile, email,alternate_mobile,  password,membership_type, membership_validity,amount,remark,status,datetime, id_photo, aadhaar_copy, address_proof,reference_number,tamount) 
            VALUES ('$username', '$middle_name', '$email','$surname', '$password',  '$membership_type', '$mvalidity', '$amount','$remark','pending_approval',NOW(), '$id_photo', '$aadhaar_copy', '$address_proof','$ref_no','$tamount')";

    if (mysqli_query($conn, $sql)) {
            echo "<script>alert('Application submitted successfully!');</script>";
    } else {
            echo "<script>alert('$error');</script>";
    }
}
?>