{{header}}
<section id="tabs1" class="about-bg">  
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12 mb-3">
                <h2>Election Circular</h2>
            </div>
        </div>

        <div class="alert alert-warning">
            <h5>Please record your vote by clicking against the Name of Person who wish to elect.</h5>
        </div>
        <form  id="submitvote" action="">
            {% for nomination in nominations %}
            <div class=" pl-5 pt-5 card bg-light">
                <h3><strong>{{nomination.title}} {{election['year']}}</strong></h3>
                    <div class="row mt-3">
                        {% if finalsubmit == 0 %}
                            {% for nominee in nomination.nominees %}
                            <label class="check mt-0 mt-md-1 col-md-12 mb-0">
                                <div class="row align-content-center">
                                    <div class="col-sm-4 d-flex align-self-center">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" name="election_{{nomination.type_id}}" class="custom-control-input" id="t{{nomination.type_id}}n{{nominee.id}}" value="{{nominee.nominee_id}}">
                                            <label class="custom-control-label mt-0" for="t{{nomination.type_id}}n{{nominee.id}}"><strong>{{nominee.name}}</strong></label>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <!-- <img class="img-fluid" src="{{nominee.image}}" style="width: 150px;"> -->
                                        <p class="text-center"><a href="{{nominee.viewbutton}}" target="_blank">View Profile</a></p>
                                    </div>
                                </div>
                            </label>
                            {% endfor %}
                        {% else %}
                            <label class="check mt-0 mt-md-1 col-md-12">
                                {% if nomination.winner %}
                                You have voted for <b>{{nomination.winner}}</b>
                                {% else %}
                                <b class="text-danger">Vote  Missing</b>
                                {% endif %}
                            </label>
                        {% endif %}
                        <input type="hidden" name="election_id" value="{{election['id']}}">
                        <input type="hidden" name="customer_id" value="{{customer_id}}">
                        <input type="hidden" name="type_id" value="{{nomination.type_id}}">
                        <div class="col-md-12 text-center">
                        
                        <!-- <p class="text-danger mt-4"><em>Members of the Society (Annual/Life) having less than two years on continuous standing during (2018 & 2019) and those who have not paid annual dues by July 31, 2019 are not eligible to vote or contest election for any office bearer of the Society.</em></p> -->                             
                        </div>
                    </div>
                
            </div>
            <hr>
            {% endfor %}

            {% if(zonalnominees.nominees) %}
            <div class=" pl-5 pt-5 card bg-light">
                <h3><strong>Zonal President and Zonal Councillor for {{customer_zone}} {{election['year']}}</strong></h3>
                
                    <div class="row mt-3">
                        {% if finalsubmit == 0 %}
                            {% for nominee in zonalnominees.nominees %}
                            <label class="check mt-0 mt-md-1 col-md-12">
                                <div class="row align-content-center">
                                    <!-- <div class="col-sm-2">
                                        <img class="img-fluid" src="{{nominee.pimage}}" style="width: 150px;">
                                    </div>
                                    <div class="col-sm-2">
                                        <img class="img-fluid" src="{{nominee.cimage}}" style="width: 150px;">
                                    </div> -->
                                    <div class="col-sm-12 d-flex align-self-center">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" name="pid_cid" class="custom-control-input" id="p{{nominee.pid}}c{{nominee.cid}}" value="{{nominee.pid}}_{{nominee.cid}}">
                                            <label class="custom-control-label mt-0" for="p{{nominee.pid}}c{{nominee.cid}}" style="line-height: 0px !important;">
                                                <strong>
                                                    <table class="table ">
                                                      <tbody>
                                                        <tr>
                                                          <td width="400"><span>{{nominee.pname}} (Zonal President) <a href="{{nominee.pbutton}}" target="_blank">View Profile</a> </span></td>
                                                          <td width="30">&</td>
                                                          <td width="30"></td>
                                                          <td width="400"><span> {{nominee.cname}} (Zonal Councillor) <a href="{{nominee.cbutton}}" target="_blank">View Profile</a></span></td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                </strong>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                            </label>
                            {% endfor %}
                        {% else %}
                            <label class="check mt-0 mt-md-1 col-md-12">
                                You have voted for <b>{{zonalnominees.winner}}</b>
                            </label>
                        {% endif %}
                        <input type="hidden" name="zone" value="{{zonalnominees.zone}}">
                        <div class="col-md-12 text-center">
                        <!-- <p class="text-danger mt-4"><em>Members of the Society (Annual/Life) having less than two years on continuous standing during (2018 & 2019) and those who have not paid annual dues by July 31, 2019 are not eligible to vote or contest election for any office bearer of the Society.</em></p> -->                             
                        </div>
                    </div>
                
            </div>
            <hr>
            {% endif %}
            
            {% if finalsubmit == 0 %}
                <div class="text-center">
                    <button type="button" class="btn btn-success btn-lg" onclick="sendotp()" data-toggle="modal" data-target="#submitfinalotp">Submit</button>
                    <!-- <input type="submit" class="submit action-button btn btn-primary" > -->
                </div>
            {% endif %}
        

        <!-- Modal -->
          <div class="modal fade" id="submitfinalotp" role="dialog">
            <div class="modal-dialog">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Submit OTP</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <span id="opt_success" class="text-success"></span>
                        </div>
                        <div class="col-sm-6 offset-sm-3">
                            <label>Please Enter OTP</label>
                            <input type="text" class="otp" id="otp" name="otp" value="">
                        </div>
                        <div class="col-sm-12 text-center">
                            <a href="javascript:void(0)" onclick="sendotp()"><span><small>Resend OTP</small></span></a>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" value="Submit" onclick="submitvote()" class="submit action-button btn btn-success" >
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
              
            </div>
          </div>
        <!-- <div class="vertical-tabs row">
            <ul class="nav nav-tabs col-sm-3" role="tablist">
                <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#pageabout" role="tab" aria-controls="home">About Final Election</a>
                </li>
                {% if types %}
                {% for type in types %}
                <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#pagee{{type.type_id}}" role="tab" aria-controls="profile">{{type.title}}</a>
                </li>
                {% endfor %}
                {% endif %}
            </ul>
            <div class="tab-content col-sm-8">
                <div class="tab-pane active" id="pageabout" role="tabpanel">
                    {{election['notice']}}
                </div>
                {% for nomination in nominations %}
                <div class="tab-pane" id="pagee{{nomination.type_id}}" role="tabpanel">
                    <ul class="nav nav-tabs hori-tabs-menu">
                        {% for nominee in nomination.nominees %}
                        <li class="nav-item">
                        <a class="nav-link {% if loop.index==1 %} active {% endif %}" data-toggle="tab" href="#nominee{{nomination.type_id}}{{nominee.id}}" style="text-transform: capitalize;">{{nominee.name}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    <div class="tab-content hori-tabs">
                        {% for nominee in nomination.nominees %}
                        <div id="nominee{{nomination.type_id}}{{nominee.id}}" class="container tab-pane {% if loop.index==1 %} active {% else %}  more fade {% endif %}"><br>
                            <div class="text-center">
                                <h3><b>{{nominee.name}}</b><br><h4>{{nominee.designation}}</h4></h3>
                            </div>
                            <div class="comment">
                            <p>{{nominee.about}}</p>
                            </div>
                        </div>
                        {% endfor %}

                        <div class="alert alert-warning">
                            <h5>Please record your vote by clicking against the Name of Person who wish to elect.</h5>
                        </div>
                        <p><strong>{{nomination.title}} {{election['year']}}</strong></p>
                        <form  action="{{action}}" method="post" enctype="multipart/form-data" onSubmit="if(!confirm('Click OK to confirm your vote for {{nomination.title}} {{election['year']}}.')){return false;}">
                            <div class="row">
                                {% if nomination.submit == 0 %}
                                    {% for nominee in nomination.nominees %}
                                    <label class="check mt-0 mt-md-1 col-md-12">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" name="nominee_id" class="custom-control-input" id="t{{nomination.type_id}}n{{nominee.id}}" value="{{nominee.nominee_id}}">
                                            <label class="custom-control-label mt-0" for="t{{nomination.type_id}}n{{nominee.id}}">{{nominee.name}}</label>
                                        </div>
                                    </label>
                                    {% endfor %}
                                {% else %}
                                    <label class="check mt-0 mt-md-1 col-md-12">
                                        You have {{nomination.winner}}
                                    </label>

                                {% endif %}
                                <input type="hidden" name="election_id" value="{{election['id']}}">
                                <input type="hidden" name="customer_id" value="{{customer_id}}">
                                <input type="hidden" name="type_id" value="{{nomination.type_id}}">
                                <div class="col-md-12">
                                <input type="submit" class="submit action-button" >                        
                                </div>
                            </div>
                        </form>
                        
                    </div>
                </div>
                {% endfor %}
            </div>
        </div> -->
        </form>
    </div>
</section>
<script>

    function sendotp(){
        $("#opt_success").html("");
        var customer_id = {{customer_id}};
        $.ajax({
            type:'POST',
            url: 'index.php?route=election/election/sendotp',
            data: {'customer_id':customer_id},
            success: function(res){
                var response = JSON.parse(res);
                if (response.text == 'sucess') {
                            $("#opt_success").html("OTP successfully sent on your Email & Registered Mobile number ending with xxxxxx" + response.mob);
                        }
            }
        });

        var email = "{{user['email']}}";
        $.ajax({
            type:'GET',
            url: 'https://conference.ipsdis.org/api/send-mail',
            data: {'email':email},
            success: function(res){
                var response = JSON.parse(res);
                if (response.text == 'sucess') {
                    $("#opt_success").html("OTP successfully sent on your Email & Registered Mobile number ending with xxxxxx" + response.mob);
                }
            }
        });
    }

    function submitvote(){ //alert('asdas');
        event.stopPropagation();
         $('#submitvote').submit(function() {
            $("#opt_success").html("");
            $.ajax({
                type:'POST',
                url: 'index.php?route=election/election/submitvote',
                data: $(this).serialize(),
                success: function(res){ //console.log(res);
                    if (res == 'Success') {
                        

                        var email = "{{user['email']}}";
                        $.ajax({
                            type:'GET',
                            url: 'https://conference.ipsdis.org/api/send-submitmail',
                            data: {'email':email},
                            success: function(res){
                                var response = JSON.parse(res);
                                if (response.text == 'sucess') {
                                    $("#opt_success").html("Nominations Successfully Submitted");
                                    alert('"Nominations Successfully Submitted"');
                                }
                            }
                        });

                        setTimeout(function(){
                            location.reload();
                        }, 1000)
                    }
                    if (res == 'error otp') {
                        $("#opt_success").html("Wrong OTP Submitted");
                        
                    }

                    if (res == 'Error') {
                        $("#opt_success").html("Something Went Wrong");
                        
                    }
                }
            });

            return false; 
        });


    }

  $(document).ready(function(){
    $('.read-show').click(function(){
        $(this).find('span.more').toggleClass('hide');
        $(this).find('span.less').toggleClass('hide');
        $('.read').toggleClass('show');
    });

    // read more
    // var showChar = 600;
    // var ellipsestext = "...";
    // var moretext = "more";
    // var lesstext = "less";
    // $('.more').each(function() {
    //  var content = $(this).html();

    //  if(content.length > showChar) {

    //      var c = content.substr(0, showChar);
    //      var h = content.substr(showChar-1, content.length - showChar);

    //      var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

    //      $(this).html(html);
    //  }

    // });

    // $(".morelink").click(function(){
    //  if($(this).hasClass("less")) {
    //      $(this).removeClass("less");
    //      $(this).html(moretext);
    //  } else {
    //      $(this).addClass("less");
    //      $(this).html(lesstext);
    //  }
    //  $(this).parent().prev().toggle();
    //  $(this).prev().toggle();
    //  return false;
    // });
    // var s = $(".hori-tabs .tab-pane").html();
    // if (s.split(' ').length > 350) {
    //     $(".hori-tabs .tab-pane").html(s.split(' ').slice(0,250).join(' ') + " ... " + '<a href="#" class="read-more">Read more</a>');
    // }

    // $("a.read-more").click(function() {
    //     $(".hori-tabs .tab-pane").html(s);
    // });
  })
</script>
{{footer}}
<script type="text/javascript">
    /*
 * jQuery Shorten plugin 1.0.0
 *
 * Copyright (c) 2013 Viral Patel
 * //viralpatel.net
 *
 * Dual licensed under the MIT license:
 *   //www.opensource.org/licenses/mit-license.php
 */

    (function($) {
        $.fn.shorten = function (settings) {
        
            var config = {
                showChars: 100,
                ellipsesText: "...",
                moreText: "more",
                lessText: "less"
            };

            if (settings) {
                $.extend(config, settings);
            }
            
            $(document).off("click", '.morelink');
            
            $(document).on({click: function () {

                    var $this = $(this);
                    if ($this.hasClass('less')) {
                        $this.removeClass('less');
                        $this.html(config.moreText);
                    } else {
                        $this.addClass('less');
                        $this.html(config.lessText);
                    }
                    $this.parent().prev().toggle();
                    $this.prev().toggle();
                    return false;
                }
            }, '.morelink');

            return this.each(function () {
                var $this = $(this);
                if($this.hasClass("shortened")) return;
                
                $this.addClass("shortened");
                var content = $this.html();
                if (content.length > config.showChars) {
                    var c = content.substr(0, config.showChars);
                    var h = content.substr(config.showChars, content.length - config.showChars);
                    var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="#" class="morelink">' + config.moreText + '</a></span>';
                    $this.html(html);
                    $(".morecontent span").hide();
                }
            });
            
        };

    })(jQuery);

    $(document).ready(function() {
        
        $(".comment p").shorten({
            "showChars" : 700,
            "moreText"  : "Read More",
            "lessText"  : "Read Less",
        });

    });
</script>