@extends('layouts.master')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.splash-img {
    margin: 20px 0;
}
.splash-img img{
    width: 150px;
    height: auto;
}
</style>
@section('content')
<div class="right_col" role="main">
<div class="">
   <div class="page-title">
      <div class="title_left">
         <h3>Concierge Settings</h3>
      </div>
   </div>
   <div class="clearfix"></div>
   <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
         <div class="x_panel">
            <div class="x_title">
               <div class="clearfix"></div>
               <div class="row">
                  {{ Form::open( array('url' => action('ConciergeController@add_concierge_settings'), 'method'=>'post', 'id' => 'searchForm','enctype' => 'multipart/form-data' )) }} 
                  @if(Session::has('successMessage'))
                  <div class="alert alert-success" role="alert">
                     <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                     {!! html_entity_decode(session('successMessage')) !!}
                  </div>
                  @endif
                  @if(Session::has('dangerMessage') || count($errors))
                  <div class="alert alert-danger" role="alert">
                     <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                     {!! html_entity_decode(session('dangerMessage')) !!}
                     {{ $errors->first() }}
                  </div>
                  @endif
                  {{-- END ALERT BLOCK --}}
                  <!-- <div class="col-sm-12">
                     <h3>Settings</h3>
                     </div> -->
                  <div class="col-sm-12" style="margin-top:14px;">
                     <div class="col-sm-4"> 
                        <label>User Audio Alert:</label>  
                     </div>
                     <div class="col-sm-8" id="top">
                        <input type="file" name="user_audio_alert" class="form-control file_multi_audio1"  onchange="checkfile(this);" accept="audio/*"> 
                        @if(is_null($concierge->user_audio_alert))
                        <audio controls>
                           <source src="" type="audio/ogg" id="audio_here1">
                           <source src="" type="audio/mpeg" id="audio_here1">
                           Your browser does not support the audio element.
                        </audio>
                        <br>
                        @else   
                        <audio controls>
                           <source src="{{ $concierge->user_audio_alert }}" type="audio/ogg" id="audio_here1">
                           <source src="{{ $concierge->user_audio_alert }}" type="audio/mpeg" id="audio_here1">
                           Your browser does not support the audio element.
                        </audio>
                        <br>
                        @endif
                        <a href="{{$concierge->user_audio_alert ?? '' }}" target="_blank">User Audio Alert Link</a>
                     </div>
                  </div>
                  <div class="clearfix"></div>
                  <div class="col-sm-12" style="margin-top:14px;">
                     <div class="col-sm-4"> 
                        <label>Admin Audio Alert:</label>  
                     </div>
                     <div class="col-sm-8" id="top">
                        <input type="file" name="admin_audio_alert" class="form-control file_multi_audio2"  onchange="checkfile(this);" accept="audio/*"> 
                        @if(is_null($concierge->admin_audio_alert))
                        <audio controls>
                           <source src="" type="audio/ogg" id="audio_here2">
                           <source src="" type="audio/mpeg" id="audio_here2">
                           Your browser does not support the audio element.
                        </audio>
                        <br>
                        @else   
                        <audio controls>
                           <source src="{{ $concierge->admin_audio_alert }}" type="audio/ogg" id="audio_here2">
                           <source src="{{ $concierge->admin_audio_alert }}" type="audio/mpeg" id="audio_here2">
                           Your browser does not support the audio element.
                        </audio>
                        <br>
                        @endif
                        <a href="{{$concierge->admin_audio_alert ?? '' }}" target="_blank">Admin Audio Alert Link</a>
                     </div>
                  </div>

                  <div class="clearfix"></div>
                  <div class="col-sm-12" style="margin-top:14px;">
                     <div class="col-sm-4"> 
                     <label>Admin Text Alert:</label>    
                     </div>
                     <div class="col-sm-8" id="top">
                     <input type="text" name="admin_text_alert" value="{{ isset($concierge->admin_text_alert) ? $concierge->admin_text_alert:''}}" class="form-control">
                     </div>
                  </div>

                  <div class="clearfix"></div>
                  <div class="col-sm-12" style="margin-top:14px;">
                     <div class="col-sm-4"> 
                     <label>Admin Profile Image</label>    
                     </div>
                     <div class="col-sm-8" id="top">
                     <input type="file" name="admin_profile_image"  onchange="checkimagefile(this);" accept="image/*">
                     @if(isset($concierge->admin_profile_image))
                        <div class="splash-img">
                            <img src="{{$concierge->admin_profile_image}}" />
                        </div>
                    @endif
                     </div>
                  </div>
                  <div class="clearfix"></div>
                  <div class="col-sm-12"  style="margin-top:14px;">
                     <input type="hidden" name="concierge_id" value="{{$concierge->id ?? '' }}">
                     <div class="col-sm-10" align="center">
                        {{ Form::submit('Save', ['class' => 'btn btn-primary', 'style' => 'width:14.5%; margin-top:10px;']) }}
                     </div>
                     <br><br>
                     <br><br>
                     <br><br>
                     {{ Form::close() }}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
<script type="text/javascript" language="javascript">
   $(document).on("change", ".file_multi_audio1", function (evt) {
       //check file type here 
       var $source = $('#audio_here1');
       $source[0].src = URL.createObjectURL(this.files[0]);
       $source.parent()[0].load();
   }); 
   $(document).on("change", ".file_multi_audio2", function (evt) {
       //check file type here 
       var $source = $('#audio_here2');
       $source[0].src = URL.createObjectURL(this.files[0]);
       $source.parent()[0].load();
   }); 
   
   
   function checkaudiofile(sender) {
       var filePath = sender.value;
       // Allowing file type
       var allowedExtensions =
               /(\.mp4)$/i;
       var validExts = new Array(".mp3");
       if (!allowedExtensions.exec(filePath)) {
           alert("Invalid file selected, valid files are of " +
                   validExts.toString() + " types.");
           sender.value = '';
           return false;
       } else
       {
           return true;
       }
   }
   
   function checkfile(sender) {
   
       var validExts = new Array(".mp3");
   
       var fileExt = sender.value;
   
       fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
   
       if (validExts.indexOf(fileExt) < 0) {
   
           alert("Invalid file selected, valid files are of " +
                   validExts.toString() + " types.");
   
           return false;
   
       } else
           return true;
   
   }

   function checkimagefile(sender) {

}

   
</script>