@extends('layouts.app')
@section('title', 'Ringless Voicemail Reports')
@section('content')

<style>
  .table > thead > tr > td, .table > thead > tr > th {
    padding: 0.4rem;
    vertical-align: middle;
}

  </style>
  <?php

error_reporting(0);

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)) . " - day");
        $str_date = strtotime(date("Y-m-d", strtotime($current_date)) . " -90 day");
        $startDate = date('Y-m-d', $str_date);

       // $startDate = date('Y-m-d');//, $str_date);
    }

    if (!empty(request()->input('end_date')))
    {
        $endDate = request()->input('end_date');
    }
    else
    {
        $endDate = date('Y-m-d');
    }
?>
<section class="content">
  <div class="row">       
    <div class="col-lg-12 col-12">
      <div class="box">
                        
          <div class="box-body"><!--bg-lightest-->
            <h4 class="box-title text-info mb-0"style="float:left;"id="show"><i class="icon-Add-user"><span class="path1"></span><span class="path2"></span></i> Ringless Voicemail Reports</h4>



           
 


           </div>
            <div class="panel-group panel-group-simple panel-group-continuous mb-0" id="accordion2"
            aria-multiselectable="true" role="tablist">
            <!-- Question 1 -->
            <div class="panel">
              <div id="question-1" role="tab">
             
                      </div>
                      <div class="panel-collapse collapse  " id="answer-1" aria-labelledby="question-1" role="tabpanel" data-bs-parent="#category-1">
                        <div class="panel-body">
                        <form method="post">
                          @csrf
                        <div class="row">
                   

                              
                      
                            <div class="form-group col-md-3">
                              <label class="form-label">Cli</label>
                                <div class="input-group">
                                                             <span class="input-group-text @error('phone_number') text-danger border-danger @enderror"><i class="ti-user"></i></span>

                                    <input class="form-control" data-inputmask="'mask':[ '(999) 999-9999']" data-mask  value="{{request()->input('phone_number')}}" name="phone_number" id="phone_number" placeholder="Phone Number">


                                </div>
                            </div>

                          
                         
                           
                        
                            <div class="form-group col-md-3">
                            
                            <label class="form-label">Date Range</label>
                            <div class="input-group">
                            <div class="input-group-addon">
                          <i class="fa fa-calendar"></i>
                      </div>
                      <input type="text" class="form-control pull-right" 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 class="box-footer text-end">
        

                <a onclick="window.location.reload();"  class="btn btn-danger me-1">
                  <i class="ti-reload"></i> Reset
                </a>

                <button  type="submit" name="submit" value="add" class="btn btn-primary">
                  <i class="ti-save-alt"></i> Submit
                </button>
              </div>    
  </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  <!-- End Question 1 -->										
                </div>
					  
                
                <div class="row">
                  <h4 class="box-title text-info mb-0"style="display:none;"id="hide"><i class="icon-Add-user"><span class="path1"></span><span class="path2"></span></i> SMS AI Reports</h4>
                  <hr class="my-15">

<div class="table-responsive">
                <table id="tickets1" class="table mt-0 table-hover no-wrap" data-page-size="10">
                  <thead>
                            <tr>
                              <th>#</th>
                              <th>CLI</th>
                              <th>Number</th>
                              <th>Voicemail Url</th>
                              <th>Duration</th>

                              <th>Start Date</th>
                              <th>End Date</th>
                              <th>Ringless Recording</th>
                            </tr>
                  </thead>

                  <?php //echo "<pre>";print_r($leads);die; ?>

                  <tbody>
                    <?php
                    $k = $lower_limit;
                    foreach ($sms_ai_report as $key => $report)
                    {



                        ?>
                        <tr>
                            

                        <td>{{$report->id}}</td>
                        
                       
                        <td>{{$report->cli}}</td>
                        <td>{{$report->phone}}</td>
                        <td>{{$report->voicemail_url}}</td>
                        <td>{{$report->duration}}</td>

                        <td>{{$report->start_date}}</td>
                        <td>{{$report->end_date}}</td>







                        
                                  <td><audio controls preload ='none'style="height:35px;width:220px;"><source src="<?php echo $report->ringless_recording; ?>" type='audio/wav'></audio></td>


                        
                        
                                  
                                </tr>

                              

                                    

                  <?php }?>
                </tbody>
                </table>
              </div>
          
            </div>
           
            
                       </div>
                
              </div>
               
    </div>

  </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>
      $(".openLeadDelete").click(function () {
            var delete_id = $(this).data('id');
            $("#delete").modal('show');
            $("#lead_id").val(delete_id);
        });
        $(document).on("click", ".deleteLead", function () {
            var lead_id = $('#lead_id').val();
            $.ajax({
                url: 'deleteLead/' + lead_id,
                type: 'get',
                success: function (response) {
                    window.location.reload(1);
                }
            });
        });

 $(document).ready(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'));
    });

    // Check if start date and end date are empty, if so, clear the input fields
    if ("{{ $startDate }}" === '') {
        $("#start_date").val('');
    }

    if ("{{ $endDate }}" === '') {
        $("#end_date").val('');
    }
});

$(document).ready(function() {
    $('#tickets1').DataTable({
        order: [[0, 'desc']],

        columnDefs: [
            {
                targets: [2, 3, 4, 5], // Columns to disable sorting
                orderable: false
            },
            {
                targets: [1,6], // Name column, enable sorting
                orderable: true
            }
        ]
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var searchButton = document.querySelector('.btn-bitbucket');
    var collapseElement = new bootstrap.Collapse(document.getElementById('answer-1'), { toggle: false });
    var leadsHeading = document.getElementById('hide');
    var leadsHeadingShow = document.getElementById('show');

    // Function to check the conditions for opening the form
    function shouldOpenForm() {
        // Check the specified conditions
        return (
            {!! json_encode(
                !empty(request()->input('lead_status')) || 
                !empty(request()->input('assigned_to')) || 
                !empty(request()->input('first_name')) || 
                !empty(request()->input('last_name')) || 
                !empty(request()->input('email')) || 
                !empty(request()->input('legal_company_name')) || 
                !empty(request()->input('lead_type')) ||
                !empty(request()->input('phone_number')) ||
                !empty(request()->input('start_date')) ||
                !empty(request()->input('end_date'))
            ) !!}
        );
    }

    // Check conditions when the page loads
    if (shouldOpenForm()) {
        collapseElement.show();
        leadsHeading.style.display = 'block';
        leadsHeadingShow.style.display = 'none';
    }

    searchButton.addEventListener('click', function (event) {
        event.preventDefault(); // Prevent the default behavior of the anchor link

        var formFields = document.querySelectorAll('#answer-1 input, #answer-1 select, #answer-1 textarea');

        // Check if any field in the form is not empty
        var isAnyFieldNotEmpty = Array.from(formFields).some(function (field) {
            return field.value.trim() !== '';
        });

        if (isAnyFieldNotEmpty || shouldOpenForm()) {
            // If any field is not empty or specified conditions are met, keep the form open
            collapseElement.show();
            leadsHeading.style.display = 'block';
            leadsHeadingShow.style.display = 'none';
        } else {
            // If all fields are empty and conditions are not met, toggle the form visibility
            collapseElement.toggle();
        }
    });

    // Add an event listener for Bootstrap Collapse events
    collapseElement._element.addEventListener('hidden.bs.collapse', function () {
        leadsHeading.style.display = 'none'; // Hide the heading when the form is collapsed
        leadsHeadingShow.style.display = 'block'; // Show the alternate heading when the form is collapsed
    });

    collapseElement._element.addEventListener('shown.bs.collapse', function () {
        leadsHeading.style.display = 'block'; // Show the heading when the form is expanded
        leadsHeadingShow.style.display = 'none'; // Hide the alternate heading when the form is expanded
    });
});
</script>




@endpush

@endsection