@extends('layouts.app')
@section('title', 'Report')
@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">


<?php



    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)) . " -90 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
							<div class="box-body">
								<h4 class="box-title text-info mb-0"><i class="fa fa-edit me-15"></i> Ringless Call Report</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"  type="" name="number" value="{{ request()->input('number') }}" id="mobile" maxlength="" >
									</div>
								</div>
								  </div>
                                  
            
                                <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 js-example-basic-single" id="campaign">
                                            <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>
                          
                            <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>
                       
                                    <div class="col-md-3">
                                  <div class="form-group">
									<label class="form-label"></label>
									<div class="input-group mb-3">
                                    <button type="submit" name="submit" value="Search" class="btn btn btn-primary waves-effect waves-light"><i class="fa fa-search" aria-hidden="true"></i> Search</button>

                                    </div>
                                    </div>
                                    </div>
								 
                          
                    
                                </div>
                               
                            </div>
                        
                        
                      
                          
                           
							<!-- /.box-body -->
							<!-- <div class="box-footer text-end"style="margin-right:15px;">
                            <button type="submit" name="submit" value="Search" class="btn btn btn-primary waves-effect waves-light"><i class="fa fa-search" aria-hidden="true"></i> Search</button>

							</div>   -->
						</form>
					  </div>
					  <!-- /.box -->			

                    </div>  

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

	

        <div class="row">

   
        
        <div class="col-lg-12 col-12">
            <div class="box">
            
               <div class="box-body">  
                 
                        <div class="table-responsive">
                        <table id="tickets" class="table mt-0 table-hover no-wrap" data-page-size="10">
                            <thead>
                            <tr>
                                                        <th>#</th>                                                        
                                                        <th>Campaign</th>
                                                        <th>CLI</th>                                                                       
                                                        <th>Type</th>
                                                        <th>Number</th>
                                                        <th>State/City</th>
                                                        <th>Start Time</th>
                                                        <th>End Time</th>
                                                        <th>Recording</th>

                                    </tr>
                            </thead>
                            <tbody>
                         
                            @foreach ($report as $key=>$value)
                                                        <tr>
                                                            <th scope="row">{{$key+1}}</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 style="white-space: nowrap;">
                                                            <?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 "";
                                        }
                                        ?>
                                                        </td>                                                              
                                                                <td><?php 
                                                                if($value->type == 'ringless_voicemail')
                                                                    $type = 'Ringless Voicemail';
                                                             
                                                                echo $type; ?>
                                                                   </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>@foreach($area_codes as $key => $area)
                                                                @if($area->areacode == $value->area_code)
                                                                {{$area->state_name}} / {{$area->city_name}}
                                                                
                                                                    @endif
                                                                @endforeach </td>
                                                                <td>{{$value->start_time}}</td>
                                                                <td>{{$value->end_time}}</td>
                                      
                                                                <td><audio controls preload ='none'style="height:35px;width:220px;"><source src="<?php echo $value->call_recording; ?>" type='audio/wav'></audio></td>
                                                        </tr>
                                          @endforeach
                            </tbody>
                         
                        </table>
                        
                      
                        </div>
                </div>
                
            </div>
        </div>
     

        </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 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() {
    $('.js-example-basic-single').select2({
        width: '86%' 
    });

    $('.select2-container .select2-selection--single').css({
        'height': '34px',
        'border-radius': '3px',
        'border': '1px solid #ced4da',
        'padding': '4px 8px'
    });
});
</script>
@endpush

@endsection