<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MJS Career & Partner Zone</title>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<style>
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:#0f0f0f;color:#fff;}
#mjs-app{background:#0f0f0f;min-height:100vh;max-width:480px;margin:0 auto;}
.screen{display:none;animation:fu .35s ease;}
.screen.active{display:block;}
@keyframes fu{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.nav{background:#000;border-bottom:2px solid #1E2D6B;padding:12px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100;}
.mjs-logo{display:flex;flex-direction:column;cursor:pointer;}
.mjs-letters{font-family:‘Barlow Condensed’,sans-serif;font-size:28px;font-weight:900;color:#fff;letter-spacing:2px;line-height:1;}
.mjs-bar{background:#1E2D6B;color:#fff;font-size:8px;letter-spacing:4px;padding:2px 8px;margin-top:1px;font-weight:600;}
.nav-tag{margin-left:auto;font-size:9px;color:#555;text-align:right;line-height:1.6;}
.hero{background:#000;padding:28px 18px 22px;border-bottom:1px solid #222;}
.hero-label{font-size:10px;color:#F5C518;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;}
.hero-title{font-family:‘Barlow Condensed’,sans-serif;font-size:38px;font-weight:900;line-height:.95;text-transform:uppercase;margin-bottom:10px;}
.hero-title span{color:#F5C518;}
.hero-sub{font-size:12px;color:#888;line-height:1.6;}
.portal-section{padding:20px 18px;}
.section-label{font-size:10px;color:#555;letter-spacing:3px;text-transform:uppercase;margin-bottom:16px;}
.portal-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.pcard{border-radius:10px;padding:20px 14px;cursor:pointer;border:1px solid #333;transition:all .25s;}
.pcard:hover{transform:translateY(-2px);}
.pcard.employer{background:linear-gradient(145deg,#0d1a0d,#111);}
.pcard.employer:hover{border-color:#16a34a;box-shadow:0 6px 20px rgba(22,163,74,.2);}
.pcard.employee{background:linear-gradient(145deg,#0a0d1f,#111);}
.pcard.employee:hover{border-color:#1E2D6B;box-shadow:0 6px 20px rgba(30,45,107,.3);}
.pcard-icon{font-size:26px;margin-bottom:8px;}
.pcard-num{font-size:9px;color:#444;letter-spacing:2px;margin-bottom:4px;}
.pcard h3{font-family:‘Barlow Condensed’,sans-serif;font-size:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;}
.pcard.employer h3{color:#4ade80;}
.pcard.employee h3{color:#F5C518;}
.pcard p{font-size:10px;color:#666;line-height:1.5;}
.venture-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #1a1a1a;}
.v-num{font-size:9px;color:#333;width:24px;}
.v-name{font-family:‘Barlow Condensed’,sans-serif;font-size:14px;font-weight:700;color:#fff;letter-spacing:1px;}
.v-tag{font-size:9px;color:#555;letter-spacing:2px;}
.v-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.contact-bar{background:#111;border:1px solid #222;border-radius:10px;padding:14px 16px;margin:0 18px 20px;}
.cbr{display:flex;align-items:center;gap:8px;font-size:11px;color:#aaa;margin-bottom:4px;}
.cbr:last-child{margin-bottom:0;}
.cdot{width:6px;height:6px;background:#F5C518;border-radius:50%;flex-shrink:0;}
.page{padding:18px;}
.back-btn{display:flex;align-items:center;gap:6px;color:#F5C518;font-size:11px;cursor:pointer;margin-bottom:16px;background:none;border:none;padding:0;letter-spacing:1px;font-family:‘DM Sans’,sans-serif;}
.prog-wrap{margin-bottom:16px;}
.prog-bar{background:#1f1f1f;border-radius:99px;height:3px;overflow:hidden;margin-bottom:5px;}
.prog-fill{height:100%;background:linear-gradient(90deg,#1E2D6B,#F5C518);border-radius:99px;transition:width .4s ease;}
.prog-label{font-size:9px;color:#444;letter-spacing:2px;text-transform:uppercase;}
.page-title{font-family:‘Barlow Condensed’,sans-serif;font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:3px;}
.page-title span{color:#F5C518;}
.page-sub{font-size:11px;color:#666;margin-bottom:18px;line-height:1.5;}
.divider{height:1px;background:linear-gradient(90deg,transparent,#2a2a2a,transparent);margin:16px 0;}
.sec-title{font-size:9px;color:#555;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #1f1f1f;}
.fg{margin-bottom:14px;}
.fl{display:block;font-size:10px;color:#666;letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px;}
.fi,.fs,.ft{width:100%;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:11px 13px;color:#fff;font-family:‘DM Sans’,sans-serif;font-size:13px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none;}
.fi:focus,.fs:focus,.ft:focus{border-color:#1E2D6B;}
.fs option{background:#111;color:#fff;}
.ft{resize:vertical;min-height:70px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.svc-card{background:#1a1a1a;border-radius:12px;padding:18px;cursor:pointer;margin-bottom:12px;transition:all .2s;}
.svc-card.fizz-card{border:1px solid #6B21A8;}
.svc-card.fizz-card:hover{box-shadow:0 4px 16px rgba(107,33,168,.3);}
.svc-card.staff-card{border:1px solid #2a2a2a;}
.svc-card.staff-card:hover{border-color:#444;}
.svc-icon{font-size:24px;margin-bottom:6px;}
.svc-title{font-family:‘Barlow Condensed’,sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}
.svc-fizz{color:#c084fc;}
.svc-gen{color:#F5C518;}
.svc-sub{font-size:11px;color:#666;line-height:1.5;margin-bottom:10px;}
.mini-plans{display:flex;gap:8px;}
.mini-plan{flex:1;border-radius:8px;padding:8px 10px;}
.mini-plan.b{background:rgba(107,33,168,.15);border:1px solid #6B21A8;}
.mini-plan.s{background:rgba(245,197,24,.07);border:1px solid #F5C518;}
.mini-label{font-size:9px;letter-spacing:2px;margin-bottom:2px;}
.mini-label.b{color:#c084fc;}
.mini-label.s{color:#F5C518;}
.mini-price{font-family:‘Barlow Condensed’,sans-serif;font-size:18px;color:#fff;}
.mini-price small{font-size:10px;color:#666;font-family:‘DM Sans’,sans-serif;}
.marga-tag{display:inline-block;background:rgba(245,197,24,.1);border:1px solid #F5C518;border-radius:20px;padding:2px 10px;font-size:9px;color:#F5C518;letter-spacing:2px;margin-top:8px;}
.fizz-badge{display:inline-flex;align-items:center;gap:6px;background:#6B21A8;border-radius:8px;padding:4px 10px;margin-bottom:10px;}
.fizz-badge span{font-family:‘Barlow Condensed’,sans-serif;font-size:16px;font-weight:900;color:#fff;letter-spacing:1px;}
.fizz-dot-lg{width:8px;height:8px;background:#A3E635;border-radius:50%;}
.plan-card{border-radius:10px;padding:16px;border:2px solid #2a2a2a;cursor:pointer;transition:all .2s;position:relative;margin-bottom:10px;}
.plan-card:hover{border-color:#444;}
.plan-card.sel-basic{border-color:#6B21A8;background:rgba(107,33,168,.1);}
.plan-card.sel-std{border-color:#F5C518;background:rgba(245,197,24,.07);}
.plan-badge-pop{position:absolute;top:10px;right:10px;font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:1px;background:#F5C518;color:#000;}
.plan-name{font-size:11px;color:#F5C518;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.plan-name.purple{color:#c084fc;}
.plan-price{font-family:‘Barlow Condensed’,sans-serif;font-size:28px;font-weight:900;color:#fff;margin-bottom:6px;}
.plan-price small{font-size:13px;color:#666;font-family:‘DM Sans’,sans-serif;font-weight:400;}
.plan-feat{font-size:11px;color:#aaa;display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.plan-feat::before{content:’’;width:4px;height:4px;background:#F5C518;border-radius:50%;flex-shrink:0;}
.agr-box{background:#0a0a0a;border:1px solid #2a2a2a;border-radius:10px;padding:14px;max-height:300px;overflow-y:auto;margin-bottom:12px;}
.agr-box h4{font-family:‘Barlow Condensed’,sans-serif;font-size:14px;color:#F5C518;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;}
.agr-clause{margin-bottom:12px;}
.agr-clause h5{font-size:11px;color:#aaa;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;}
.agr-clause p{font-size:11px;color:#555;line-height:1.6;}
.agr-sign{background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:12px;margin-bottom:12px;}
.cb-row{display:flex;align-items:flex-start;gap:8px;padding:10px;background:rgba(245,197,24,.04);border:1px solid rgba(245,197,24,.15);border-radius:8px;cursor:pointer;margin-bottom:10px;}
.cb-row input{margin-top:2px;accent-color:#F5C518;width:16px;height:16px;flex-shrink:0;}
.cb-row span{font-size:11px;color:#aaa;line-height:1.5;}
.upload-label{border:2px dashed #2a2a2a;border-radius:10px;padding:18px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.02);display:block;margin-bottom:14px;}
.upload-label:hover,.upload-label.done{border-color:#1E2D6B;}
.upload-label input{display:none;}
.upload-icon{font-size:24px;margin-bottom:4px;}
.upload-label h4{font-size:11px;color:#F5C518;margin-bottom:2px;}
.upload-label p{font-size:10px;color:#555;}
.skill-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.stag{padding:5px 11px;border-radius:20px;font-size:11px;cursor:pointer;border:1px solid #2a2a2a;background:transparent;color:#666;transition:all .2s;font-family:‘DM Sans’,sans-serif;}
.stag.on{background:#1E2D6B;color:#fff;border-color:#1E2D6B;}
.career-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;cursor:pointer;transition:all .2s;}
.career-card:hover{border-color:#444;}
.cc-title{font-family:‘Barlow Condensed’,sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;margin-bottom:2px;}
.cc-sub{font-size:10px;color:#555;}
.cc-badge{font-size:9px;padding:3px 8px;border-radius:20px;letter-spacing:1px;font-weight:700;white-space:nowrap;}
.cc-badge.open{background:rgba(74,222,128,.1);color:#4ade80;border:1px solid #4ade80;}
.cc-badge.fizz{background:#6B21A8;color:#fff;}
.zone-card{background:#1a1a1a;border-radius:12px;padding:18px;cursor:pointer;margin-bottom:12px;transition:all .2s;}
.zone-card.kerala{border:1px solid #16a34a;}
.zone-card.guest{border:1px solid #F5C518;}
.zone-card:hover{transform:translateY(-2px);}
.zone-icon{font-size:24px;margin-bottom:6px;}
.zone-title2{font-family:‘Barlow Condensed’,sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}
.zone-title2.green{color:#4ade80;}
.zone-title2.gold{color:#F5C518;}
.zone-sub2{font-size:11px;color:#555;line-height:1.5;}
.marga-banner{background:linear-gradient(135deg,#1a0000,#2d0000);border:1px solid #7f1d1d;border-radius:10px;padding:14px;margin-bottom:16px;}
.marga-banner h3{font-family:‘Barlow Condensed’,sans-serif;font-size:16px;letter-spacing:1px;color:#fca5a5;margin-bottom:4px;text-transform:uppercase;}
.marga-banner p{font-size:11px;color:#fecaca;line-height:1.5;}
.video-card{background:#111;border:1px solid #2a2a2a;border-radius:10px;overflow:hidden;margin-bottom:14px;}
.video-thumb{background:linear-gradient(135deg,#1a0000,#2a0a0a);height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;}
.play-btn{width:50px;height:50px;background:#F5C518;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;}
.video-thumb h4{font-family:‘Barlow Condensed’,sans-serif;font-size:14px;color:#fca5a5;letter-spacing:1px;text-transform:uppercase;}
.video-thumb p{font-size:10px;color:#666;}
.video-body{padding:12px;}
.vpoint{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:#aaa;padding:8px 10px;background:rgba(255,255,255,.02);border-radius:6px;margin-bottom:6px;border-left:3px solid;}
.vpoint.red{border-color:#ef4444;}
.vpoint.gold{border-color:#F5C518;}
.vpoint.green{border-color:#4ade80;}
.vpoint.blue{border-color:#60a5fa;}
.alert{border-radius:8px;padding:10px 12px;font-size:11px;line-height:1.5;margin-bottom:12px;}
.alert.red{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#fca5a5;}
.alert.gold{background:rgba(245,197,24,.06);border:1px solid rgba(245,197,24,.2);color:#fde68a;}
.alert.green{background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.2);color:#6ee7b7;}
.btn{width:100%;padding:14px;border:none;border-radius:10px;font-family:‘DM Sans’,sans-serif;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:all .2s;margin-top:6px;display:block;text-align:center;}
.btn-primary{background:#F5C518;color:#000;}
.btn-primary:hover{box-shadow:0 5px 18px rgba(245,197,24,.3);}
.btn-primary:disabled,.btn-primary[disabled]{opacity:.35;cursor:not-allowed;}
.btn-secondary{background:transparent;color:#F5C518;border:1px solid #F5C518;}
.btn-navy{background:#1E2D6B;color:#fff;}
.btn-fizz{background:#6B21A8;color:#fff;}
.success-wrap{padding:30px 18px;min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.success-icon2{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 18px;background:linear-gradient(135deg,#064e3b,#065f46);box-shadow:0 0 30px rgba(74,222,128,.2);}
.success-wrap h2{font-family:‘Barlow Condensed’,sans-serif;font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:6px;}
.success-wrap h2 span{color:#F5C518;}
.success-wrap p{font-size:12px;color:#666;line-height:1.6;margin-bottom:4px;}
.ref-box{background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:14px 20px;margin:18px 0;width:100%;}
.ref-box p{font-size:9px;color:#555;letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;}
.ref-box h3{font-family:‘Barlow Condensed’,sans-serif;font-size:22px;color:#F5C518;letter-spacing:3px;}
.footer-strip{background:#000;border-top:1px solid #1a1a1a;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;}
.footer-strip span{font-size:9px;color:#333;letter-spacing:1px;}
</style>
</head>
<body>
<div id="mjs-app">
<div class="nav" id="main-nav">
<div class="mjs-logo" onclick="goHome()">
<div class="mjs-letters">MJS</div>
<div class="mjs-bar">GROUP</div>
</div>
<div class="nav-tag">mjgroups.co.in<br/>+91 730 654 5404</div>
</div>
<div class="screen active" id="screen-home">
<div class="hero">
<div class="hero-label">— MJS Career & Partner Zone</div>
<div class="hero-title">Built for<br/><span>Payyannur.</span></div>
<div class="hero-sub">Register as an employer, become a vendor partner, or find your next career opportunity across MJS Group ventures.</div>
</div>
<div class="portal-section">
<div class="section-label">— Select your path</div>
<div class="portal-cards">
<div class="pcard employer" onclick="show('screen-employer-choose')">
<div class="pcard-icon">🏢</div>
<div class="pcard-num">01</div>
<h3>Employer / Vendor</h3>
<p>Partner with us, get delivery service or request staff</p>
</div>
<div class="pcard employee" onclick="show('screen-careers')">
<div class="pcard-icon">👷</div>
<div class="pcard-num">02</div>
<h3>Job Seeker</h3>
<p>Find your next opportunity across MJS ventures</p>
</div>
</div>
<div class="section-label">— Our ventures</div>
<div class="venture-row"><div class="v-num">#01</div><div style="flex:1"><div class="v-name">MJS ONECALL</div><div class="v-tag">HOME SERVICES</div></div><div class="v-dot" style="background:#F5C518"></div></div>
<div class="venture-row"><div class="v-num">#02</div><div style="flex:1"><div class="v-name">FIZZ DELIVERY</div><div class="v-tag">HYPERLOCAL DELIVERY</div></div><div class="v-dot" style="background:#9333ea"></div></div>
<div class="venture-row"><div class="v-num">#03</div><div style="flex:1"><div class="v-name">PROPILOT DRIVERS</div><div class="v-tag">DRIVER SERVICE</div></div><div class="v-dot" style="background:#22c55e"></div></div>
<div class="venture-row"><div class="v-num">#04</div><div style="flex:1"><div class="v-name">MJS E-SERVICE</div><div class="v-tag">ELECTRONICS</div></div><div class="v-dot" style="background:#f97316"></div></div>
</div>
<div class="contact-bar">
<div class="cbr"><span class="cdot"></span><span>+91 730 654 5404 / +91 994 784 5404</span></div>
<div class="cbr"><span class="cdot"></span><span>Vellap, Trikaripur · Payyannur, Kerala 671310</span></div>
<div class="cbr"><span class="cdot"></span><span>Mon – Sat · 8:00 AM – 8:00 PM</span></div>
</div>
<div class="footer-strip"><span>MJS GROUP © 2025</span><span>PAYYANNUR · TRIKARIPUR · KANNUR</span></div>
</div>
<div class="screen" id="screen-employer-choose">
<div class="page">
<button class="back-btn" onclick="show('screen-home')">← BACK</button>
<div class="page-title">EMPLOYER <span>ZONE</span></div>
<div class="page-sub">Choose a service to register or enquire</div>
<div class="divider"></div>
<div class="svc-card fizz-card" onclick="startFizz()">
<div class="fizz-badge"><div class="fizz-dot-lg"></div><span>FIZZ</span></div>
<div class="svc-title svc-fizz">Delivery + Digital Package</div>
<div class="svc-sub">Subscribe to our delivery service with social media content creation. Two plans available for your business.</div>
<div class="mini-plans">
<div class="mini-plan b"><div class="mini-label b">BASIC</div><div class="mini-price">₹15,999<small>/mo</small></div></div>
<div class="mini-plan s"><div class="mini-label s">STANDARD</div><div class="mini-price">₹24,999<small>/mo</small></div></div>
</div>
</div>
<div class="svc-card staff-card" onclick="show('screen-staff-form')">
<div class="svc-icon">🏨</div>
<div class="svc-title svc-gen">Staff Supply Enquiry</div>
<div class="svc-sub">Request trained hotel staff, cleaners, housekeeping and more — all verified through MARGA protocol.</div>
<div class="marga-tag">MARGA CERTIFIED WORKERS</div>
</div>
</div>
</div>
<div class="screen" id="screen-fizz-1">
<div class="page">
<button class="back-btn" onclick="show('screen-employer-choose')">← BACK</button>
<div class="prog-wrap"><div class="prog-bar"><div class="prog-fill" style="width:33%"></div></div><div class="prog-label">Step 1 of 3</div></div>
<div class="fizz-badge"><div class="fizz-dot-lg"></div><span>FIZZ</span></div>
<div class="page-title">VENDOR <span>DETAILS</span></div>
<div class="page-sub">Fizz Delivery & Digital Marketing Partnership</div>
<div class="divider"></div>
<div class="fg"><label class="fl">Business / Restaurant Name *</label><input class="fi" id="f-bizName" placeholder="e.g. Spice Corner Restaurant"/></div>
<div class="fg"><label class="fl">Business Type *</label>
<select class="fs" id="f-bizType">
<option value="">Select type</option>
<option>Restaurant</option><option>Hotel</option><option>Bakery</option><option>Grocery Store</option><option>Pharmacy</option><option>Supermarket</option><option>Cafe</option><option>Cloud Kitchen</option><option>Retail Shop</option><option>Other</option>
</select>
</div>
<div class="fg"><label class="fl">Contact Person Name *</label><input class="fi" id="f-contact" placeholder="Owner / Manager name"/></div>
<div class="row2">
<div class="fg"><label class="fl">Phone / WhatsApp *</label><input class="fi" id="f-phone" type="tel" placeholder="+91"/></div>
<div class="fg"><label class="fl">Email</label><input class="fi" id="f-email" type="email" placeholder="email@domain.com"/></div>
</div>
<div class="fg"><label class="fl">Business Address *</label><input class="fi" id="f-address" placeholder="Shop address"/></div>
<div class="fg"><label class="fl">Delivery Area *</label>
<select class="fs" id="f-area">
<option value="">Select area</option>
<option>Vellap</option><option>Trikaripur</option><option>Payyannur</option><option>Padannakkad</option><option>Valiyaparamba</option><option>Other</option>
</select>
</div>
<button class="btn btn-primary" onclick="fizzStep1Next()">Continue →</button>
</div>
</div>
<div class="screen" id="screen-fizz-2">
<div class="page">
<button class="back-btn" onclick="show('screen-fizz-1')">← BACK</button>
<div class="prog-wrap"><div class="prog-bar"><div class="prog-fill" style="width:66%"></div></div><div class="prog-label">Step 2 of 3</div></div>
<div class="page-title">CHOOSE <span>YOUR PLAN</span></div>
<div class="page-sub">Select the package that suits your business</div>
<div class="divider"></div>
<div class="plan-card" id="plan-basic" onclick="selectPlan('basic')">
<div class="plan-name purple">Basic Plan</div>
<div class="plan-price">₹15,999 <small>/month</small></div>
<div class="divider" style="margin:8px 0"></div>
<div class="plan-feat">20 deliveries per day</div>
<div class="plan-feat">5–6 social media posts per month</div>
<div class="plan-feat">Service: Payyannur / Trikaripur area</div>
<div class="plan-feat">Operations: 3:00 PM – 10:30 PM daily</div>
<div class="plan-feat">Replacement delivery support</div>
</div>
<div class="plan-card" id="plan-std" onclick="selectPlan('standard')">
<div class="plan-badge-pop">POPULAR</div>
<div class="plan-name">Standard Plan</div>
<div class="plan-price">₹24,999 <small>/month</small></div>
<div class="divider" style="margin:8px 0"></div>
<div class="plan-feat">50 deliveries per day</div>
<div class="plan-feat">8–10 social media posts per month</div>
<div class="plan-feat">Service: Payyannur / Trikaripur area</div>
<div class="plan-feat">Operations: 3:00 PM – 10:30 PM daily</div>
<div class="plan-feat">Priority support & replacement</div>
</div>
<div class="alert gold">💡 Extra deliveries beyond your plan limit are charged additionally. Unused deliveries do not roll over to next day.</div>
<div class="fg"><label class="fl">Additional Notes</label><textarea class="ft" id="f-notes" placeholder="Any special requirements or questions..."></textarea></div>
<button class="btn btn-primary" id="btn-plan-next" onclick="fizzStep2Next()" disabled>Review Agreement →</button>
</div>
</div>
<div class="screen" id="screen-fizz-3">
<div class="page">
<button class="back-btn" onclick="show('screen-fizz-2')">← BACK</button>
<div class="prog-wrap"><div class="prog-bar"><div class="prog-fill" style="width:100%"></div></div><div class="prog-label">Step 3 of 3 — Agreement</div></div>
<div class="page-title">SERVICE <span>AGREEMENT</span></div>
<div class="page-sub">Read fully before signing</div>
<div class="alert red">📋 This is a legally binding agreement. Read all terms carefully.</div>
<div class="agr-box">
<h4>Fizz Delivery — Service Agreement</h4>
<div class="agr-clause">
<h5>1. Package & Service</h5>
<p id="agr-plan-text">The Vendor has selected a Fizz Delivery plan. Services are provided by Fizz Enterprise under MJS Group, Payyannur, Kerala.</p>
</div>
<div class="agr-clause">
<h5>2. Delivery Terms</h5>
<p>Operating hours: 3:00 PM – 10:30 PM daily. Orders placed after 10:00 PM are not guaranteed for same-day delivery. Maximum deliveries are as per selected plan. Unused deliveries do not roll over. Extra deliveries beyond plan limit are billed at an additional per-delivery rate fixed by Fizz. Service area: Vellap, Trikaripur, Payyannur, Padannakkad, Valiyaparamba only.</p>
</div>
<div class="agr-clause">
<h5>3. Digital Marketing</h5>
<p>Content materials (logo, product images, descriptions) must be provided at least 3 days before posting date. Delays in providing materials are the Vendor's responsibility. A maximum of 2 revisions per design are permitted.</p>
</div>
<div class="agr-clause">
<h5>4. Payment Terms</h5>
<p>Monthly fee is payable in advance on the 1st of each month. A delay of more than 3 days gives Fizz Enterprise the right to suspend services without prior notice. All fees paid are strictly non-refundable.</p>
</div>
<div class="agr-clause">
<h5>5. Packaging Responsibility</h5>
<p>Vendor is fully responsible for safe and proper packaging of all products. Fizz Enterprise bears no liability for damage caused by inadequate or improper packaging.</p>
</div>
<div class="agr-clause">
<h5>6. Liability & Force Majeure</h5>
<p>Fizz Enterprise is not liable for delivery delays caused by traffic, accidents, rain, hartals, or natural disasters. Customer complaints regarding food quality, quantity, or taste are entirely the Vendor's responsibility and Fizz Enterprise shall not be involved in such disputes.</p>
</div>
<div class="agr-clause">
<h5>7. Termination</h5>
<p>Fizz Enterprise may terminate this agreement immediately upon any violation of terms. Vendor must provide 30 days written notice to terminate. Advance payments are non-refundable upon termination by either party.</p>
</div>
<div class="agr-clause">
<h5>8. Jurisdiction</h5>
<p>All legal disputes arising from this agreement shall fall under the jurisdiction of courts in Kasargod District, Kerala only.</p>
</div>
</div>
<div class="agr-sign">
<label class="fl">Your Full Name (Digital Signature) *</label>
<input class="fi" id="f-sign" placeholder="Type your full legal name" oninput="checkAgreement()"/>
</div>
<div class="cb-row" onclick="toggleAgree()">
<input type="checkbox" id="cb-agree" onchange="checkAgreement()"/>
<span>I have read and understood the complete Fizz Delivery Service Agreement. I agree to all terms, conditions, and legal obligations stated above on behalf of my business.</span>
</div>
<button class="btn btn-fizz" id="btn-submit-fizz" onclick="submitFizz()" disabled>✅ Sign & Submit Registration</button>
</div>
</div>
<div class="screen" id="screen-staff-form">
<div class="page">
<button class="back-btn" onclick="show('screen-employer-choose')">← BACK</button>
<div class="page-title">STAFF <span>REQUEST</span></div>
<div class="page-sub">Tell us your requirement — we'll get back with a quote within 24 hours</div>
<div class="divider"></div>
<div class="alert green">🔒 All staff are MARGA-certified — background verified, drug-awareness trained, Kerala culture oriented.</div>
<div class="fg"><label class="fl">Business / Hotel Name *</label><input class="fi" id="s-bizName" placeholder="Your business name"/></div>
<div class="fg"><label class="fl">Business Type *</label>
<select class="fs" id="s-bizType">
<option value="">Select</option>
<option>Hotel</option><option>Restaurant</option><option>Resort</option><option>Hospital</option><option>Office</option><option>Apartment Complex</option><option>Construction Site</option><option>Other</option>
</select>
</div>
<div class="fg"><label class="fl">Contact Person Name *</label><input class="fi" id="s-contact" placeholder="Owner / Manager name"/></div>
<div class="fg"><label class="fl">Phone / WhatsApp *</label><input class="fi" id="s-phone" type="tel" placeholder="+91 XXXXXXXXXX"/></div>
<div class="fg"><label class="fl">Staff Type Required *</label>
<select class="fs" id="s-staffType">
<option value="">Select category</option>
<option>Hotel Housekeeping</option><option>Kitchen / Cook Staff</option><option>Cleaning Staff</option><option>Security Guards</option><option>Plumbers</option><option>Electricians</option><option>AC Mechanics</option><option>Waiters / F&B Staff</option><option>Drivers</option><option>Mixed Requirement</option>
</select>
</div>
<div class="row2">
<div class="fg"><label class="fl">No. of Staff Needed</label><input class="fi" id="s-qty" type="number" placeholder="e.g. 5"/></div>
<div class="fg"><label class="fl">Budget / Salary Range</label>
<select class="fs" id="s-salary">
<option value="">Select</option>
<option>₹10k–13k</option><option>₹13k–15k</option><option>₹15k–20k</option><option>₹20k–30k</option><option>₹30k+</option><option>Open to discussion</option>
</select>
</div>
</div>
<div class="fg"><label class="fl">District / Location in Kerala</label>
<select class="fs" id="s-district">
<option value="">Select district</option>
<option>Kasargod</option><option>Kannur</option><option>Wayanad</option><option>Kozhikode</option><option>Malappuram</option><option>Palakkad</option><option>Thrissur</option><option>Ernakulam</option><option>Idukki</option><option>Kottayam</option><option>Alappuzha</option><option>Pathanamthitta</option><option>Kollam</option><option>Thiruvananthapuram</option>
</select>
</div>
<div class="fg"><label class="fl">Additional Notes</label><textarea class="ft" id="s-notes" placeholder="When needed, special requirements, etc."></textarea></div>
<button class="btn btn-primary" onclick="submitStaff()">Submit Enquiry →</button>
</div>
</div>
<div class="screen" id="screen-careers">
<div class="page">
<button class="back-btn" onclick="show('screen-home')">← BACK</button>
<div class="page-title">MJS <span>CAREERS</span></div>
<div class="page-sub">Current openings across all MJS Group ventures</div>
<div class="divider"></div>
<div class="sec-title">— Open Positions</div>
<div class="career-card" onclick="selectJob('Delivery Agent','Fizz Delivery — Payyannur / Trikaripur','fizz')"><div><div class="cc-title">Delivery Agent</div><div class="cc-sub">Fizz Delivery — Payyannur / Trikaripur</div></div><div class="cc-badge fizz">FIZZ</div></div>
<div class="career-card" onclick="selectJob('Plumber','MJS OneCall — Skilled Trade','open')"><div><div class="cc-title">Plumber</div><div class="cc-sub">MJS OneCall — Skilled Trade</div></div><div class="cc-badge open">OPEN</div></div>
<div class="career-card" onclick="selectJob('Electrician','MJS OneCall — Skilled Trade','open')"><div><div class="cc-title">Electrician</div><div class="cc-sub">MJS OneCall — Skilled Trade</div></div><div class="cc-badge open">OPEN</div></div>
<div class="career-card" onclick="selectJob('AC Mechanic','MJS OneCall — Skilled Trade','open')"><div><div class="cc-title">AC Mechanic</div><div class="cc-sub">MJS OneCall — Skilled Trade</div></div><div class="cc-badge open">OPEN</div></div>
<div class="career-card" onclick="selectJob('Housekeeping Staff','MJS Group — Hotel & Home Services','open')"><div><div class="cc-title">Housekeeping Staff</div><div class="cc-sub">MJS Group — Hotel & Home Services</div></div><div class="cc-badge open">OPEN</div></div>
<div class="career-card" onclick="selectJob('Hotel Helper / Waiter','MJS Group — Hospitality','open')"><div><div class="cc-title">Hotel Helper / Waiter</div><div class="cc-sub">MJS Group — Hospitality</div></div><div class="cc-badge open">OPEN</div></div>
<div class="career-card" onclick="selectJob('Cleaning Staff','MJS OneCall — Home Services','open')"><div><div class="cc-title">Cleaning Staff</div><div class="cc-sub">MJS OneCall — Home Services</div></div><div class="cc-badge open">OPEN</div></div>
<div class="alert gold" style="margin-top:12px">📋 Non-Keralite candidates must complete MARGA orientation before deployment.</div>
</div>
</div>
<div class="screen" id="screen-candidate-zone">
<div class="page">
<button class="back-btn" onclick="show('screen-careers')">← BACK</button>
<div class="page-title">APPLY — <span id="job-title-display">Position</span></div>
<div class="page-sub">Select your worker category to continue</div>
<div class="divider"></div>
<div class="zone-card kerala" onclick="startCandidate('kerala')">
<div class="zone-icon">🌴</div>
<div class="zone-title2 green">Kerala Worker</div>
<div class="zone-sub2">For candidates from Kerala. Upload your documents and apply directly — no additional steps required.</div>
</div>
<div class="zone-card guest" onclick="startCandidate('guest')">
<div class="zone-icon">🇮🇳</div>
<div class="zone-title2 gold">Guest Worker</div>
<div class="zone-sub2">For non-Keralite candidates from other states. Includes MARGA orientation, anti-drug awareness, and police verification.</div>
<div style="margin-top:8px;display:inline-block;background:rgba(239,68,68,.1);border:1px solid #ef4444;border-radius:20px;padding:2px 10px;font-size:9px;color:#fca5a5;letter-spacing:2px;">MARGA REQUIRED</div>
</div>
</div>
</div>
<div class="screen" id="screen-cand-1">
<div class="page">
<button class="back-btn" onclick="show('screen-candidate-zone')">← BACK</button>
<div class="prog-wrap"><div class="prog-bar"><div class="prog-fill" id="cand-prog-1" style="width:25%"></div></div><div class="prog-label" id="cand-prog-label-1">Step 1 of 3</div></div>
<div class="page-title">PERSONAL <span>DETAILS</span></div>
<div class="page-sub" id="cand-sub-1">Worker Registration</div>
<div id="marga-warning-1" style="display:none">
<div class="marga-banner"><h3>🚫 MARGA — Zero Drug Tolerance</h3><p>All guest workers must complete MARGA awareness before deployment. Drug use leads to immediate removal and legal action under Kerala law.</p></div>
</div>
<div class="fg"><label class="fl">Full Name *</label><input class="fi" id="c-name" placeholder="Your full name"/></div>
<div class="row2">
<div class="fg"><label class="fl">Date of Birth *</label><input class="fi" id="c-dob" type="date"/></div>
<div class="fg"><label class="fl">Gender *</label>
<select class="fs" id="c-gender">
<option value="">Select</option><option>Male</option><option>Female</option><option>Other</option>
</select>
</div>
</div>
<div class="fg"><label class="fl">Phone / WhatsApp *</label><input class="fi" id="c-phone" type="tel" placeholder="+91 XXXXXXXXXX"/></div>
<div class="fg"><label class="fl">Email (optional)</label><input class="fi" id="c-email" type="email" placeholder="your@email.com"/></div>
<div id="guest-state-fields" style="display:none">
<div class="sec-title">Home State Details</div>
<div class="row2">
<div class="fg"><label class="fl">Home State *</label>
<select class="fs" id="c-state">
<option value="">Select state</option>
<option>Andhra Pradesh</option><option>Assam</option><option>Bihar</option><option>Chhattisgarh</option><option>Gujarat</option><option>Jharkhand</option><option>Karnataka</option><option>Madhya Pradesh</option><option>Maharashtra</option><option>Odisha</option><option>Punjab</option><option>Rajasthan</option><option>Uttar Pradesh</option><option>Uttarakhand</option><option>West Bengal</option><option>Delhi/NCR</option><option>Other</option>
</select>
</div>
<div class="fg"><label class="fl">District / City *</label><input class="fi" id="c-district" placeholder="Home district"/></div>
</div>
</div>
<div class="fg"><label class="fl">Current Address</label><textarea class="ft" id="c-address" placeholder="Address in Kerala or hometown"></textarea></div>
<div class="row2">
<div class="fg"><label class="fl">Emergency Contact</label><input class="fi" id="c-emg-name" placeholder="Name"/></div>
<div class="fg"><label class="fl">Emergency Phone</label><input class="fi" id="c-emg-phone" type="tel" placeholder="+91"/></div>
</div>
<button class="btn btn-primary" onclick="candStep1Next()">Continue →</button>
</div>
</div>
<div class="screen" id="screen-cand-2">
<div class="page">
<button class="back-btn" onclick="show('screen-cand-1')">← BACK</button>
<div class="prog-wrap"><div class="prog-bar"><div class="prog-fill" id="cand-prog-2" style="width:50%"></div></div><div class="prog-label" id="cand-prog-label-2">Step 2 of 3</div></div>
<div class="page-title">SKILLS & <span>EXPERIENCE</span></div>
<div class="page-sub">Tell us about your work background</div>
<div class="divider"></div>
<div class="fg">
<label class="fl">Select Skills / Profession *</label>
<div class="skill-tags" id="skill-tags-container"></div>
</div>
<div class="fg"><label class="fl">Years of Experience</label>
<select class="fs" id="c-exp">
<option value="">Select</option>
<option>Fresher (0 years)</option><option>Less than 1 year</option><option>1–2 years</option><option>3–5 years</option><option>5–10 years</option><option>10+ years</option>
</select>
</div>
<div class="fg"><label class="fl">Current / Previous Job Role</label><input class="fi" id="c-role" placeholder="e.g. Plumber at ABC Builders"/></div>
<div class="fg"><label class="fl">Expected Monthly Salary (₹)</label>
<select class="fs" id="c-salary">
<option value="">Select range</option>
<option>₹10,000–₹13,000</option><option>₹13,000–₹15,000</option><option>₹15,000–₹20,000</option><option>₹20,000–₹30,000</option><option>₹30,000–₹40,000</option><option>₹40,000+</option>
</select>
</div>
<button class="btn btn-primary" id="btn-cand-2" onclick="candStep2Next()" disabled>Continue →</button>
</div>
</div>
<div class="screen" id="screen-cand-3">
<div class="page">
<button class="back-btn" onclick="show('screen-cand-2')">← BACK</button>
<div class="prog-wrap"><div class="prog-bar"><div class="prog-fill" id="cand-prog-3" style="width:75%"></div></div><div class="prog-label" id="cand-prog-label-3">Step 3 of 3</div></div>
<div class="page-title">DOCUMENT <span>UPLOAD</span></div>
<div class="page-sub">Upload your documents for verification</div>
<div class="divider"></div>
<div id="pcc-alert" style="display:none"><div class="alert red">🔒 Police Clearance Certificate is mandatory for all Guest Workers under MARGA protocol.</div></div>
<label class="upload-label" id="cv-label" onclick="triggerUpload('cv-input')">
<input type="file" id="cv-input" accept=".pdf,.doc,.docx" onchange="fileSelected('cv-input','cv-label','cv-name','cv-icon')"/>
<div class="upload-icon" id="cv-icon">📄</div>
<h4 id="cv-name">Upload CV / Resume</h4>
<p>PDF or DOC — Max 5MB (optional)</p>
</label>
<label class="fl">Aadhaar Card *</label>
<label class="upload-label" id="aadhar-label" onclick="triggerUpload('aadhar-input')">
<input type="file" id="aadhar-input" accept="image/*,.pdf" onchange="fileSelected('aadhar-input','aadhar-label','aadhar-name','aadhar-icon')"/>
<div class="upload-icon" id="aadhar-icon">🪪</div>
<h4 id="aadhar-name">Upload Aadhaar Card</h4>
<p>Front & back — JPG, PNG or PDF</p>
</label>
<div id="pcc-upload-wrap" style="display:none">
<label class="fl">Police Clearance Certificate (PCC) *</label>
<label class="upload-label" id="pcc-label" onclick="triggerUpload('pcc-input')">
<input type="file" id="pcc-input" accept="image/*,.pdf" onchange="fileSelected('pcc-input','pcc-label','pcc-name','pcc-icon')"/>
<div class="upload-icon" id="pcc-icon">👮</div>
<h4 id="pcc-name">Upload Police Clearance</h4>
<p>From home state police — PDF preferred</p>
</label>
</div>
<button class="btn btn-primary" id="btn-docs-next" onclick="docsNext()">Continue →</button>
</div>
</div>
<div class="screen" id="screen-marga">
<div class="page">
<button class="back-btn" onclick="show('screen-cand-3')">← BACK</button>
<div class="prog-wrap"><div class="prog-bar"><div class="prog-fill" style="width:100%"></div></div><div class="prog-label">Step 4 of 4 — MARGA Awareness</div></div>
<div class="page-title">MARGA <span>AWARENESS</span></div>
<div class="page-sub">Mandatory — Watch before final submission</div>
<div class="marga-banner"><h3>🚫 Drug Free Kerala Initiative</h3><p>MARGA is MJS Group's commitment to a safer Kerala workplace. Every guest worker must watch and acknowledge this awareness programme before being placed in any job.</p></div>
<div class="video-card">
<div class="video-thumb" onclick="markVideoWatched()">
<div class="play-btn">▶</div>
<h4>MARGA Awareness Video</h4>
<p>Anti-Drug & Worker Conduct — 12 mins</p>
</div>
<div class="video-body">
<div class="vpoint red"><span>🚫</span><span><strong>Anti-Drug Policy</strong> — Zero tolerance. Drug use = immediate removal + legal action under Kerala law.</span></div>
<div class="vpoint gold"><span>📋</span><span><strong>Discipline & Conduct</strong> — Workplace behaviour, dress code, and professional standards expected in Kerala.</span></div>
<div class="vpoint green"><span>⚖️</span><span><strong>Your Rights</strong> — Labour laws, minimum wage, Athidhi Portal registration, and grievance process.</span></div>
<div class="vpoint blue"><span>🌴</span><span><strong>Kerala Culture</strong> — Local customs, public behaviour, and community respect guidelines.</span></div>
</div>
</div>
<div class="cb-row" onclick="toggleMarga()">
<input type="checkbox" id="cb-marga"/>
<span>I confirm I have watched the MARGA Awareness Video and agree to the zero drug tolerance policy, discipline rules, and Kerala labour laws. I understand that any violation will result in immediate termination and legal action.</span>
</div>
<button class="btn btn-primary" id="btn-marga-submit" onclick="submitCandidate()" disabled>✅ Accept & Submit Application</button>
</div>
</div>
<div class="screen" id="screen-success-emp">
<div class="success-wrap">
<div class="success-icon2">✅</div>
<h2>Registration <span>Complete!</span></h2>
<p id="success-emp-msg">Your registration has been submitted to MJS Group.</p>
<p>Our team will contact you within <strong style="color:#F5C518">24–48 hours.</strong></p>
<div class="ref-box"><p>Reference Number</p><h3 id="emp-ref-no">MJS-EMP-XXXXX</h3></div>
<div id="plan-confirm" style="display:none;background:rgba(107,33,168,.1);border:1px solid #6B21A8;border-radius:10px;padding:12px;margin-bottom:16px;width:100%;">
<p style="font-size:10px;color:#a78bfa;letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;">Selected Plan</p>
<p id="plan-confirm-text" style="font-size:16px;font-family:'Barlow Condensed',sans-serif;font-weight:900;color:#fff;"></p>
</div>
<p style="font-size:10px;color:#555;margin-bottom:4px;">Confirmation sent to</p>
<p style="font-size:11px;color:#F5C518;margin-bottom:6px;">mjsgroup.mail@gmail.com</p>
<p style="font-size:10px;color:#555;margin-bottom:4px;">Questions? Call us</p>
<p style="font-size:13px;color:#ddd;margin-bottom:20px;">+91 730 654 5404 / +91 994 784 5404</p>
<button class="btn btn-primary" onclick="goHome()">← Back to Home</button>
</div>
<div class="footer-strip"><span>MJS GROUP © 2025</span><span>PAYYANNUR · KERALA</span></div>
</div>
<div class="screen" id="screen-success-cand">
<div class="success-wrap">
<div class="success-icon2">✅</div>
<h2>Application <span>Received!</span></h2>
<p>Applied for: <strong id="success-job-title" style="color:#F5C518">Position</strong></p>
<p>Our HR team will review and contact you within <strong style="color:#F5C518">2–3 working days.</strong></p>
<div class="ref-box"><p>Application Reference</p><h3 id="cand-ref-no">MJS-CND-XXXXX</h3></div>
<div id="marga-reminder" style="display:none;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:10px;padding:12px;margin-bottom:16px;width:100%;text-align:left;">
<p style="font-size:11px;color:#fca5a5;line-height:1.6;">🚫 <strong>MARGA Reminder:</strong> You have accepted the Zero Drug Tolerance policy. Any violation means immediate removal and legal action. Stay disciplined. Build a better future.</p>
</div>
<p style="font-size:10px;color:#555;margin-bottom:4px;">Application details sent to</p>
<p style="font-size:11px;color:#F5C518;margin-bottom:20px;">tojess.rr@gmail.com</p>
<button class="btn btn-primary" onclick="show('screen-careers')">View More Jobs</button>
<button class="btn btn-secondary" onclick="goHome()" style="margin-top:8px">← Back to Home</button>
</div>
<div class="footer-strip"><span>MJS GROUP © 2025</span><span>PAYYANNUR · KERALA</span></div>
</div>
</div>
<script>
var state = {
screen: 'screen-home',
empType: null,
selectedPlan: null,
candidateType: null,
selectedJob: { title:'', sub:'', type:'' },
selectedSkills: [],
uploads: { cv: false, aadhar: false, pcc: false },
videoWatched: false,
empRef: 'MJS-EMP-' + Math.random().toString(36).substring(2,7).toUpperCase(),
candRef: 'MJS-CND-' + Math.random().toString(36).substring(2,7).toUpperCase()
};
var SKILLS = ["Plumber","Electrician","AC Mechanic","Carpenter","Painter","Welder","Mason","Driver","Delivery Agent","Hotel Staff","Housekeeping","Cook","Security Guard","Cleaner","Helper","Waiter","Pantry Boy","Other"];
function show(id) {
document.querySelectorAll('.screen').forEach(function(s){ s.classList.remove('active'); });
document.getElementById(id).classList.add('active');
window.scrollTo(0,0);
state.screen = id;
}
function goHome() {
state.selectedPlan = null;
state.selectedSkills = [];
state.uploads = {cv:false,aadhar:false,pcc:false};
state.videoWatched = false;
var cb1 = document.getElementById('cb-agree');
var cb2 = document.getElementById('cb-marga');
if(cb1) cb1.checked = false;
if(cb2) cb2.checked = false;
show('screen-home');
}
function startFizz() {
state.empType = 'fizz';
show('screen-fizz-1');
}
function fizzStep1Next() {
var n = document.getElementById('f-bizName').value.trim();
var t = document.getElementById('f-bizType').value;
var c = document.getElementById('f-contact').value.trim();
var p = document.getElementById('f-phone').value.trim();
var a = document.getElementById('f-area').value;
if(!n || !t || !c || !p || !a) { alert('Please fill all required fields (*)'); return; }
show('screen-fizz-2');
}
function selectPlan(plan) {
state.selectedPlan = plan;
document.getElementById('plan-basic').className = 'plan-card' + (plan==='basic'?' sel-basic':'');
document.getElementById('plan-std').className = 'plan-card' + (plan==='standard'?' sel-std':'');
document.getElementById('btn-plan-next').disabled = false;
var txt = plan==='basic' ? 'The Vendor has selected the <strong>Basic Plan (₹15,999/month)</strong> — 20 deliveries/day + 5–6 social media posts/month.' : 'The Vendor has selected the <strong>Standard Plan (₹24,999/month)</strong> — 50 deliveries/day + 8–10 social media posts/month.';
document.getElementById('agr-plan-text').innerHTML = txt + ' Services are provided by Fizz Enterprise under MJS Group, Payyannur, Kerala.';
}
function fizzStep2Next() {
if(!state.selectedPlan) { alert('Please select a plan'); return; }
show('screen-fizz-3');
}
function toggleAgree() {
var cb = document.getElementById('cb-agree');
cb.checked = !cb.checked;
checkAgreement();
}
function checkAgreement() {
var cb = document.getElementById('cb-agree');
var sign = document.getElementById('f-sign').value.trim();
document.getElementById('btn-submit-fizz').disabled = !(cb.checked && sign.length > 2);
}
function submitFizz() {
var planText = state.selectedPlan==='basic' ? 'BASIC — ₹15,999/month' : 'STANDARD — ₹24,999/month';
document.getElementById('emp-ref-no').textContent = state.empRef;
document.getElementById('success-emp-msg').textContent = 'Your Fizz vendor registration has been submitted to MJS Group.';
document.getElementById('plan-confirm').style.display = 'block';
document.getElementById('plan-confirm-text').textContent = planText;
show('screen-success-emp');
}
function submitStaff() {
var n = document.getElementById('s-bizName').value.trim();
var t = document.getElementById('s-bizType').value;
var c = document.getElementById('s-contact').value.trim();
var p = document.getElementById('s-phone').value.trim();
var st = document.getElementById('s-staffType').value;
if(!n || !t || !c || !p || !st) { alert('Please fill all required fields (*)'); return; }
document.getElementById('emp-ref-no').textContent = state.empRef;
document.getElementById('success-emp-msg').textContent = 'Your staff enquiry has been submitted. We will get back with a quote within 24 hours.';
document.getElementById('plan-confirm').style.display = 'none';
show('screen-success-emp');
}
function selectJob(title, sub, type) {
state.selectedJob = {title:title, sub:sub, type:type};
document.getElementById('job-title-display').textContent = title;
show('screen-candidate-zone');
}
function startCandidate(type) {
state.candidateType = type;
var isGuest = type === 'guest';
var totalSteps = isGuest ? 4 : 3;
document.getElementById('cand-prog-1').style.width = (1/totalSteps*100)+'%';
document.getElementById('cand-prog-label-1').textContent = 'Step 1 of ' + totalSteps;
document.getElementById('cand-prog-2').style.width = (2/totalSteps*100)+'%';
document.getElementById('cand-prog-label-2').textContent = 'Step 2 of ' + totalSteps;
document.getElementById('cand-prog-3').style.width = (3/totalSteps*100)+'%';
document.getElementById('cand-prog-label-3').textContent = 'Step 3 of ' + totalSteps;
document.getElementById('guest-state-fields').style.display = isGuest ? 'block' : 'none';
document.getElementById('marga-warning-1').style.display = isGuest ? 'block' : 'none';
document.getElementById('cand-sub-1').textContent = isGuest ? 'Guest Worker — MARGA Registration' : 'Kerala Worker Registration';
document.getElementById('pcc-alert').style.display = isGuest ? 'block' : 'none';
document.getElementById('pcc-upload-wrap').style.display = isGuest ? 'block' : 'none';
var container = document.getElementById('skill-tags-container');
container.innerHTML = '';
SKILLS.forEach(function(s) {
var btn = document.createElement('button');
btn.className = 'stag';
btn.textContent = s;
btn.onclick = function() { toggleSkill(s, btn); };
container.appendChild(btn);
});
state.selectedSkills = [];
document.getElementById('btn-cand-2').disabled = true;
show('screen-cand-1');
}
function toggleSkill(skill, btn) {
var idx = state.selectedSkills.indexOf(skill);
if(idx > -1) { state.selectedSkills.splice(idx,1); btn.classList.remove('on'); }
else { state.selectedSkills.push(skill); btn.classList.add('on'); }
document.getElementById('btn-cand-2').disabled = state.selectedSkills.length === 0;
}
function candStep1Next() {
var n = document.getElementById('c-name').value.trim();
var p = document.getElementById('c-phone').value.trim();
if(!n || !p) { alert('Please enter your name and phone number'); return; }
if(state.candidateType === 'guest') {
var s = document.getElementById('c-state').value;
if(!s) { alert('Please select your home state'); return; }
}
show('screen-cand-2');
}
function candStep2Next() {
if(state.selectedSkills.length === 0) { alert('Please select at least one skill'); return; }
show('screen-cand-3');
}
function triggerUpload(inputId) {
document.getElementById(inputId).click();
}
function fileSelected(inputId, labelId, nameId, iconId) {
var input = document.getElementById(inputId);
if(input.files && input.files[0]) {
document.getElementById(nameId).textContent = input.files[0].name;
document.getElementById(iconId).textContent = '✅';
document.getElementById(labelId).classList.add('done');
if(inputId === 'aadhar-input') state.uploads.aadhar = true;
if(inputId === 'cv-input') state.uploads.cv = true;
if(inputId === 'pcc-input') state.uploads.pcc = true;
}
}
function docsNext() {
if(!state.uploads.aadhar) { alert('Please upload your Aadhaar card'); return; }
if(state.candidateType === 'guest' && !state.uploads.pcc) { alert('Police Clearance Certificate is required for Guest Workers'); return; }
if(state.candidateType === 'guest') { show('screen-marga'); }
else { submitCandidate(); }
}
function markVideoWatched() {
state.videoWatched = true;
var thumb = document.querySelector('.video-thumb');
if(thumb) { thumb.style.background = 'linear-gradient(135deg,#0a2a0a,#0d3d0d)'; }
alert('✅ Video marked as watched. Please tick the checkbox below to confirm.');
}
function toggleMarga() {
var cb = document.getElementById('cb-marga');
cb.checked = !cb.checked;
document.getElementById('btn-marga-submit').disabled = !cb.checked;
}
function submitCandidate() {
document.getElementById('cand-ref-no').textContent = state.candRef;
document.getElementById('success-job-title').textContent = state.selectedJob.title;
if(state.candidateType === 'guest') {
document.getElementById('marga-reminder').style.display = 'block';
} else {
document.getElementById('marga-reminder').style.display = 'none';
}
show('screen-success-cand');
}
</script>
</body>
</html>
