{"id":5418,"date":"2026-04-06T20:42:18","date_gmt":"2026-04-06T16:42:18","guid":{"rendered":"https:\/\/farei.mu\/farei2021\/?page_id=5418"},"modified":"2026-04-06T20:46:13","modified_gmt":"2026-04-06T16:46:13","slug":"application-for-training","status":"publish","type":"page","link":"https:\/\/farei.mu\/farei2021\/?page_id=5418","title":{"rendered":"Application for Training"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5418\" class=\"elementor elementor-5418\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-453f11c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"453f11c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-881824d\" data-id=\"881824d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-678e82f elementor-widget elementor-widget-html\" data-id=\"678e82f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>FAREI \u2013 Training Course Application<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+4:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --green-900: #1a3a1a;\n    --green-700: #2d6a2d;\n    --green-600: #368236;\n    --green-500: #3d9b3d;\n    --green-100: #e8f5e8;\n    --green-50: #f3faf3;\n    --sand-50: #faf9f6;\n    --sand-100: #f0eee8;\n    --text-primary: #1a2e1a;\n    --text-secondary: #4a5e4a;\n    --text-muted: #7a8a7a;\n    --border: #c8d4c8;\n    --border-focus: #3d9b3d;\n    --white: #ffffff;\n    --red-600: #c0392b;\n    --red-50: #fdf2f0;\n  }\n\n  body {\n    font-family: 'DM Sans', sans-serif;\n    background: var(--sand-50);\n    color: var(--text-primary);\n    line-height: 1.6;\n    min-height: 100vh;\n  }\n\n  .page-header {\n    background: var(--white);\n    color: var(--green-900);\n    padding: 2.5rem 1.5rem 2rem;\n    text-align: center;\n    border-bottom: 4px solid var(--green-600);\n  }\n  .page-header h1 {\n    font-family: 'Source Serif 4', serif;\n    font-size: 1.55rem;\n    font-weight: 700;\n    letter-spacing: 0.02em;\n    margin-bottom: 0.25rem;\n    color: var(--green-700);\n  }\n  .page-header p {\n    font-size: 0.92rem;\n    opacity: 0.85;\n    font-weight: 400;\n    color: var(--text-secondary);\n  }\n  .logo-row {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.75rem;\n    margin-bottom: 0.75rem;\n  }\n  .logo-img {\n    height: 65px;\n    max-height: 65px;\n    max-width: 180px;\n    width: auto;\n    object-fit: contain;\n    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));\n  }\n\n  .form-container {\n    max-width: 720px;\n    margin: 1.5rem auto 3rem;\n    padding: 0 1.25rem;\n    position: relative;\n    z-index: 1;\n  }\n\n  .card {\n    background: var(--white);\n    border-radius: 14px;\n    padding: 2rem 2rem;\n    margin-bottom: 1.25rem;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);\n    border: 1px solid rgba(0,0,0,0.04);\n  }\n\n  .card-title {\n    font-family: 'Source Serif 4', serif;\n    font-size: 1.15rem;\n    font-weight: 700;\n    color: var(--green-900);\n    margin-bottom: 1.5rem;\n    padding-bottom: 0.75rem;\n    border-bottom: 2px solid var(--green-100);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n  .card-title .num {\n    background: var(--green-600);\n    color: var(--white);\n    width: 28px; height: 28px;\n    border-radius: 50%;\n    display: inline-flex; align-items: center; justify-content: center;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.82rem;\n    font-weight: 700;\n    flex-shrink: 0;\n  }\n\n  \/* Course selector *\/\n  .course-selector {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 0.75rem;\n    margin-bottom: 0;\n  }\n  .course-option {\n    border: 2px solid var(--border);\n    border-radius: 10px;\n    padding: 1.15rem 1rem;\n    cursor: pointer;\n    transition: all 0.2s;\n    text-align: center;\n    position: relative;\n  }\n  .course-option:hover { border-color: var(--green-500); background: var(--green-50); }\n  .course-option.selected {\n    border-color: var(--green-600);\n    background: var(--green-50);\n    box-shadow: 0 0 0 3px rgba(61,155,61,0.15);\n  }\n  .course-option .icon { font-size: 1.6rem; margin-bottom: 0.35rem; }\n  .course-option .label { font-weight: 600; font-size: 0.88rem; color: var(--text-primary); }\n  .course-option .sublabel { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }\n  .course-option .check {\n    position: absolute; top: 8px; right: 8px;\n    width: 22px; height: 22px; border-radius: 50%;\n    background: var(--green-600); color: white;\n    display: none; align-items: center; justify-content: center; font-size: 0.7rem;\n  }\n  .course-option.selected .check { display: flex; }\n\n  \/* Form fields *\/\n  .row { display: grid; gap: 1rem; margin-bottom: 1rem; }\n  .row-2 { grid-template-columns: 1fr 1fr; }\n  .row-3 { grid-template-columns: 1fr 1fr 1fr; }\n  @media (max-width: 600px) {\n    .row-2, .row-3 { grid-template-columns: 1fr; }\n    .course-selector { grid-template-columns: 1fr; }\n  }\n\n  .field { display: flex; flex-direction: column; }\n  .field label {\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--text-secondary);\n    margin-bottom: 0.35rem;\n    letter-spacing: 0.01em;\n  }\n  .field label .req { color: var(--red-600); margin-left: 2px; }\n\n  .field input[type=\"text\"],\n  .field input[type=\"email\"],\n  .field input[type=\"tel\"],\n  .field input[type=\"number\"],\n  .field select,\n  .field textarea {\n    padding: 0.7rem 0.85rem;\n    border: 1.5px solid var(--border);\n    border-radius: 8px;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.92rem;\n    color: var(--text-primary);\n    background: var(--white);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n    width: 100%;\n  }\n  .field input:focus, .field select:focus, .field textarea:focus {\n    border-color: var(--border-focus);\n    box-shadow: 0 0 0 3px rgba(61,155,61,0.12);\n  }\n  .field input.error, .field select.error {\n    border-color: var(--red-600);\n    background: var(--red-50);\n  }\n  .error-msg {\n    color: var(--red-600);\n    font-size: 0.78rem;\n    margin-top: 0.25rem;\n    display: none;\n  }\n\n  \/* NIC boxes *\/\n  .nic-row {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n  }\n  .nic-row input {\n    width: 38px; height: 42px;\n    text-align: center;\n    font-size: 1.05rem;\n    font-weight: 600;\n    padding: 0;\n    border: 1.5px solid var(--border);\n    border-radius: 6px;\n    font-family: 'DM Sans', sans-serif;\n    outline: none;\n    text-transform: uppercase;\n    transition: border-color 0.2s;\n  }\n  .nic-row input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(61,155,61,0.12); }\n\n  \/* Radio \/ checkbox groups *\/\n  .option-group {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.25rem;\n  }\n  .option-pill {\n    display: flex; align-items: center; gap: 0.4rem;\n    padding: 0.5rem 1rem;\n    border: 1.5px solid var(--border);\n    border-radius: 50px;\n    cursor: pointer;\n    font-size: 0.85rem;\n    font-weight: 500;\n    transition: all 0.2s;\n    user-select: none;\n    color: var(--text-secondary);\n  }\n  .option-pill:hover { border-color: var(--green-500); background: var(--green-50); }\n  .option-pill input { display: none; }\n  .option-pill.selected {\n    border-color: var(--green-600);\n    background: var(--green-100);\n    color: var(--green-900);\n    font-weight: 600;\n  }\n  .option-pill .dot {\n    width: 16px; height: 16px;\n    border-radius: 50%;\n    border: 2px solid var(--border);\n    position: relative;\n    flex-shrink: 0;\n    transition: border-color 0.2s;\n  }\n  .option-pill.selected .dot {\n    border-color: var(--green-600);\n  }\n  .option-pill.selected .dot::after {\n    content: '';\n    position: absolute;\n    top: 3px; left: 3px;\n    width: 6px; height: 6px;\n    background: var(--green-600);\n    border-radius: 50%;\n  }\n  .option-pill .box {\n    width: 16px; height: 16px;\n    border-radius: 4px;\n    border: 2px solid var(--border);\n    position: relative;\n    flex-shrink: 0;\n    transition: all 0.2s;\n  }\n  .option-pill.selected .box {\n    border-color: var(--green-600);\n    background: var(--green-600);\n  }\n  .option-pill.selected .box::after {\n    content: '\u2713';\n    position: absolute;\n    top: -2px; left: 1px;\n    font-size: 0.7rem;\n    color: white;\n    font-weight: 700;\n  }\n\n  \/* Conditional sections *\/\n  .conditional { display: none; margin-top: 0.75rem; }\n  .conditional.visible { display: block; }\n  .indent-section {\n    padding-left: 1rem;\n    border-left: 3px solid var(--green-100);\n    margin-top: 0.75rem;\n  }\n\n  \/* Declaration *\/\n  .declaration {\n    background: var(--green-50);\n    border: 1.5px solid var(--green-100);\n    border-radius: 10px;\n    padding: 1.25rem 1.25rem;\n    font-size: 0.88rem;\n    color: var(--text-secondary);\n    line-height: 1.65;\n    margin-bottom: 1rem;\n  }\n  .declaration strong { color: var(--text-primary); }\n\n  .consent-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.65rem;\n    margin-top: 1rem;\n    cursor: pointer;\n  }\n  .consent-row input[type=\"checkbox\"] {\n    width: 20px; height: 20px;\n    margin-top: 2px;\n    accent-color: var(--green-600);\n    flex-shrink: 0;\n  }\n  .consent-row span { font-size: 0.88rem; color: var(--text-primary); font-weight: 500; }\n\n  \/* Buttons *\/\n  .btn-row {\n    display: flex;\n    gap: 0.75rem;\n    margin-top: 1.5rem;\n    flex-wrap: wrap;\n  }\n  .btn {\n    padding: 0.85rem 2rem;\n    border-radius: 10px;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.95rem;\n    font-weight: 600;\n    cursor: pointer;\n    border: none;\n    transition: all 0.2s;\n  }\n  .btn-primary {\n    background: linear-gradient(135deg, var(--green-600), var(--green-700));\n    color: var(--white);\n    box-shadow: 0 2px 8px rgba(45,106,45,0.3);\n  }\n  .btn-primary:hover { box-shadow: 0 4px 16px rgba(45,106,45,0.4); transform: translateY(-1px); }\n  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }\n  .btn-secondary {\n    background: var(--white);\n    color: var(--text-secondary);\n    border: 1.5px solid var(--border);\n  }\n  .btn-secondary:hover { border-color: var(--text-secondary); }\n\n  \/* Toast *\/\n  .toast {\n    position: fixed;\n    top: 1.5rem;\n    right: 1.5rem;\n    background: var(--green-900);\n    color: white;\n    padding: 1rem 1.5rem;\n    border-radius: 10px;\n    font-size: 0.9rem;\n    font-weight: 500;\n    box-shadow: 0 6px 20px rgba(0,0,0,0.2);\n    transform: translateX(120%);\n    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);\n    z-index: 999;\n  }\n  .toast.show { transform: translateX(0); }\n\n  .footer-note {\n    text-align: center;\n    font-size: 0.8rem;\n    color: var(--text-muted);\n    margin-top: 1rem;\n    padding: 1rem;\n  }\n  .footer-note a { color: var(--green-600); text-decoration: none; }\n\n  \/* Kitchen gardening specific *\/\n  .kg-only, .gt-only { display: none; }\n  body.course-kg .kg-only { display: block; }\n  body.course-gt .gt-only { display: block; }\n  body.course-kg .kg-only.row-2,\n  body.course-gt .gt-only.row-2 { display: grid; }\n\n  \/* Print *\/\n  @media print {\n    body { background: white; }\n    .page-header { background: var(--white) !important; border-bottom: 4px solid var(--green-600) !important; -webkit-print-color-adjust: exact; }\n    .btn-row { display: none; }\n    .card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }\n  }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"page-header\">\n  <div class=\"logo-row\">\n    <!-- ============================================================\n         HOW TO ADD YOUR LOGO:\n         \n         Option A \u2013 If your logo is already on your website:\n           Replace the src below with your logo URL, e.g.:\n           src=\"https:\/\/www.farei.mu\/wp-content\/uploads\/your-logo.png\"\n         \n         Option B \u2013 If you need to upload it to WordPress first:\n           1. Log in to WordPress admin\n           2. Go to Media \u2192 Add New\n           3. Upload your logo image (PNG with transparent background works best)\n           4. Click on the uploaded image \u2192 Copy the URL\n           5. Paste that URL into the src below\n         \n         Recommended: Use a PNG file with transparent background,\n         ideally around 200\u2013400px wide for best quality.\n         ============================================================ -->\n    <img decoding=\"async\" src=\"https:\/\/farei.mu\/farei2021\/wp-content\/uploads\/2026\/04\/FAREI-Logo-Final.png\" alt=\"FAREI Logo\" class=\"logo-img\">\n  <\/div>\n  <h1>Food and Agricultural Research and Extension Institute<\/h1>\n  <p>Training Course Application Form<\/p>\n<\/div>\n\n<div class=\"form-container\">\n  <form id=\"fareiForm\" novalidate>\n\n    <!-- Course Selection -->\n    <div class=\"card\">\n      <div class=\"card-title\"><span class=\"num\">1<\/span> Select Course Type<\/div>\n      <div class=\"course-selector\">\n        <div class=\"course-option\" data-course=\"gt\" onclick=\"selectCourse('gt')\">\n          <div class=\"check\">\u2713<\/div>\n          <div class=\"icon\">\ud83c\udf3e<\/div>\n          <div class=\"label\">General Training Course<\/div>\n          <div class=\"sublabel\">Crop, Livestock & Agribusiness<\/div>\n        <\/div>\n        <div class=\"course-option\" data-course=\"kg\" onclick=\"selectCourse('kg')\">\n          <div class=\"check\">\u2713<\/div>\n          <div class=\"icon\">\ud83c\udf31<\/div>\n          <div class=\"label\">Kitchen Gardening<\/div>\n          <div class=\"sublabel\">Home garden training<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Personal Information -->\n    <div class=\"card\">\n      <div class=\"card-title\"><span class=\"num\">2<\/span> Personal Information<\/div>\n\n      <div class=\"row\">\n        <div class=\"field\">\n          <label>Title <span class=\"req\">*<\/span><\/label>\n          <div class=\"option-group\" data-group=\"title\">\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"title\" value=\"Mr\" required><span class=\"dot\"><\/span> Mr<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"title\" value=\"Mrs\"><span class=\"dot\"><\/span> Mrs<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"title\" value=\"Ms\"><span class=\"dot\"><\/span> Ms<\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"row row-2\">\n        <div class=\"field\">\n          <label for=\"surname\">Surname <span class=\"req\">*<\/span><\/label>\n          <input type=\"text\" id=\"surname\" name=\"surname\" required>\n        <\/div>\n        <div class=\"field\">\n          <label for=\"firstName\">First Name <span class=\"req\">*<\/span><\/label>\n          <input type=\"text\" id=\"firstName\" name=\"firstName\" required>\n        <\/div>\n      <\/div>\n\n      <div class=\"row\">\n        <div class=\"field\">\n          <label for=\"address\">Address <span class=\"req\">*<\/span><\/label>\n          <textarea id=\"address\" name=\"address\" rows=\"2\" required style=\"resize:vertical\"><\/textarea>\n        <\/div>\n      <\/div>\n\n      <div class=\"row row-2\">\n        <div class=\"field\">\n          <label for=\"fixedLine\">Fixed Line \/ Tel. No.<\/label>\n          <input type=\"tel\" id=\"fixedLine\" name=\"fixedLine\" placeholder=\"e.g. 433-4378\">\n        <\/div>\n        <div class=\"field\">\n          <label for=\"mobile\">Mobile No. <span class=\"req\">*<\/span><\/label>\n          <input type=\"tel\" id=\"mobile\" name=\"mobile\" placeholder=\"e.g. 5XXX XXXX\" required>\n        <\/div>\n      <\/div>\n\n      <div class=\"row row-2\">\n        <div class=\"field\">\n          <label for=\"email\">Email<\/label>\n          <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"your@email.com\">\n        <\/div>\n        <div class=\"field kg-only\">\n          <label>WhatsApp Available?<\/label>\n          <div class=\"option-group\" data-group=\"whatsapp\">\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"whatsapp\" value=\"Yes\"><span class=\"dot\"><\/span> Yes<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"whatsapp\" value=\"No\"><span class=\"dot\"><\/span> No<\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"row\">\n        <div class=\"field\">\n          <label>N.I.C No. <span class=\"req\">*<\/span><\/label>\n          <div class=\"nic-row\" id=\"nicRow\"><\/div>\n          <span class=\"error-msg\" id=\"nicError\">Please enter a valid 14-character NIC number<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Background -->\n    <div class=\"card\">\n      <div class=\"card-title\"><span class=\"num\">3<\/span> Background &amp; Experience<\/div>\n\n      <div class=\"row\">\n        <div class=\"field\">\n          <label>Educational Level <span class=\"req\">*<\/span><\/label>\n          <div class=\"option-group\" data-group=\"education\">\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"education\" value=\"CPE\" required><span class=\"dot\"><\/span> CPE<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"education\" value=\"Secondary\"><span class=\"dot\"><\/span> Secondary<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"education\" value=\"Tertiary\"><span class=\"dot\"><\/span> Tertiary<\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"row\">\n        <div class=\"field\">\n          <label for=\"occupation\">Occupation<\/label>\n          <input type=\"text\" id=\"occupation\" name=\"occupation\">\n        <\/div>\n      <\/div>\n\n      <div class=\"row\">\n        <div class=\"field\">\n          <label>Current Involvement in Agriculture <span class=\"req\">*<\/span><\/label>\n          <div class=\"option-group\" data-group=\"involvement\">\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"involvement\" value=\"Part time\" required><span class=\"dot\"><\/span> Part time<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"involvement\" value=\"Full time\"><span class=\"dot\"><\/span> Full time<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"involvement\" value=\"Nil\"><span class=\"dot\"><\/span> Nil<\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Crop Production -->\n      <div class=\"indent-section\">\n        <div class=\"row\">\n          <div class=\"field\">\n            <label>Crop Production Type<\/label>\n            <div class=\"option-group\" data-group=\"cropType\">\n              <label class=\"option-pill\" onclick=\"selectCheck(this)\"><input type=\"checkbox\" name=\"cropType\" value=\"Open field\"><span class=\"box\"><\/span> Open field<\/label>\n              <label class=\"option-pill gt-only\" onclick=\"selectCheck(this)\"><input type=\"checkbox\" name=\"cropType\" value=\"Hydroponics\"><span class=\"box\"><\/span> Hydroponics<\/label>\n              <label class=\"option-pill kg-only\" onclick=\"selectCheck(this)\"><input type=\"checkbox\" name=\"cropType\" value=\"Sheltered Farming\"><span class=\"box\"><\/span> Sheltered Farming<\/label>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"row row-2\">\n          <div class=\"field\">\n            <label for=\"areaProduction\">Area under Production (Arp\/Ha)<\/label>\n            <input type=\"text\" id=\"areaProduction\" name=\"areaProduction\">\n          <\/div>\n        <\/div>\n\n        <div class=\"row row-2\">\n          <div class=\"field\">\n            <label for=\"livestockSpecies\">Livestock \u2013 Species<\/label>\n            <input type=\"text\" id=\"livestockSpecies\" name=\"livestockSpecies\">\n          <\/div>\n          <div class=\"field\">\n            <label for=\"livestockHeads\">No. of Heads<\/label>\n            <input type=\"number\" id=\"livestockHeads\" name=\"livestockHeads\" min=\"0\">\n          <\/div>\n        <\/div>\n\n        <div class=\"row\">\n          <div class=\"field\">\n            <label for=\"agribusiness\">Agribusiness (processing, marketing, etc.)<\/label>\n            <input type=\"text\" id=\"agribusiness\" name=\"agribusiness\">\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"row\" style=\"margin-top:1rem\">\n        <div class=\"field\">\n          <label for=\"yearsExperience\">Years of Experience in Agricultural Activity<\/label>\n          <input type=\"number\" id=\"yearsExperience\" name=\"yearsExperience\" min=\"0\" max=\"80\">\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Kitchen Gardening extras -->\n    <div class=\"card kg-only\">\n      <div class=\"card-title\"><span class=\"num\">4<\/span> Training Preferences<\/div>\n\n      <div class=\"row\">\n        <div class=\"field\">\n          <label>Training Mode Interested <span class=\"req\">*<\/span><\/label>\n          <div class=\"option-group\" data-group=\"trainingMode\">\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"trainingMode\" value=\"Face to Face\"><span class=\"dot\"><\/span> Face to Face<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"trainingMode\" value=\"Online\"><span class=\"dot\"><\/span> Online<\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"row\">\n        <div class=\"field\">\n          <label>Preferred Day of Training <span class=\"req\">*<\/span><\/label>\n          <div class=\"option-group\" data-group=\"trainingDay\">\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"trainingDay\" value=\"Weekday\"><span class=\"dot\"><\/span> Weekday<\/label>\n            <label class=\"option-pill\" onclick=\"selectRadio(this)\"><input type=\"radio\" name=\"trainingDay\" value=\"Saturday (9:00 \u2013 12:00 hr)\"><span class=\"dot\"><\/span> Saturday (9:00 \u2013 12:00 hr)<\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div style=\"font-size:0.88rem; color:var(--text-secondary); margin-top:0.5rem;\">\n        <strong>Duration of course:<\/strong> 2 half days &nbsp;|&nbsp;\n        <strong>Certificate:<\/strong> Issued on full completion of training\n      <\/div>\n    <\/div>\n\n    <!-- General Training course name -->\n    <div class=\"card gt-only\">\n      <div class=\"card-title\"><span class=\"num\">4<\/span> Course Details<\/div>\n      <div class=\"row\">\n        <div class=\"field\">\n          <label for=\"courseApplied\">Course Applied For <span class=\"req\">*<\/span><\/label>\n          <input type=\"text\" id=\"courseApplied\" name=\"courseApplied\" placeholder=\"Name of the training course\">\n        <\/div>\n      <\/div>\n      <div style=\"font-size:0.88rem; color:var(--text-secondary); margin-top:0.5rem;\">\n        <strong>Registration fee:<\/strong> Rs 300 (Rs 600 for agro-processing courses) &nbsp;|&nbsp;\n        <strong>Postage fee:<\/strong> Rs 45 if certificate is to be posted\n      <\/div>\n    <\/div>\n\n    <!-- Declaration -->\n    <div class=\"card\">\n      <div class=\"card-title\"><span class=\"num\">5<\/span> Declaration<\/div>\n      <div class=\"declaration\">\n        I hereby apply to follow the above-named course. I declare that the information given above is correct to the best of my knowledge and agree to abide by the rules and regulations of the training centre.\n        <br><br>\n        <span class=\"gt-only\" style=\"display:inline\"><strong>General Training:<\/strong> A registration fee of Rs 300 (or Rs 600 for agro-processing courses) is payable. <\/span>\n        A postage fee of Rs 45 is applicable if you wish to have your certificate posted.\n      <\/div>\n\n      <label class=\"consent-row\" for=\"consent\">\n        <input type=\"checkbox\" id=\"consent\" name=\"consent\" required>\n        <span>I agree to the above declaration and confirm all information provided is accurate. <span class=\"req\">*<\/span><\/span>\n      <\/label>\n\n      <div class=\"row row-2\" style=\"margin-top:1.25rem\">\n        <div class=\"field\">\n          <label for=\"appDate\">Date <span class=\"req\">*<\/span><\/label>\n          <input type=\"text\" id=\"appDate\" name=\"appDate\" readonly>\n        <\/div>\n        <div class=\"field\">\n          <label for=\"fullName\">Full Name (as signature) <span class=\"req\">*<\/span><\/label>\n          <input type=\"text\" id=\"fullName\" name=\"fullName\" placeholder=\"Type your full name\" required>\n        <\/div>\n      <\/div>\n\n      <div class=\"btn-row\">\n        <button type=\"submit\" class=\"btn btn-primary\" id=\"submitBtn\">Submit Application<\/button>\n        <button type=\"button\" class=\"btn btn-secondary\" onclick=\"window.print()\">Print Form<\/button>\n        <button type=\"reset\" class=\"btn btn-secondary\" onclick=\"resetAll()\">Reset<\/button>\n      <\/div>\n    <\/div>\n\n  <\/form>\n\n  <div class=\"footer-note\">\n    Completed application forms can also be returned to FAREI, FSC Building, Royal Road, St. Pierre.<br>\n    For queries, contact the Training Unit on <strong>433-4378 \/ 9350<\/strong> or email <a href=\"\/cdn-cgi\/l\/email-protection#c5acaba3aab7a8a4b1acaaab85a3a4b7a0aceba8b0\"><span class=\"__cf_email__\" data-cfemail=\"a4cdcac2cbd6c9c5d0cdcbcae4c2c5d6c1cd8ac9d1\">[email&#160;protected]<\/span><\/a>.<br>\n    <em>FAREI reserves the right not to conduct the training in case of low response.<\/em>\n  <\/div>\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script data-cfasync=\"false\" src=\"\/cdn-cgi\/scripts\/5c5dd728\/cloudflare-static\/email-decode.min.js\"><\/script><script>\n  let selectedCourse = null;\n\n  \/\/ Init NIC boxes (14 characters)\n  const nicRow = document.getElementById('nicRow');\n  for (let i = 0; i < 14; i++) {\n    const inp = document.createElement('input');\n    inp.type = 'text';\n    inp.maxLength = 1;\n    inp.dataset.idx = i;\n    inp.name = 'nic_' + i;\n    inp.setAttribute('aria-label', 'NIC digit ' + (i + 1));\n    inp.addEventListener('input', function() {\n      this.value = this.value.toUpperCase();\n      if (this.value && i < 13) nicRow.children[i + 1].focus();\n    });\n    inp.addEventListener('keydown', function(e) {\n      if (e.key === 'Backspace' && !this.value && i > 0) nicRow.children[i - 1].focus();\n    });\n    inp.addEventListener('paste', function(e) {\n      e.preventDefault();\n      const paste = (e.clipboardData || window.clipboardData).getData('text').replace(\/\\s\/g, '').toUpperCase();\n      for (let j = 0; j < Math.min(paste.length, 14 - i); j++) {\n        nicRow.children[i + j].value = paste[j];\n      }\n      const next = Math.min(i + paste.length, 13);\n      nicRow.children[next].focus();\n    });\n    nicRow.appendChild(inp);\n  }\n\n  \/\/ Set today's date\n  const today = new Date();\n  document.getElementById('appDate').value = today.toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' });\n\n  \/\/ Course selection\n  function selectCourse(type) {\n    selectedCourse = type;\n    document.querySelectorAll('.course-option').forEach(el => el.classList.remove('selected'));\n    document.querySelector(`.course-option[data-course=\"${type}\"]`).classList.add('selected');\n    document.body.className = 'course-' + type;\n  }\n\n  \/\/ Radio pill selection\n  function selectRadio(pill) {\n    const group = pill.closest('.option-group');\n    group.querySelectorAll('.option-pill').forEach(p => p.classList.remove('selected'));\n    pill.classList.add('selected');\n    pill.querySelector('input').checked = true;\n  }\n\n  \/\/ Checkbox pill selection\n  function selectCheck(pill) {\n    const input = pill.querySelector('input');\n    input.checked = !input.checked;\n    pill.classList.toggle('selected', input.checked);\n  }\n\n  \/\/ Get NIC value\n  function getNIC() {\n    let val = '';\n    nicRow.querySelectorAll('input').forEach(i => val += i.value);\n    return val;\n  }\n\n  \/\/ Validation\n  function validate() {\n    let valid = true;\n    const required = document.querySelectorAll('#fareiForm [required]');\n    required.forEach(el => {\n      if (el.type === 'radio') {\n        const group = document.querySelectorAll(`[name=\"${el.name}\"]`);\n        const checked = Array.from(group).some(r => r.checked);\n        if (!checked) valid = false;\n      } else if (!el.value.trim()) {\n        el.classList.add('error');\n        valid = false;\n      } else {\n        el.classList.remove('error');\n      }\n    });\n\n    if (!selectedCourse) {\n      showToast('Please select a course type.', true);\n      return false;\n    }\n\n    const nic = getNIC();\n    if (nic.length < 14) {\n      document.getElementById('nicError').style.display = 'block';\n      valid = false;\n    } else {\n      document.getElementById('nicError').style.display = 'none';\n    }\n\n    if (!document.getElementById('consent').checked) {\n      showToast('Please accept the declaration to continue.', true);\n      return false;\n    }\n\n    if (!valid) showToast('Please fill in all required fields.', true);\n    return valid;\n  }\n\n  \/\/ Collect form data\n  function collectData() {\n    const fd = new FormData(document.getElementById('fareiForm'));\n    const data = {};\n    data.courseType = selectedCourse === 'kg' ? 'Kitchen Gardening' : 'General Training';\n    data.title = fd.get('title');\n    data.surname = fd.get('surname');\n    data.firstName = fd.get('firstName');\n    data.address = fd.get('address');\n    data.fixedLine = fd.get('fixedLine');\n    data.mobile = fd.get('mobile');\n    data.email = fd.get('email');\n    data.nic = getNIC();\n    data.education = fd.get('education');\n    data.occupation = fd.get('occupation');\n    data.involvement = fd.get('involvement');\n\n    const cropTypes = [];\n    document.querySelectorAll('[name=\"cropType\"]:checked').forEach(c => cropTypes.push(c.value));\n    data.cropType = cropTypes.join(', ');\n    data.areaProduction = fd.get('areaProduction');\n    data.livestockSpecies = fd.get('livestockSpecies');\n    data.livestockHeads = fd.get('livestockHeads');\n    data.agribusiness = fd.get('agribusiness');\n    data.yearsExperience = fd.get('yearsExperience');\n\n    if (selectedCourse === 'kg') {\n      data.whatsapp = fd.get('whatsapp');\n      data.trainingMode = fd.get('trainingMode');\n      data.trainingDay = fd.get('trainingDay');\n    }\n    if (selectedCourse === 'gt') {\n      data.courseApplied = fd.get('courseApplied');\n    }\n\n    data.date = fd.get('appDate');\n    data.fullName = fd.get('fullName');\n    return data;\n  }\n\n  \/\/ Submit\n  document.getElementById('fareiForm').addEventListener('submit', function(e) {\n    e.preventDefault();\n    if (!validate()) return;\n\n    const data = collectData();\n\n    \/\/ ==========================================================\n    \/\/ INTEGRATION POINT\n    \/\/ Replace the console.log below with your backend call.\n    \/\/\n    \/\/ OPTION A \u2013 WordPress REST API \/ custom endpoint:\n    \/\/   fetch('\/wp-json\/farei\/v1\/applications', {\n    \/\/     method: 'POST',\n    \/\/     headers: { 'Content-Type': 'application\/json' },\n    \/\/     body: JSON.stringify(data)\n    \/\/   });\n    \/\/\n    \/\/ OPTION B \u2013 Email via a plugin like WP Mail SMTP \/ Contact Form handler:\n    \/\/   fetch('\/wp-admin\/admin-ajax.php', {\n    \/\/     method: 'POST',\n    \/\/     body: new URLSearchParams({ action: 'farei_submit', ...data })\n    \/\/   });\n    \/\/\n    OPTION C \u2013 Google Sheets via Apps Script webhook:\n       fetch('https:\/\/script.google.com\/macros\/s\/YOUR_SCRIPT_ID\/exec', {\n         method: 'POST',\n         body: JSON.stringify(data)\n       });\n    \/\/ ==========================================================\n\n    console.log('FAREI Application Submitted:', data);\n    showToast('Application submitted successfully!');\n\n    \/\/ Download data as JSON (temporary \u2013 remove after connecting backend)\n    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application\/json' });\n    const a = document.createElement('a');\n    a.href = URL.createObjectURL(blob);\n    a.download = `FAREI_Application_${data.surname}_${Date.now()}.json`;\n    a.click();\n  });\n\n  \/\/ Toast notification\n  function showToast(msg, isError) {\n    const t = document.getElementById('toast');\n    t.textContent = msg;\n    t.style.background = isError ? 'var(--red-600)' : 'var(--green-900)';\n    t.classList.add('show');\n    setTimeout(() => t.classList.remove('show'), 3500);\n  }\n\n  \/\/ Reset\n  function resetAll() {\n    selectedCourse = null;\n    document.body.className = '';\n    document.querySelectorAll('.course-option, .option-pill').forEach(el => el.classList.remove('selected'));\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FAREI \u2013 Training Course Application Food and Agricultural Research and Extension Institute Training Course Application Form 1 Select Course Type \u2713 \ud83c\udf3e General Training Course Crop, Livestock &#038; Agribusiness \u2713 \ud83c\udf31 Kitchen Gardening Home garden training 2 Personal Information Title * Mr Mrs Ms Surname * First Name * Address * Fixed Line \/ Tel. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5418","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/farei.mu\/farei2021\/index.php?rest_route=\/wp\/v2\/pages\/5418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/farei.mu\/farei2021\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/farei.mu\/farei2021\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/farei.mu\/farei2021\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/farei.mu\/farei2021\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5418"}],"version-history":[{"count":4,"href":"https:\/\/farei.mu\/farei2021\/index.php?rest_route=\/wp\/v2\/pages\/5418\/revisions"}],"predecessor-version":[{"id":5424,"href":"https:\/\/farei.mu\/farei2021\/index.php?rest_route=\/wp\/v2\/pages\/5418\/revisions\/5424"}],"wp:attachment":[{"href":"https:\/\/farei.mu\/farei2021\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}