@extends('frontend.layouts.app')
@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --ink: #0b1426;
    --ink2: #1e3a5f;
    --flame: #e84c1e;
    --flame2: #ff6b3d;
    --gold: #f5a623;
    --snow: #ffffff;
    --fog: #f4f6fa;
    --mist: #e8ecf4;
    --slate: #64748b;
    --mint: #059669;
    --mint-bg: #ecfdf5;
    --rose-bg: #fef2f2;
    --rose: #dc2626;
    --r: 16px;
    --shadow: 0 4px 6px rgba(11,20,38,.06), 0 20px 60px rgba(11,20,38,.12);
    --shadow-sm: 0 2px 12px rgba(11,20,38,.08);
}

.ap { font-family: 'DM Sans', sans-serif; color: var(--ink); background: var(--snow); }

/* ════════════════════════════
   HERO
════════════════════════════ */
.ap-hero {
    background: var(--ink);
    padding: 64px 0 88px;
    position: relative;
    overflow: hidden;
}
.ap-hero-mesh {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 80% at 10% 50%, rgba(232,76,30,.18) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 90% 20%, rgba(30,58,95,.6) 0%, transparent 60%);
}
.ap-hero-dots {
    position: absolute; inset: 0; pointer-events: none; opacity: .06;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 28px 28px;
}

.ap-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

.ap-hero-grid {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 60px;
    align-items: start;
    position: relative; z-index: 1;
}

/* hero left */
.ap-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(245,166,35,.12);
    border: 1px solid rgba(245,166,35,.3);
    color: var(--gold);
    padding: 6px 16px; border-radius: 50px;
    font-size: 12px; font-weight: 600; letter-spacing: .8px;
    text-transform: uppercase; margin-bottom: 24px;
}
.ap-hero-badge span.dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold);
    animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.ap-hero-h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(34px, 4.8vw, 60px);
    color: #fff;
    line-height: 1.08;
    margin-bottom: 20px;
}
.ap-hero-h1 i { font-style: italic; color: var(--flame2); }

.ap-hero-sub {
    font-size: 16px; color: rgba(255,255,255,.6);
    line-height: 1.8; max-width: 440px; margin-bottom: 44px;
}

.ap-stats { display: flex; gap: 0; }
.ap-stat {
    flex: 1;
    padding-right: 28px; margin-right: 28px;
    border-right: 1px solid rgba(255,255,255,.1);
}
.ap-stat:last-child { border-right: none; }
.ap-stat-n {
    font-family: 'DM Serif Display', serif;
    font-size: 30px; color: #fff; line-height: 1; display: block;
}
.ap-stat-l { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 5px; display: block; letter-spacing: .3px; }

/* ════════════════════════════
   SIDEBAR / TAB CARD
════════════════════════════ */
.ap-panel {
    background: var(--snow);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--mist);
    position: relative;
    height: 380px;
}

/* tab header */
.ap-tabs {
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ink);
}
.ap-tab {
    padding: 16px 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    user-select: none;
    letter-spacing: .2px;
}
.ap-tab svg { width:15px; height:15px; flex-shrink:0; }
.ap-tab.active {
    color: #fff;
    border-bottom-color: var(--flame);
    background: #1e293b;
}
.ap-tab:hover:not(.active) { color: var(--flame); }



/* panes */
.ap-pane { display: none; padding: 22px; }
.ap-pane.active { display: block; }

/* pincode */
.ap-pinrow { position: relative; margin-bottom: 10px; }
.ap-pinrow-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--slate); pointer-events: none;
}
.ap-pinrow-icon svg { width:15px; height:15px; }
.ap-pin-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid var(--mist);
    border-radius: 11px;
    font-size: 14px; font-family: 'DM Sans', sans-serif;
    color: var(--ink); background: var(--fog);
    outline: none; transition: border-color .2s, background .2s;
    
}
.ap-pin-input:focus { border-color: var(--ink2); background: #fff; }

#pincodelist {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--mist);
    border-radius: 11px; box-shadow: var(--shadow);
    z-index: 999; max-height: 200px; overflow-y: auto;
}
#pincodelist li, #pincodelist a, #pincodelist div.item {
    display: block; padding: 10px 14px;
    font-size: 13.5px; color: var(--ink); cursor: pointer;
    border-bottom: 1px solid var(--fog); text-decoration: none;
    list-style: none; transition: background .15s;
}
#pincodelist li:hover, #pincodelist a:hover, #pincodelist div.item:hover { background: var(--fog); }
#pincodelist li:last-child, #pincodelist a:last-child { border-bottom: none; }

.ap-status {
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
    margin-bottom: 10px; display: none; line-height: 1.5;
    display: flex; align-items: center; gap: 7px;
}
.ap-status.ok  { background: var(--mint-bg); color: var(--mint); display: flex; }
.ap-status.err { background: var(--rose-bg); color: var(--rose); display: flex; }
.ap-status { display: none; }

.ap-btn {
    width: 100%; padding: 12px;
    border: none; border-radius: 11px;
    font-size: 14px; font-family: 'DM Sans', sans-serif; font-weight: 600;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.ap-btn:hover   { transform: translateY(-1px); opacity: .9; }
.ap-btn:active  { transform: scale(.98); }
.ap-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ap-btn-ink  { background: var(--ink);  color: #fff; }
.ap-btn-flame{ background: linear-gradient(130deg, var(--flame), var(--flame2)); color: #fff; }
.ap-btn-mint { background: var(--mint); color: #fff; margin-top: 8px; display: none; }

.ap-hint { font-size: 11.5px; color: var(--slate); text-align: center; margin-top: 12px; line-height: 1.5; }

/* login form */
.ap-flabel { font-size: 11.5px; font-weight: 600; color: var(--slate); margin-bottom: 5px; display: block; letter-spacing: .3px; text-transform: uppercase; }
.ap-finput {
    width: 100%; padding: 11px 13px;
    border: 1.5px solid var(--mist); border-radius: 10px;
    font-size: 14px; font-family: 'DM Sans', sans-serif;
    color: var(--ink); background: var(--fog); outline: none;
    margin-bottom: 13px; transition: border-color .2s, background .2s;
}
.ap-finput:focus { border-color: var(--flame); background: #fff; }

.ap-pw-wrap { position: relative; }
.ap-pw-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--slate);
    padding: 4px; line-height: 1;
}
.ap-pw-toggle svg { width:16px; height:16px; }

.ap-or {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; color: var(--slate); margin: 14px 0;
}
.ap-or::before, .ap-or::after { content:''; flex:1; height:1px; background: var(--mist); }

.ap-reg-link { text-align: center; font-size: 13px; color: var(--slate); margin-top: 10px; }
.ap-reg-link a { color: var(--flame); font-weight: 600; text-decoration: none; }
.ap-reg-link a:hover { text-decoration: underline; }

/* logged-in state */
.ap-logged { text-align: center; padding: 8px 0; }
.ap-logged-av {
    width: 52px; height: 52px; background: var(--ink2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #fff; margin: 0 auto 12px;
}
.ap-logged strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.ap-logged p { font-size: 13px; color: var(--slate); margin-bottom: 16px; }

/* ════════════════════════════
   PARTNER INTEREST FORM
════════════════════════════ */
.ap-interest {
    padding: 72px 0;
    background: var(--fog);
    border-top: 1px solid var(--mist);
}
.ap-interest-inner {
    display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: start;
}
.ap-tag {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--flame); margin-bottom: 10px; display: block;
}
.ap-h2 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(26px, 3.5vw, 40px);
    color: var(--ink); line-height: 1.12; margin-bottom: 14px;
}
.ap-sub { font-size: 15px; color: var(--slate); line-height: 1.75; max-width: 420px; margin-bottom: 32px; }

.ap-perks { display: flex; flex-direction: column; gap: 14px; }
.ap-perk { display: flex; align-items: flex-start; gap: 14px; }
.ap-perk-ico {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ap-perk-txt h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.ap-perk-txt p  { font-size: 13px; color: var(--slate); line-height: 1.55; }

/* form card */
.ap-form-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--mist);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.ap-form-head {
    background: linear-gradient(130deg, var(--ink), var(--ink2));
    padding: 22px 26px;
    display: flex; align-items: center; gap: 14px;
}
.ap-form-head-ico {
    width: 42px; height: 42px; background: rgba(255,255,255,.15);
    border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ap-form-head h3 { font-size: 16px; font-weight: 600; color: #fff; }
.ap-form-head p  { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.ap-form-body { padding: 24px 26px; }

.ap-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ap-fg { margin-bottom: 14px; }
.ap-fg label { font-size: 11.5px; font-weight: 600; color: var(--slate); letter-spacing: .3px; text-transform: uppercase; margin-bottom: 5px; display: block; }
.ap-fg input,
.ap-fg select,
.ap-fg textarea {
    width: 100%; padding: 11px 13px;
    border: 1.5px solid var(--mist); border-radius: 10px;
    font-size: 14px; font-family: 'DM Sans', sans-serif;
    color: var(--ink); background: var(--fog); outline: none;
    transition: border-color .2s, background .2s;
}
.ap-fg input:focus,
.ap-fg select:focus,
.ap-fg textarea:focus { border-color: var(--flame); background: #fff; }
.ap-fg textarea { resize: vertical; min-height: 80px; }
.ap-fg select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

.ap-form-consent {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 12.5px; color: var(--slate); margin-bottom: 16px; line-height: 1.55;
}
.ap-form-consent input { width: auto; margin-top: 2px; accent-color: var(--flame); }

.ap-submit-btn {
    width: 100%; padding: 13px;
    background: linear-gradient(130deg, var(--flame), var(--flame2));
    color: #fff; border: none; border-radius: 11px;
    font-size: 15px; font-family: 'DM Sans', sans-serif; font-weight: 600;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ap-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,76,30,.35); }
.ap-submit-btn:active { transform: scale(.98); }

.ap-form-success {
    display: none; text-align: center; padding: 20px 0;
}
.ap-form-success .tick {
    width: 56px; height: 56px; background: var(--mint-bg);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 0 auto 14px;
}
.ap-form-success h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.ap-form-success p  { font-size: 14px; color: var(--slate); }

/* ════════════════════════════
   BENEFITS
════════════════════════════ */
.ap-benefits { padding: 80px 0 64px; }
.ap-benefits-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; flex-wrap: wrap; gap: 20px; }

.ap-benefits-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
.ap-benefit {
    padding: 28px 22px; border: 1px solid var(--mist);
    border-radius: var(--r); background: #fff;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    position: relative; overflow: hidden;
}
.ap-benefit::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--ink), var(--ink2));
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s ease;
}
.ap-benefit:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.ap-benefit:hover::before { transform: scaleX(1); }

.ap-b-num { font-size: 11px; color: var(--mist); font-weight: 700; letter-spacing: 1px; margin-bottom: 18px; display: block; }
.ap-b-icon {
    width: 46px; height: 46px; background: var(--fog); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; margin-bottom: 16px; transition: background .25s;
}
.ap-benefit:hover .ap-b-icon { background: var(--ink); }
.ap-benefit h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.ap-benefit p  { font-size: 13.5px; color: var(--slate); line-height: 1.65; }

/* ════════════════════════════
   HOW IT WORKS
════════════════════════════ */
.ap-how {
    padding: 64px 0 80px; background: var(--ink);
    position: relative; overflow: hidden;
}
.ap-how::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(232,76,30,.12) 0%, transparent 60%);
}
.ap-how-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
    position: relative; z-index: 1;
}

.ap-how .ap-tag { color: var(--flame2); }
.ap-how .ap-h2  { color: #fff; margin-bottom: 36px; }

.ap-step {
    display: flex; gap: 18px; padding: 0 0 30px; position: relative;
}
.ap-step:not(:last-child)::after {
    content: ''; position: absolute; left: 20px; top: 42px; bottom: 0;
    width: 1px; background: rgba(255,255,255,.1);
}
.ap-step-n {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--flame), var(--flame2));
    color: #fff; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; z-index: 1;
    box-shadow: 0 4px 14px rgba(232,76,30,.4);
}
.ap-step h4 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 5px; padding-top: 9px; }
.ap-step p  { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.65; }

/* earnings card */
.ap-earn-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px; padding: 36px 30px;
    backdrop-filter: blur(10px);
}
.ap-earn-lbl { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.ap-earn-num {
    font-family: 'DM Serif Display', serif;
    font-size: 58px; color: #fff; line-height: 1; margin-bottom: 6px;
}
.ap-earn-sub { font-size: 13px; color: var(--flame2); font-weight: 600; margin-bottom: 28px; }
.ap-tier { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ap-tier-bar-wrap { flex: 1; height: 5px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.ap-tier-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--flame), var(--flame2)); }
.ap-tier-l { font-size: 12px; color: rgba(255,255,255,.55); min-width: 55px; }
.ap-tier-v { font-size: 13px; font-weight: 600; color: #fff; min-width: 70px; text-align: right; }

/* ════════════════════════════
   TESTIMONIAL
════════════════════════════ */
.ap-testi {
    padding: 72px 0; background: var(--fog);
    border-top: 1px solid var(--mist); text-align: center;
}
.ap-stars { color: #f59e0b; font-size: 18px; letter-spacing: 4px; margin-bottom: 20px; }
.ap-quote {
    font-family: 'DM Serif Display', serif; font-style: italic;
    font-size: clamp(18px, 2.8vw, 30px); color: var(--ink);
    line-height: 1.5; max-width: 640px; margin: 0 auto 22px;
}
.ap-quote-by { font-size: 13.5px; color: var(--slate); }
.ap-quote-by strong { color: var(--ink); }

/* ════════════════════════════
   CTA
════════════════════════════ */
.ap-cta { padding: 80px 0; text-align: center; }
.ap-cta-h {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(26px, 3.5vw, 44px); color: var(--ink); margin-bottom: 14px;
}
.ap-cta-p { font-size: 15px; color: var(--slate); margin-bottom: 30px; }
.ap-cta-a {
    display: inline-flex; align-items: center; gap: 9px;
    background: linear-gradient(130deg, var(--flame), var(--flame2));
    color: #fff; padding: 15px 36px; border-radius: 50px;
    font-size: 15px; font-weight: 600; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.ap-cta-a:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(232,76,30,.35); color: #fff; }

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (max-width: 960px) {
    .ap-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .ap-panel { max-width: 480px; }
    .ap-interest-inner { grid-template-columns: 1fr; }
    .ap-how-inner { grid-template-columns: 1fr; }
    .ap-benefits-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .ap-hero { padding: 44px 0 60px; }
    .ap-stats { gap: 0; }
    .ap-stat { padding-right: 16px; margin-right: 16px; }
    .ap-stat-n { font-size: 22px; }
    .ap-benefits-grid { grid-template-columns: 1fr; }
    .ap-form-row { grid-template-columns: 1fr; }
    .ap-panel { max-width: 100%; }
    .ap-earn-num { font-size: 44px; }
    .ap-perks { gap: 18px; }
}
@media (max-width: 400px) {
    .ap-tab { font-size: 12px; padding: 14px 8px; gap: 5px; }
    .ap-tab span.tab-label { display: none; }
}
</style>

<div class="ap">

{{-- ══ HERO ══ --}}
@guest
<section class="ap-hero">
    <div class="ap-hero-mesh"></div>
    <div class="ap-hero-dots"></div>
    <div class="ap-wrap">
        <div class="ap-hero-grid">

            <div>
                <div class="ap-hero-badge"><span class="dot"></span>{{ translate('Partner Program') }}</div>
                <h1 class="ap-hero-h1">
                    {{ translate('Turn Your Network') }}<br>
                    <i>{{ translate('Into Income') }}</i>
                </h1>
                <p class="ap-hero-sub">
                    {{ translate('Join thousands of partners across India earning commissions by connecting customers to our services. Check availability and start today.') }}
                </p>
                <div class="ap-stats">
                    <div class="ap-stat">
                        <span class="ap-stat-n">₹50K+</span>
                        <span class="ap-stat-l">{{ translate('Avg Monthly') }}</span>
                    </div>
                    <div class="ap-stat">
                        <span class="ap-stat-n">10K+</span>
                        <span class="ap-stat-l">{{ translate('Active Partners') }}</span>
                    </div>
                    <div class="ap-stat">
                        <span class="ap-stat-n">500+</span>
                        <span class="ap-stat-l">{{ translate('Cities') }}</span>
                    </div>
                </div>
            </div>

            {{-- ── TAB PANEL ── --}}
            <div class="ap-panel" id="apPanel">

                {{-- Tabs --}}
                <div class="ap-tabs" role="tablist">
                    <button class="ap-tab active" id="tab-avail" role="tab" aria-selected="true" onclick="apSwitchTab('avail')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                        <span class="tab-label">{{ translate('Check Availability') }}</span>
                    </button>
                    <button class="ap-tab" id="tab-login" role="tab" aria-selected="false" onclick="apSwitchTab('login')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                        <span class="tab-label">{{ translate('Partner Login') }}</span>
                    </button>
                </div>

                {{-- Pane: Availability --}}
                <div class="ap-pane active" id="pane-avail" role="tabpanel">
                    <input type="hidden" id="pincodesearch_url" value="{{ route('pincodesearch') }}">
                    <div class="ap-pinrow">
                        <span class="ap-pinrow-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
                        </span>
                        <input
                            type="text"
                            id="availability"
                            class="ap-pin-input pincode"
                            placeholder="{{ translate('Enter pincode e.g. 530001') }}"
                            onkeyup="apPincodeKey(event)"
                            autocomplete="off"
                            maxlength="10"
                            inputmode="numeric"
                        >
                        <div id="pincodelist" class="d-none"></div>
                    </div>
                    <div id="ap-status" class="ap-status"></div>
                    <button class="ap-btn ap-btn-ink" id="apCheckBtn" onclick="apCheck()">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                        {{ translate('Check Availability') }}
                    </button>
                    <form action="{{ route('customer_packages_list_show') }}" method="GET" id="apAvailForm">
                        <input type="hidden" name="availability" id="apAvailHidden">
                        <button type="submit" class="ap-btn ap-btn-mint" id="apViewBtn">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                            {{ translate('View Available Plans') }} →
                        </button>
                    </form>
                    <p class="ap-hint">{{ translate('Anyone can check — login required to purchase') }}</p>
                </div>

                {{-- Pane: Login --}}
                <div class="ap-pane" id="pane-login" role="tabpanel">
                    @auth
                        <div class="ap-logged">
                            <div class="ap-logged-av">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
                            <strong>{{ auth()->user()->name }}</strong>
                            <p>{{ translate('Logged in as a Partner') }}</p>
                            <a href="{{ route('dashboard') }}" class="ap-btn ap-btn-flame" style="text-decoration:none;">
                                🚀 {{ translate('Go to Dashboard') }}
                            </a>
                        </div>
                    @else
                        <form action="{{ route('user.login') }}" method="POST">
                            @csrf
                            <input type="hidden" name="redirect_to" value="{{ route('affiliate.index') }}">
                            <label class="ap-flabel">{{ translate('Email / Mobile') }}</label>
                            <input type="text" name="email" class="ap-finput" placeholder="your@email.com" required autocomplete="email">
                            <label class="ap-flabel">{{ translate('Password') }}</label>
                            <div class="ap-pw-wrap">
                                <input type="password" name="password" id="apPwField" class="ap-finput" placeholder="••••••••" required autocomplete="current-password">
                                <button type="button" class="ap-pw-toggle" onclick="apTogglePw()" aria-label="Toggle password visibility">
                                    <svg id="apEyeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                </button>
                            </div>
                            <button type="submit" class="ap-btn ap-btn-flame" style="margin-top:14px;">
                                {{ translate('Login as Partner') }} →
                            </button>
                        </form>
                        <div class="ap-or">{{ translate('or') }}</div>
                        <div class="ap-reg-link">
                            {{ translate("New partner?") }}
                            <a href="{{ route('user.registration') }}">{{ translate('Register here') }}</a>
                        </div>
                    @endauth
                </div>

            </div>

        </div>
    </div>
</section>
@endguest

@auth
@php $isPartner = App\Models\Affiliate::where('user_id', auth()->user()->id)->first(); @endphp
@if($isPartner)
<section class="ap-hero">
    <div class="ap-hero-mesh"></div>
    <div class="ap-hero-dots"></div>
    <div class="ap-wrap" style="position:relative;z-index:1;padding-top:20px;padding-bottom:20px;">
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;">
            <div style="display:flex;align-items:center;gap:18px;">
                <div class="ap-logged-av" style="width:56px;height:56px;background:linear-gradient(135deg,var(--flame),var(--flame2));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0;">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div>
                    <p style="font-size:13px;color:rgba(255,255,255,.5);margin-bottom:3px;">{{ translate('Welcome back') }} 👋</p>
                    <h2 style="font-family:'DM Serif Display',serif;font-size:clamp(20px,3vw,28px);color:#fff;line-height:1.1;">{{ auth()->user()->name }}</h2>
                    <p style="font-size:13px;color:rgba(255,255,255,.5);margin-top:3px;">{{ translate('Logged in as Partner') }}</p>
                </div>
            </div>
            <a href="{{ route('dashboard') }}" class="ap-cta-a" style="background:linear-gradient(130deg,var(--flame),var(--flame2));color:#fff;padding:13px 28px;border-radius:50px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;">
                🚀 {{ translate('Go to Dashboard') }}
            </a>
        </div>
    </div>
</section>
@else
{{-- Normal user - show pincode check --}}
<section class="ap-hero">
    <div class="ap-hero-mesh"></div>
    <div class="ap-hero-dots"></div>
    <div class="ap-wrap">
        <div class="ap-hero-grid">

            <div>
                <div class="ap-hero-badge"><span class="dot"></span>{{ translate('Partner Program') }}</div>
                <h1 class="ap-hero-h1">
                    {{ translate('Turn Your Network') }}<br>
                    <i>{{ translate('Into Income') }}</i>
                </h1>
                <p class="ap-hero-sub">
                    {{ translate('Join thousands of partners across India earning commissions by connecting customers to our services. Check availability and start today.') }}
                </p>
                <div class="ap-stats">
                    <div class="ap-stat">
                        <span class="ap-stat-n">₹50K+</span>
                        <span class="ap-stat-l">{{ translate('Avg Monthly') }}</span>
                    </div>
                    <div class="ap-stat">
                        <span class="ap-stat-n">10K+</span>
                        <span class="ap-stat-l">{{ translate('Active Partners') }}</span>
                    </div>
                    <div class="ap-stat">
                        <span class="ap-stat-n">500+</span>
                        <span class="ap-stat-l">{{ translate('Cities') }}</span>
                    </div>
                </div>
            </div>

            {{-- ── TAB PANEL ── --}}
            <div class="ap-panel" id="apPanel">

                {{-- Tabs --}}
                <div class="ap-tabs" role="tablist">
                    <button class="ap-tab active" id="tab-avail" role="tab" aria-selected="true" onclick="apSwitchTab('avail')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                        <span class="tab-label">{{ translate('Check Availability') }}</span>
                    </button>
                    <button class="ap-tab" id="tab-login" role="tab" aria-selected="false" onclick="apSwitchTab('login')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                        <span class="tab-label">{{ translate('Partner Login') }}</span>
                    </button>
                </div>

                {{-- Pane: Availability --}}
                <div class="ap-pane active" id="pane-avail" role="tabpanel">
                    <input type="hidden" id="pincodesearch_url" value="{{ route('pincodesearch') }}">
                    <div class="ap-pinrow">
                        <span class="ap-pinrow-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
                        </span>
                        <input
                            type="text"
                            id="availability"
                            class="ap-pin-input pincode"
                            placeholder="{{ translate('Enter pincode e.g. 530001') }}"
                            onkeyup="apPincodeKey(event)"
                            autocomplete="off"
                            maxlength="10"
                            inputmode="numeric"
                        >
                        <div id="pincodelist" class="d-none"></div>
                    </div>
                    <div id="ap-status" class="ap-status"></div>
                    <button class="ap-btn ap-btn-ink" id="apCheckBtn" onclick="apCheck()">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                        {{ translate('Check Availability') }}
                    </button>
                    <form action="{{ route('customer_packages_list_show') }}" method="GET" id="apAvailForm">
                        <input type="hidden" name="availability" id="apAvailHidden">
                        <button type="submit" class="ap-btn ap-btn-mint" id="apViewBtn">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                            {{ translate('View Available Plans') }} →
                        </button>
                    </form>
                    <p class="ap-hint">{{ translate('Anyone can check — login required to purchase') }}</p>
                </div>

                {{-- Pane: Login --}}
                <div class="ap-pane" id="pane-login" role="tabpanel">
                    @auth
                        <div class="ap-logged">
                            <div class="ap-logged-av">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
                            <strong>{{ auth()->user()->name }}</strong>
                            <p>{{ translate('Logged in as a Partner') }}</p>
                            <a href="{{ route('dashboard') }}" class="ap-btn ap-btn-flame" style="text-decoration:none;">
                                🚀 {{ translate('Go to Dashboard') }}
                            </a>
                        </div>
                    @else
                        <form action="{{ route('user.login') }}" method="POST">
                            @csrf
                            <input type="hidden" name="redirect_to" value="{{ route('affiliate.index') }}">
                            <label class="ap-flabel">{{ translate('Email / Mobile') }}</label>
                            <input type="text" name="email" class="ap-finput" placeholder="your@email.com" required autocomplete="email">
                            <label class="ap-flabel">{{ translate('Password') }}</label>
                            <div class="ap-pw-wrap">
                                <input type="password" name="password" id="apPwField" class="ap-finput" placeholder="••••••••" required autocomplete="current-password">
                                <button type="button" class="ap-pw-toggle" onclick="apTogglePw()" aria-label="Toggle password visibility">
                                    <svg id="apEyeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                </button>
                            </div>
                            <button type="submit" class="ap-btn ap-btn-flame" style="margin-top:14px;">
                                {{ translate('Login as Partner') }} →
                            </button>
                        </form>
                        <div class="ap-or">{{ translate('or') }}</div>
                        <div class="ap-reg-link">
                            {{ translate("New partner?") }}
                            <a href="{{ route('user.registration') }}">{{ translate('Register here') }}</a>
                        </div>
                    @endauth
                </div>

            </div>

        </div>
    </div>
</section>
@endif
@endauth

{{-- ══ BENEFITS ══ --}}
<section class="ap-benefits">
    <div class="ap-wrap">
        <div class="ap-benefits-header">
            <div>
                <span class="ap-tag">{{ translate('Why Join Us') }}</span>
                <h2 class="ap-h2">{{ translate('Everything to succeed') }}</h2>
            </div>
            <p style="font-size:14.5px; color:var(--slate); max-width:360px; line-height:1.7;">
                {{ translate('We invest in your growth with tools, training, and support — so you focus on earning.') }}
            </p>
        </div>
        <div class="ap-benefits-grid">
            @php
            $benefits = [
                ['💰','High Commissions','Earn attractive commissions on every referral with no upper cap on your income.'],
                ['📦','Exclusive Plans','Access special partner-only deals unavailable to the general public.'],
                ['📊','Live Dashboard','Track referrals, earnings, and performance in real time.'],
                ['🎓','Free Training','Get certified through our partner program and build local credibility.'],
                ['⚡','Fast Payouts','Commissions processed promptly and sent directly to your bank.'],
                ['🛡️','Dedicated Support','A partner success team always available to help you grow.'],
            ];
            @endphp
            @foreach($benefits as $i => $b)
            <div class="ap-benefit">
                <span class="ap-b-num">0{{ $i+1 }}</span>
                <div class="ap-b-icon">{{ $b[0] }}</div>
                <h3>{{ translate($b[1]) }}</h3>
                <p>{{ translate($b[2]) }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ══ PARTNER INTEREST FORM ══ --}}
<section class="ap-interest" id="partnerForm">
    <div class="ap-wrap">
        <div class="ap-interest-inner">

            <div>
                <span class="ap-tag">{{ translate('Become a Partner') }}</span>
                <h2 class="ap-h2">{{ translate('Interested in joining?') }}</h2>
                <p class="ap-sub">{{ translate("Fill in your details and our team will reach out within 24 hours. It's free, fast, and could change your income story.") }}</p>
                <div class="ap-perks">
                    @php
                    $perks = [
                        ['🤝', 'Zero Investment', 'No setup fee, no hidden charges. Start for free.'],
                        ['📍', 'Work Your Area', 'Operate within your city and grow at your own pace.'],
                        ['💬', 'WhatsApp Support', 'Get real-time help from your dedicated partner manager.'],
                    ];
                    @endphp
                    @foreach($perks as $p)
                    <div class="ap-perk">
                        <div class="ap-perk-ico">{{ $p[0] }}</div>
                        <div class="ap-perk-txt">
                            <h4>{{ translate($p[1]) }}</h4>
                            <p>{{ translate($p[2]) }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="ap-form-card">
                <div class="ap-form-head">
                    <div class="ap-form-head-ico">✍️</div>
                    <div>
                        <h3>{{ translate('Partner Interest Form') }}</h3>
                        <p>{{ translate('Takes less than 2 minutes') }}</p>
                    </div>
                </div>
                <div class="ap-form-body">

                    <div id="interestFormWrap">
                        <form id="interestForm" action="{{ '#' }}" method="POST" onsubmit="apFormSubmit(event)">
                            @csrf
                            <div class="ap-form-row">
                                <div class="ap-fg">
                                    <label>{{ translate('First Name') }} *</label>
                                    <input type="text" name="first_name" placeholder="Ravi" required>
                                </div>
                                <div class="ap-fg">
                                    <label>{{ translate('Last Name') }}</label>
                                    <input type="text" name="last_name" placeholder="Kumar">
                                </div>
                            </div>
                            <div class="ap-fg">
                                <label>{{ translate('Mobile Number') }} *</label>
                                <input type="tel" name="mobile" placeholder="+91 9876543210" required inputmode="tel">
                            </div>
                            <div class="ap-fg">
                                <label>{{ translate('Email Address') }}</label>
                                <input type="email" name="email" placeholder="you@email.com" autocomplete="email">
                            </div>
                            <div class="ap-form-row">
                                <div class="ap-fg">
                                    <label>{{ translate('City') }} *</label>
                                    <input type="text" name="city" placeholder="Visakhapatnam" required>
                                </div>
                                <div class="ap-fg">
                                    <label>{{ translate('Pincode') }} *</label>
                                    <input type="text" name="pincode" placeholder="530001" required inputmode="numeric" maxlength="10">
                                </div>
                            </div>
                            <div class="ap-fg">
                                <label>{{ translate('Current Occupation') }}</label>
                                <select name="occupation">
                                    <option value="">{{ translate('Select...') }}</option>
                                    <option>{{ translate('Business Owner') }}</option>
                                    <option>{{ translate('Freelancer') }}</option>
                                    <option>{{ translate('Job / Service') }}</option>
                                    <option>{{ translate('Student') }}</option>
                                    <option>{{ translate('Other') }}</option>
                                </select>
                            </div>
                            <div class="ap-fg">
                                <label>{{ translate('Why do you want to join?') }}</label>
                                <textarea name="message" placeholder="{{ translate('Tell us a little about yourself or your interest...') }}"></textarea>
                            </div>
                            <div class="ap-form-consent">
                                <input type="checkbox" id="consentChk" required>
                                <label for="consentChk">{{ translate('I agree to be contacted by the team regarding this enquiry and accept the') }} <a href="#" style="color:var(--flame);">{{ translate('terms') }}</a>.</label>
                            </div>
                            <button type="submit" class="ap-submit-btn">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                                {{ translate('Submit My Interest') }}
                            </button>
                        </form>
                    </div>

                    <div class="ap-form-success" id="formSuccess">
                        <div class="tick">✅</div>
                        <h4>{{ translate("We've received your details!") }}</h4>
                        <p>{{ translate('Our partner team will call you within 24 hours. Keep your phone handy!') }}</p>
                    </div>

                </div>
            </div>

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

{{-- ══ HOW IT WORKS ══ --}}
<section class="ap-how">
    <div class="ap-wrap">
        <div class="ap-how-inner">
            <div>
                <span class="ap-tag">{{ translate('How It Works') }}</span>
                <h2 class="ap-h2">{{ translate('Four steps to start earning') }}</h2>
                @php
                $steps = [
                    ['Check Your Area',  'Enter your pincode to confirm service availability.'],
                    ['Register Free',    'Create your partner account in minutes — free to join.'],
                    ['Get Onboarded',    'Complete a short training and get your official partner ID.'],
                    ['Start Earning',    'Refer customers and earn commission on every successful plan.'],
                ];
                @endphp
                @foreach($steps as $i => $s)
                <div class="ap-step">
                    <div class="ap-step-n">{{ $i+1 }}</div>
                    <div>
                        <h4>{{ translate($s[0]) }}</h4>
                        <p>{{ translate($s[1]) }}</p>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="ap-earn-card">
                <p class="ap-earn-lbl">{{ translate('Partner Avg Monthly Earning') }}</p>
                <div class="ap-earn-num">₹50K</div>
                <div class="ap-earn-sub">↑ {{ translate('Growing every month') }}</div>
                @php
                $tiers = [
                    ['Starter','₹15K–25K',40],
                    ['Active', '₹25K–50K',65],
                    ['Pro',    '₹50K–80K',82],
                    ['Elite',  '₹80K+',   95],
                ];
                @endphp
                @foreach($tiers as $t)
                <div class="ap-tier">
                    <span class="ap-tier-l">{{ translate($t[0]) }}</span>
                    <div class="ap-tier-bar-wrap"><div class="ap-tier-bar" style="width:{{ $t[2] }}%"></div></div>
                    <span class="ap-tier-v">{{ $t[1] }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- ══ TESTIMONIAL ══ --}}
<section class="ap-testi">
    <div class="ap-wrap">
        <div class="ap-stars">★★★★★</div>
        <p class="ap-quote">
            "{{ translate('I started part-time and within 6 months I was earning more than my full-time job. Payouts are always on time and the support team genuinely cares.') }}"
        </p>
        <p class="ap-quote-by">
            <strong>Ravi Kumar</strong> · {{ translate('Partner since 2022') }} · Hyderabad
        </p>
    </div>
</section>

{{-- ══ CTA ══ --}}
<section class="ap-cta">
    <div class="ap-wrap">
        <h2 class="ap-cta-h">{{ translate('Ready to become a partner?') }}</h2>
        <p class="ap-cta-p">{{ translate('Check availability in your area and register — takes less than 5 minutes.') }}</p>
        <a href="{{ route('user.registration') }}" class="ap-cta-a">
            {{ translate('Register as Partner') }} →
        </a>
    </div>
</section>

</div><!-- .ap -->

@endsection
@section('script')
<script>
/* ── Tab switch ── */
function apSwitchTab(tab) {
    document.querySelectorAll('.ap-tab').forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected','false'); });
    document.querySelectorAll('.ap-pane').forEach(p => p.classList.remove('active'));
    document.getElementById('tab-' + tab).classList.add('active');
    document.getElementById('tab-' + tab).setAttribute('aria-selected','true');
    document.getElementById('pane-' + tab).classList.add('active');
}

/* ── Password toggle ── */
function apTogglePw() {
    var f = document.getElementById('apPwField');
    f.type = f.type === 'password' ? 'text' : 'password';
}

/* ── Pincode autocomplete ── */
function apPincodeKey(e) {
    if (e.key === 'Enter') { e.preventDefault(); apCheck(); return; }
    pincodeget('{{ route('pincodesearch') }}', 'getonlypincode');
}

function apSelectPin(pincode) {
    document.getElementById('availability').value = pincode;
    document.getElementById('pincodelist').classList.add('d-none');
    apCheck();
}

/* ── Availability check ── */
function apCheck() {
    var pin     = document.getElementById('availability').value.trim();
    var status  = document.getElementById('ap-status');
    var btn     = document.getElementById('apCheckBtn');
    var viewBtn = document.getElementById('apViewBtn');

    if (!pin) {
        status.className = 'ap-status err';
        status.innerHTML = '<span>⚠️</span> {{ translate("Please enter a pincode first.") }}';
        status.style.display = 'flex';
        return;
    }
    btn.disabled = true;
    btn.innerHTML = '⏳ {{ translate("Checking...") }}';

    $.ajax({
        type: 'POST',
        url: '{{ route('pincodedetail') }}',
        dataType: 'json',
        data: { _token: '{{ csrf_token() }}', id: pin, type: 'checkavailability' },
        success: function(r) {
            btn.disabled = false;
            btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg> {{ translate("Check Availability") }}';
            if (r.success == 1) {
                status.className = 'ap-status err';
                status.innerHTML = '<span>❌</span> {{ translate("This pincode already has a partner. Try a different pincode.") }}';
                viewBtn.style.display = 'none';
            } else {
                status.className = 'ap-status ok';
                status.innerHTML = '<span>✅</span> {{ translate("Great! Service is available in your area.") }}';
                document.getElementById('apAvailHidden').value = r.pincode || pin;
                document.getElementById('availability').value  = r.pincode || pin;
                viewBtn.style.display = 'flex';
            }
            status.style.display = 'flex';
            document.getElementById('pincodelist').classList.add('d-none');
        },
        error: function() {
            btn.disabled = false;
            btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg> {{ translate("Check Availability") }}';
            status.className = 'ap-status err';
            status.innerHTML = '<span>⚠️</span> {{ translate("Something went wrong. Please try again.") }}';
            status.style.display = 'flex';
        }
    });
}

/* ── Intercept pincode dropdown ── */
document.addEventListener('click', function(e) {
    var item = e.target.closest('#pincodelist a, #pincodelist li, #pincodelist [data-pincode]');
    if (item) {
        e.preventDefault();
        var pin = item.dataset.pincode || item.getAttribute('data-id') || item.textContent.trim().split(/\s+/)[0];
        apSelectPin(pin);
    }
    if (!e.target.closest('.ap-pinrow')) {
        var pl = document.getElementById('pincodelist');
        if (pl) pl.classList.add('d-none');
    }
});

/* ── Interest form ── */
function apFormSubmit(e) {
    e.preventDefault();
    var btn = e.target.querySelector('.ap-submit-btn');
    btn.innerHTML = '⏳ {{ translate("Sending...") }}';
    btn.disabled = true;

    fetch(e.target.action, {
        method: 'POST',
        body: new FormData(e.target),
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(r) { return r.ok ? r.json() : Promise.reject(r); })
    .then(function() {
        document.getElementById('interestFormWrap').style.display = 'none';
        document.getElementById('formSuccess').style.display = 'block';
    })
    .catch(function() {
        btn.innerHTML = '{{ translate("Submit My Interest") }}';
        btn.disabled = false;
        alert('{{ translate("Something went wrong. Please try again.") }}');
    });
}
</script>

{{-- Legacy getdata support --}}
<script>
function getdata(id, type) {
    $.ajax({
        type: "post",
        url: "{{ route('pincodedetail') }}",
        dataType: "json",
        data: { "_token": "{{ csrf_token() }}", "id": id, "type": type },
        success: function(response) {
            var status  = document.getElementById('ap-status');
            var viewBtn = document.getElementById('apViewBtn');
            var btn     = document.getElementById('apCheckBtn');
            btn.disabled = false;
            btn.innerHTML = '🔎 {{ translate("Check Availability") }}';
            if (response.success == 1) {
                status.className = 'ap-status err';
                status.innerHTML = '<span>❌</span> {{ translate("This pincode already has a partner. Try a different pincode.") }}';
                viewBtn.style.display = 'none';
            } else {
                status.className = 'ap-status ok';
                status.innerHTML = '<span>✅</span> {{ translate("Great! Service is available in your area.") }}';
                document.getElementById('apAvailHidden').value = response.pincode;
                document.getElementById('availability').value  = response.pincode;
                viewBtn.style.display = 'flex';
            }
            status.style.display = 'flex';
            document.getElementById('pincodelist').classList.add('d-none');
        }
    });
}
</script>
@endsection