@extends('layouts.app')
@section('css')
	<!-- Data Table CSS -->
	<link href="{{URL::asset('plugins/datatable/datatables.min.css')}}" rel="stylesheet" />
	<!-- Awselect CSS -->
	<link href="{{URL::asset('plugins/awselect/awselect.min.css')}}" rel="stylesheet" />
	<!-- Flipclock CSS -->
	<link href="{{URL::asset('plugins/flipclock/flipclock.css')}}" rel="stylesheet" />
@endsection
@section('page-header')
<!-- PAGE HEADER -->
<div class="page-header mt-5-7">
	<div class="page-leftheader">
		<h4 class="page-title mb-0">{{ __('Transcribe') }}</h4>
		<!--<ol class="breadcrumb mb-2">-->
		<!--	<li class="breadcrumb-item"><a href="{{route('user.stt.file')}}"><i class="fa fa-magic mr-2 fs-12"></i>{{ __('User') }}</a></li>-->
		<!--	<li class="breadcrumb-item" aria-current="page"><a href="{{url('#')}}"> {{ __('Speech-to-Text') }}</a></li>-->
		<!--	<li class="breadcrumb-item active" aria-current="page"><a href="{{url('#')}}"> {{ __('Live Transcribe') }}</a></li>-->
		<!--</ol>-->
	</div>
</div>
<!-- END PAGE HEADER -->
@endsection
@section('content')
	<div class="row">
		@if(session('success'))
        <p>{{ session('success') }}</p>
    @endif

   <div class="col-lg-12 col-md-12 col-sm-12">
     <a class="btn btn-primary btn-md" type="button" id="add-audio" data-toggle="tooltip" title="Upload New File"><i class="mdi mdi-animation"></i> Upload New File</a>
  </div>

    </div>
    <div class="row">
		<div class="col-lg-12 col-md-12 col-sm-12">
			<div class="card border-0">
				<div class="card-header">
					<h3 class="card-title">{{ __('All Audio File Transcribe Results') }}</h3>
					<a id="refresh-button" href="#" data-toggle="tooltip" data-placement="top" title="Refresh Table"><i class="fa fa-refresh transcribe-action-buttons transcribe-result"></i></a>
				</div>
				<div class="card-body pt-2">
					<!-- SET DATATABLE -->
					<table id='userResultTable' class='table' width='100%'>
							<thead>
								<tr>
									<th width="1%"></th>
									<th width="7%">{{ __('File Name') }}</th> 
									<th width="7%">{{ __('Type') }}</th>
									<th width="7%">{{ __('Transcripts') }}</th>
									<th width="10%">{{ __('Created On') }}</th>
									<th width="7%">{{ __('Status') }}</th>
									<th width="4%">{{ __('Actions') }}</th>
								</tr>
							</thead>
							<tbody>
							    @foreach ($files as $data)
								<tr>
									<td width="1%">{{ $data->id }}</td>
									<td width="7%">{{ $data->name }}</td> 
									<td width="7%">{{ $data->type }}</td>
									<td width="7% text-center">
									    <a class="" href="{{ route('user.transcriptions.edit', [$data->id]) }}">
    									    <i class="bg-success text-white transcribe-action-buttons transcribe-result fa fa-eye"></i>
    									    
    									 </a>
    									 <a class="" href="{{ route('user.transcriptions.edit', [$data->id]) }}">
    									    <i class="bg-success text-white transcribe-action-buttons transcribe-result fa fa-download"></i>
    									    
    									 </a>
    									 <a class="" href="{{ route('user.transcriptions.edit', [$data->id]) }}">
    									    <i class="bg-success text-white transcribe-action-buttons transcribe-result fa fa-share"></i>
    									    
    									 </a>
									</td>
									<td width="10%">{{ $data->created_at }}</td>
									<td width="7%"><span class="badge badge-primary"><b>Completed</b></span></td>
									<td width="4%">
									    <a class="" href="{{ route('user.transcriptions.edit', [$data->id]) }}" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
									    <i class="bg-danger text-white fa fa-edit transcribe-action-buttons transcribe-result"></i>
									    </a>
									</td>
								</tr>
								@endforeach
							</tbody>
					</table> <!-- END SET DATATABLE -->
				</div>
			</div>
		</div>
	</div>
	<!-- CREATE PROJECT MODAL -->
	<div class="modal fade" id="audioModal" tabindex="-1" role="dialog" aria-labelledby="audioModalLabel" aria-hidden="true" data-keyboard="false">
		<div class="modal-dialog modal-dialog-centered modal-md" role="document">
			<div class="modal-content">
				<div class="modal-header mb-1">
					<h4 class="modal-title" id="myModalLabel"><i class="mdi mdi-animation"></i> {{ __('Upload New File') }}</h4>
					<button type="button" class="close" data-dismiss="modal" id="modal-close" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form id="" action="{{ route('user.upload.audio') }}" method="POST" enctype="multipart/form-data">
					@csrf
					<div class="modal-body pb-0 pl-6 pr-6"> 
					<div class="d-none" id="textarea-box">
						<input type="text" class="form-control" name="user_id" id="user_id" value="5" required>
						<label class="input-label1">
							<span class="input-label-content custom-content">{{ __('UserID (Required)') }}</span>
						</label>
					</div>
    					<div class="" id="textarea-box">
    						<select id="languages" name="languages" data-placeholder="{{ __('Select Language') }}">	
    							<option value=""> Select Language</option>
    							@foreach ($languages as $language)
    								<option value="{{ $language->id }}" data-img="{{ URL::asset($language->language_flag) }}" @if (config('stt.vendor_logos') == 'show') data-vendor="{{ URL::asset($language->vendor_img) }}" @endif @if (auth()->user()->language_file == $language->id) selected @endif> {{ $language->language }}</option>
    							@endforeach											
    						</select>
    						<label class="input-label11">
							<span class="input-label-content custom-content">{{ __('Language (Required)') }}</span>
						</label>
    					</div>
						<br>
						<div class="" id="textarea-box">
    						<select id="categories" name="categories" data-placeholder="{{ __('Select Categories') }}" data-callback="processLanguageFeature">	
    							<option value=""> Select Categories</option>
    							<option value="General">General</option>
    							<option value="Finance">Finance</option>
    							<option value="Education">Education</option>
    						</select>
    					</div>
    					<br>
    					<div class="" id="textarea-box">
    						<select id="type" name="type" data-placeholder="{{ __('Audio Type') }}">	
    							<option value=""> Select Type</option>
    							<option value="General">General</option>
    							<option value="Conferance Call">Conferance Call</option>
    							<option value="Meeting Record">Meeting Record</option>
    							<option value="Phone Call">Phone Call</option>
    						</select>
    					</div>
    					<br>
						<div class="" id="textarea-box">
							<input type="file" class="form-control" name="audio_file" id="audio_file" accept=".mp3" required>
							<label class="input-label3">
								<span class="input-label-content custom-content">{{ __('mp3 File (Required)') }}</span>
							</label>
						</div>
					</div>
					<div class="modal-footer pr-6 pb-3">
						<button type="button" class="btn btn-cancel mb-4" data-dismiss="modal" id="listen-close">{{ __('Cancel') }}</button>
						<button type="submit" class="btn btn-primary mb-4" id="new-project-button">{{ __('Transcribe') }}</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- END CREATE PROJECT MODAL -->
@endsection
@section('js')
    <script src={{ URL::asset('js/transcribe.py') }}></script>
	
	<script type="text/javascript">
		$('#add-audio').on('click', function() {
				$('#audioModal').modal('show');
			});
	</script>
@endsection