@extends('layouts.app')
@section('title', 'Ivre Logs Report')

<style>
.select2-container {
    width: 85% !important;
}
.select2-selection--single {

    display: flex;
    align-items: center;
}

</style>

@section('content')

<?php error_reporting(0); ?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    /* Custom style for pagination links */
    .pagination {
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
        list-style: none; /* Remove list bullet points */
        display: flex; /* Use flex layout for horizontal alignment */
    }

    .pagination li a {
        padding:6px;
    }

    .pagination a {
        display: inline-block;
        padding: 0; /* Adjust the padding as needed */
        text-decoration: none;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        color: #333;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .pagination a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .pagination .active a {
        background-color: #007bff;
        color: #fff;
    }
</style>

<?php

use \App\Http\Controllers\InheritApiController;
$userdetails = InheritApiController::headerUserDetails();

    if (!empty(request()->input('start_date')))
    {
        $startDate = request()->input('start_date');
    }
    else
    {
        $current_date = date("Y-m-d"); 
        $str_date = strtotime(date("Y-m-d", strtotime($current_date)) . " -15 day");
        $startDate = date('Y-m-d', $str_date);
    }

    if (!empty(request()->input('end_date')))
    {
        $endDate = request()->input('end_date');
    }
    else
    {
        $endDate = date('Y-m-d');
    }

    $url_page = explode('?',str_replace('/','',$_SERVER['REQUEST_URI']));
    $url = $url_page[0];
?>
<style>
    .audiojs .scrubber { 
display: none; 
} 
</style>


    <section class="content">
            <div class="row">             
                <div class="col-lg-12 col-12">
                      <div class="box">
                        
                        <!-- /.box-header -->
                        <form class="needs-validation" action="" method="post">
                            @csrf

                        <input type="hidden" class="form-control" name="show" value="10" id="show_value" required="">

                        <input type="hidden" class="form-control" name="campaign_id" value="{{$campaign_list[0]->id}}" id="campaign_name" required="">
                            <div class="box-body">
                                <h4 class="box-title text-info mb-0"><i class="fa fa-edit me-15"></i> Ivr Logs Call Reports</h4>

                                <hr class="my-15">
                                <div class="row">
                                  <div class="col-md-3">
                                  <div class="form-group">
                                    <label class="form-label">Phone No</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                        <input type="text" class="form-control" placeholder="Enter Phone Number" onkeypress="return isNumberKey(event)" type="" name="number" value="{{ request()->input('number') }}" id="mobile" maxlength="" >
                                    </div>
                                </div>
                                  </div>
                                  @if(Session::get('level') >= 5)
                                
                              <?php /* ?>  <div class="col-md-6">
                                    <div class="form-group">
                                      <label class="form-label">Extension List</label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text @error('caller_id') text-danger border-danger @enderror"><i class="ti-user"></i></span>

                                            <select class="form-select" name="extension" id="extension">
                                        <option value="">Select</option>
                                        @foreach($extension_list as $key => $extension)

                                        @if((request()->session()->get('level') > 9))
                                        @if(($extension->user_level <= 9) || ($extension->extension == request()->session()->get('extension')))
                                        <option @if($extension->extension == request()->input('extension'))  selected @endif value="{{$extension->extension}}">{{$extension->first_name}} {{$extension->last_name}} - {{$extension->extension}} @if($extension->is_deleted == 1) (Removed User) @endif</option>
                                        @endif

                                        @elseif(($extension->user_level < 9) || ($extension->extension == request()->session()->get('extension')))
                                        <option @if($extension->extension == request()->input('extension'))  selected @endif value="{{$extension->extension}}">{{$extension->first_name}} {{$extension->last_name}} - {{$extension->extension}} @if($extension->is_deleted == 1) (Removed User) @endif</option>
                                        @endif


                                        @endforeach
                                    </select>                               
                                        </div>
                                  </div>
                                </div>

                                 <?php */ ?> 
                                <div class="col-md-3">
                                  <div class="form-group">
                                    <label class="form-label">Campaign</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                        <select name="campaign" class="js-example-basic-single select2" id="campaign" onchange="getDtmf(this.value);">
                                            <option value="">Select</option>
                                            @foreach($campaign_list as $key => $campaign)
                                            @if(!empty($campaign->title) & ($campaign->status==1))
                                            <option @if($campaign->id == request()->input('campaign'))  selected @endif value="{{$campaign->id}}">{{$campaign->title}}</option>
                                            @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                </div> 
                                @else

                                <div class="col-md-3"  >
                                  <div class="form-group">
                                    <label class="form-label">Campaign </label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                        <select name="campaign" class="form-select" id="campaign" onchange="getDtmf(this.value);">
                                            <option value="">Select</option>
                                            @foreach($campaign_list as $key => $campaign)
                                            @if(!empty($campaign->title))
                                            <option @if($campaign->id == request()->input('campaign'))  selected @endif value="{{$campaign->id}}">{{$campaign->title}}</option>
                                            @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                              </div>
                              @endif

                               <?php /* ?> 
                              <div class="col-md-6">
                                  <div class="form-group">
                                    <label class="form-label">Disposition</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                        <select name="disposition" class="form-select" id="disposition"  >
                                        <option value="">Select Disposition</option>
                                        <option @if(request()->input('disposition') == '0')   selected @endif  value="0">No Agent</option>
                                        <option @if(request()->input('disposition') == '101')   selected @endif  value="101">No Agent Available</option>
                                        <option @if(request()->input('disposition') == '102')   selected @endif  value="102">AMD Hangup</option>
                                        <option @if(request()->input('disposition') == '103')   selected @endif  value="103">Voice Drop</option>
                                        <option @if(request()->input('disposition') == '104')   selected @endif  value="104">Cancelled By User</option>
                                        <option @if(request()->input('disposition') == '105')   selected @endif  value="105">Channel Unavailable</option>
                                        <option @if(request()->input('disposition') == '106')   selected @endif  value="106">Congestion</option>
                                        <option @if(request()->input('disposition') == '107')   selected @endif  value="107">Line Busy</option>

                                        @foreach($disposition_list as $key => $disposition)
                                        <option @if($disposition->id == request()->input('disposition'))  selected @endif value="{{$disposition->id}}">{{$disposition->title}}</option>
                                        @endforeach



                                    </select>
                                    </div>
                                </div>
                                </div>
                                
                                   <?php */ ?> 
                            
                                    <div class="col-md-3">
                                        <div class="form-group @error('description') has-error @enderror">
                                        <label class="form-label">DTMF</label> 
                                            <div class="input-group mb-3">
                                                    <span class="input-group-text @error('caller_id') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                                    <select name="dtmf" class="form-select" id="dtmf_title" >

                                                        <option value="">Select Dtmf</option>
                                           
                                        </select>
                                                </div>
                                            </div>
                                    </div>
                               
                            
                           
                                    @if(Session::get('level') >= 5)
                                 <!--  <div class="col-md-6">
                                  <div class="form-group"data-select2-id="13">
                                    <label id="label_id"class="form-label">DID Lists </label>
                                    <div class="input-group mb-3">
                                        <select class="form-select select2 select2-hidden-accessible" multiple="" data-placeholder="Select a DIDs" style="width: 100%;" data-select2-id="7" tabindex="-1" aria-hidden="true" name="did_numbers[]">
                                                        <option value="">Select</option>
                                            @foreach($did_list as $key => $did)
                                                                                    
                                        <option @if (old("did_numbers")){{ (in_array($did->cli, old("did_numbers")) ? "selected":"") }}@endif value="{{$did->cli}}">{{$did->cli}}</option>

                                        @endforeach
                                         </select>
                                    </div>
                                </div>
                                </div> -->
                                @endif

                              <?php /*?>  <div class="col-md-6">
                                  <div class="form-group">
                                    <label id="label_id_duration" class="form-label">Timezone </label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                        <select name="timezone_value" class="form-select">
                                            <option value="">Select TimeZone</option>
                                            @foreach($timezone_lists as $key => $zone)
                                            <option @if($zone->timezone == request()->input('timezone_value'))  selected @endif value="{{$zone->timezone}}">{{$zone->timezone_name}} ({{$zone->timezone}})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <?php */?>
                            <div class="col-md-3">
                                  <div class="form-group">
                                    <label class="form-label">Date range:</label>
                                    <div class="input-group mb-3">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right cdr-range" id="reservation">
                                            <input type="hidden" id="start_date" name="start_date" value="{{ $startDate }}">
                                            <input type="hidden" id="end_date" name="end_date" value="{{ $endDate }}">
                                    </div>
                                    </div>
                                    </div>
                       
                           <?php /*?>
                                 
                                <div class="col-md-6" >
                                  <div class="form-group">
                                    <label class="form-label">State / City / Area Codes </label>
                                    <div class="input-group mb-3">
                                        <select name="area_code[]" class="form-select select2 select2-hidden-accessible" multiple="" data-placeholder="Select State / City /Areacode" style="width: 100%;" data-select2-id="8" tabindex="-1" aria-hidden="true">
                                            <option value="">Select Area Code</option>
                                            @foreach($area_codes as $key => $area)
                                            <option @if($area->areacode == request()->input('area_code'))  selected @endif value="{{$area->areacode}}">{{$area->state_name}} - {{$area->city_name}} - {{$area->areacode}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <?php */?>
                    
                                </div>
                               
                            </div>
                        
                          
                      
                          
                           
                            <!-- /.box-body -->
                            <div class="box-footer text-end"style="margin-right:15px;">
                            <button type="submit" name="submit" id="form_submit" value="Search" class="btn btn btn-primary waves-effect waves-light"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                            <button type="submit" name="submit_download" class="btn btn-danger waves-effect waves-light m-l-10" value="1"> <i class="fa fa-file-pdf-o"></i> PDF</button>                                     
                            <!-- <button type="submit" name="submit_download" class="btn btn-success waves-effect waves-light m-l-10" value="2"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Excel</button> -->
                            </div>  
                        </form>
                      </div>
                      <!-- /.box -->            

                    </div>  

        
          </div>
          <!-- /.row -->

    

        <div class="row">

        <?php
        
                    if (!empty($report)) {
                   

                    if($page == 1)
                    {
                        $currentPage = 1;
                    }

                    else
                    {
                        $currentPage = isset($_GET['page']) ? (int) $_GET['page'] : 1;
                    }

                    $perPage = $show;
                    $paginator = new Illuminate\Pagination\LengthAwarePaginator($report, $record_count, $perPage, $currentPage, ['path' => url($url)]);
                ?>
        
        <div class="col-lg-12 col-12">
            <div class="box">
            
               <div class="box-body">  
                    <b>Total Rows :<?= $record_count ?></b>
                    <form method="GET" action="">
               
                    <label class="label-class" for="show">Show:</label>
                        <select class="form-select-sm" name="show" onchange="callButton(this.value)">
                            <option value="10" {{ request('show') == 10 ? 'selected' : '' }}selected>10</option>
                            <option value="25" {{ request('show') == 25 ? 'selected' : '' }}>25</option>
                            <option value="50" {{ request('show') == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('show') == 100 ? 'selected' : '' }}>100</option>
                        </select>
                        <label for="entries">entries</label>
                       
                    </form>  
                        <div class="table-responsive">
                        <table  class="table mt-0 table-hover no-wrap" data-page-size="10">
                            <thead>
                            <tr>
                                                        <th>#</th>
                                                        <th>Campaign</th>
                                                        <th>DTMF</th>
                                                        <th>CLI</th>                
                                                        <th>Number</th>
                                                        <th>Route</th>
                                                        <th>Created At</th>
                                                        <th>Action</th>

                                    </tr>
                            </thead>
                            <tbody>
                            <?php
                                                    $k = $lower_limit;
                                                    foreach ($paginator->items() as $key => $value) {

                                                                $timezone = $userdetails->data->timezone;
                                                                if(!empty($timezone))
                                                                {
                                                                    if(!empty($value->start_time))
                                                                    {
                                                                    $utc_start_time = $value->start_time;
                                                                    $dt_start_time = new DateTime($utc_start_time);
                                                                    $tz = new DateTimeZone($timezone); // or whatever zone you're after
                                                                    $dt_start_time->setTimezone($tz);
                                                                    $start_time = $dt_start_time->format('Y-m-d H:i:s');

                                                                    }
                                                                    else
                                                                    {
                                                                        $start_time='-';
                                                                    }

                                                                    if(!empty($value->end_time))
                                                                    {

                                                                    $utc_end_time = $value->end_time;
                                                                    $dt_end_time = new DateTime($utc_end_time);
                                                                    $tz = new DateTimeZone($timezone); // or whatever zone you're after
                                                                    $dt_end_time->setTimezone($tz);    
                                                                    $end_time = $dt_end_time->format('Y-m-d H:i:s');
                                                                }
                                                                else
                                                                {
                                                                        $end_time='-';

                                                                }

                                                                }
                                                                else
                                                                {
                                                                    if(!empty($value->start_time))
                                                                    {
                                                                    $start_time = $value->start_time;
                                                                }
                                                                else
                                                                {
                                                                    $start_time='-';
                                                                }

                                                            if(!empty($value->end_time))
                                                                    {
                                                                    $end_time = $value->end_time;
                                                                }
                                                                else
                                                                {
                                                                    $end_time='-';
                                                                }

                                                                }
                                                                
                                                        ?>                          
                                                        <tr>
                                            <th scope="row"><?php echo ++$k; ?></th>
                                           
                                                            <td><?php
                                                                if (!empty($value->campaign_id)) {
                                                                    foreach ($campaign_list as $key => $campaign) {
                                                                        if ($campaign->id == $value->campaign_id) {
                                                                            ?>
                                                                            <?php
                                                                            if (!empty($campaign->title)) {
                                                                                echo $campaign->title;
                                                                            }
                                                                            ?>
                                                                            <?php
                                                                        }
                                                                    }
                                                                } else {
                                                                    echo 'N/A';
                                                                }
                                                                ?></td>

                                                             <td><?php echo $value->dtmf; ?></td>

                                                           
                                                                <td> <?php
                                        // Assuming $fax->callerid contains the caller ID
                                        $callerID = $value->cli;

                                        // Remove any non-digit characters from the caller ID
                                        $callerID = preg_replace('/[^0-9]/', '', $callerID);

                                        // Check if the caller ID is at least 10 digits long
                                        if (strlen($callerID) >= 10) {
                                            // Extract the last 10 digits
                                            $lastTenDigits = substr($callerID, -10);

                                            // Format the last 10 digits as (999) 999-9999
                                            $formattedLastTenDigits = preg_replace('/(\d{3})(\d{3})(\d{4})/', '($1) $2-$3', $lastTenDigits);

                                            // Add a "+" sign in front of the original caller ID
                                            $formattedCallerID =  substr($callerID, 0, -10) . $formattedLastTenDigits;

                                            // Output the formatted caller ID
                                            echo $formattedCallerID;
                                        } else {
                                            // Handle cases where the caller ID is too short
                                            echo "Invalid caller ID";
                                        }
                                        ?></td>
                                                                <td style="white-space: nowrap;">
                                                            
                                                                <?php
                                        // Assuming $fax->callerid contains the caller ID
                                        $callerID = $value->number;

                                        // Remove any non-digit characters from the caller ID
                                        $callerID = preg_replace('/[^0-9]/', '', $callerID);

                                        // Check if the caller ID is at least 10 digits long
                                        if (strlen($callerID) >= 10) {
                                            // Extract the last 10 digits
                                            $lastTenDigits = substr($callerID, -10);

                                            // Format the last 10 digits as (999) 999-9999
                                            $formattedLastTenDigits = preg_replace('/(\d{3})(\d{3})(\d{4})/', '($1) $2-$3', $lastTenDigits);

                                            // Add a "+" sign in front of the original caller ID
                                            $formattedCallerID =  substr($callerID, 0, -10) . $formattedLastTenDigits;

                                            // Output the formatted caller ID
                                            echo $formattedCallerID;
                                        } else {
                                            // Handle cases where the caller ID is too short
                                            echo "Invalid caller ID";
                                        }
                                        ?>
                                                            
                                                            </td>

                                                                <td><?php echo $value->route; ?></td>
                                                                <td><?php echo $value->created_at; ?></td>

                                                                <td><a target="_blank" title="View Lead Record" href="/lead-activity?phone_number=<?php echo $value->number; ?>"><i style="margin-top: 20px;margin-left: 10px;" class="fa fa-eye fa-lg" aria-hidden="true"></i></a></td>


                                                               
                                                               
                                                               
                    
                                            
                                    
                                        </tr>
                                        <?php } ?>


                                
                            </tbody>
                         
                        </table>
                        
                        <div style="float:right;">
                        {{$paginator->appends(Request::all())->links()}}



                                                            </div>
                        </div>
                </div>
                
            </div>
        </div>
        <?php } ?>

        </div>
<!-- /.row -->


</section>
@push('styles')
<link rel="stylesheet" type="text/css"
    href="{{ asset('assets/plugins/dashboard_date/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" type="text/css"
    href="{{ asset('assets/plugins/dashboard_date/bootstrap-datepicker.css') }}">
@endpush
   
@push('scripts')
    <!-- Vendor JS -->
    
    <script src="{{asset('assets/plugins/dashboard_date/moment.min.js') }}"></script>
    <script src="{{asset('assets/plugins/dashboard_date/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/dashboard_date/daterangepicker.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/imask"></script>
<script>
    var phoneInput = document.getElementById('mobile');
    var phoneMask = new IMask(phoneInput, {
        mask: '(000) 000-0000'
    }); 
    </script>
 

<script>
    var myAudio = document.getElementById("myAudio");
    var isPlaying = false;

function togglePlay(valued) {
    $("#pause_"+valued).show();
    $("#play_"+valued).hide();

  isPlaying ? myAudio.pause() : myAudio.play();
};

function togglePause(valued) {
    $("#pause_"+valued).hide();
    $("#play_"+valued).show();

 myAudio.pause();
};

myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};
</script>

@if(!empty(request()->input('campaign')))

<script>

    value = {{request()->input('campaign')}};
    var html="";

    var iddd = {{$dtmf_value}};


                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/findAllDtmf/'+ value,
                    success: function (data) {

                        html='<option value="">Select Dtmf</option>';
                        

                         let dropdown = $('#dtmf_title');

        dropdown.empty();

        if(iddd!="")
        {
            var selected='selected';
        }
        else
        {
            var selected='';

        }



                       // alert(data.status.length);

                        for (let i = 0; i < data.status.length; i++) {


                             if(iddd == data.status[i].dtmf)
        {
            var selected='selected';
        }
        else
        {
            var selected='';

        }


                              html +='<option '+selected+' value="'+data.status[i].dtmf+'">'+data.status[i].dtmf_title+'</option>';
                          }

                         // alert(html);


                     dropdown.append(html);

                    }
                });
</script>
@endif

<script>
    function getDtmf(value)
    {

var html="";

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/findAllDtmf/'+ value,
                    success: function (data) {

        let dropdown = $('#dtmf_title');

        dropdown.empty();

                        html='<option value="">Select Dtmf</option>';



                       // alert(data.status.length);

                        for (let i = 0; i < data.status.length; i++) {
                              html +='<option value="'+data.status[i].dtmf+'">'+data.status[i].dtmf_title+'</option>';
                          }

                         // alert(html);


                     dropdown.append(html);

                    }
                });
    }
</script>

<script>
    function callButton(value)
    {
        $("#show_value").val(value);
        $('#form_submit').trigger('click'); 
    }
</script>



    <script type="text/javascript">
        $(function () {
            $('#reservation').daterangepicker({
                locale: { format: 'YYYY-MM-DD'},
                "startDate": "{{ $startDate }}",
                "endDate": "{{ $endDate }}",
                opens: 'right'

            }, function(start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                $("#start_date").val(start.format('YYYY-MM-DD'));
                $("#end_date").val(end.format('YYYY-MM-DD'));
            });
        });
        </script>


<script>
$(document).ready(function() {
    function initializeSelect2() {
        $('.js-example-basic-single.select2').select2({
            dropdownParent: $('#campaign')
        });

       
        $('.select2-container').css({
            'width': '85%',
            'display': 'block'
        });
      
    }

    $('#campaign').on('shown.bs.modal', function() {
        initializeSelect2(); 
    });

    if ($('#campaign').hasClass('show')) {
        initializeSelect2();
    }
});
</script>



@endpush

@endsection