<?php
// Prevent access to register.php after 02-07-2025
date_default_timezone_set('Asia/Kolkata'); // Set timezone to India

$cutoffDate = new DateTime('2026-10-01 22:00:00', new DateTimeZone('Asia/Kolkata'));
$today      = new DateTime('now', new DateTimeZone('Asia/Kolkata'));

if ($today > $cutoffDate) {
    // Optional: Redirect or show message
    include 'close.php';
    exit; // Stop further execution
}
?>

<?php include 'dbclass/dbclass.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

  <!-- CropperJS CDN -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>

  <link rel="icon" href="download.jpeg">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">

  <title>🎭 MAWA 🎶</title>
  <style>
    body {
      background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
                  url('fb1c39f459d6727cb164eb106f3fe298.jpg') no-repeat center center fixed;
      background-size: cover;
      font-family: 'Poppins', sans-serif;
      background-color: #000;
    }
    .card-registration {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 20px;
      color: #f5d774;
      box-shadow: 0 8px 24px rgba(255, 215, 0, 0.2);
    }
    .form-label {
      color: #f9e8a4;
      font-weight: 500;
    }
    .form-control {
      background-color: rgba(255, 215, 0, 0.05);
      color: #fff;
      border: 1px solid #f5d774;
      border-radius: 10px;
      transition: all 0.3s ease;
    }
    .form-control::placeholder { color: #ffecb3; }
    .form-control:focus {
      background-color: rgba(255, 215, 0, 0.1);
      border-color: #ffe066;
      box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.3);
      color: #fff;
    }
    select.form-control { background-color: rgba(255, 215, 0, 0.05); color: #f5d774; }
    option { color: #000; background-color: #fff; }
    .img-container img { width: 100%; height: auto; display: block; }
    #previewCropped {
      max-height: 200px; display: none; margin-top: 10px;
      border: 1px solid #f5d774; border-radius: 10px;
    }
    .btn-primary {
      background: linear-gradient(to right, #f5d774, #f1c40f);
      border: none; color: #000; font-weight: 600;
      border-radius: 30px; padding: 10px 30px;
    }
    .btn-primary:hover {
      background: linear-gradient(to right, #ffe066, #f1c40f);
      color: #000;
    }
    /* Override Choices.js selected item text color */
.choices__item--selectable {
  color: black !important;
  background-color: #f5d774 !important; /* optional, match your theme */
  border-color: #f5d774 !important;
}

/* Optional: change the 'x' remove button color */
.choices__button {
  color: black !important;
}

/* Also make the dropdown items black text */
.choices__list--dropdown .choices__item {
  color: black !important;
}

  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

</head>
<body>
<section class="vh-100">
  <div class="container py-5 h-100">
    <div class="row justify-content-center align-items-center h-100">
      <div class="col-12 col-lg-9 col-xl-10">
        <div class="card shadow-2-strong card-registration">
          <div class="card-body p-4 p-md-5">
            <h2 class="mb-4 text-center" style="color: #ffd700; text-shadow: 1px 1px 3px rgba(255,215,0,0.6);">
              Application Form
            </h2>

            <form action="insert.php" method="POST" enctype="multipart/form-data" autocomplete="off">

              <!-- Personal Details -->
              <h5 class="text-center mb-3" style="color:#ffd700;">1) Personal Details</h5>
              <div class="row">
                <div class="col-md-6 mb-4">
                  <label class="form-label">Candidate Full Name (as on Aadhar Card)<span style="color:red;"> *</span></label>
                  <input type="text" name="fullname" class="form-control" required maxlength="150" />
                </div>
                <div class="col-md-6 mb-4">
                  <label class="form-label">Parent Name<span style="color:red;"> *</span></label>
                  <input type="text" name="parentname" class="form-control" required maxlength="150" />
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 mb-4">
                  <label class="form-label">Address<span style="color:red;"> *</span></label>
                  <input type="text" name="address" class="form-control" required maxlength="300" />
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 mb-4">
                  <label class="form-label">Age<span style="color:red;"> *</span></label>
                  <input type="number" name="age" class="form-control" required min="1" max="100" />
                </div>
                <div class="col-md-4 mb-4">
                  <label class="form-label">Gender<span style="color:red;"> *</span></label>
                  <select class="form-control" name="gender" required>
                    <option value="">Select Gender</option>
                    <option>Male</option>
                    <option>Female</option>
                  </select>
                </div>
              </div>

              <!-- Location Details -->
              <h5 class="text-center mb-3" style="color:#ffd700;">2) Location Details</h5>
              <div class="row">
                <div class="col-md-4 mb-4">
                  <label class="form-label">District<span style="color:red;"> *</span></label>
                  
                   
                    <?php
                                            $query = 'SELECT * FROM districts order by district_id ';
$data                                              = findQuery($query);
echo '<select class="form-control" id="district" name="district" required>';
echo "<option value=''>Select District</option>";

foreach ($data as $row) {
    echo "<option value='" . $row['district_id'] . "'>" . $row['district_name'] . '</option>';
}
echo '</select>';
?>
                  </select>
                </div>
                <div class="col-md-4 mb-4">
                  <label class="form-label">Taluk<span style="color:red;"> *</span></label>
                  <select class="form-control" name="taluk" id="taluk"  required>
                    <option value="">Select Taluk</option>
                  </select>
                </div>
                <div class="col-md-4 mb-4">
                  <label class="form-label">Grama Panchayath / Municipality / Corporation<span style="color:red;"> *</span></label>
                  <input type="text" name="localbody" class="form-control" required maxlength="200" />
                </div>
              </div>

              <!-- Contact Details -->
              <h5 class="text-center mb-3" style="color:#ffd700;">3) Contact Details</h5>
              <div class="row">
                <div class="col-md-6 mb-4">
                  <label class="form-label">Contact Number<span style="color:red;"> *</span></label>
                  <input type="tel" name="contact" class="form-control" maxlength="10" pattern="[6-9][0-9]{9}" required />
                </div>
                <div class="col-md-6 mb-4">
                  <label class="form-label">Other Contact Number(Friend's or Relative's Number)<span style="color:red;"> *</span></label>
                  <input type="tel" name="othercontact" class="form-control" maxlength="10" pattern="[6-9][0-9]{9}" required />
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 mb-4">
                  <label class="form-label">Whatsapp Number<span style="color:red;"> *</span></label>
                  <input type="tel" name="whatsapp" class="form-control" maxlength="10" pattern="[6-9][0-9]{9}" required />
                </div>
                <div class="col-md-6 mb-4">
                  <label class="form-label">Email ID</label>
                  <input type="email" name="email" class="form-control" maxlength="150" />
                </div>
              </div>

              <!-- Food Details -->
              <h5 class="text-center mb-3" style="color:#ffd700;">4) Food Details</h5>
              <div class="row">
                <div class="col-md-6 mb-4">
                  <label class="form-label">Candidate Food Preference<span style="color:red;"> *</span></label>
                  <select class="form-control" name="food_candidate" required>
                    <option value="">Select</option>
                    <option>Veg</option>
                    <option>Non-Veg</option>
                    <option>No Need</option>
                    
                  </select>
                </div>
                <div class="col-md-6 mb-4">
                  <label class="form-label">Parents/Guardian Food Preference<span style="color:red;"> *</span></label>
                  <select class="form-control" name="food_parent" required>
                    <option value="">Select</option>
                    <option>Veg</option>
                    <option>Non-Veg</option>
                    <option>No Need</option>
                  </select>
                </div>
              </div>

              <!-- Program Details -->
              <h5 class="text-center mb-3" style="color:#ffd700;">5) Program Details</h5>
              <div class="row">
               <div class="col-md-12 mb-4">
  <label class="form-label">Item (Select one or more)<span style="color:red;"> *</span></label>
  <select id="items" name="items[]" multiple required>
    <?php
      $query = "SELECT * FROM items ORDER BY id";
$data = findQuery($query); // using your dbclass/dbclass.php helper
foreach ($data as $row) {
    echo "<option value='" . $row['id'] . "'>" . htmlspecialchars($row['item_name']) . "</option>";
}
?>
  </select>
</div>

                <div class="col-md-6 mb-4">
                  <label class="form-label">Category<span style="color:red;"> *</span></label>
                  <select class="form-control" name="category" id="category" required>
  <option value="">Select</option>
  <option>LP</option>
  <option>UP</option>
  <option>HS</option>
  <option>HSS</option>
  <option>COLLEGE</option>
  <option>Public</option>
</select>
                </div>
 <div class="col-md-6 mb-4" id="agegroupDiv" style="display: none;">
  <label class="form-label">Age Group<span style="color:red;"> *</span></label>
  <select class="form-control" name="agegroup" id="agegroup">
    <option value="">Select Age Group</option>
    <option value="20-30">Age 20-30</option>
    <option value="31-40">Age 31-40</option>
    <option value="41-50">Age 41-50</option>
  </select>
</div>

              </div>

              <!-- Upload Section -->
             

              <!-- Important Notes -->
              <div class="alert alert-warning mt-4" style="font-size:14px; background:rgba(255,255,255,0.1); color:#fff; border:1px solid #ffd700;">
  <b>റെജിസ്ട്രേഷൻ ഫീ ₹2000/-</b> രൂപയിൽ നിന്നും ₹200/-രൂപ ഫോം എൻട്രിയായി +91 7034556705 എന്ന ഗൂഗിൾ പേ നമ്പർ വഴി അടച്ച്  
  ഇതേ നമ്പറിലുള്ള വാട്സപ്പിലെക്ക് സ്ക്രീൻ ഷോട്ട് അയച്ച് നിങ്ങളുടെ എൻട്രി ഉറപ്പ് വരുത്തേണ്ടതാകുന്നു.<br><br>

  Entry Fee: ₹200/- രൂപ അടച്ചതിന്റെ ബാക്കി വരുന്ന തുക നേരിട്ട് വരുമ്പോൾ നൽകേണ്ടതാണ്.<br><br>

  രജിസ്ട്രേഷൻ പൂർത്തീകരിക്കാൻ താഴെ കാണുന്ന Submit Button അമർത്തുക.<br><br>

  <b>NB:-</b> എൻട്രി ഫീസായ ₹200/- രൂപ അടക്കാത്ത പക്ഷം ഫോം ക്യാൻസൽ ആകുന്നതും, പരിപാടിയിൽ പങ്കെടുക്കാൻ സാധിക്കാതെയും വരുന്നതാണു.<br>
  സ്ക്രീൻ ഷോട്ടിനൊപ്പം റെജിസ്ട്രേഷൻ ഫോമിൽ നൽകിയ മൊബൈൽ നമ്പറും രേഖപ്പെടുത്തേണ്ടതാണ്
</div>


              <div class="text-center mt-4">
                <input class="btn btn-primary btn-lg px-5" type="submit" value="Submit" />
              </div>

              <footer style="margin-top: 50px; padding: 15px; background-color: #f3f3fb; text-align: center; border-top: 1px solid #ccc; border-radius: 0 0 12px 12px; font-size: 16px; font-weight: bold;">
                <span style="background: linear-gradient(90deg, #ff6a00, #ee0979, #00c3ff);
                             -webkit-background-clip: text;
                             -webkit-text-fill-color: transparent;
                             display: inline-block;
                             margin-right: 10px;">
                  Powered by
                </span>
                <a href="https://workmateinfotech.com" target="_blank">
                  <img src="https://workmateinfotech.com/images/Workmate_Infotech_Private_Limited____Logo_1_-0_1__1_-removebg-preview%201%20(2).png"
                       alt="Workmate Infotech Logo" style="height: 40px; vertical-align: middle;">
                </a>
              </footer>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  
</section>

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Initialize Choices.js
    new Choices('#items', {
        removeItemButton: true,
        placeholderValue: 'Select items',
        searchPlaceholderValue: 'Search...',
    });

    // District -> Taluk dynamic dropdown
    $('#district').on('change', function () {
        const district = $(this).val();
        $.post('taluk.php', { district: district }, function (data) {
            $('#taluk').html(data);
        });
    });

    // Age Group visibility logic
    const category = document.getElementById("category");
    const agegroup = document.getElementById("agegroup");
    const agegroupDiv = document.getElementById("agegroupDiv");

    function toggleAgeRequirement() {
        if (category.value === "Public") {
            agegroupDiv.style.display = "block"; // show
            agegroup.setAttribute("required", "required");
        } else {
            agegroupDiv.style.display = "none"; // hide
            agegroup.removeAttribute("required");
            agegroup.value = ""; // reset
        }
    }

    category.addEventListener("change", toggleAgeRequirement);

    // Run on page load in case of pre-selected value
    toggleAgeRequirement();
});



</script>