{{-- Add the original styles directly into the partial for self-containment --}}
<style>
    /* Scoped to the consent block to avoid conflicts */
    #consent-block .button {
        font-weight: 100;
        font-size: 16px;
        margin-inline: 10px; /* Adjusted for better spacing */
        padding: 1px 35px; /* Adjusted padding */
        border-radius: 5px;
        background-color: transparent;
        border: 2px solid #0f6ed3;
        color: rgb(32, 69, 215);
        transition: 0.3s ease;
    }
    #consent-block .button:hover {
        background-color: orange;
        border-color: orange;
        color: white;
    }
    #consent-block .button.selected {
        background-color: orange;
        color: #fff;
        border-color: orange;
    }
    #consent-block .submit-wrapper {
        text-align: center;
        margin-top: 20px;
    }
    #consent-block .submit-btn {
        background-color: orange;
        color: white;
        border: none;
        font-size: 16px;
        cursor: pointer;
        height: 55px;
        width: 200px;
        border-radius: 25px;
        margin-top: 40px;
    }
    #consent-block .submit-btn:hover {
        background-color: #ffcc00;
        color: white;
    }
    #consent-block a {
        color: #0055cc !important;
        text-decoration: underline;
    }
</style>

{{-- This is the main block shown dynamically by JavaScript --}}
<div id="consent-block" style="display: none;">

    {{-- The deny warning from the original page --}}
    <div id="deny-warning" class="card" style="display: none; background-color: #fff3cd; border-left: 5px solid #ffcc00;">
        <p style="color: #856404; margin: 0; padding: 10px;">
            Denying consent will lead to discontinuation of the application process. Are you sure?
        </p>
    </div>

    {{-- First Consent Card --}}
    <div id="location-guide" class="card" style="display: none; background-color: #f8d7da; border-left: 5px solid #d9534f; text-align: left;">
        <h4 style="color: #721c24; margin-top: 0;">Location Access Required</h4>
        <p style="color: #721c24;">You have denied location access. To proceed, please enable location access for this website in your browser settings and refresh the page.</p>
        <ul style="color: #721c24;">
            <li><strong>Chrome / Edge:</strong> Click the lock icon 🔒 in the address bar &rarr; Site Settings &rarr; Location &rarr; Allow.</li>
            <li><strong>Safari:</strong> Go to Settings &rarr; Privacy &rarr; Location Services &rarr; Safari Websites &rarr; Ask or Allow.</li>
        </ul>
        <p style="color: #721c24; margin-bottom: 0;">After enabling, <a href="javascript:window.location.reload();" style="color: #0055cc; font-weight: bold;">click here to refresh the page</a>.</p>
    </div>

    <div class="card">
        <p>Dear <span id="consent-user-name"></span>,</p>
        <p>
            By clicking "I Accept", I hereby declare all information provided by me is correct and hereby consent to BlackSoil Capital Private Limited and its
            <a href="https://creditfair.in/affiliate-partners" target="_blank">affiliate lending partners</a>
            to receive my bureau details, fetch CKYC, V-CIP, My personal data, other financial / KYC details and documents for financing purposes for purchase made with <strong>{{ $merchant_name ?? '' }}</strong>.
        </p>
        <div style="text-align: center;">
            <button type="button" class="button agree-btn" onclick="handleConsentChoice('agree')">I Agree</button>
            <button type="button" class="button deny-btn" onclick="handleConsentChoice('deny')">I Deny</button>
        </div>
    </div>

    {{-- Second Consent Card (The missing part) --}}
    <div class="card">
        <!-- <p>Dear <span class="consent-user-name-repeat"></span>,</p> {{-- Use a class to auto-fill this --}} -->
        <p style="margin-top: 5%;">
            By ticking on I Agree box, I have read and agree to your
            <a href="https://www.creditfair.in/privacy-policy" target="_blank">Privacy Policy</a> &
            <a href="https://creditfair.in/terms-conditions" target="_blank">Terms & Conditions</a>.
        </p>
        <div style="text-align: center;">
            <button type="button" class="button agree-btn" onclick="handleConsentChoice('agree')">I Agree</button>
            <button type="button" class="button deny-btn" onclick="handleConsentChoice('deny')">I Deny</button>
        </div>
    </div>

    {{-- Hidden fields to store the state for the AJAX call --}}
    <input type="hidden" id="consent-status-choice" value="">
    <input type="hidden" id="consent-applicant-type" value="">
    <input type="hidden" id="latitude" value="">
    <input type="hidden" id="longitude" value="">

    <div class="submit-wrapper">
        <button type="button" onclick="submitConsentDecision()" class="button submit-btn">Submit</button>
    </div>
</div>

{{-- This block is shown if the user denies consent --}}
<div id="denied-block" style="display: none;">
    <div class="card">
        <h3>Thank You</h3>
        <p>Your decision has been recorded. You may now close this window.</p>
    </div>
</div>

{{-- This block is shown if the user has already denied consent --}}
<div id="already-denied-message" style="display: none;">
    <div class="card">
        <h3>Consent Previously Denied</h3>
        <p>Our records indicate that you have previously denied consent for this application. The application process cannot proceed. You may now close this window.</p>
    </div>
</div>

<script>
    let locationFetched = false;

    function getCurrentLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                document.getElementById('latitude').value = position.coords.latitude;
                document.getElementById('longitude').value = position.coords.longitude;
                locationFetched = true;
                document.getElementById('location-guide').style.display = 'none';
            }, function(error) {
                console.log("Geolocation error: ", error);
                locationFetched = false;
                if (error.code === error.PERMISSION_DENIED) {
                    document.getElementById('location-guide').style.display = 'block';
                }
            });
        }
    }
</script>