<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ========== Meta Tags ========== -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="CII - Cooperative Investment Initiative">
    <meta name="description" content="Join CII Cooperative Investment Initiative. Sign up to invest in Parallex Bank Limited with units starting at ₦100,000. Select your zone and start building your financial legacy today.">
    <meta name="keywords" content="CII signup, join cooperative, register investment, Parallex Bank signup, cooperative membership, investment registration">
    <!-- ======== Page title ============ -->
    <title>Sign Up | Join CII Cooperative Investment Initiative</title>
    <!--<< Favcion >>-->
    <link rel="shortcut icon" href="assets/img/favicon.phtml">

    <!--<< All Min Css >>-->
    <link rel="stylesheet" href="assets/css/all.min.css">
    <!--<< Animate.css >>-->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!--<< Magnific Popup.css >>-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--<< MeanMenu.css >>-->
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <!--<< Swiper Bundle.css >>-->
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <!--<< Nice Select.css >>-->
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <!--<< Flaticon.css >>-->
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <!--<< Main.css >>-->
    <link href="assets/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="src/output.css">
    <style>
        .form-control {
            padding: 12px 16px;
        }

        #zoneSelect {
            overflow-y: auto;
            max-height: 300px;
        }

        #zoneSelect option {
            padding: 8px 12px;
            cursor: pointer;
        }

        #zoneSelect option:hover {
            background-color: #4033FF15;
        }

        #zoneSelect optgroup {
            font-weight: bold;
            color: #4033FF;
            font-size: 14px;
        }

        #zoneSearch:focus {
            border-color: #4033FF;
            box-shadow: 0 0 0 3px rgba(64, 51, 255, 0.1);
        }
    </style>
</head>

<body>
    <?php include '_partials/header.phtml'; ?>

    <main style="margin-top: 150px;">
        <!-- Breadcrumb -->
        <div class="breadcrumb-banner bg-[#F8F8F8] rounded-[30px] overflow-hidden relative">
            <div class="et-container max-w-[clamp(1150px,92.75vw,1765px)]">
                <img src="assets/img/banner/breadcrumb-banner.png" alt="img" class="w-full aspect-[1741/434] min-h-[200px] object-cover rounded-[30px]">
                <h1 class="breadcrumb-title absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-[clamp(40px,4.47vw,85px)] font-semibold leading-[1.08] max-w-full w-max">Register Now</h1>
                <div class="boxes relative ml-auto max-w-[clamp(250px,14.19vw,270px)]">
                    <ul class="breadcrumb-cont absolute flex items-center flex-wrap gap-[16px] left-[0px] bottom-[-7px] pb-[10px]">
                        <li class="text-primary font-medium">
                            <a href="index" class="font-semibold">Home</a>
                        </li>
                        <li>
                            <i class="fa-solid fa-arrow-right"></i>
                        </li>
                        <li class="text-secondary font-medium">
                            Sign Up
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Signup Form Section -->
        <section class="contact-section bg-etWhite py-[clamp(60px,5.25vw,100px)]">
            <div class="et-container max-w-[clamp(900px,70vw,1200px)]">
                <div class="section-header text-center mb-[clamp(30px,3.15vw,60px)]">
                    <div class="et-section-sub-title">
                        <img src="assets/img/icon/section-step1.png" alt="img" class="inline-block"> Membership Registration
                    </div>
                    <h2 class="et-section-title wow fadeInUp mb-[clamp(10px,0.84vw,16px)]">
                        Start Your Investment <span class="fw-300">Journey Today</span>
                    </h2>
                    <p  style="margin-bottom:40px" class="text-primary text-[15px] leading-[1.5] wow fadeInUp max-w-[600px] mx-auto" data-wow-delay=".3s">
                    Complete the form below to join the Cooperative and start investing today.
Provide your details below
  
                    
                    </p>
                </div>

                <!-- Step Indicator -->
                <div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 60px; align-items: center;">
                    <div style="display: flex; align-items: center; gap: 16px;">
                        <div id="step1Indicator" style="width: 50px; height: 50px; border-radius: 50%; background-color: #133A9D; color: white; font-weight: bold; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;">1</div>
                        <span style="font-size: 15px; font-weight: 600; color: #133A9D;">Select Zone</span>
                    </div>
                    <div style="width: 40px; height: 3px; background-color: #E0E0E0;"></div>
                    <div style="display: flex; align-items: center; gap: 16px;">
                        <div id="step2Indicator" style="width: 50px; height: 50px; border-radius: 50%; background-color: #D3D3D3; color: #666; font-weight: bold; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;">2</div>
                        <span id="step2Text" style="font-size: 15px; font-weight: 600; color: #999;">Your Details</span>
                    </div>
                </div>

                <div style="background-color: white; border-radius: 24px; padding: 50px; box-shadow: 0px 16px 48px rgba(0,0,0,0.1);">
                    <form id="signupForm">
                        <!-- STEP 1: Zone Selection -->
                        <div id="step1Container">
                            <h3 style="color: #2D2D2D; font-size: 24px; font-weight: 700; margin-bottom: 40px;">Step 1: Select Your Zone</h3>

                            <!-- Zone Selection -->
                            <div style="margin-bottom: 32px;">
                                <label style="display: block; color: #555; font-size: 15px; font-weight: 600; margin-bottom: 12px;">Select Your Zone <span style="color: red;">*</span></label>
                                <div style="position: relative; margin-bottom: 12px;">
                                    <input type="text" id="zoneSearch" style="width: 100%; border: 2px solid #E0E0E0; border-radius: 10px; padding: 14px 16px 14px 40px; font-size: 14px; outline: none; font-family: inherit; background-color: #FAFAFA; transition: all 0.3s ease;" placeholder="Search for your zone..." onkeyup="filterZones()" onfocus="this.style.borderColor='#133A9D'; this.style.backgroundColor='white';" onblur="this.style.borderColor='#E0E0E0'; if(!document.getElementById('zoneHiddenInput').value) this.style.backgroundColor='#FAFAFA';">
                                    <i class="fas fa-search" style="position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #999; font-size: 14px;"></i>
                                </div>
                                <div id="selectedZoneDisplay" style="display: none; margin-bottom: 12px; padding: 14px; background-color: #F0F4FF; border: 2px solid #133A9D; border-radius: 10px; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                                    <span id="selectedZoneText" style="color: #133A9D; font-weight: 600;"></span>
                                    <button type="button" onclick="clearZoneSelection()" style="background: none; border: none; color: #E74C3C; cursor: pointer; font-size: 18px;">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <input type="hidden" name="zone" id="zoneHiddenInput" required>
                                <select id="zoneSelect" onchange="handleZoneSelection()" style="width: 100%; border: 2px solid #E0E0E0; border-radius: 10px; padding: 12px 14px; font-size: 14px; outline: none; display: none; background-color: white; max-height: 300px; font-family: inherit;" size="8">
                                    <option value="">Select your zone</option>
                                    <optgroup label="Prolific Multi-Purpose Cooperative">
                                        <option value="Lagos Zone 1" data-coop="Prolific Multi-Purpose Cooperative" data-image="info/operatives/prolific.jpg" data-account="0013500508" data-bank="Spectrum Bank">Lagos Zone 1</option>
                                        <option value="Lagos Zone 3" data-coop="Prolific Multi-Purpose Cooperative" data-image="info/operatives/prolific.jpg" data-account="0013500508" data-bank="Spectrum Bank">Lagos Zone 3</option>
                                        <option value="Lagos Zone 4" data-coop="Prolific Multi-Purpose Cooperative" data-image="info/operatives/prolific.jpg" data-account="0013500508" data-bank="Spectrum Bank">Lagos Zone 4</option>
                                        <option value="Lagos Sub Zone A" data-coop="Prolific Multi-Purpose Cooperative" data-image="info/operatives/prolific.jpg" data-account="0013500508" data-bank="Spectrum Bank">Lagos Sub Zone A</option>
                                        <option value="Lagos Sub Zone B" data-coop="Prolific Multi-Purpose Cooperative" data-image="info/operatives/prolific.jpg" data-account="0013500508" data-bank="Spectrum Bank">Lagos Sub Zone B</option>
                                        <option value="Loveworld Church Zone" data-coop="Prolific Multi-Purpose Cooperative" data-image="info/operatives/prolific.jpg" data-account="0013500508" data-bank="Spectrum Bank">Loveworld Church Zone</option>
                                        <option value="Lagos Sub Zone C" data-coop="Prolific Multi-Purpose Cooperative" data-image="info/operatives/prolific.jpg" data-account="0013500508" data-bank="Spectrum Bank">Lagos Sub Zone C</option>
                                        <option value="Lagos Virtual Zone" data-coop="Prolific Multi-Purpose Cooperative" data-image="info/operatives/prolific.jpg" data-account="0013500508" data-bank="Spectrum Bank">Lagos Virtual Zone</option>
                                    </optgroup>
                                    <optgroup label="Prime Capital Cooperative">
                                        <option value="Lagos Zone 5" data-coop="Prime Capital Cooperative" data-image="info/operatives/prime-capital.jpg" data-account="0013500505" data-bank="Spectrum Bank">Lagos Zone 5</option>
                                    </optgroup>
                                    <optgroup label="Visionary Multi-Purpose Cooperative">
                                        <option value="Lagos Zone 2" data-coop="Visionary Multi-Purpose Cooperative" data-image="info/operatives/visionary.jpg" data-account="0013500509" data-bank="Spectrum Bank">Lagos Zone 2</option>
                                        <option value="Lagos Zone 6" data-coop="Visionary Multi-Purpose Cooperative" data-image="info/operatives/visionary.jpg" data-account="0013500509" data-bank="Spectrum Bank">Lagos Zone 6</option>
                                    </optgroup>
                                    <optgroup label="Coastline Multi-Purpose Cooperative">
                                        <option value="Port Harcourt Zone 1" data-coop="Coastline Multi-Purpose Cooperative" data-image="info/operatives/coastline.jpg" data-account="0013500507" data-bank="Spectrum Bank">Port Harcourt Zone 1</option>
                                        <option value="Port Harcourt Zone 2" data-coop="Coastline Multi-Purpose Cooperative" data-image="info/operatives/coastline.jpg" data-account="0013500507" data-bank="Spectrum Bank">Port Harcourt Zone 2</option>
                                        <option value="Port Harcourt Zone 3" data-coop="Coastline Multi-Purpose Cooperative" data-image="info/operatives/coastline.jpg" data-account="0013500507" data-bank="Spectrum Bank">Port Harcourt Zone 3</option>
                                        <option value="South South Zone 1" data-coop="Coastline Multi-Purpose Cooperative" data-image="info/operatives/coastline.jpg" data-account="0013500507" data-bank="Spectrum Bank">South South Zone 1</option>
                                        <option value="South South Zone 2" data-coop="Coastline Multi-Purpose Cooperative" data-image="info/operatives/coastline.jpg" data-account="0013500507" data-bank="Spectrum Bank">South South Zone 2</option>
                                        <option value="South South Zone 3" data-coop="Coastline Multi-Purpose Cooperative" data-image="info/operatives/coastline.jpg" data-account="0013500507" data-bank="Spectrum Bank">South South Zone 3</option>
                                        <option value="Ministry Centre Calabar" data-coop="Coastline Multi-Purpose Cooperative" data-image="info/operatives/coastline.jpg" data-account="0013500507" data-bank="Spectrum Bank">Ministry Centre Calabar</option>
                                    </optgroup>
                                    <optgroup label="Alliance Multi-Purpose Cooperative">
                                        <option value="Ministry Centre Abeokuta" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">Ministry Centre Abeokuta</option>
                                        <option value="South West Zone 2" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">South West Zone 2</option>
                                        <option value="South West Zone 3" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">South West Zone 3</option>
                                        <option value="South West Zone 4" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">South West Zone 4</option>
                                        <option value="South West Zone 5" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">South West Zone 5</option>
                                        <option value="Ministry Centre Ibadan" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">Ministry Centre Ibadan</option>
                                        <option value="Ibadan Zone 1" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">Ibadan Zone 1</option>
                                        <option value="Ibadan Zone 2" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">Ibadan Zone 2</option>
                                        <option value="Ministry Centre Abuja" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">Ministry Centre Abuja</option>
                                        <option value="Abuja Zone 1" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">Abuja Zone 1</option>
                                        <option value="Abuja Zone 2" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">Abuja Zone 2</option>
                                        <option value="North West Zone 1" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">North West Zone 1</option>
                                        <option value="North West Zone 2" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">North West Zone 2</option>
                                        <option value="North Central Zone 1" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">North Central Zone 1</option>
                                        <option value="North Central Zone 2" data-coop="Alliance Multi-Purpose Cooperative" data-image="info/operatives/alliance.jpg" data-account="0013500504" data-bank="Spectrum Bank">North Central Zone 2</option>
                                    </optgroup>
                                    <optgroup label="Greater Heights Multi-Purpose Cooperative">
                                        <option value="Benin Zone 1" data-coop="Greater Heights Multi-Purpose Cooperative" data-image="info/operatives/greater-heights.jpg" data-account="0013500503" data-bank="Spectrum Bank">Benin Zone 1</option>
                                        <option value="Benin Zone 2" data-coop="Greater Heights Multi-Purpose Cooperative" data-image="info/operatives/greater-heights.jpg" data-account="0013500503" data-bank="Spectrum Bank">Benin Zone 2</option>
                                        <option value="Mid-West Zone" data-coop="Greater Heights Multi-Purpose Cooperative" data-image="info/operatives/greater-heights.jpg" data-account="0013500503" data-bank="Spectrum Bank">Mid-West Zone</option>
                                        <option value="Ministry Centre Warri" data-coop="Greater Heights Multi-Purpose Cooperative" data-image="info/operatives/greater-heights.jpg" data-account="0013500503" data-bank="Spectrum Bank">Ministry Centre Warri</option>
                                        <option value="Warri DSc Sub Zone" data-coop="Greater Heights Multi-Purpose Cooperative" data-image="info/operatives/greater-heights.jpg" data-account="0013500503" data-bank="Spectrum Bank">Warri DSc Sub Zone</option>
                                        <option value="Edo North & Edo Central Zone" data-coop="Greater Heights Multi-Purpose Cooperative" data-image="info/operatives/greater-heights.jpg" data-account="0013500503" data-bank="Spectrum Bank">Edo North & Edo Central Zone</option>
                                    </optgroup>
                                    <optgroup label="Treasure land Multi-Purpose Cooperative">
                                        <option value="South East Zone 1" data-coop="Treasure land Multi-Purpose Cooperative" data-image="info/operatives/treasure-land.jpg" data-account="0013500506" data-bank="Spectrum Bank">South East Zone 1</option>
                                        <option value="South East Zone 3" data-coop="Treasure land Multi-Purpose Cooperative" data-image="info/operatives/treasure-land.jpg" data-account="0013500506" data-bank="Spectrum Bank">South East Zone 3</option>
                                        <option value="Aba Zone" data-coop="Treasure land Multi-Purpose Cooperative" data-image="info/operatives/treasure-land.jpg" data-account="0013500506" data-bank="Spectrum Bank">Aba Zone</option>
                                        <option value="Onitsha Zone" data-coop="Treasure land Multi-Purpose Cooperative" data-image="info/operatives/treasure-land.jpg" data-account="0013500506" data-bank="Spectrum Bank">Onitsha Zone</option>
                                        <option value="South East Zone 2" data-coop="Treasure land Multi-Purpose Cooperative" data-image="info/operatives/treasure-land.jpg" data-account="0013500506" data-bank="Spectrum Bank">South East Zone 2</option>
                                    </optgroup>
                                    <optgroup label="Toplane Multi-Purpose Cooperative">
                                        <option value="UK Zone 1" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">UK Zone 1</option>
                                        <option value="UK Zone 2" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">UK Zone 2</option>
                                        <option value="UK Zone 3" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">UK Zone 3</option>
                                        <option value="UK Zone 4" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">UK Zone 4</option>
                                        <option value="EWCA ZONE 1" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">EWCA ZONE 1</option>
                                        <option value="EWCA ZONE 2" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">EWCA ZONE 2</option>
                                        <option value="EWCA ZONE 4" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">EWCA ZONE 4</option>
                                        <option value="EWCA ZONE 5" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">EWCA ZONE 5</option>
                                        <option value="EWCA ZONE 6" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">EWCA ZONE 6</option>
                                        <option value="Accra Ghana Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Accra Ghana Zone</option>
                                        <option value="Kenya Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Kenya Zone</option>
                                        <option value="SA Zone 1" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">SA Zone 1</option>
                                        <option value="SA Zone 2" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">SA Zone 2</option>
                                        <option value="SA Zone 3" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">SA Zone 3</option>
                                        <option value="SA Zone 4" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">SA Zone 4</option>
                                        <option value="SA Zone 5" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">SA Zone 5</option>
                                        <option value="Chad Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Chad Zone</option>
                                        <option value="Durban Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Durban Zone</option>
                                        <option value="Cape Town Zone 1" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Cape Town Zone 1</option>
                                        <option value="Cape Town zone 2" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Cape Town zone 2</option>
                                        <option value="Eastern Europe Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Eastern Europe Zone</option>
                                        <option value="USA Region 3" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">USA Region 3</option>
                                        <option value="USA Region 1" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">USA Region 1</option>
                                        <option value="Australia & South Pacific Region" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Australia & South Pacific Region</option>
                                        <option value="East Asia Region" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">East Asia Region</option>
                                        <option value="Quebec Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Quebec Zone</option>
                                        <option value="Ottawa Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Ottawa Zone</option>
                                        <option value="India Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">India Zone</option>
                                        <option value="Western Europe Zone 1" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Western Europe Zone 1</option>
                                        <option value="Western Europe Zone 2" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Western Europe Zone 2</option>
                                        <option value="Western Europe Zone 3" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Western Europe Zone 3</option>
                                        <option value="Western Europe Zone 4" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Western Europe Zone 4</option>
                                        <option value="Kenya Sub zone A" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Kenya Sub zone A</option>
                                        <option value="Middle East & South East Asia Region" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Middle East & South East Asia Region</option>
                                        <option value="Eastern Europe Region" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Eastern Europe Region</option>
                                        <option value="Toronto Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Toronto Zone</option>
                                        <option value="Berlin Zone" data-coop="Toplane Multi-Purpose Cooperative" data-image="info/operatives/toplane.jpg" data-account="0013500511" data-bank="Spectrum Bank">Berlin Zone</option>
                                    </optgroup>
                                </select>
                            </div>

                            <!-- Register Button for Step 1 -->
                            <button type="button" onclick="proceedToStep2()" style="width: 100%; background-color: #133A9D; color: white; border: none; border-radius: 10px; padding: 14px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 10px;">
                                Confirm Zone & Continue
                                <i class="fa-solid fa-arrow-right"></i>
                            </button>
                            <script>
                                document.querySelector('button[onclick="proceedToStep2()"]').addEventListener('mouseenter', function() {
                                    this.style.backgroundColor = '#0F2875';
                                    this.style.boxShadow = '0 6px 16px rgba(19, 58, 157, 0.3)';
                                });
                                document.querySelector('button[onclick="proceedToStep2()"]').addEventListener('mouseleave', function() {
                                    this.style.backgroundColor = '#133A9D';
                                    this.style.boxShadow = 'none';
                                });
                            </script>
                        </div>

                        <!-- STEP 2: User Details & Cooperative Info -->
                        <div id="step2Container" style="display: none;">
                            <h3 style="color: #2D2D2D; font-size: 24px; font-weight: 700; margin-bottom: 40px;">Step 2: Your Details</h3>

                            <!-- Cooperative Details Display -->
                            <div style="margin-bottom: 48px;">
                                <h4 style="color: #133A9D; font-size: 18px; font-weight: 700; margin-bottom: 20px;">Cooperative Information</h4>
                                <div style="background-color: #F0F4FF; border: 2px solid #133A9D; border-radius: 16px; padding: 32px;">
                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;">
                                        <!-- Cooperative Image -->
                                        <div style="text-align: center;">
                                            <img id="coopImage" src="" alt="Cooperative" style="border-radius: 12px; width: 100%; max-width: 250px; object-fit: cover; box-shadow: 0 8px 24px rgba(19, 58, 157, 0.2); border: 2px solid #133A9D;">
                                        </div>
                                        <!-- Cooperative Details -->
                                        <div style="display: grid; grid-template-columns: 1fr; gap: 20px;">
                                            <div style="display: flex; align-items: flex-start; gap: 16px;">
                                                <div style="width: 45px; height: 45px; background-color: #133A9D; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                                    <i class="fas fa-building" style="color: white; font-size: 18px;"></i>
                                                </div>
                                                <div>
                                                    <span style="display: block; font-size: 12px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Cooperative Name</span>
                                                    <span id="coopName" style="display: block; font-size: 17px; font-weight: 700; color: #133A9D;">-</span>
                                                </div>
                                            </div>
                                            <div style="display: flex; align-items: flex-start; gap: 16px;">
                                                <div style="width: 45px; height: 45px; background-color: #7318AB; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                                    <i class="fas fa-university" style="color: white; font-size: 18px;"></i>
                                                </div>
                                                <div>
                                                    <span style="display: block; font-size: 12px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Bank Name</span>
                                                    <span id="bankName" style="display: block; font-size: 17px; font-weight: 700; color: #7318AB;">-</span>
                                                </div>
                                            </div>
                                            <div style="display: flex; align-items: flex-start; gap: 16px;">
                                                <div style="width: 45px; height: 45px; background-color: #CC66CC; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                                    <i class="fas fa-credit-card" style="color: white; font-size: 18px;"></i>
                                                </div>
                                                <div>
                                                    <span style="display: block; font-size: 12px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Account Number</span>
                                                    <span id="accountNumber" style="display: block; font-size: 17px; font-weight: 700; color: #CC66CC; font-family: monospace; letter-spacing: 1px;">-</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Personal Details Section -->
                            <h4 style="color: #133A9D; font-size: 18px; font-weight: 700; margin-bottom: 20px;">Your Personal Information</h4>

                            <!-- First Name -->
                            <div style="margin-bottom: 20px;">
                                <label style="display: block; color: #555; font-size: 15px; font-weight: 600; margin-bottom: 10px;">First Name <span style="color: red;">*</span></label>
                                <input type="text" name="firstName" required style="width: 100%; border: 2px solid #E0E0E0; border-radius: 10px; padding: 14px 16px; font-size: 14px; outline: none; font-family: inherit; background-color: #FAFAFA; transition: all 0.3s ease;" placeholder="Enter your first name" onfocus="this.style.borderColor='#133A9D'; this.style.backgroundColor='white';" onblur="this.style.borderColor='#E0E0E0'; this.style.backgroundColor='#FAFAFA';">
                            </div>

                            <!-- Surname -->
                            <div style="margin-bottom: 20px;">
                                <label style="display: block; color: #555; font-size: 15px; font-weight: 600; margin-bottom: 10px;">Surname <span style="color: red;">*</span></label>
                                <input type="text" name="surname" required style="width: 100%; border: 2px solid #E0E0E0; border-radius: 10px; padding: 14px 16px; font-size: 14px; outline: none; font-family: inherit; background-color: #FAFAFA; transition: all 0.3s ease;" placeholder="Enter your surname" onfocus="this.style.borderColor='#133A9D'; this.style.backgroundColor='white';" onblur="this.style.borderColor='#E0E0E0'; this.style.backgroundColor='#FAFAFA';">
                            </div>

                            <!-- Phone Number -->
                            <div style="margin-bottom: 20px;">
                                <label style="display: block; color: #555; font-size: 15px; font-weight: 600; margin-bottom: 10px;">Phone Number <span style="color: red;">*</span></label>
                                <input type="tel" name="phone" required style="width: 100%; border: 2px solid #E0E0E0; border-radius: 10px; padding: 14px 16px; font-size: 14px; outline: none; font-family: inherit; background-color: #FAFAFA; transition: all 0.3s ease;" placeholder="+234 XXX XXX XXXX" onfocus="this.style.borderColor='#133A9D'; this.style.backgroundColor='white';" onblur="this.style.borderColor='#E0E0E0'; this.style.backgroundColor='#FAFAFA';">
                            </div>

                            <!-- Email Address -->
                            <div style="margin-bottom: 32px;">
                                <label style="display: block; color: #555; font-size: 15px; font-weight: 600; margin-bottom: 10px;">Email Address <span style="color: red;">*</span></label>
                                <input type="email" name="email" required style="width: 100%; border: 2px solid #E0E0E0; border-radius: 10px; padding: 14px 16px; font-size: 14px; outline: none; font-family: inherit; background-color: #FAFAFA; transition: all 0.3s ease;" placeholder="your.email@example.com" onfocus="this.style.borderColor='#133A9D'; this.style.backgroundColor='white';" onblur="this.style.borderColor='#E0E0E0'; this.style.backgroundColor='#FAFAFA';">
                            </div>

                            <!-- Investment Section Header -->
                            <h4 style="color: #133A9D; font-size: 18px; font-weight: 700; margin-bottom: 20px; margin-top: 32px;">Investment Details</h4>

                            <!-- Investment Units -->
                            <div style="margin-bottom: 20px;">
                                <label style="display: block; color: #555; font-size: 15px; font-weight: 600; margin-bottom: 10px;">Investment Units <span style="color: red;">*</span></label>
                                <select name="investmentUnits" id="investmentUnits" required style="width: 100%; border: 2px solid #E0E0E0; border-radius: 10px; padding: 14px 16px; font-size: 14px; outline: none; font-family: inherit; background-color: #FAFAFA; transition: all 0.3s ease; cursor: pointer;" onfocus="this.style.borderColor='#133A9D'; this.style.backgroundColor='white';" onblur="this.style.borderColor='#E0E0E0'; this.style.backgroundColor='#FAFAFA';" onchange="updateInvestmentPrice()">
                                    <option value="">Select number of units</option>
                                    <option value="1">1 Unit - ₦100,000</option>
                                    <option value="2">2 Units - ₦200,000</option>
                                    <option value="3">3 Units - ₦300,000</option>
                                    <option value="5">5 Units - ₦500,000</option>
                                    <option value="10">10 Units - ₦1,000,000</option>
                                    <option value="custom">Custom Amount</option>
                                </select>
                            </div>

                            <!-- Investment Price Display -->
                            <div id="priceDisplay" style="margin-bottom: 20px; padding: 16px; background-color: #F0F4FF; border: 2px solid #133A9D; border-radius: 10px; display: none;">
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <i class="fas fa-money-bill-wave" style="color: #133A9D; font-size: 20px;"></i>
                                    <div>
                                        <span style="display: block; font-size: 12px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Total Investment Amount</span>
                                        <span id="investmentAmount" style="display: block; font-size: 20px; font-weight: 700; color: #133A9D;">₦0</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Other Amount (Custom) -->
                            <div id="customAmountContainer" style="margin-bottom: 32px; display: none;">
                                <label style="display: block; color: #555; font-size: 15px; font-weight: 600; margin-bottom: 10px;">Enter Number of Units <span style="color: red;">*</span></label>
                                <p style="font-size: 13px; color: #999; margin-bottom: 12px;">1 Unit = ₦100,000</p>
                                <div style="position: relative;">
                                    <input type="number" name="customUnits" id="customUnits" min="1" step="1" style="width: 100%; border: 2px solid #E0E0E0; border-radius: 10px; padding: 14px 16px; font-size: 14px; outline: none; font-family: inherit; background-color: #FAFAFA; transition: all 0.3s ease;" placeholder="e.g., 5 for ₦500,000" onfocus="this.style.borderColor='#133A9D'; this.style.backgroundColor='white';" onblur="this.style.borderColor='#E0E0E0'; this.style.backgroundColor='#FAFAFA';" oninput="calculateCustomAmount()">
                                </div>
                                <input type="hidden" name="otherAmount" id="otherAmount">
                            </div>

                            <!-- Form Actions -->
                            <div style="display: flex; gap: 16px; margin-top: 40px;">
                                <button type="button" onclick="goBackToStep1()" style="flex: 1; background-color: #F0F0F0; color: #666; border: 2px solid #E0E0E0; border-radius: 10px; padding: 14px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px;" onmouseenter="this.style.backgroundColor='#E0E0E0'; this.style.borderColor='#CCC';" onmouseleave="this.style.backgroundColor='#F0F0F0'; this.style.borderColor='#E0E0E0';">
                                    <i class="fa-solid fa-arrow-left"></i> Back
                                </button>
                                <button type="submit" style="flex: 1; background-color: #133A9D; color: white; border: none; border-radius: 10px; padding: 14px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 12px rgba(19, 58, 157, 0.2);" onmouseenter="this.style.backgroundColor='#0F2875'; this.style.boxShadow='0 6px 16px rgba(19, 58, 157, 0.3)';" onmouseleave="this.style.backgroundColor='#133A9D'; this.style.boxShadow='0 4px 12px rgba(19, 58, 157, 0.2)';">
                                    Submit Registration <i class="fa-solid fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <?php include '_partials/footer.phtml'; ?>

    <script>
        // Two-step form management
        function proceedToStep2() {
            const zoneHiddenInput = document.getElementById('zoneHiddenInput');

            if (!zoneHiddenInput.value) {
                alert('Please select a zone to proceed');
                return;
            }

            // Hide step 1, show step 2
            document.getElementById('step1Container').style.display = 'none';
            document.getElementById('step2Container').style.display = 'block';

            // Update step indicators
            document.getElementById('step1Indicator').classList.remove('bg-[#133A9D]');
            document.getElementById('step1Indicator').classList.add('bg-[#28A745]', 'text-white');
            document.getElementById('step1Indicator').innerHTML = '<i class="fas fa-check text-[20px]"></i>';

            document.getElementById('step2Indicator').classList.remove('bg-[#D3D3D3]', 'text-[#666]');
            document.getElementById('step2Indicator').classList.add('bg-[#133A9D]', 'text-white');

            document.querySelector('span[style*="color: #999"]').style.color = '#133A9D';

            // Show cooperative details in step 2
            showCooperativeDetails();

            // Scroll to form
            setTimeout(() => {
                document.getElementById('step2Container').scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 100);
        }

        function goBackToStep1() {
            // Hide step 2, show step 1
            document.getElementById('step2Container').style.display = 'none';
            document.getElementById('step1Container').style.display = 'block';

            // Reset step indicators
            document.getElementById('step1Indicator').classList.remove('bg-[#28A745]');
            document.getElementById('step1Indicator').classList.add('bg-[#133A9D]');
            document.getElementById('step1Indicator').innerHTML = '1';

            document.getElementById('step2Indicator').classList.remove('bg-[#133A9D]', 'text-white');
            document.getElementById('step2Indicator').classList.add('bg-[#D3D3D3]', 'text-[#666]');
            document.getElementById('step2Indicator').innerHTML = '2';

            // Scroll to form
            document.getElementById('step1Container').scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        // Filter zones based on search input
        function filterZones() {
            const searchInput = document.getElementById('zoneSearch');
            const select = document.getElementById('zoneSelect');
            const searchTerm = searchInput.value.toLowerCase();

            // Show dropdown when user starts typing
            if (searchTerm.length > 0) {
                select.style.display = 'block';
            } else {
                select.style.display = 'none';
                return;
            }

            let visibleCount = 0;

            // Loop through all options and optgroups
            Array.from(select.options).forEach(option => {
                if (option.value === '') {
                    // Hide the default option when filtering
                    option.style.display = 'none';
                    return;
                }

                const optionText = option.textContent.toLowerCase();
                const optgroupLabel = option.parentElement.label ? option.parentElement.label.toLowerCase() : '';

                // Show option if it matches search term or its optgroup matches
                if (optionText.includes(searchTerm) || optgroupLabel.includes(searchTerm)) {
                    option.style.display = '';
                    visibleCount++;
                } else {
                    option.style.display = 'none';
                }
            });

            // Also handle optgroups visibility
            Array.from(select.getElementsByTagName('optgroup')).forEach(optgroup => {
                const hasVisibleOptions = Array.from(optgroup.children).some(
                    option => option.style.display !== 'none'
                );
                optgroup.style.display = hasVisibleOptions ? '' : 'none';
            });

            // Adjust select height based on visible options
            const displayHeight = Math.min(Math.max(visibleCount, 3), 10);
            select.setAttribute('size', displayHeight);

            // Show message if no results found
            if (visibleCount === 0 && searchTerm.length > 0) {
                select.style.display = 'none';
                // Could add a "no results" message here if needed
            }
        }

        // Handle zone selection
        function handleZoneSelection() {
            const select = document.getElementById('zoneSelect');
            const selectedOption = select.options[select.selectedIndex];
            const hiddenInput = document.getElementById('zoneHiddenInput');
            const selectedDisplay = document.getElementById('selectedZoneDisplay');
            const selectedText = document.getElementById('selectedZoneText');
            const searchInput = document.getElementById('zoneSearch');

            if (select.value) {
                // Update hidden input
                hiddenInput.value = select.value;

                // Show selected zone display
                selectedText.textContent = select.value;
                selectedDisplay.classList.remove('hidden');

                // Hide dropdown and clear search
                select.style.display = 'none';
                searchInput.value = '';

                // Show cooperative details
                showCooperativeDetails();
            }
        }

        // Clear zone selection
        function clearZoneSelection() {
            const select = document.getElementById('zoneSelect');
            const hiddenInput = document.getElementById('zoneHiddenInput');
            const selectedDisplay = document.getElementById('selectedZoneDisplay');
            const searchInput = document.getElementById('zoneSearch');
            const detailsDiv = document.getElementById('cooperativeDetails');

            // Reset values
            select.value = '';
            hiddenInput.value = '';
            searchInput.value = '';
            document.getElementById('coopImage').src = '';

            // Hide displays
            selectedDisplay.classList.add('hidden');
            select.style.display = 'none';
            detailsDiv.style.display = 'none';

            // Focus back on search
            searchInput.focus();
        }

        // Show cooperative details when zone is selected
        function showCooperativeDetails() {
            const select = document.getElementById('zoneSelect');
            const selectedOption = select.options[select.selectedIndex];
            const detailsDiv = document.getElementById('cooperativeDetails');

            if (select.value) {
                const coopName = selectedOption.getAttribute('data-coop');
                const accountNumber = selectedOption.getAttribute('data-account');
                const bankName = selectedOption.getAttribute('data-bank');
                const coopImage = selectedOption.getAttribute('data-image');

                document.getElementById('coopName').textContent = coopName;
                document.getElementById('accountNumber').textContent = accountNumber;
                document.getElementById('bankName').textContent = bankName;

                // Set cooperative image
                if (coopImage) {
                    document.getElementById('coopImage').src = coopImage;
                    document.getElementById('coopImage').alt = coopName;
                }

                detailsDiv.style.display = 'block';

                // Smooth scroll to show the details
                setTimeout(() => {
                    detailsDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }, 100);
            } else {
                detailsDiv.style.display = 'none';
            }
        }

        // Hide dropdown when clicking outside
        document.addEventListener('click', function(event) {
            const zoneSearch = document.getElementById('zoneSearch');
            const zoneSelect = document.getElementById('zoneSelect');
            const isClickInside = zoneSearch.contains(event.target) || zoneSelect.contains(event.target);

            if (!isClickInside && zoneSelect.style.display === 'block') {
                zoneSelect.style.display = 'none';
            }
        });

        // Update investment price display
        function updateInvestmentPrice() {
            const select = document.getElementById('investmentUnits');
            const value = select.value;
            const priceDisplay = document.getElementById('priceDisplay');
            const customAmountContainer = document.getElementById('customAmountContainer');
            const investmentAmount = document.getElementById('investmentAmount');
            const priceMap = {
                '1': 100000,
                '2': 200000,
                '3': 300000,
                '5': 500000,
                '10': 1000000
            };

            if (value === 'custom') {
                customAmountContainer.style.display = 'block';
                priceDisplay.style.display = 'block';
                document.getElementById('otherAmount').focus();
            } else if (value && priceMap[value]) {
                customAmountContainer.style.display = 'none';
                priceDisplay.style.display = 'block';
                investmentAmount.textContent = '₦' + priceMap[value].toLocaleString();
            } else {
                priceDisplay.style.display = 'none';
                customAmountContainer.style.display = 'none';
            }
        }

        // Calculate custom amount based on units
        function calculateCustomAmount() {
            const customUnits = document.getElementById('customUnits').value;
            const investmentAmount = document.getElementById('investmentAmount');
            const priceDisplay = document.getElementById('priceDisplay');
            const otherAmountInput = document.getElementById('otherAmount');

            if (customUnits && customUnits > 0) {
                const amount = customUnits * 100000;
                otherAmountInput.value = amount;
                priceDisplay.style.display = 'block';
                investmentAmount.textContent = '₦' + amount.toLocaleString();
            } else {
                priceDisplay.style.display = 'none';
                otherAmountInput.value = '';
            }
        }

        // Form submission handler
        document.getElementById('signupForm').addEventListener('submit', function(e) {
            e.preventDefault();

            // Validate all fields
            const firstName = document.querySelector('input[name="firstName"]').value.trim();
            const surname = document.querySelector('input[name="surname"]').value.trim();
            const phone = document.querySelector('input[name="phone"]').value.trim();
            const email = document.querySelector('input[name="email"]').value.trim();
            const zone = document.getElementById('zoneHiddenInput').value.trim();
            const investmentUnits = document.getElementById('investmentUnits').value.trim();
            const customUnits = document.getElementById('customUnits').value.trim();
            const otherAmount = document.getElementById('otherAmount').value.trim();

            if (!firstName || !surname || !phone || !email || !zone || !investmentUnits) {
                alert('Please fill all required fields');
                return;
            }

            // If custom amount is selected, validate it
            if (investmentUnits === 'custom' && (!customUnits || !otherAmount)) {
                alert('Please enter the number of units');
                return;
            }

            // Validate email format
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                alert('Please enter a valid email address');
                return;
            }

            // Validate phone format
            if (phone.length < 10) {
                alert('Please enter a valid phone number');
                return;
            }

            const form = this;
            const submitButton = form.querySelector('button[type="submit"]');
            const originalButtonText = submitButton.innerHTML;

            submitButton.disabled = true;
            submitButton.innerHTML = 'Submitting... <i class="fa-solid fa-spinner fa-spin"></i>';

            const formData = new FormData(form);
            const select = document.getElementById('zoneSelect');
            const selectedOption = select.options[select.selectedIndex];

            if (selectedOption) {
                formData.append('cooperativeName', selectedOption.getAttribute('data-coop'));
                formData.append('accountNumber', selectedOption.getAttribute('data-account'));
                formData.append('bankName', selectedOption.getAttribute('data-bank'));
            }

            fetch('api/signup.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    // Reset form
                    form.reset();

                    // Reset form state
                    document.getElementById('step1Container').style.display = 'block';
                    document.getElementById('step2Container').style.display = 'none';

                    // Reset step indicators
                    document.getElementById('step1Indicator').style.backgroundColor = '#133A9D';
                    document.getElementById('step1Indicator').innerHTML = '1';
                    document.getElementById('step1Indicator').style.color = 'white';

                    document.getElementById('step2Indicator').style.backgroundColor = '#D3D3D3';
                    document.getElementById('step2Indicator').innerHTML = '2';
                    document.getElementById('step2Indicator').style.color = '#666';

                    document.getElementById('step2Text').style.color = '#999';

                    // Clear zone selection
                    document.getElementById('zoneSearch').value = '';
                    document.getElementById('zoneSelect').style.display = 'none';
                    document.getElementById('zoneSelect').value = '';
                    document.getElementById('zoneHiddenInput').value = '';
                    document.getElementById('selectedZoneDisplay').style.display = 'none';
                    document.getElementById('coopImage').src = '';
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An unexpected error occurred. Please try again.');
            })
            .finally(() => {
                submitButton.disabled = false;
                submitButton.innerHTML = originalButtonText;
            });
        });
    </script>
</body>

</html>
