{% extends 'templates/callluge/site_layout_call-detail.html' %}
{% block content %}
{% load staticfiles %}
{% load app_filters %}
<div class="widget-box bgf1f1f1 call-deta no-minht">
        <div id="leadcentre-tab">
          <ul class="resp-tabs-list" id="recent_calls"></ul>
          <div class="resp-tabs-container cf" id="call_history">
<style type="text/css">
    .padd-err {padding: 5px;}
    /*#rating_err:before{
        content: "\A";
        border-style: solid;
        border-width: 8px 10px 8px 0;
        border-color: transparent #C84044 transparent transparent;
        position: absolute;
        left: 7px;
        top: -10px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        z-index: 888;
    }*/
</style>
<style>
    .acidjs-rating-stars,
    .acidjs-rating-stars label::before
    {
        display: inline-block;
    }

    .acidjs-rating-stars label:hover,
    .acidjs-rating-stars label:hover ~ label
    {
        color: #f5b301;
    }

    .acidjs-rating-stars *
    {
        margin: 0;
        padding: 0;
    }

    .acidjs-rating-stars input
    {
        display: none;
    }

    .acidjs-rating-stars
    {
        unicode-bidi: bidi-override;
        direction: rtl;
    }

    .acidjs-rating-stars label
    {
        color: #ccc;
    }

    .acidjs-rating-stars label::before
    {
        content: "\2605";
        width: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 25px;
        cursor: pointer;
    }

    .acidjs-rating-stars input:checked ~ label
    {
        color: #f5b301;
    }

    .acidjs-rating-disabled
    {
        opacity: .50;
        
        -webkit-pointer-events: none;
        -moz-pointer-events: none;
        pointer-events: none;
    }
</style>
<!-- <div class="resp-tabs-container cf"> -->
<div>
        <div class="tab-header cf">
            <div class="client-name">
                <div class="clent-img">
                    <i class="icon-name"></i>
                </div>
                <span style="padding-top:13px;"><p><strong style="font-size: 17px;">{{general_details.caller_no|phonenumber_format}}</strong></p></span>
            </div>
            <div class="mid">                
                <span>{{general_details.country}}, {{general_details.state}}</span>
            </div>
            <!-- <div class="top-right" style="display: none;">
                <span><i class="icon-call-logs"></i></span>
                <span><i class="icon-call-logs"></i></span>
                <span><i class="icon-call-logs"></i></span>
            </div> -->
        </div>
        <div class="call-details cf">
            <div class="left-box">
                <!-- <div class="log"></div> -->
                <div class="text">
                    <!-- <h6>Edgewood Health Network {{general_details.no_of_calls}}</h6> -->
                    <p>Answered by Number : {{general_details.dialed_to}}</p>
                    <p><span><!-- Total Calls: <strong>04</strong> | First Call:  -->{{general_details.first_call}}</span></p>
                </div>
            </div>
            <div class="right-box">
                <div class="call-dts cf">
                    <p>Tracking Number <span>:</span></p>
                    <div class="gle"><strong>{{general_details.tracking_number}}</strong>
                    </div>
                </div>
                <div class="call-dts cf">
                    <p>Medium <span>:</span></p>
                    <div class="gle"><strong>{{general_details.medium}}</strong></div>
                </div>
                <div class="call-dts cf">
                    <p>Campaign <span>:</span></p>
                    <div class="gle"><strong>{{general_details.campaign_name}}</strong></div>
                </div>
            </div>
        </div>
        {% for key,call in data.items %}
        <!-- {{key}}{{call}}  -->
        <!-- {{call.data.revenue}} -->
        <div class="call-details-intabs cf">
            <div class="accordion-call-dts">
                <div class="accordion_in acc_active">
                    <div class="acc_head">
                        <div class="date">
                            <i class="icon-call-logs"></i>
                            <p>{{call.day}}
                                <span>{{call.time}}</span>
                            </p>
                        </div>
                        <div class="details">
                            <h6>{{call.type}}</h6>
                            {% if call.type == 'Inbound Record Call' %}
                            <span>Call Duration</span>
                            <p>{{call.mint}}<span>m</span>{{call.sec}}</p>
                            {% endif %}
                        </div>
                        <!-- <div class="aud-waveform" style="border-left: none;"> -->
                            <!-- <div class="agent-caller">
                                <div class="agent-blk"><strong>Agent</strong><br>1m21s</div>
                                <div class="caller-blk"><strong style="color: #3186C5">Caller</strong><br>1m02s</div>
                            </div>
                            
                            <div class="o-progress-circle o-progress-circle--rounded">
                              <div class="o-progress-circle__number">
                                <span data-percent>45</span><em>%</em>
                              </div>
                              <div class="o-progress-circle__fill">
                                <svg class="icon" viewBox="0 0 40 40">
                                  <circle r="15.9154943092" cy="20" cx="20" />
                                  <circle r="15.9154943092" cy="20" cx="20" stroke-dashoffset="55" transform="rotate(-90,20,20)" />
                                </svg>
                              </div>
                            </div> -->
                            <!-- <div class="waveform-parent" >
                                 {% if call.data.RecordingSid %}
                                 <div id="waveform_{{ forloop.counter }}"></div>
                                    <script type="text/javascript">
                                        var wavesurfer = WaveSurfer.create({
                                            container: "#waveform_{{ forloop.counter }}",
                                            waveColor: '#54A5DE',
                                            progressColor: '#215699',
                                            cursorColor:'#9B9B9B',
                                            barWidth: 1,
                                            hideScrollbar: true
                                          });
                                wavesurfer.load('/media/callrecords/{{call.data.AccountSid}}/{{call.data.RecordingSid}}.wav');

                                    </script>
                                    {% endif %}
                                                                    
                                {% if call.data.RecordingSid %}
                                <p align="center">
                                 <button class="play-pause btn btn-primary" onclick="wavesurfer.playPause()">
                                    <i class="glyphicon glyphicon-play"></i>/<i class="glyphicon glyphicon-pause"></i></button>
                                </p>
                                {% endif %}
                            </div>
                        </div> -->
                    </div>
 
                    <div class="acc_content">
                        <div class="call-details-intabs-wrap">
                            <h4>Call Tagging &amp; Scoring</h4>
                            <div class="msg_div success" id="msg_div_{{forloop.counter}}" style="display: none; padding-left: 0;padding-top: 0;"></div>

                      <!-- {% if RecordingSid in call.data %}
                            <audio controls>
                                        <source src="/media/{{call.data.AccountSid}}/{{call.data.RecordingSid}}.wav" type="audio/wav">
                                    </audio>
                                    {% endif %} -->
                            <form class="inner-form" id="myForm-{{forloop.counter}}" data-toggle="validator">
                                <input type="hidden" name="call_sid" value="{{call.call_sid}}">
                                <div class="row">
                                {% if tag_list|length > 0 %}
                                    <div class="col-lg-6 col-md-12">
                                        <div class="form-group">
                                            <div class="input-group no-padding">
                                                <label for="">Tag*</label>
                                                <!-- <p>Your text here. For this demo, the content is generated automatically.</p> -->
                                                <div class="dropdown-all">
                                                    <select tabindex="1" id="ct" class="ct-dp" name="tag" data-error="Please select a Tag." required>
                                                       {% for tag in tag_list %}          
                                                        <option 
                                                        {% if call.data.tag == tag %} selected="selected" {% endif %} value="{{tag}}">{{tag}}</option>
                                                        {% endfor %}
                                                        
                                                    </select>
                                                </div>
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                    </div>
                                {% else %}
                                <input type="hidden" name="tag" value=""/>
                                {% endif %}
                                    <div class="col-lg-6 col-md-12">
                                        <div class="form-group">
                                            <div class="input-group no-padding">
                                                <label for="">Assigned To*</label>
                                                <!-- <p>Your text here. For this demo, the content is generated automatically.</p> -->
                                                <div class="dropdown-all">
                                                    <select id="cty" tabindex="2" class="ct-dp" name="assigned_to" data-error="Please enter assigned User Name." required="">
                                                    {% for user in users %}
                                                        <option 
                                                        {% if user.name == call.data.assigned_to %} selected="selected" {% endif %}   
                                                        value="{{user.name}}">{{user.name}}</option>
                                                    {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
<div class="row">
    <div class="col-lg-6 col-md-12">
        <div class="form-group">
            <div class="input-group no-padding">
                <label for="">Revenue*</label>
                <input class="form-input" tabindex="3" type="text" pattern="^\d+(\.\d+)?$" maxlength="20" placeholder="Revenue" name="revenue" id="revenue" value="{{call.data.revenue}}" data-error="Please enter Revenue." required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-12">
        <div class="form-group">
            <div class="input-group no-padding">
            <!-- <h5>Rating ({{call.data.star}})</h5> -->
            <label>Rating* (<span id="star_rating">{% if call.data.star %}{{call.data.star}}{% else %}0{% endif %}</span>)</label>
            </div>
            <div class="cont" style="text-align: left;">
                <div class="stars acidjs-rating-stars">

                    <!-- <form action=""> -->
                    <!-- <label class="star star-1" for="star-1-1-{{forloop.counter}}"></label>
                    <input class="star star-1" id="star-1-1-{{forloop.counter}}" type="radio" name="star" value="1" selected="selected"/>
                    <label class="star star-2" for="star-2-2-{{forloop.counter}}"></label>
                    <input class="star star-2" id="star-2-2-{{forloop.counter}}" type="radio" name="star" value="2"/>
                    <label class="star star-3" for="star-3-3-{{forloop.counter}}"></label>
                    <input class="star star-3" id="star-3-3-{{forloop.counter}}" type="radio" name="star" value="3"/>
                    <label class="star star-4" for="star-4-4-{{forloop.counter}}"></label>
                    <input class="star star-4" id="star-4-4-{{forloop.counter}}" type="radio" name="star" value="4"/>
                    <label class="star star-5" for="star-5-5-{{forloop.counter}}"></label>
                    <input class="star star-5" id="star-5-5-{{forloop.counter}}" type="radio" name="star" value="5"/>
                    <label class="star star-6" for="star-6-6-{{forloop.counter}}"></label>
                    <input class="star star-6" id="star-6-6-{{forloop.counter}}" type="radio" name="star" value="6"/>
                    <label class="star star-7" for="star-7-7-{{forloop.counter}}"></label>
                    <input class="star star-7" id="star-7-7-{{forloop.counter}}" type="radio" name="star" value="7"/>
                    <label class="star star-8" for="star-8-8-{{forloop.counter}}"></label>
                    <input class="star star-8" id="star-8-8-{{forloop.counter}}" type="radio" name="star" value="8"/>
                    <label class="star star-9" for="star-9-9-{{forloop.counter}}"></label>
                    <input class="star star-9" id="star-9-9-{{forloop.counter}}" type="radio" name="star" value="9"/>
                    <label class="star star-10" for="star-10-10-{{forloop.counter}}"></label>
                    <input class="star star-10" id="star-10-10-{{forloop.counter}}" type="radio" name="star" value="10"/> -->
                    
                    <input type="radio" tabindex="4" name="star" id="group-2-0" value="5" {% if call.data.star == '5' %} checked="checked" {% endif %} /><label for="group-2-0"></label>
                
                    <input type="radio" tabindex="5" name="star" id="group-2-1" value="4" {% if call.data.star == '4' %} checked="checked" {% endif %} /><label for="group-2-1"></label>
                
                    <input type="radio" tabindex="6" name="star" id="group-2-2" value="3" {% if call.data.star == '3' %} checked="checked" {% endif %} /><label for="group-2-2"></label>
                
                    <input type="radio" tabindex="7" name="star" id="group-2-3" value="2" {% if call.data.star == '2' %} checked="checked" {% endif %} /><label for="group-2-3"></label>
                
                    <input type="radio" tabindex="8" name="star" {% if call.data.star == '1' or call.data.star == '' %} checked="checked" {% endif %} id="group-2-4"  value="1"  /><label for="group-2-4"></label> 
                    
                    <!-- </form> -->
                    <!-- <p>6/10</p> -->
                </div>
            </div>
            <!-- <span id="rating_err" class="" style="position: absolute; z-index: 999; background: #C84044; color: #fff; border-radius: 4px; bottom: 5px; left: 24px;"></span>  -->
            <span id="rating_err" class="" style="position: absolute; z-index: 999; color:#dd4b39; left: 12px;"></span> 
        </div><!-- end of form-group -->        
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <!-- <h5>Notes</h5> -->
        <div class="form-group">
            <div class="input-group no-padding">
                <label for="clog-notes">Notes*</label>
                <textarea class="form-control" tabindex="9" rows="5" name="notes" id="clog-notes" data-error="Please enter Notes." required>{{call.data.notes}}</textarea>
            </div>
            <div class="help-block with-errors"></div>
        </div>
        <!-- <textarea name="notes">{{call.data.notes}}</textarea> -->
    </div>
</div>
                                <!-- <input type="submit" value="Save"> -->
                                <div class="btn-wrap">
                                    <!-- <input type="submit" class="btn btn-primary" value="Save">  -->
                                    <button type="submit" tabindex="10" class="button hvr-sweep-to-right ripple" value="Save">Save</button>
                                </div>    
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<script type="text/javascript">
    
$(document).ready(function () {

$("input[name$='revenue']").keypress(function (event) {
    var keycode = event.which;
    if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
        event.preventDefault();
    }
});

$('#myForm-{{forloop.counter}}').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form... 
    if(typeof $('input[name=star]:checked', '#myForm-{{forloop.counter}}').val() == 'undefined'){
        $('.cont').css('border', '1px solid #C84044');
        $('#rating_err').show();
        $('#rating_err').addClass('padd-err');
        $('#rating_err').html('Please select Rating.');
    }
  } else {
    // everything looks good!

// $('form').submit(function() {

    /*var star = $('input[name=star]:checked').val();*/
    /*console.log(star);*/
/*    var form_id = $(this).attr('id');
    var url = $(this).attr('data-url');*/
    var form_data = $(this).serialize();
    
    if(typeof $('input[name=star]:checked', '#myForm-{{forloop.counter}}').val() !== 'undefined'){

        $('.cont').css('border', '1px solid rgba(74, 74, 74, 0.2)');
        $('#rating_err').hide();
        $('#rating_err').removeClass('padd-err');

      $(".overlay").show();
      $.ajax({
        url: '/calls/save-call-history/',
        data: form_data,
        success: function(data){
            $(".overlay").hide();
            $('#star_rating').html($('input[name=star]:checked', '#myForm-{{forloop.counter}}').val());
            $('#msg_div_{{forloop.counter}}').show();
            $('#msg_div_{{forloop.counter}}').html('<i class="glyphicon glyphicon-ok-sign"></i>Submitted Successfully.');
        }
      });
    }
    // else{
    //     alert('else');
    //     $('.cont').css('border', '1px solid #C84044');
    //     $('#rating_err').show();
    //     $('#rating_err').addClass('padd-err');
    //     $('#rating_err').html('Please select Rating.');
    // }

    return false;


// });
    // ======

  }
})

});

</script>

        {% endfor%}
</div>
<!-- </div> -->
<script type="text/javascript">   

    // EasyResponsiveTabs
$(document).ready(function () {

$('#rating_err').hide();

$('#leadcentre-tab').easyResponsiveTabs({
type: 'vertical', //Types: default, vertical, accordion           
width: 'auto', //auto or any width like 600px
fit: true,   // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});




// Smk Accordion
$(".accordion-call-dts").smk_Accordion({
    closeAble: false, //boolean
    closeOther: false, //boolean
});
// Smk Accordion



$(".ct-dp").select2({});


});
</script>
            
          </div>    
        </div>

<div id="call_details"></div>	
</div> 


<script type="text/javascript">

// $( document ).ready(function() {
// GetRecentCalls();
// });

/*function GetCallHistory(number='') { 
  $(".overlay").show();
  $.ajax({
      type: "POST",
      url: "/calls/get-call-history/",
      data: {'csrfmiddlewaretoken': '{{ csrf_token }}','number':number},
      success: function(data) {
      	 $("#call_history").html(data);
      	 $(".overlay").hide();
      }
  });   

}*/

/*function GetRecentCalls() { 

  $.ajax({
      type: "POST",
      url: "/calls/get-recent-calls/",
      data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
      success: function(data) {
      	 $("#recent_calls").html(data);
      }
  });   

}	*/


</script>

{% endblock %}