@extends('master')
@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/13.0.2/css/intlTelInput.css">
<style>
	.intl-tel-input {width: 100%;}
	.hide {display: none;}
	label {
		font-weight: bold;
	}
</style>
@endsection

@section('content')
<div class="container-fluid">
	<div class="animate fadeIn">
		<h4>
			{{ __('uum.managealerts') }}
		</h4>
		<hr>
		<div>
			<form action="{{ route('managealerts') }}" method="post" id="ajaxform">
				@csrf
				<span id="successmsg" style="display:none;">{{ __('uum.settingssaved') }}</span>
				<div class="row">
					<div class="form-group col-md-7 col-sm-12">
						<label for="notification_email">{{ __('uum.notifemail') }}</label>
						<input name="notification_email" type="text" class="form-control" placeholder="{{ __('uum.notifemailplace') }}" value="{{ $user->setting('notification_email') }}">
						@if($errors->has('notification_email'))
						<p class="help-block text-danger">{{ $errors->first('notification_email') }}</p>
						@endif
					</div>
				</div>
				<div class="row">
					<div class="form-group col-md-7 col-sm-12">
						<label for="slack_webhook">{{ __('uum.slackwebhook') }}</label>
						<input name="slack_webhook" type="text" class="form-control" placeholder="{{ __('uum.slackplace') }}" value="{{ $user->setting('slack_webhook') }}">
						@if($errors->has('slack_webhook'))
						<p class="help-block text-danger">{{ $errors->first('slack_webhook') }}</p>
						@endif
					</div>
				</div>
				<div class="row">
					<div class="form-group col-md-7 col-sm-12">
						<label for="webhook_url">{{ __('uum.customwebhook') }}</label>
						<input name="webhook_url" type="text" class="form-control" placeholder="{{ __('uum.webhookplace') }}" value="{{ $user->setting('webhook_url') }}">
						@if($errors->has('webhook_url'))
						<p class="help-block text-danger">{{ $errors->first('webhook_url') }}</p>
						@endif
					</div>
				</div>
				<div class="row">
					<div class="form-group col-md-7 col-sm-12">
						<label for="pushbullet_token">{{ __('uum.pushbullettoken') }}</label>
						<input name="pushbullet_token" type="text" class="form-control" placeholder="{{ __('uum.pushbullettokenplace') }}" value="{{ $user->setting('pushbullet_token') }}">
						@if($errors->has('pushbullet_token'))
						<p class="help-block text-danger">{{ $errors->first('pushbullet_token') }}</p>
						@endif
					</div>
				</div>
				<div class="row">
					<div class="form-group col-md-7 col-sm-12">
						<label for="default_sms_provider">{{ __('uum.defaultsmsprovider') }}</label>
						<select name="default_sms_provider" class="form-control" id="default_sms_provider">
							@foreach($providers as $key => $val)
							<option value="{{ $key }}" @if($user->setting('default_sms_provider') == $key) selected @endif>{{ $val }}</option>
							@endforeach
						</select>
						@if($errors->has('nexmo_from_number'))
						<p class="help-block text-danger">{{ $errors->first('nexmo_from_number') }}</p>
						@endif
					</div>
				</div>
				<div class="row" id="smsprovider_config">
				</div>
				<div class="row">
					<div class="form-group col-md-7 col-sm-12">
						<label for="mobile_number">{{ __('uum.mobilenumber') }}</label>
						<input id="phone" name="mobile_number" type="tel" class="form-control" placeholder="{{ __('uum.mobplace') }}" value="{{ $user->setting('mobile_number') }}">
						<span id="valid-msg" style="color:green;" class="hide">✓ {{ __('uum.mobileisvalid') }}</span>
						<span id="error-msg" style="color:red;" class="hide">{{ __('uum.mobileisinvalid') }}</span>
						@if($errors->has('mobile_number'))
						<p class="help-block text-danger">{{ $errors->first('mobile_number') }}</p>
						@endif
					</div>
				</div>
				@foreach(['slack', 'email', 'sms', 'webhook', 'pushbullet'] as $channel)
				<div class="row">
					<div class="form-group col-md-7 col-sm-12">
						<span>{{ __('uum.notifyvia', ['channel' => strtoupper($channel)]) }}</span>
						<label class="switch switch-icon switch-pill switch-success pull-right">
							                    <input name="{{ $field }}" type="checkbox" class="switch-input" @if($user->setting($field)) checked=""@endif>
                    <span class="switch-label" data-on="" data-off=""></span>
                    <span class="switch-handle"></span>
                  </label>
					</div>
				</div>
				@endforeach
				<div class="row">
					<div class="form-group col-md-7 col-sm-12">
						<button id="ajaxsubmitbtn" class="btn btn-primary">{{ __('uum.updatesettings') }}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection

@section('myscript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/13.0.2/js/intlTelInput.min.js"></script>
<script src="{{ asset('js/custom/telephone-input.js') }}"></script>
<script src="{{ asset('js/custom/ajax-submit.js') }}"></script>
<script>
	function load_provider_settings() {
		$("#ajaxform :input").prop("disabled", true);
		$('#smsprovider_config').html('');
		var getUrl = '{{ route('loadprovidersettings') }}';
		var provider = $('#default_sms_provider').val();
		$.get(getUrl+'?provider='+provider, function(data) {
			$("#ajaxform :input").prop("disabled", false);
			$('#smsprovider_config').hide().html(data).fadeIn();
		});
	}
	$(document).ready(function() {
		load_provider_settings();
	});

	$(document).on('change', '#default_sms_provider', function() {
		load_provider_settings();
	});
</script>
@endsection