@extends('layouts.master')

@section('title')
Call Log Dashboard
@endsection

@section('css')
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/dialpad.css" rel="stylesheet">
<link href="{{ asset('css/custome.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="container-fluid" id="spinner">
 <!--  <div class="row">
    <div class="col">
      <h5>Call Log</h5>
      </div>
    </div> -->

    <div class="row">
     <div class="col-md-4 bg-white right-border" id="dhtml">
      <!-- ajax html view -->
    </div>

      <div class="col-md-4 bg-white   right-border">
        <div class="  bottom-border">
          <div class="card-body">
            <h6 class="card-title">Call as <br/><p><b>{{$callNumber}}</b><p></h6>
            </div>
          </div>
          <div class="bottom-border hide_show">
            <div class="card-body">
              <form class="form-inline" >
                <input type="text" class="form-control col-md-10" placeholder="Enter a number" id="text-number">&nbsp;
                <button type="button" disabled class="btn btn-success btn-call"> <i class="fa fa-phone"></i></button>
                <p class="text-danger error-phone-msg-text"></p>
              </form>
            </div>
          </div>

          <div class=" bottom-border" > 
            <div class="card-body">
              <div class="form-group row">
                <!-- <label for="call-status" class="col-3 col-form-label">Status</label> -->
                <div class="col-9">
                  <input id="call-status" class="form-control" type="text" placeholder="" readonly>
                </div>
              </div>
              <!-- <button class="btn btn-lg btn-success answer-button" disabled>Answer call</button> -->
                <!-- <button type="button"  class="btn btn-lg btn-success  answer-button"> -->
                 <img class="answer-button" src="{{asset('images/call-a.png')}}">
                    <!-- </button> -->
                 <!-- <i class="fa fa-phone"></i></button> -->
              <!-- <button class="btn btn-lg btn-danger hangup-button" disabled onclick="hangUp()"> -->
               <img style="width: 100px" class="hangup-button"  disabled onclick="hangUp()" src="{{asset('images/call-b.png')}}">
              <!-- </button> -->
            </div>
          </div>
   
          <div class="hide_show">
            <div class="card-body">
             <p class="text-danger text-center error-phone-msg-dail"></p>
             <input type="hidden" name="user-phone-number" id="user-phone-number" value="{{ old('user-phone-number') }}">
             <div class="form-group">
              @include('includes.dialpad')
            </div>
          </div>
        </div>
      </div>

       <div class="col-md-4 bg-white">
          <div class="container pt-2">
            <div class="row">
              <p>Hi Software!</p>
            </div>
       </div>
    </div>
    </div>

    
  </div>
  @endsection('content')

  @section('javascript')
  <script src="/js/long-press.js"></script>
  <script src="/js/dialpad.js"></script>
  <script type="text/javascript">
     $(document).ready(function(){
           $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              });
               $.ajax({
                  url: "{{ url('/call-log-ajax') }}",
                  method: 'POST',
                  data: {page_url : null},
                  dataType :'json',
                   beforeSend: function() {
                    $.blockUI(); 
                    // $('#spinner').css({'opacity' : '0.1'});
                 },
                  success: function(res){
                    $.unblockUI(); 
                    // $('#spinner').css({'opacity' : ''});
                    $('#dhtml').html(res.html);
                  },
                   error: function(xhr,textStatus,thrownError) {
                     alert(xhr + "\n" + textStatus + "\n" + thrownError);
                   }
              });
           $(document).on('click','.pagination-url',function(){
                var url = $(this).attr('data-url');
                  $.ajax({
                    url: "{{ url('/call-log-ajax') }}",
                    method: 'POST',
                    data: {page_url : url},
                    dataType :'json',
                     beforeSend: function() {
                       $.blockUI(); 
                   },
                    success: function(res){
                      $.unblockUI(); 
                      $('#dhtml').html(res.html);
                    },
                     error: function(xhr,textStatus,thrownError) {
                         $('#spinner').css({'opacity' : ''});
                       alert(xhr + "\n" + textStatus + "\n" + thrownError);
                     }
                });
            });    
    });
  </script>
  @endsection