1#@!#!123s

��JFIF�� 1#@!#!123s
: / home4 / mcspunei / public_html / chitpavan.in /
Filename : other_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>
    /* 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;
  }
</style>
<style>
        .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">
        <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 active-button">
        <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" onsubmit="return validateForm()">
   

    <!-- Name Section -->
       <div class="form-section">
      <!--<h4 class="mb-3">Name Details</h4>-->
      <div class="row g-3">
        <div class="col-md-4">
          <label for="name" class="form-label">First Name</label>
          <input type="text" id="name" name="name" class="form-control" placeholder="Enter your first name"   required>
        <span id="error-name" class="error-message"></span>

        </div>
        <div class="col-md-4">
          <label for="middle_name" class="form-label">Middle Name</label>
          <input type="text" id="middle_name" name="middle_name" class="form-control" placeholder="Enter your middle name"    required>
        <span id="error-middle_name" class="error-message"></span>

        </div>
        <div class="col-md-4">
          <label for="surname" class="form-label">Last Name</label>
          <input type="text" id="surname" name="surname" class="form-control" placeholder="Enter your last name"    required>
        <span id="error-surname" class="error-message"></span>

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

 <!-- Name Section -->
    <div class="form-section">
      <!--<h4 class="mb-3">Name Details</h4>-->
      <div class="row g-3">
        <div class="col-md-4">
          <label for="name" class="form-label">Email</label>
          <input type="text" id="email" name="email"  class="form-control" placeholder="Enter your Email"   required>
                  <span id="error-email" 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="mobile" class="form-control" placeholder="Enter your mobile number"   required>
        <span id="error-mobile" class="error-message"></span>
        </div>
        <div class="col-md-4">
           <label for="alternate_mobile" class="form-label">Alternate Mobile</label>
          <input type="text" id="alternate_mobile" name="alternate_mobile" class="form-control"  placeholder="Enter an alternate mobile number">
        <span id="error-alternate_mobile" class="error-message"></span>
        </div>
      </div>
    </div>
    
        <!-- Address Section -->
    <div class="form-section">
      <div >
        <label for="Address" class="form-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" placeholder="Enter Address"    required>
        <span id="error-Address" class="error-message"></span>

     </div>
       <div class="row g-3">
     
        <div class="col-md-4">
          <label for="city" class="form-label">City</label>
          <input type="text" id="city" name="city" class="form-control" placeholder="Enter your city"   required>
        <span id="error-city" class="error-message"></span>

        </div>
        <div class="col-md-4">
          <label for="state" class="form-label">State</label>
          <input type="text" id="state" name="state" class="form-control" placeholder="Enter your state"   required>
        <span id="error-state" class="error-message"></span>

        </div>
        <div class="col-md-4">
          <label for="pincode" class="form-label">Pincode</label>
          <input type="text" id="pincode" name="pincode" class="form-control" placeholder="Enter your pincode" required>
        <span id="error-pincode" class="error-message"></span>

        </div>
      </div>
      
      <div >
        <label for="remark" class="form-label">Remark</label>
        <input type="text" id="remark" name="remark" class="form-control" placeholder="Enter remark" required>
        <span id="error-remark" class="error-message"></span>

     </div>
    </div>
    
    <script>
  function toggleFileUpload(checkbox, fileInputId) {
    let fileInput = document.getElementById(fileInputId);
    fileInput.style.display = checkbox.checked ? 'block' : 'none';
  }
</script>
<div class="form-section">
  <h4 class="mb-3">Select Documents</h4>
  <div class="row">
    <div class="col-md-3">
      <label>Aadhar Card</label>
      <input type="file" class="form-control mt-2" name="aadhar_card" id="aadharUpload">
              <span id="error-documents" class="error-message"></span>

    </div>
    <div class="col-md-3">
      <label>PAN Card</label>
      <input type="file" class="form-control mt-2" name="pan_card" id="panUpload">
                    <span id="error-documents" class="error-message"></span>

    </div>
    <div class="col-md-3">
      <label>Driving Licence</label>
      <input type="file" class="form-control mt-2" name="driving_licence" id="drivingUpload">
                    <span id="error-documents" class="error-message"></span>

    </div>
    <div class="col-md-3">
      <label>Other Document</label>
      <input type="file" class="form-control mt-2" name="other_document" id="otherUpload">
                    <span id="error-documents" class="error-message"></span>

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

</div>
    <!-- Submit Button -->
    <div class="form-section text-center">
      <button type="submit"  name="submit3" class="btn btn-primary">Submit Application</button>
    </div>
        <div id="errorMsg" style="display:none; color:red;">Please select at least 2 documents</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 = ['name', 'middle_name', 'surname', 'Address', 'city', 'state', 'pincode'];
    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.`;
            if (isValid) fieldElement.focus(); // Focus on first empty field
        }
    });

    // Validate mobile and pincode length
    const mobile = document.getElementById('mobile');
    const pincode = document.getElementById('pincode');
        const alternate_mobile = document.getElementById('alternate_mobile');

    if (mobile && mobile.value.length !== 10) {
        isValid = false;
        document.getElementById('error-mobile').textContent = 'Mobile number must be exactly 10 digits.';
    }

  if (alternate_mobile && alternate_mobile.value.length !== 10) {
        isValid = false;
        document.getElementById('error-alternate_mobile').textContent = 'Mobile number must be exactly 10 digits.';
    }
    if (pincode && pincode.value.length !== 6) {
        isValid = false;
        document.getElementById('error-pincode').textContent = 'Pincode must be exactly 6 digits.';
    }

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

// Function to show alerts
function showAlert(message, type) {
    const alertDiv = document.getElementById('alert');
    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 (letters only)
function validateLettersOnly(event) {
    const inputElement = event.target;
    const value = inputElement.value.trim();
    let lettersOnlyRegex;

    if (['exam1_details', 'exam2_details', 'exam3_details'].includes(inputElement.id)) {
        lettersOnlyRegex = /^[a-zA-Z\s.]*$/;  // Allow letters, spaces, and dots
    } else {
        lettersOnlyRegex = /^[a-zA-Z\s]*$/;   // Allow only letters and spaces
    }

    const errorElement = document.getElementById('error-' + inputElement.id);

    if (/\d/.test(value)) {
        inputElement.value = value.replace(/\d/g, '');  // Remove numbers
        errorElement.textContent = 'Numbers are not allowed. Only letters and spaces are allowed.';
    } else if (!lettersOnlyRegex.test(value)) {
        inputElement.value = value.slice(0, -1); // Remove last invalid character
        errorElement.textContent = 'Invalid input. Only letters and spaces are allowed.';
    } else {
        errorElement.textContent = '';
    }
}

// Attach event listeners using event delegation for letters only validation
document.addEventListener('input', function(event) {
    const targetId = event.target.id;
    const allowedFields = ['name', 'middle_name', 'surname', 'city', 'state'];

    if (allowedFields.includes(targetId)) {
        validateLettersOnly(event);
    }
});

 const aadhar = document.getElementById('aadharUpload').files.length > 0;
    const pan = document.getElementById('panUpload').files.length > 0;
    const driving = document.getElementById('drivingUpload').files.length > 0;
    const other = document.getElementById('otherUpload').files.length > 0;

    const selectedDocuments = [aadhar, pan, driving, other].filter(doc => doc).length;

    if (selectedDocuments < 2) {
        isValid = false;
        document.getElementById('error-documents').textContent = 'Please select at least two documents.';
    }


// Function to validate mobile number input
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, '');
    }

    let maxLength, minLength;
    if (inputElement.id === 'pincode') {
        maxLength = 6;
        minLength = 6; // Pincode has a length of exactly 6 digits
    } else if (inputElement.id === 'mobile' || inputElement.id === 'alternate_mobile') {
        maxLength = 10; // Mobile numbers have a length of exactly 10 digits
        minLength = 10;
    } 

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

    // Validate length
    const errorElement = document.getElementById('error-' + inputElement.id);
    const expectedLength = inputElement.id === 'pincode' ? 6 : 10;

    if (inputElement.value.length !== expectedLength) {
        errorElement.textContent = `${inputElement.placeholder} must be exactly ${expectedLength} digits.`;
        isValid = false; // Set isValid to false if length doesn't match
    } else {
        errorElement.textContent = '';
        isValid = true;
    }
}

// Add input event listener to relevant fields
document.getElementById('mobile').addEventListener('input', validateNumberInput);
document.getElementById('alternate_mobile').addEventListener('input', validateNumberInput);
document.getElementById('pincode').addEventListener('input', validateNumberInput);
function validateForm() {
    const document1 = document.getElementById('document1').value;
    const document2 = document.getElementById('document2').value;
    // Add more document fields if necessary

    if (!document1 || !document2) {
        // Prevent form submission if documents are not selected
        document.getElementById('errorMsg').style.display = 'block'; // Show the error message
        return false; // Prevent form submission
    }
    
    // If validation passes, submit the form
    document.getElementById('errorMsg').style.display = 'none'; // Hide error message
    return true;
}

</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php
// Initialize variables to store errors
$errors = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit3'])) {
    // Database connection
    include "config.php";
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    error_reporting(E_ALL);

    // Sanitize input data
    $name = $conn->real_escape_string($_POST['name']);
    $middle_name = $conn->real_escape_string($_POST['middle_name']);
    $surname = $conn->real_escape_string($_POST['surname']);
    $email = $conn->real_escape_string($_POST['email']);
    $mobile = $conn->real_escape_string($_POST['mobile']);
    $alternate_mobile = $conn->real_escape_string($_POST['alternate_mobile']);
    $address = $conn->real_escape_string($_POST['Address']);
    $city = $conn->real_escape_string($_POST['city']);
    $state = $conn->real_escape_string($_POST['state']);
    $pincode = $conn->real_escape_string($_POST['pincode']);
    $remark = $conn->real_escape_string($_POST['remark']);

    // Document upload handling
    $documentNames = [];  // To store only the file names
    $requiredDocuments = ['aadhar_card', 'pan_card', 'driving_licence', 'other_document'];
    $errors = [];

    foreach ($requiredDocuments as $document) {
        if (!empty($_FILES[$document]['name'])) {
            $fileName = basename($_FILES[$document]['name']);
            $targetDir = "uploads/others/"; // Ensure this folder exists and is writable
            $targetFile = $targetDir . $fileName; // Keep the original name

            // Validate file type (optional, add validation rules here)
            $allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
            if (in_array($_FILES[$document]['type'], $allowedTypes)) {
                // Move uploaded file
                if (move_uploaded_file($_FILES[$document]['tmp_name'], $targetFile)) {
                    // Store only the file name in the array (not the full path)
                    $documentNames[$document] = $fileName;
                } else {
                    $errors[] = "Error uploading file: $document";
                }
            } else {
                $errors[] = "Invalid file type for $document. Only JPEG, PNG, and PDF files are allowed.";
            }
        }
    }

    // Check if at least two documents are uploaded
    if (count($documentNames) < 2) {
        $errors[] = "At least two documents are mandatory.";
    }

    // Check if there are any validation errors
    if (empty($errors)) {
        // Insert data into the database
        $stmt = $conn->prepare("INSERT INTO other (
            email, name, middle_name, surname, city, state, pincode, mobile, alternate_mobile,
            aadhar_card, pan_card, driving_licence, other_document, address, datetime, status, remark
        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW(), 'pending_approval', ?)");

        // Bind parameters with only the file names (not full paths)
        $stmt->bind_param(
            "sssssssssssssss",
            $email,
            $name,
            $middle_name,
            $surname,
            $city,
            $state,
            $pincode,
            $mobile,
            $alternate_mobile,
            $documentNames['aadhar_card'],
            $documentNames['pan_card'],
            $documentNames['driving_licence'],
            $documentNames['other_document'],
            $address,
            $remark
        );

        if ($stmt->execute()) {
            echo "<script>alert('Application submitted successfully!');</script>";
        } else {
            echo "<script>alert('Error: " . $conn->error . "');</script>";
        }

        $stmt->close();
    } else {
        // Output the errors as JavaScript alert
        $errorMessage = implode("\n", $errors);
        echo "<script>alert('$errorMessage');</script>";
    }

    $conn->close();
}
?>