| Server IP : 3.111.61.48 / Your IP : 216.73.216.67 Web Server : Apache System : Linux ip-10-0-5-176 6.8.0-1057-aws #60~22.04.1-Ubuntu SMP Wed May 27 08:16:59 UTC 2026 x86_64 User : ubuntu ( 1000) PHP Version : 8.2.31 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/vhost/lhvpraktani.in/phire-dekha-2026/resources/views/ |
Upload File : |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>LHV Alumni Reunion Registration</title>
<style>
body{
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
margin:0;
background:#f6f8fb;
}
/* ===== Page Width Reduced ===== */
.wrap{
max-width:1080px;
margin:0 auto;
padding:18px;
}
.card{
background:#fff;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
overflow:hidden;
}
/* ===== Header ===== */
.top{
display:flex;
align-items:center;
gap:14px;
padding:14px 18px;
background:linear-gradient(90deg,#0d3b66,#1e6bb8);
color:#fff;
min-height: 110px;
}
.top h1{
display:flex;
align-items:center;
gap:14px;
padding:14px 18px;
color:#fff;
min-height: 110px;
}
.logo{
width:48px;
height:48px;
border-radius:10px;
/* background:rgba(255,255,255,.18); */
display:flex;
align-items:center;
justify-content:center;
padding-left: 25px;
}
.banner h1{
margin:0;
font-size:40px;
}
.banner p{
margin:3px 0 0;
opacity:.9;
font-size:15px;
}
.badge{
padding:3px 7px;
border-radius:999px;
background:rgba(255,255,255,.18);
font-size:20px;
margin-left:6px;
}
/* ===== Layout ===== */
.content{
display:grid;
grid-template-columns: 1.6fr 1fr; /* LEFT SMALLER */
gap:20px;
padding:18px;
}
.left{
padding-right:16px;
border-right:1px dashed #e2e8f0;
}
.right{
padding-left:6px;
font-size:13px;
color:#334155;
}
.right h3{
margin-top:0;
font-size:15px;
color:#0d3b66;
}
.right p{
line-height: 10px;
}
/* ===== Form ===== */
.grid{
display:grid;
grid-template-columns:1fr;
gap:12px;
}
label{
font-size:11px;
color:#334155;
font-weight:600;
display:block;
margin-bottom:4px;
}
input, select{
width:100%;
padding:8px 10px; /* COMPACT */
border:1px solid #cbd5e1;
border-radius:8px;
font-size:13px;
}
.radio{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
}
.radio label{
font-weight:600;
font-size:12px;
}
.note{
font-size:11px;
color:#475569;
margin-top:3px;
}
.total{
padding:10px 12px;
background:#f1f5f9;
border:1px dashed #94a3b8;
border-radius:10px;
display:flex;
justify-content:space-between;
align-items:center;
}
.total strong{
font-size:16px;
}
.actions{
display:flex;
gap:10px;
align-items:center;
margin-top:12px;
}
button{
padding:10px 14px;
border:0;
border-radius:10px;
background:#0d3b66;
color:#fff;
font-weight:700;
font-size:13px;
cursor:pointer;
}
button:hover{ opacity:.95; }
/* ===== Messages ===== */
.msg{
padding:10px 14px;
border-radius:10px;
margin-bottom:12px;
font-size:13px;
}
.ok{
background:#ecfdf5;
border:1px solid #34d399;
color:#065f46;
}
.err{
background:#fef2f2;
border:1px solid #fca5a5;
color:#7f1d1d;
}
.checkbox-inline{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
font-weight:600;
color:#0f172a;
}
.checkbox-inline input[type="checkbox"]{
width:auto;
margin:0;
}
.radio label{
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
}
.radio input[type="radio"]{
width:auto;
margin:0;
}
/* ===== Responsive ===== */
@media(max-width:900px){
.content{
grid-template-columns:1fr;
}
.left{
border-right:none;
padding-right:0;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<!-- Header -->
<div class="top">
<div class="logo">
<img src="{{ asset('public/images/LHVP-New-Logo.png') }}" width="80" height="80">
</div>
<div class="banner">
<h1>Phire Dekha 2026 <span class="badge">18 Jan 2026</span></h1>
<p>
Fill this form to register for the upcoming LHV reunion.
<br>
Please upload payment screenshot to complete the registration process.
</p>
</div>
</div>
<!-- Content -->
<div class="content">
<!-- LEFT -->
<div class="left">
<form method="post" action="{{ route('register.store') }}" enctype="multipart/form-data">
@csrf
@if (session('success'))
<div class="msg ok">
<strong>{{ session('success') }}</strong>
@if (session('receipt'))
<div class="note" style="margin-top:6px;">
Name: {{ session('receipt.name') }} | Phone: {{ session('receipt.phone') }} | Paid: ₹{{ session('receipt.grand_total') }}
</div>
@endif
</div>
@endif
@if ($errors->any())
<div class="msg err">
<strong>Please fix these:</strong>
<ul style="margin:8px 0 0 18px;">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="grid">
<div>
<label>Full Name <span style="color: red;">*</span></label>
<input type="text" name="full_name" value="{{ old('full_name') }}" required>
</div>
<div>
<label>Phone Number (WhatsApp)<span style="color: red;">*</span></label>
<input type="text" name="phone" id="phone" inputmode="numeric" maxlength="10" value="{{ old('phone') }}" placeholder="10-digit number" required />
<div class="note" id="phoneHint" style="margin-top:6px;"></div>
</div>
<div>
<label>Passing Year <span style="color: red;">*</span></label>
<select name="passing_year" id="passing_year" required>
@foreach($years as $y)
<option value="{{ $y }}" @selected(old('passing_year') == $y)>{{ $y }}</option>
@endforeach
</select>
</div>
<div>
<label>Guest(s) (Per Person ₹ 500) <span style="color: red;">*</span></label>
<select name="guests" id="guests" required>
@for($i=0;$i<=10;$i++)
<option value="{{ $i }}" @selected(old('guests',0) == $i)>{{ $i }}</option>
@endfor
</select>
</div>
<div>
<label>Participation Type<span style="color: red;">*</span></label>
<div class="radio">
<label><input type="radio" name="participation_type" value="full_time" id="pt_full" {{ old('participation_type','full_time')==='full_time'?'checked':'' }} /> Full Day</label>
<label><input type="radio" name="participation_type" value="till_noon" id="pt_noon" {{ old('participation_type')==='till_noon'?'checked':'' }} /> Half Day (Breakfast only)</label>
</div>
</div>
<div>
<label>Food Type <span style="color: red;">*</span></label>
<div class="radio">
<label><input type="radio" name="food_type" value="non_veg" {{ old('food_type','non_veg')==='non_veg'?'checked':'' }} /> Non-Veg</label>
<label><input type="radio" name="food_type" value="veg" {{ old('food_type')==='veg'?'checked':'' }} /> Veg</label>
</div>
</div>
<div>
<label>Upload Payment Screenshot (Image) <span style="color: red;">*</span></label>
<input type="file" name="payment_screenshot" accept="image/*" required />
<div class="note">Accepted: JPG/PNG/WebP etc. Max 5MB.</div>
</div>
<div class="total">
<div>
<div class="note" id="feeBreakdown">Base: ₹0 | Discount: ₹0 | Guests: ₹0</div>
<div style="margin-top:4px;">Grand Total Payable</div>
</div>
<strong id="grandTotal">₹0</strong>
</div>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="disclaimer" required />
I confirm the information is correct and I agree to the reunion participation rules and payment terms.
</label>
</div>
</div>
<div class="actions">
<button type="submit">Submit</button>
</div>
</form>
</div>
<!-- RIGHT -->
<div class="right">
<h3>Account details</h3>
<p>Bank - State Bank of India</p>
<p>Branch - AE Market, Saltlake</p>
<p>A/c Name - Laban Hrad Vidyapith Praktani</p>
<p>A/C No. - 42720393363</p>
<p>IFSC Code - SBIN0006794</p>
<img src="{{ asset('public/images/LHV_QR_Code.JPG') }}" width="100" height="100">
</div>
</div>
</div>
</div>
<script>
(function(){
const phoneEl = document.getElementById('phone');
const yearEl = document.getElementById('passing_year');
const guestsEl = document.getElementById('guests');
const ptFull = document.getElementById('pt_full');
const ptNoon = document.getElementById('pt_noon');
const grandEl = document.getElementById('grandTotal');
const breakdownEl = document.getElementById('feeBreakdown');
const hintEl = document.getElementById('phoneHint');
let phoneExists = false;
function onlyDigits10(val){
return (val || '').replace(/\D/g,'').slice(0,10);
}
function baseFee(pt, year){
const y = parseInt(year,10);
const old = y < 2015;
if(pt==='full_time' && old) return 1000;
if(pt==='till_noon' && old) return 500;
if(pt==='full_time' && !old) return 500;
return 300; // till_noon + year>=2015
}
async function checkPhone(){
const phone = onlyDigits10(phoneEl.value);
phoneEl.value = phone;
phoneExists = false;
hintEl.textContent = '';
// Only check if 10 digits
if(phone.length !== 10) {
updateTotal();
return;
}
try{
const res = await fetch("{{ route('register.checkPhone') }}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
body: JSON.stringify({ phone })
});
const data = await res.json();
phoneExists = !!data.exists;
if(phoneExists){
hintEl.textContent = '✅ Discount available for your participation in cricket tournament.';
}
}catch(e){
// silently ignore
}
updateTotal();
}
function currentParticipation(){
return ptFull.checked ? 'full_time' : 'till_noon';
}
function updateTotal(){
const pt = currentParticipation();
const year = parseInt(yearEl.value,10);
const guests = parseInt(guestsEl.value,10) || 0;
const base = baseFee(pt, year);
// const discount = (pt==='full_time' && phoneExists) ? 300 : 0;
var discount = 0;
if(pt==='full_time' && phoneExists){
if(year <= 2015){
discount = 300
} else {
discount = 150
}
}
const guestFee = guests * 500;
const grand = Math.max(0, base - discount) + guestFee;
breakdownEl.textContent = `Base: ₹${base} | Discount: ₹${discount} | Guests: ₹${guestFee}`;
grandEl.textContent = `₹${grand}`;
}
// Events
phoneEl.addEventListener('input', () => {
phoneEl.value = onlyDigits10(phoneEl.value);
});
phoneEl.addEventListener('blur', checkPhone);
yearEl.addEventListener('change', updateTotal);
guestsEl.addEventListener('change', updateTotal);
ptFull.addEventListener('change', () => { updateTotal(); checkPhone(); });
ptNoon.addEventListener('change', () => { updateTotal(); checkPhone(); });
updateTotal();
})();
</script>
</body>
</html>