@include('front.layouts.old_header')

<style>


    button {
        transition: 0.3s ease;
    }

    .button {
        font-weight: 100;
        font-size: 16px;
        margin-inline: 50px;
        padding: 0 55px;
        border-radius: 5px;
        background-color: transparent; /* default color */
        border: 2px solid #0f6ed3;
        color: rgb(32, 69, 215)
        /* border: 2px solid #0fc3cc; matching border */
    }

    .button.selected {
        background-color: orange;
        color: #fff;
        border-color: orange;
    }

    .card {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        margin: 20px auto;
        max-width: 900px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .text-center {
        text-align: center;
    }

    .submit-wrapper {
        text-align: center;
        margin-top: 20px;
    }

    a {
        color: #0055cc !important;
        text-decoration: underline;
    }

    .button:hover {
        background-color: orange;
        border-color: orange;
        color: white;
    }

    .submit-btn {
        background-color: orange;
        color: white;
        border: none;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        height: 55px;
        width: 200px;
        border-radius: 25px;
        margin-top: 40px;
    }

    .submit-btn:hover {
        transition: 0.3s ease;
        background-color: #ffcc00;
        color: white;
    }
    </style>

<main>
    <div class="container">
        <section class="screen_5 text-center">
            <div class="row">
                <div class="col-12">
                    <img src="/assets/front/img/homepage_banners/cf_light_bg.png" class="img-responsive img">
                </div>
                <div class="col-12">
                    <h3 style="color:#f89010;">Consent Page</h3>
                </div>
                <div id="deny-warning" class="card" style="display: none; background-color: #fff3cd; border-left: 5px solid #ffcc00;">
                    <p style="color: #856404; margin: 0;">
                        Denying consent will lead to discontinuation of the application process. Are you sure?
                    </p>
                </div>
                
                <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="col-12" style="margin-top:0px">

                <form method="POST" action="{{ route('consent.submit') }}">
                    <input name="_token" value="{{ csrf_token() }}" type="hidden">
                    <input type="hidden" name="consent_status" id="consent_status" value="">
                    <input type="hidden" name="application_id" value="{{ $application_id }}">
                    <input type="hidden" name="applicant_type" value="{{ $applicant_type }}">
                    <input type="hidden" name="latitude" id="latitude" value="">
                    <input type="hidden" name="longitude" id="longitude" value="">
                    <!-- your buttons, etc -->

                    <div class="card">
                        <p>Dear {{ $name }},</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>
                            <button type="button" class="button agree-btn" onclick="handleConsent('agree')">I Agree</button>
                            <button type="button" class="button deny deny-btn" onclick="handleConsent('deny')">I Deny</button>
                        </div>
                    </div>

                    <div class="card">
                        <p>Dear {{ $name }},</p>
                        <p>
                            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>
                            <button type="button" class="button agree-btn" onclick="handleConsent('agree')">I Agree</button>
                            <button type="button" class="button deny deny-btn" onclick="handleConsent('deny')">I Deny</button>
                        </div>
                    </div>

                    <div class="submit-wrapper">
                        <button type="submit" class="button submit-btn">Submit</button>
                    </div>
                </form>
                </div>
            </div>
        </section>
    </div>
</main>

<script>
    let consentStatus = null;
    let denyWarningShown = false;

    const form = document.querySelector('form');
    const denyWarning = document.getElementById('deny-warning');
    const hiddenInput = document.getElementById('consent_status');

    let locationFetched = false;

    function getLocation() {
        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';
                }
            });
        }
    }

    // Attempt to get location when the page loads
    window.onload = function() {
        getLocation();
    };

    form.addEventListener('submit', function (e) {
        const selectedStatus = hiddenInput.value;

        if (!selectedStatus) {
            e.preventDefault();
            alert("Please select Agree or Deny before submitting.");
            return;
        }

        const lat = document.getElementById('latitude').value;
        const lng = document.getElementById('longitude').value;
        if (!lat || !lng) {
            e.preventDefault();
            alert("Location access is required to provide consent. Please allow location access in your browser settings and try again.");
            getLocation(); // Re-trigger prompt if they denied previously but changed settings
            return;
        }

        if (selectedStatus === 'deny' && !denyWarningShown) {
            e.preventDefault(); // Block submission first time
            denyWarning.style.display = 'block';
            denyWarningShown = true;

            if (document.activeElement) {
                document.activeElement.blur();
            }
            document.querySelectorAll('.deny-btn').forEach(btn => {
                btn.classList.remove('selected');
            });
            return;
        }
    });

    function handleConsent(status) {
        const agreeBtns = document.querySelectorAll('.agree-btn');
        const denyBtns = document.querySelectorAll('.deny-btn');

        // Set selected status
        hiddenInput.value = status;
        consentStatus = status;

        // Reset all buttons
        agreeBtns.forEach(btn => btn.classList.remove('selected'));
        denyBtns.forEach(btn => btn.classList.remove('selected'));

        // Highlight selected button
        if (status === 'agree') {
            agreeBtns.forEach(btn => btn.classList.add('selected'));
            denyWarning.style.display = 'none';
            denyWarningShown = false; // reset warning flag
        } else {
            denyBtns.forEach(btn => btn.classList.add('selected'));
            // Don't show the warning here — only on submit
        }
    }
</script>