<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=800, initial-scale=1">


    <title>Voting</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Template Main CSS File -->
    <link href="{$path}/_assets/bootstrap.min.css" rel="stylesheet">
    <link href="{$path}/_assets/jQKeyboard.css" rel="stylesheet">
      <link rel="stylesheet" href="{$path}/_assets/kioskboard-2.2.0.min.css" />

  <script src="{$path}/_assets/kioskboard-2.2.0.min.js"></script>
    <link href="{$path}/_assets/style.css" rel="stylesheet">
    <style>
        div.jQKeyboardContainer{
            LEFT: auto;
        }
        button.jQKeyboardBtn.ui-button-colspan-0 {
            width: 44px;
        }
        button.jQKeyboardBtn.ui-button-colspan-3 {
            width: 92px;
        }
        /* media bigger than 900 */
        @media (min-width: 900px) {
            div.jQKeyboardContainer{
                LEFT: 10%;
                top: 0;
            }
        }
    </style>
</head>

<body>
<div class="container-fluid">
    <div id="svg_wrap" style="display: none;"></div>

    <form id="form_voting" action="{$host_url}/controllers/index.php?ac=submit" method="post">

        {assign var=i value=0}
        {foreach $questions as $question}
            <section>
                <div class="user-img">
                    {if empty($user->image) or $user->image == 'no image'}
                    {else}
                        <img src="{$host_url}/../upload/mambers/{$user->image}" width="90" alt="">
                    {/if}
                </div>
                <div class="logo-img">
                    <img src="{$path}/_assets/user.jpg" width="90">
                </div>
                <h2>{$question->question}</h2>
                <ul class="feedback">
                    {foreach $question->answers as $answer}
                        {if empty($answer->answer)}
                            {continue}
                        {/if}
                        <li class="{$answer->face} {if $answer->face eq 'ok'}active{/if}" data-answer-id="{$answer->id}" data-answer-text="{$answer->answer}" data-answer-face="{$answer->face}" data-itr="{$i}">
                            <div>
                                {if $answer->face == 'ok'}

                                {elseif $answer->face == 'happy'}
                                    <svg class="eye left">
                                        <use xlink:href="#eye">
                                    </svg>
                                    <svg class="eye right">
                                        <use xlink:href="#eye">
                                    </svg>
                                {else}
                                    <svg class="eye left">
                                        <use xlink:href="#eye">
                                    </svg>
                                    <svg class="eye right">
                                        <use xlink:href="#eye">
                                    </svg>
                                    <svg class="mouth">
                                        <use xlink:href="#mouth">
                                    </svg>
                                {/if}
                            </div>
                            <p style="font-size: 7px;text-align: center;font-weight: 900;">
                                {$answer->answer}
                            </p>
                        </li>
                    {/foreach}
                    <input type="hidden" name="questions[{$i}][question_id]" value="{$question->id}">
                    <input type="hidden" name="questions[{$i}][answer_id]" id="answer_id_{$i}" value="{foreach $question->answers as $answer}{if $answer->face eq 'ok'}{$answer->id}{/if}{/foreach}">
                    <input type="hidden" name="questions[{$i}][answer_face]" id="answer_face_{$i}" value="{foreach $question->answers as $answer}{if $answer->face eq 'ok'}{$answer->face}{/if}{/foreach}">
                    <input type="hidden" name="questions[{$i}][answer_text]" id="answer_text_{$i}" value="{foreach $question->answers as $answer}{if $answer->face eq 'ok'}{$answer->answer}{/if}{/foreach}">
                </ul>

                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 4" id="eye">
                        <path d="M1,1 C1.83333333,2.16666667 2.66666667,2.75 3.5,2.75 C4.33333333,2.75 5.16666667,2.16666667 6,1"></path>
                    </symbol>
                    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 7" id="mouth">
                        <path d="M1,5.5 C3.66666667,2.5 6.33333333,1 9,1 C11.6666667,1 14.3333333,2.5 17,5.5"></path>
                    </symbol>
                </svg>

            </section>
            {capture assign=i}{$i+1}{/capture}
        {/foreach}

        <section id="visitor_info">
            <h2>من فضلك أملإ بياناتك</h2>
            <div class="row">
                <div class="col-md-6" style="margin: 0 auto;float: unset;">
                    <div id="error" style="display: none;color: red;"></div>
                    <div class="row">
                        <label>الاسم</label>
                        <input type="text" id="name" name="name" {if $vote->voter_required eq 1}required="required"{/if} class="js-virtual-keyboard" data-kioskboard-type="keyboard" data-kioskboard-placement="bottom" data-kioskboard-specialcharacters="false" />
                        <input type="hidden" name="vote_id" value="{$vote->id}"/>
                        <input type="hidden" name="vote_device_id" value="{$vote->vote_device_id}"/>
                        <input type="hidden" name="user_id" value="{$user->user_id}"/>
                    </div>
                    <div class="row">
                        <label>رقم الهاتف</label>
                        <input type="text" id="phone" name="phone" {if $vote->voter_required eq 1}required="required"{/if}class="js-virtual-keyboard" data-kioskboard-type="keyboard" data-kioskboard-placement="bottom" data-kioskboard-specialcharacters="false"/>
                    </div>
                </div>
            </div>

        </section>

        <div class="button" id="prev">السابق &rarr;</div>
        <div class="button" id="next"> التالي &larr;</div>
        <button type="submit" class="button" id="submit">موافق وإرسال التقييم</button>
    </form>

</div>

<script src="{$path}/_assets/jquery.js"></script>
<script src="{$path}/_assets/bootstrap.js"></script>
<script src="{$path}/_assets/jQKeyboard.js"></script>
<script src="{$path}/_assets/main.js"></script>
{literal}
    <script type="text/javascript">

        $(document).ready(function () {
            $('#name').focus(function () {
                $("#name").initKeypad({'htmlElem': '#name'});
            });
            $('#phone').focus(function () {
                $('#phone').initKeypad({'htmlElem': '#phone'});
            });
            $('#visitor_info').click(function (e) {
                if ($(e.target).is("section") || $(e.target).is("h2") || $(e.target).is("div")) {
                    $('#jQKeyboardContainer').remove();
                }
            });
        });
        
        
         KioskBoard.init({

/*!
* Required
* An Array of Objects has to be defined for the custom keys. Hint: Each object creates a row element (HTML) on the keyboard.
* e.g. [{"key":"value"}, {"key":"value"}] => [{"0":"A","1":"B","2":"C"}, {"0":"D","1":"E","2":"F"}]
*/
keysArrayOfObjects: null,

/*!
* Required only if "keysArrayOfObjects" is "null".
* The path of the "kioskboard-keys-${langugage}.json" file must be set to the "keysJsonUrl" option. (XMLHttpRequest to get the keys from JSON file.)
* e.g. '/Content/Plugins/KioskBoard/dist/kioskboard-keys-english.json'
*/
keysJsonUrl: 'dist/kioskboard-keys-arabic.json',

/*
* Optional: An Array of Strings can be set to override the built-in special characters.
* e.g. ["#", "€", "%", "+", "-", "*"]
*/
keysSpecialCharsArrayOfStrings: null,

/*
* Optional: An Array of Numbers can be set to override the built-in numpad keys. (From 0 to 9, in any order.)
* e.g. [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
*/
keysNumpadArrayOfNumbers: null,

// Optional: (Other Options)

// Language Code (ISO 639-1) for custom keys (for language support) => e.g. "de" || "en" || "fr" || "hu" || "tr" etc...
language: 'en',

// The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"
theme: 'light',

// Uppercase or lowercase to start. Uppercased when "true"
capsLockActive: true,

/*
* Allow or prevent real/physical keyboard usage. Prevented when "false"
* In addition, the "allowMobileKeyboard" option must be "true" as well, if the real/physical keyboard has wanted to be used.
*/
allowRealKeyboard: false,

// Allow or prevent mobile keyboard usage. Prevented when "false"
allowMobileKeyboard: false,

// CSS animations for opening or closing the keyboard
cssAnimations: true,

// CSS animations duration as millisecond
cssAnimationsDuration: 360,

// CSS animations style for opening or closing the keyboard => "slide" || "fade"
cssAnimationsStyle: 'slide',

// Enable or Disable Spacebar functionality on the keyboard. The Spacebar will be passive when "false"
keysAllowSpacebar: true,

// Text of the space key (Spacebar). Without text => " "
keysSpacebarText: 'Space',

// Font family of the keys
keysFontFamily: 'sans-serif',

// Font size of the keys
keysFontSize: '22px',

// Font weight of the keys
keysFontWeight: 'normal',

// Size of the icon keys
keysIconSize: '25px',

// Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when "false"
autoScroll: true,
});
  KioskBoard.run('.js-virtual-keyboard', {
 // ...init options
});
    </script>
{/literal}
</body>
</html>