@extends('layouts.common-master')
@section('title', 'FarmConnect – Empowering Farmers, Streamlining Supply')
@section('style')
@endsection
@section('content')
    @include('common.header')
    @include('common.nav')

    <div class="container-fluid bg-primary py-5 bg-hero mb-md-5 mb-4">
        <div class="container py-5">
            <div class="row justify-content-start">
                <div class="col-lg-8 text-center text-lg-start">
                    <h1 class="display-1 text-white mb-md-4">Farmer & Vendor Registration</h1>
                    <a href="" class="btn btn-primary py-md-3 px-md-5 me-3">Home</a>
                    <a href="" class="btn btn-secondary py-md-3 px-md-5">Register</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-md-5 pt-4 pb-1">
        <div class="container">
            <div class="mx-auto text-center mb-5" style="max-width: 550px;">
                <h6 class="text-primary text-uppercase">Registration</h6>
                <h1 class="display-5">Join FarmConnect Today</h1>
            </div>

            <div class="row g-0">
                <div class="col-lg-12">
                    <div class="register-switch-container">
                        <div class="switch-label">Register As</div>
                        <div class="switch-toggle">
                            <label for="flipper_checkbox" class="switch-btn farmer-btn active">
                                🌾 Farmer
                            </label>

                            <label for="flipper_checkbox" class="switch-btn vendor-btn">
                                🏪 Vendor
                            </label>

                            <div class="switch-slider"></div>
                        </div>
                    </div>

                    <div class="login-register-container bg-primary">
                        <div class="form-wrapper">
                            <input type="checkbox" id="flipper_checkbox" hidden>

                            <div class="form_container">
                                <!-- Front -->
                                <div class="card front p-md-5 p-2 bg-transparent">
                                    <div class="mx-auto text-center mb-md-4 mt-md-0 mt-1 mb-2" style="max-width: 500px;">
                                        <h5 class="text-white text-uppercase">Farmer Registration</h5>
                                    </div>
                                    <div id="successAlertFarmer"></div>
                                    <form id="farmerRegisterForm" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row g-3 justify-content-evenly">
                                            <div class="col-md-4">
                                                <input type="text" name="first_name"
                                                    class="form-control bg-light border-0 px-4" placeholder="First Name"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="middle_name"
                                                    class="form-control bg-light border-0 px-4" placeholder="Middle Name"
                                                    style="height: 55px;">
                                            </div>


                                            <div class="col-md-4">
                                                <input type="text" name="last_name"
                                                    class="form-control bg-light border-0 px-4" placeholder="Last Name"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="email" name="email"
                                                    class="form-control bg-light border-0 px-4" placeholder="Email ID"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="phone"
                                                    class="form-control bg-light border-0 px-4" placeholder="Phone Number"
                                                    pattern="[6-9]{1}[0-9]{9}" maxlength="10" inputmode="numeric" required
                                                    style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="date" name="date_of_birth"
                                                    class="form-control bg-light border-0 px-4" 
                                                    max="{{ date('Y-m-d', strtotime('-18 years')) }}" required
                                                    style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <select name="gender" class="form-control bg-light border-0 px-4" required
                                                    style="height: 55px;">
                                                    <option value="" disabled selected>Gender</option>
                                                    <option value="male">Male</option>
                                                    <option value="female">Female</option>
                                                    <option value="other">Other</option>
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="village"
                                                    class="form-control bg-light border-0 px-4" placeholder="Village"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="pin_code" id="farmer_pincode_field"
                                                    class="form-control bg-light border-0 px-4" placeholder="Pincode"
                                                    required style="height: 55px;" maxlength="6">
                                                <small id="farmer_pincode_status"
                                                    style="display: block; margin-top: 5px;"></small>
                                            </div>

                                            <div class="col-md-3">
                                                <input type="text" name="state" id="farmer_state"
                                                    class="form-control bg-light border-0 px-4" placeholder="State"
                                                    required style="height: 55px;" readonly>
                                            </div>

                                            <div class="col-md-3">
                                                <input type="text" name="district" id="farmer_district"
                                                    class="form-control bg-light border-0 px-4" placeholder="District"
                                                    required style="height: 55px;" readonly>
                                            </div>

                                            <div class="col-md-3">
                                                <input type="text" name="city"
                                                    class="form-control bg-light border-0 px-4" placeholder="City"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-3">
                                                <input type="text" name="taluka"
                                                    class="form-control bg-light border-0 px-4" placeholder="Taluka"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <label for="profile_image" class="profile-upload" style="height: 55px;">
                                                    <img id="preview"
                                                        src="https://cdn-icons-png.flaticon.com/512/149/149071.png"
                                                        alt="Profile" class="img-fluid rounded-circle" width="45"
                                                        height="45">
                                                    <div class="upload-text">Upload Profile Image</div>
                                                </label>

                                                <input type="file" id="profile_image" name="profile_image"
                                                    accept="image/png,image/jpeg" hidden>
                                            </div>
                                            <style>
                                                .profile-upload {
                                                    cursor: pointer;
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: start;
                                                    gap: 50px;
                                                    background-color: #F6FFF2;
                                                }

                                                .profile-upload img {
                                                    border: 3px solid #ddd;
                                                    margin-left: 20px;
                                                    padding: 5px;
                                                }

                                                .upload-text {
                                                    font-size: 15px;
                                                    color: #8D9AA8;
                                                    margin-top: 6px;
                                                }
                                            </style>

                                            <div class="col-md-4">
                                                <input type="password" name="password"
                                                    class="form-control bg-light border-0 px-4"
                                                    placeholder="Password (Min 8 chars)" required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="password" name="password_confirmation"
                                                    class="form-control bg-light border-0 px-4"
                                                    placeholder="Confirm Password" required style="height: 55px;">
                                            </div>

                                            <div class="col-md-12">
                                                <button class="btn btn-secondary w-100 py-3" type="submit">
                                                    Submit Registration
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <div class="card back p-md-5 p-2 bg-transparent">
                                    <div class="mx-auto text-center mb-md-4 mt-md-0 mt-1 mb-2" style="max-width: 500px;">
                                        <h5 class="text-white text-uppercase">Vendor Registration</h5>
                                    </div>

                                    <div id="successAlertVendor"></div>

                                    <form id="VendorRegisterForm" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row g-3 justify-content-evenly">

                                            <div class="col-md-4">
                                                <input type="text" name="vendor_name"
                                                    class="form-control bg-light border-0 px-4" placeholder="Vendor Name"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <select name="vendor_type" class="form-control bg-light border-0 px-4"
                                                    required style="height: 55px;">
                                                    <option value="" disabled selected>Select Vendor Type</option>
                                                    <option value="APMC Trader">APMC Trader</option>
                                                    <option value="Commission Agent">Commission Agent</option>
                                                    <option value="e-NAM Trader">e-NAM Trader</option>
                                                    <option value="FPO">FPO</option>
                                                    <option value="Private Aggregator">Private Aggregator</option>
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="business_name"
                                                    class="form-control bg-light border-0 px-4"
                                                    placeholder="Business Name" required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="phone"
                                                    class="form-control bg-light border-0 px-4"
                                                    placeholder="Mobile Number" pattern="[6-9]{1}[0-9]{9}" maxlength="10"
                                                    inputmode="numeric" required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="email" name="email_id"
                                                    class="form-control bg-light border-0 px-4" placeholder="Email ID"
                                                    style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="village"
                                                    class="form-control bg-light border-0 px-4" placeholder="Village"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="pin_code" id="vendor_pincode_field"
                                                    class="form-control bg-light border-0 px-4" placeholder="Pincode"
                                                    required style="height: 55px;" maxlength="6">
                                                <small id="vendor_pincode_status"></small>
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="state" id="vendor_state"
                                                    class="form-control bg-light border-0 px-4" placeholder="State"
                                                    required style="height: 55px;" readonly>
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="district" id="vendor_district"
                                                    class="form-control bg-light border-0 px-4" placeholder="District"
                                                    required style="height: 55px;" readonly>
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="city"
                                                    class="form-control bg-light border-0 px-4" placeholder="City"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <input type="text" name="taluka"
                                                    class="form-control bg-light border-0 px-4" placeholder="Taluka"
                                                    required style="height: 55px;">
                                            </div>

                                            <div class="col-md-4">
                                                <select name="address_type" class="form-control bg-light border-0 px-4"
                                                    required style="height: 55px;">
                                                    <option value="" disabled selected>Select Adddress Type</option>
                                                    <option value="Permanent">Permanent</option>
                                                    <option value="Current">Current</option>
                                                    <option value="Office">Office</option>
                                                    <option value="Market">Market</option>
                                                    <option value="Warehouse">Warehouse</option>
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <input type="password" name="password"
                                                    class="form-control bg-light border-0 px-4"
                                                    placeholder="Password (Min 8 chars)" required style="height: 55px;">
                                            </div>

                                            <div class="col-md-6">
                                                <input type="password" name="password_confirmation"
                                                    class="form-control bg-light border-0 px-4"
                                                    placeholder="Confirm Password" required style="height: 55px;">
                                            </div>

                                            <div class="col-md-12">
                                                <button class="btn btn-secondary w-100 py-3" type="submit">
                                                    Submit Registration
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="otpVerificationModalFarmer" tabindex="-1"
        aria-labelledby="otpVerificationModalLabelFarmer" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content border-0 shadow-lg rounded-4">

                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-semibold w-100 text-center" id="otpVerificationModalLabelFarmer">
                        🔐 OTP Verification
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form id="otpVerificationFormFarmer">
                    <div class="modal-body text-center px-4 pt-2">

                        <div id="otpAlertFarmer"></div>

                        <p class="text-muted small mb-2">
                            We’ve sent a 6-digit OTP to
                        </p>
                        <p class="fw-semibold mb-3">
                            <span id="registeredPhone"></span>
                        </p>

                        <input type="hidden" name="phone_for_otp" id="phoneForOtp">
                        @csrf

                        <div class="mb-3">
                            <label for="otp" class="form-label visually-hidden">
                                Enter OTP
                            </label>
                            <input type="text" class="form-control text-center fs-4 fw-bold letter-spacing"
                                id="otp" name="otp" placeholder="● ● ● ● ● ●" pattern="[0-9]{6}"
                                maxlength="6" inputmode="numeric" autocomplete="one-time-code" required>
                            <div class="form-text">
                                Enter the 6-digit code
                            </div>
                        </div>

                        <p class="small text-muted mb-0">
                            Didn’t receive the OTP?
                            <a href="javascript:void(0)" class="fw-semibold text-decoration-none">
                                Resend
                            </a>
                        </p>

                    </div>

                    <div class="modal-footer border-0 pt-0 px-4">
                        <button type="submit" class="btn btn-primary w-100 py-2 fw-semibold">
                            Verify & Continue
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <div class="modal fade" id="otpVerificationModalVendor" tabindex="-1"
        aria-labelledby="otpVerificationModalLabelVendor" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content border-0 shadow-lg rounded-4">

                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-semibold w-100 text-center" id="otpVerificationModalLabelVendor">
                        🔐 OTP Verification
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form id="otpVerificationForm">
                    <div class="modal-body text-center px-4 pt-2">

                        <div id="otpAlertVendor"></div>

                        <p class="text-muted small mb-2">
                            We’ve sent a 6-digit OTP to
                        </p>
                        <p class="fw-semibold mb-3">
                            <span id="registeredPhone"></span>
                        </p>

                        <input type="hidden" name="phone_for_otp" id="phoneForOtp">
                        @csrf

                        <div class="mb-3">
                            <label for="otp" class="form-label visually-hidden">
                                Enter OTP
                            </label>
                            <input type="text" class="form-control text-center fs-4 fw-bold letter-spacing"
                                id="otp" name="otp" placeholder="● ● ● ● ● ●" pattern="[0-9]{6}"
                                maxlength="6" inputmode="numeric" autocomplete="one-time-code" required>
                            <div class="form-text">
                                Enter the 6-digit code
                            </div>
                        </div>

                        <p class="small text-muted mb-0">
                            Didn’t receive the OTP?
                            <a href="javascript:void(0)" class="fw-semibold text-decoration-none">
                                Resend
                            </a>
                        </p>

                    </div>

                    <div class="modal-footer border-0 pt-0 px-4">
                        <button type="submit" class="btn btn-primary w-100 py-2 fw-semibold">
                            Verify & Continue
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    @include('common.footer')
@endsection

@section('script')
    <script>
        const farmerOtpModal = new bootstrap.Modal(document.getElementById('otpVerificationModalFarmer'));
        const vendorOtpModal = new bootstrap.Modal(document.getElementById('otpVerificationModalVendor'));

        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
            document.querySelector('input[name="_token"]')?.value;

        function showAlert(containerId, message, type = 'danger') {
            const container = document.getElementById(containerId);
            if (!container) return;

            container.innerHTML = `
            <div class="alert alert-${type} alert-dismissible fade show alert-custom-absolute" role="alert">
                <strong>${type === 'danger' ? 'Error!' : 'Success!'}</strong> ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>`;

            setTimeout(() => {
                const alertElement = container.querySelector('.alert');
                if (alertElement) {
                    const bsAlert = new bootstrap.Alert(alertElement);
                    bsAlert.close();
                }
            }, 60000);
        }

        function setupRegistration(formId, route, alertId, modalObj) {
            const form = document.getElementById(formId);
            if (!form) return;

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(this);

                fetch(route, {
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: formData
                    })
                    .then(response => response.json().then(data => ({
                        status: response.status,
                        body: data
                    })))
                    .then(({
                        status,
                        body
                    }) => {
                        if (body.status === 'success') {
                            showAlert(alertId, body.message, 'success');

                            const phone = formData.get('phone');
                            const modalEl = modalObj._element;

                            modalEl.querySelector('#registeredPhone').textContent = phone;
                            modalEl.querySelector('#phoneForOtp').value = phone;

                            modalObj.show();
                            form.reset();
                        } else {
                            let errorMsg = body.message || 'Validation failed';
                            if (body.data && typeof body.data === 'object') {
                                errorMsg = Object.values(body.data).map(m => `<li>${m}</li>`).join('');
                            }
                            showAlert(alertId, `<ul>${errorMsg}</ul>`, 'danger');
                        }
                    })
                    .catch(err => {
                        console.error("Reg Error:", err);
                        showAlert(alertId, 'Network error. Please check your connection.', 'danger');
                    });
            });
        }

        function setupOtpVerification(formId, route, alertId, modalObj) {
            const form = document.getElementById(formId);
            if (!form) return;

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(this);

                fetch(route, {
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(res => {
                        if (res.status === 'success') {
                            const mainAlertId = formId.includes('Farmer') ? 'successAlertFarmer' :
                                'successAlertVendor';
                            showAlert(mainAlertId, `Verified successfully! Redirecting...`, 'success');

                            modalObj.hide();
                        } else {
                            showAlert(alertId, res.message || 'Invalid OTP', 'danger');
                        }
                    })
                    .catch(err => {
                        console.error("OTP Error:", err);
                        showAlert(alertId, 'Error verifying OTP.', 'danger');
                    });
            });
        }

        setupRegistration('farmerRegisterForm', "{{ route('farmer.register') }}", 'successAlertFarmer', farmerOtpModal);
        setupOtpVerification('otpVerificationFormFarmer', "{{ route('farmer.verify.otp') }}", 'otpAlertFarmer',
            farmerOtpModal);

        setupRegistration('VendorRegisterForm', "{{ route('vendor.register') }}", 'successAlertVendor', vendorOtpModal);
        setupOtpVerification('otpVerificationForm', "{{ route('vendor.verify.otp') }}", 'otpAlertVendor', vendorOtpModal);
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const farmerBtn = document.querySelector(".farmer-btn");
            const vendorBtn = document.querySelector(".vendor-btn");

            function toggleSwitch(activeBtn, inactiveBtn) {
                activeBtn.classList.add("active");
                inactiveBtn.classList.remove("active");
            }

            farmerBtn.addEventListener("click", () => {
                if (!farmerBtn.classList.contains("active")) {
                    toggleSwitch(farmerBtn, vendorBtn);
                }
            });

            vendorBtn.addEventListener("click", () => {
                if (!vendorBtn.classList.contains("active")) {
                    toggleSwitch(vendorBtn, farmerBtn);
                }
            });
        });
    </script>
    <script>
        document.getElementById("profile_image").addEventListener("change", function(e) {
            const file = e.target.files[0];
            if (file) {
                document.getElementById("preview").src = URL.createObjectURL(file);
            }
        });
    </script>

    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            const stateDropdown = document.getElementById('state');
            const districtDropdown = document.getElementById('district');
            const talukaDropdown = document.getElementById('taluka');
            const cityDropdown = document.getElementById('city');

            // 1. STATE Change
            stateDropdown.addEventListener('change', function() {
                const stateId = this.value;

                // Reset all children
                districtDropdown.innerHTML = '<option value="">Loading Districts...</option>';
                if (talukaDropdown) talukaDropdown.innerHTML =
                    '<option value="">Select District first</option>';
                if (cityDropdown) cityDropdown.innerHTML =
                    '<option value="">Select District first</option>';

                fetch(`/get-districts/${stateId}`)
                    .then(response => response.json())
                    .then(data => {
                        let html = '<option value="" selected disabled>Select District</option>';
                        data.forEach(district => {
                            html += `<option value="${district.id}">${district.name}</option>`;
                        });
                        districtDropdown.innerHTML = html;
                    })
                    .catch(error => console.error('Error fetching districts:', error));
            });

            // 2. DISTRICT Change (Updates both Taluka AND City)
            districtDropdown.addEventListener('change', function() {
                const districtId = this.value;

                if (talukaDropdown) talukaDropdown.innerHTML = '<option value="">Loading...</option>';
                if (cityDropdown) cityDropdown.innerHTML = '<option value="">Loading...</option>';

                fetch(`/get-location-data/${districtId}`)
                    .then(response => response.json())
                    .then(data => {
                        // Update Talukas
                        if (talukaDropdown) {
                            let tHtml = '<option value="" selected disabled>Select Taluka</option>';
                            data.talukas.forEach(t => tHtml +=
                                `<option value="${t.id}">${t.name}</option>`);
                            talukaDropdown.innerHTML = tHtml;
                        }

                        // Update Cities
                        if (cityDropdown) {
                            let cHtml = '<option value="" selected disabled>Select City</option>';
                            data.cities.forEach(c => cHtml +=
                                `<option value="${c.id}">${c.name}</option>`);
                            cityDropdown.innerHTML = cHtml;
                        }
                    })
                    .catch(error => console.error('Error fetching location data:', error));
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // Function to initialize cascading dropdowns
            function initLocationChain(prefix) {
                const stateEl = document.getElementById(`${prefix}state`);
                const districtEl = document.getElementById(`${prefix}district`);
                const talukaEl = document.getElementById(`${prefix}taluka`);
                const cityEl = document.getElementById(`${prefix}city`);

                if (!stateEl) return; // Guard clause if form isn't on page

                // 1. State Change -> Load Districts
                stateEl.addEventListener('change', function() {
                    const stateId = this.value;
                    districtEl.innerHTML = '<option value="">Loading...</option>';
                    if (talukaEl) talukaEl.innerHTML = '<option value="">Select District</option>';
                    if (cityEl) cityEl.innerHTML = '<option value="">Select District</option>';

                    fetch(`/get-districts/${stateId}`)
                        .then(res => res.json())
                        .then(data => {
                            let html = '<option value="" selected disabled>Select District</option>';
                            data.forEach(d => html += `<option value="${d.id}">${d.name}</option>`);
                            districtEl.innerHTML = html;
                        });
                });

                // 2. District Change -> Load Taluka & City
                districtEl.addEventListener('change', function() {
                    const districtId = this.value;
                    if (talukaEl) talukaEl.innerHTML = '<option value="">Loading...</option>';
                    if (cityEl) cityEl.innerHTML = '<option value="">Loading...</option>';

                    fetch(`/get-location-data/${districtId}`)
                        .then(res => res.json())
                        .then(data => {
                            if (talukaEl) {
                                let tHtml = '<option value="" selected disabled>Select Taluka</option>';
                                data.talukas.forEach(t => tHtml +=
                                    `<option value="${t.id}">${t.name}</option>`);
                                talukaEl.innerHTML = tHtml;
                            }
                            if (cityEl) {
                                let cHtml = '<option value="" selected disabled>Select City</option>';
                                data.cities.forEach(c => cHtml +=
                                    `<option value="${c.id}">${c.name}</option>`);
                                cityEl.innerHTML = cHtml;
                            }
                        });
                });
            }

            // Initialize for Farmer (No prefix if you kept original IDs, or 'farmer_' if you updated them)
            initLocationChain('');

            // Initialize for Vendor
            initLocationChain('vendor_');
        });
    </script> --}}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const pincodeField = document.getElementById('farmer_pincode_field');
            const stateField = document.getElementById('farmer_state');
            const districtField = document.getElementById('farmer_district');
            const statusLabel = document.getElementById('farmer_pincode_status');

            pincodeField.addEventListener('input', function() {
                let pincode = this.value.trim();

                if (pincode.length === 6 && /^\d+$/.test(pincode)) {
                    // Safety check: only update if the label exists
                    if (statusLabel) {
                        statusLabel.innerText = "Fetching location...";
                        statusLabel.style.color = "blue";
                    }

                    fetch(`https://api.postalpincode.in/pincode/${pincode}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data && data[0].Status === 'Success') {
                                const info = data[0].PostOffice[0];

                                // Fill the fields
                                stateField.value = info.State;
                                districtField.value = info.District;

                                if (statusLabel) {
                                    statusLabel.innerText = "✓ Location found";
                                    statusLabel.style.color = "green";
                                }
                            } else {
                                if (statusLabel) {
                                    statusLabel.innerText = "× Pincode not found";
                                    statusLabel.style.color = "red";
                                }
                                // Clear fields if not found
                                stateField.value = "";
                                districtField.value = "";
                            }
                        })
                        .catch(err => {
                            if (statusLabel) {
                                statusLabel.innerText = "× Error connecting to API";
                                statusLabel.style.color = "red";
                            }
                            console.error(err);
                        });
                } else {
                    if (statusLabel) statusLabel.innerText = "";
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const pincodeField = document.getElementById('vendor_pincode_field');
            const stateField = document.getElementById('vendor_state');
            const districtField = document.getElementById('vendor_district');
            const statusLabel = document.getElementById('vendor_pincode_status');

            pincodeField.addEventListener('input', function() {
                let pincode = this.value.trim();

                if (pincode.length === 6 && /^\d+$/.test(pincode)) {
                    // Safety check: only update if the label exists
                    if (statusLabel) {
                        statusLabel.innerText = "Fetching location...";
                        statusLabel.style.color = "blue";
                    }

                    fetch(`https://api.postalpincode.in/pincode/${pincode}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data && data[0].Status === 'Success') {
                                const info = data[0].PostOffice[0];

                                // Fill the fields
                                stateField.value = info.State;
                                districtField.value = info.District;

                                if (statusLabel) {
                                    statusLabel.innerText = "✓ Location found";
                                    statusLabel.style.color = "green";
                                }
                            } else {
                                if (statusLabel) {
                                    statusLabel.innerText = "× Pincode not found";
                                    statusLabel.style.color = "red";
                                }
                                // Clear fields if not found
                                stateField.value = "";
                                districtField.value = "";
                            }
                        })
                        .catch(err => {
                            if (statusLabel) {
                                statusLabel.innerText = "× Error connecting to API";
                                statusLabel.style.color = "red";
                            }
                            console.error(err);
                        });
                } else {
                    if (statusLabel) statusLabel.innerText = "";
                }
            });
        });
    </script>

@endsection