Subversion Repositories SmartDukaan

Rev

Rev 36686 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Location Verification - SmartDukaan</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <style>
        body {
            background: #f4f6f9;
            font-family: 'Segoe UI', sans-serif;
        }

        .geo-card {
            max-width: 480px;
            margin: 30px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
            overflow: hidden;
        }

        .geo-header {
            background: linear-gradient(135deg, #1a73e8, #0d47a1);
            color: #fff;
            padding: 24px;
            text-align: center;
        }

        .geo-header h4 {
            margin: 0;
            font-weight: 600;
        }

        .geo-header p {
            margin: 8px 0 0;
            opacity: 0.9;
            font-size: 14px;
        }

        .geo-body {
            padding: 24px;
        }

        .step {
            display: none;
        }

        .step.active {
            display: block;
        }

        .step-indicator {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 20px;
        }

        .step-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ddd;
            transition: background 0.3s;
        }

        .step-dot.done {
            background: #4caf50;
        }

        .step-dot.current {
            background: #1a73e8;
        }

        .btn-geo {
            background: #1a73e8;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-size: 16px;
            width: 100%;
            cursor: pointer;
        }

        .btn-geo:hover {
            background: #1558b0;
            color: #fff;
        }

        .btn-geo:disabled {
            background: #b0bec5;
            cursor: not-allowed;
        }

        .loc-info {
            background: #e8f5e9;
            border-radius: 8px;
            padding: 12px;
            margin: 12px 0;
            font-size: 13px;
            color: #2e7d32;
        }

        .loc-info.error {
            background: #fce4ec;
            color: #c62828;
        }

        .upload-area {
            border: 2px dashed #b0bec5;
            border-radius: 8px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        .upload-area:hover {
            border-color: #1a73e8;
        }

        .upload-area.uploaded {
            border-color: #4caf50;
            background: #e8f5e9;
        }

        .preview-img {
            max-width: 100%;
            max-height: 200px;
            border-radius: 8px;
            margin-top: 12px;
        }

        .spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #fff;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .form-control:focus {
            border-color: #1a73e8;
            box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25);
        }
    </style>
</head>
<body>

<div class="geo-card">
    <div class="geo-header">
        <h4>SmartDukaan</h4>
        <p>Location Verification</p>
    </div>
    <div class="geo-body">
        <div class="step-indicator">
            <div class="step-dot current" id="dot1"></div>
            <div class="step-dot" id="dot2"></div>
            <div class="step-dot" id="dot3"></div>
        </div>

        <p class="text-center text-muted mb-3" style="font-size:14px;">
            Hello <strong>$!leadName</strong>, please verify your location.
        </p>

        <!-- STEP 1: Mobile Verification -->
        <div class="step active" id="step1">
            <h6 class="mb-3">Step 1: Verify Mobile Number</h6>
            <div class="form-group">
                <input type="tel" class="form-control" id="mobileNumber" maxlength="10"
                       placeholder="Enter your registered mobile number" autocomplete="off">
            </div>
            <div id="mobileError" class="loc-info error" style="display:none;"></div>
            <button class="btn btn-geo" id="btnVerifyMobile">
                Verify Mobile
            </button>
        </div>

        <!-- STEP 2: Capture Location -->
        <div class="step" id="step2">
            <h6 class="mb-3">Step 2: Capture Your Live Location</h6>
            <p class="text-muted" style="font-size:13px;">
                Please allow location access when prompted. Stand at your store/shop location.
            </p>
            <button class="btn btn-geo" id="btnCaptureLocation">
                Capture My Location
            </button>
            <div id="locationInfo" class="loc-info" style="display:none;"></div>
            <input type="hidden" id="latitude" value="">
            <input type="hidden" id="longitude" value="">
            <button class="btn btn-geo mt-3" id="btnNextToUpload" style="display:none;">
                Next: Upload Photo
            </button>
        </div>

        <!-- STEP 3: Upload Photo & Submit -->
        <div class="step" id="step3">
            <h6 class="mb-3">Step 3: Upload Store Photo</h6>
            <div class="upload-area" id="uploadArea" onclick="document.getElementById('photoInput').click();">
                <div id="uploadPlaceholder">
                    <p style="font-size:32px; margin:0;">📷</p>
                    <p class="text-muted mb-0">Tap to capture or upload store photo</p>
                </div>
                <img id="photoPreview" class="preview-img" style="display:none;">
                <input type="file" id="photoInput" accept="image/*" capture="environment" style="display:none;">
            </div>
            <div id="uploadStatus" class="loc-info" style="display:none;"></div>
            <input type="hidden" id="imageDocumentId" value="0">
            <button class="btn btn-geo mt-3" id="btnSubmit" disabled>
                Submit Location
            </button>
        </div>
    </div>
</div>

<input type="hidden" id="leadId" value="$leadId">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    var contextPath = "$rc.contextPath";

    function showStep(num) {
        $('.step').removeClass('active');
        $('#step' + num).addClass('active');
        for (var i = 1; i <= 3; i++) {
            var dot = $('#dot' + i);
            dot.removeClass('current done');
            if (i < num) dot.addClass('done');
            else if (i === num) dot.addClass('current');
        }
    }

    // STEP 1: Verify Mobile
    $('#btnVerifyMobile').click(function () {
        var mobile = $('#mobileNumber').val().trim();
        if (!mobile || mobile.length < 10) {
            $('#mobileError').text('Please enter a valid 10-digit mobile number').show();
            return;
        }
        var btn = $(this);
        btn.prop('disabled', true).html('<span class="spinner"></span> Verifying...');
        $('#mobileError').hide();

        $.ajax({
            url: contextPath + '/lead-geo/verify-mobile',
            method: 'POST',
            data: {leadId: $('#leadId').val(), mobileNumber: mobile},
            success: function (resp) {
                if (resp.response && resp.response.verified) {
                    showStep(2);
                } else {
                    $('#mobileError').text('Verification failed. Please try again.').show();
                }
            },
            error: function (xhr) {
                var msg = 'Verification failed';
                try {
                    msg = JSON.parse(xhr.responseText).message || msg;
                } catch (e) {
                }
                $('#mobileError').text(msg).show();
            },
            complete: function () {
                btn.prop('disabled', false).text('Verify Mobile');
            }
        });
    });

    // STEP 2: Capture Location
    $('#btnCaptureLocation').click(function () {
        var btn = $(this);
        btn.prop('disabled', true).html('<span class="spinner"></span> Capturing...');
        $('#locationInfo').hide();

        if (!navigator.geolocation) {
            $('#locationInfo').addClass('error').text('Geolocation is not supported by your browser').show();
            btn.prop('disabled', false).text('Capture My Location');
            return;
        }

        navigator.geolocation.getCurrentPosition(
                function (position) {
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;
                    var acc = position.coords.accuracy;

                    $('#latitude').val(lat);
                    $('#longitude').val(lng);
                    $('#locationInfo').removeClass('error')
                            .html('Location captured successfully!<br>Accuracy: ' + acc.toFixed(0) + ' meters')
                            .show();
                    btn.prop('disabled', false).text('Recapture Location');
                    $('#btnNextToUpload').show();
                },
                function (error) {
                    var msg = 'Unable to get location. ';
                    switch (error.code) {
                        case 1:
                            msg += 'Please allow location permission.';
                            break;
                        case 2:
                            msg += 'Location unavailable.';
                            break;
                        case 3:
                            msg += 'Request timed out. Try again.';
                            break;
                    }
                    $('#locationInfo').addClass('error').text(msg).show();
                    btn.prop('disabled', false).text('Capture My Location');
                },
                {enableHighAccuracy: true, timeout: 15000, maximumAge: 0}
        );
    });

    $('#btnNextToUpload').click(function () {
        showStep(3);
    });

    // STEP 3: Upload Photo
    $('#photoInput').change(function () {
        var file = this.files[0];
        if (!file) return;

        // Preview
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#photoPreview').attr('src', e.target.result).show();
            $('#uploadPlaceholder').hide();
            $('#uploadArea').addClass('uploaded');
        };
        reader.readAsDataURL(file);

        // Upload
        $('#uploadStatus').removeClass('error').text('Uploading...').show();
        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url: contextPath + '/lead-geo/upload-image',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (resp) {
                if (resp.response && resp.response.document_id) {
                    $('#imageDocumentId').val(resp.response.document_id);
                    $('#uploadStatus').removeClass('error').text('Photo uploaded successfully!').show();
                    $('#btnSubmit').prop('disabled', false);
                }
            },
            error: function () {
                $('#uploadStatus').addClass('error').text('Upload failed. Please try again.').show();
            }
        });
    });

    // SUBMIT
    $('#btnSubmit').click(function () {
        var btn = $(this);
        btn.prop('disabled', true).html('<span class="spinner"></span> Submitting...');

        $.ajax({
            url: contextPath + '/lead-geo/submit',
            method: 'POST',
            data: {
                leadId: $('#leadId').val(),
                mobileNumber: $('#mobileNumber').val().trim(),
                latitude: $('#latitude').val(),
                longitude: $('#longitude').val(),
                imageDocumentId: $('#imageDocumentId').val()
            },
            success: function (resp) {
                // Replace body with thank you
                $('.geo-body').html(
                        '<div class="text-center py-4">' +
                        '<div style="font-size:64px;">✅</div>' +
                        '<h5 class="mt-3">Thank You!</h5>' +
                        '<p class="text-muted">Your location has been submitted successfully.<br>Our team will review it shortly.</p>' +
                        '</div>'
                );
                $('.step-indicator').remove();
            },
            error: function () {
                btn.prop('disabled', false).text('Submit Location');
                alert('Submission failed. Please try again.');
            }
        });
    });

    // Allow Enter key on mobile input
    $('#mobileNumber').keypress(function (e) {
        if (e.which === 13) $('#btnVerifyMobile').click();
    });
</script>
</body>
</html>