/home/mip/mip/app/Modules/Client/Views/questionnaire/template/preview.blade.php
@extends('Client::layouts')
@section('page-body')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            <i class="fa fa-pencil"></i> Preview Questionnaire
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ route(config('modules.client').'.questionnaire.index') }}"><i class="fa fa-question-circle-o"></i> Questionnaire</a></li>            
            <li class="active">Edit</li>            
        </ol>
    </section>
    <!-- Main content -->
    <section class="content"> 
        @include('Client::message')
       
       
        <div class="row">
            <div class="col-sm-3">
                 @include('Client::questionnaire.nav', array('nav' => 'preview'))
            </div>
            <div class="col-sm-9">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                      <li class="active"><a href="#web_view" data-toggle="tab"><i class="fa fa-globe"></i> Web View</a></li>
                      <li><a href="#mobile_view" data-toggle="tab"><i class="fa fa-mobile"></i> Mobile View</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active fade in" id="web_view">
                            @include('Client::questionnaire.template.includes.browser')
                        </div>
                        <div class="tab-pane" id="mobile_view">
                            @include('Client::questionnaire.template.includes.mobile')
                        </div>
                    </div>
                </div>
                <input type="text" name="loc_lat">
                <input type="text" name="loc_long">
            </div>
        </div>
       
        
    </section>
@stop
@section('page-css')
@include('Client::questionnaire.template.includes.css')
@stop
@section('page-js')
<script type="text/javascript" src="{{ get_template('plugins/survey-jquery/survey.jquery.min.js') }}"></script>
<script type="text/javascript">
Survey.Survey.cssType = "bootstrap";
var myCss = {
   // "root":'box box-primary',
    "header": "text-center",
    //"body": "box-body",
    "footer": "box-footer  text-center",
   /* "pageTitle":'box-title',*/
   "navigation": {
        "complete": "btn-success",
        "prev": "btn-primary",
        "next": "btn-warning"
    },
    "error": {
        "root": "",
        "icon": "glyphicon glyphicon-exclamation-sign",
        "item": "text-danger"
    },
    navigationButton: "btn btn-lg btn-flat"   
};

function loadSurvey(element)
{
    $.ajax({
        url: '/api/get-questionnaire',
        type: 'GET',
        data: {'template_id': '{{ $template->id }}'},
    })
    .done(function(response) {
        var survey = new Survey.Model(response);
        $("#" + element).Survey({
            model:survey,
            onComplete:sendDataToServer,
            css:myCss
        });
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
}

loadSurvey('css-device--browser-container');
$('a[data-toggle="tab"').on('shown.bs.tab', function (e) {
    var active = $(e.target);
    var tab = active.attr('href');
    if(tab == '#mobile_view') loadSurvey('css-device--mobile-container');
    else  loadSurvey('css-device--browser-container');
    
})
function sendDataToServer(survey) {
    var resultAsString = JSON.stringify(survey.data);
    var pos = {
        loc_lat:$('input[name="loc_lat"]').val(),
        loc_long:$('input[name="loc_lat"]').val(),
    }
    $.ajax({
    url: '/api/save-participant',
        type: 'GET',
        data: {
            answers:survey.data,
            template_id: '{{ $template->id }}',
            pos:pos
        }
    })
    .done(function(response) {
        
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
}


    function initMap() {

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                $('input[name="loc_lat"]').val(position.coords.latitude);
                $('input[name="loc_long"]').val(position.coords.longitude);
            });
        } 
    }

   initMap();
</script>



@include('Client::notify')
@stop