@extends('layouts.app')
@section('title', 'Ringless Voice Template')

@section('content')
<style>
.custom-audio-box {
 
}
.table > tbody > tr > td, .table > tbody > tr > th {
     padding: 0.5rem; 
    vertical-align: middle;
}

</style>
<!-- Main content -->
        <section class="content">

      <div class="row">

       
        
        <div class="col-12">
          <div class="box">
           <div class="box-body">           
                      
              <h4 class="box-title text-info mb-0"><i class="fa fa-user fa-sx"></i> Ringless Voice Template</h4>
              <a id="openLabelForm" href='{{url('/edit-ringless-voice')}}/0' type="button" style="float:right" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"><i class="fa fa-plus"></i>Add</a>
             <hr class="my-15">
        
              <div class="table-responsive">
                <table id="tickets" class="table mt-0 table-hover no-wrap" data-page-size="10">
                  <thead>
                    <tr>
                              <th>#</th>
                              <th>Description</th>
                              <th>File Name</th>                             
                              <th>Action</th>

                            </tr>
                  </thead>
                  <tbody>
                  @foreach($ivr_list as $key => $ivr)

                                <tr>
                                  <th scope="row">{{$key+1}}</th>
                                  <td>{{$ivr->ivr_desc}}</td>                            
                                  <td>                                
                                    <audio class="custom-audio-box"controls preload="none"style="height:30px;">
                                        <source src="{{env('FILE_UPLOAD_URL')}}ringless_files/{{$ivr->ann_id}}.wav" type="audio/wav">
                                    </audio>
                   
                                  </td>
                                 
                                  
                                  <td><a style="cursor:pointer;margin-right:5px"title="Edit" href="{{url('edit-ringless-voice')}}/{{$ivr->id}}" ><i class="fa fa-edit fa-lg"></i></a> 
                                  <a style="cursor:pointer;" title="Delete" class='openIvrDelete' data-id="{{$ivr->id}}" data-ivrid= "{{$ivr->ivr_id}}"><i class="fa fa-trash-o fa-lg"></i></a></td>
                                  
                             
                                </tr>

  
                            @endforeach
                         
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="modal fade" id="delete" tabindex="-1" aria-labelledby="deleteLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Confirm Delete</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
     
      <div class="modal-body">
      <p>You are about to delete <b><i class="title"></i></b>voice templete.</p>
         <p>Do you want to proceed?</p>
         <input type="hidden" class="form-control" name="auto_id" value="" id="auto_id">
          <input type="hidden" class="form-control" name="ivr_id" value="" id="ivr_id">
   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
        <button type="submit"name="submit" class="btn btn-danger btn-sm deleteIvr">Delete</button>
      </div>
        
    </div>
  </div>
</div>
      </div>
      <!-- /.row -->

    </section>
        <!-- /.content -->



        <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
        <script>
    var redirectUrl = "{{ route('ringless.voice.index') }}";
</script>
        <script>




$(".openIvrDelete").click(function () {
    var delete_id = $(this).data('id');
    var ivr_id = $(this).data('ivrid');

    $("#delete").modal('show');
    $("#auto_id").val(delete_id);
    $("#ivr_id").val(ivr_id);


});

$("#openLabelForm").click(function () {
    $("#myModal").modal();
    $("#name").val('');
    $("#status").val('1');
    $("#id").val('');
    $("#add-edit").html('Add IVR');
});


$(document).on("click", ".deleteIvr", function () {
    //if(confirm("Are you sure you want to delete this?")){
    var delete_id = $("#auto_id").val();
    var ivr_id = $("#ivr_id").val();

    //alert(delete_id);
    var el = this;
    $.ajax({
        url: 'deleteRinglessVoice/' + delete_id + '/' + ivr_id,
        type: 'get',
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Add CSRF token for protection
    },
        success: function (response) {
          console.log(response);
            if (response.success) {
                // Success, display a success message and reload the page
                toastr.success(response.message);
                 // Redirect to the GET URL
                //  window.location.href = redirectUrl;
                 window.location.href = '/ringless-voice'; 
            } else {
                // Failure, display an error message
                toastr.error(response.message);
                 // Redirect to the GET URL
                 window.location.href = '/ringless-voice'; 
                //  window.location.href = redirectUrl;
            }
        },
        error: function (xhr, status, error) {
            var errorMessage = xhr.responseJSON ? xhr.responseJSON.message : 'An error occurred while deleting the Ringless Voice.';
            toastr.error(errorMessage);
             window.location.href = '/ringless-voice'; 
        }
    });
});

</script>



@endsection