@extends('layouts.app')
@section('title', 'Audio Message')

@section('content')
<style>
.custom-audio-box {
 
 
}
</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> Audio Message</h4>
             
              @if(empty($audio_message))
           <a id="openLabelForm" href='{{url('/edit-audio-message')}}/0' class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"style="float:right;"><i class="fa fa-plus"></i> Add Audio Message</a>
           @endif
          <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($audio_message as $key => $ivr)

                                <tr>
                                  <th scope="row">{{$key+1}}</th>
                                  <td>{{$ivr->ivr_desc}}</td>                            
                                  <td>
                                    <audio controls preload ='none'><source src="{{env('FILE_UPLOAD_URL')}}{{env('IVR_FILE_UPLOAD_FOLDER_NAME')}}/{{$ivr->ann_id}}.wav" type='audio/wav'></audio>
                                </td>                                                                   
                                  <td><a title="Edit"href="{{url('edit-audio-message')}}/{{$ivr->id}}"><i class="fa fa-edit fa-lg"></i></a> 
                                 
                                </td>                             
                                </tr>

  
                            @endforeach
                         
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.row -->

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








@endsection