@extends('admin.layout.master')

@section('content')
<div class="app-content  my-3 my-md-5">
		<div class="side-app">
			<div class="page-header">
				<h4 class="page-title">Create Notification</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{route('admin.notification.list')}}">Notification</a></li>
					<li class="breadcrumb-item active" aria-current="page">Create Notification</li>
				</ol>

			</div>
			<div class="row ">
			<div class="col-md-12">
				<div class="card">
					@if(Session::has('success'))

						<div class="alert alert-primary">
							<p>{{ Session::get('success') }}</p>
						</div>

					@endif
					<div class="card-header">
						<div class="col-xl-10 col-lg-10 col-md-10">
							<h3 class="card-title">Send Notification</h3>
						</div>
					</div>
					<div class="card-body">
						<form class="card" method="post" action="{{ route('admin.notification.send')}}" enctype="multipart/form-data">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Send Notification</h3>
						</div>
						<div class="card-body">	
							<div class="col-sm-6 col-md-12">
								<div class="form-group">
									<div class="row">
		                          	<label class="control-label col-md-3 col-sm-3 col-xs-3" for="name">Distribution Type</label>
		                            <div class="col-md-3 col-sm-3 col-xs-3">Broadcast
		                                <label class="switch">
		                                  <input type="checkbox" name="distribution_type1" value="1" checked>
		                                  <span class="slider round"></span>
		                                </label>
		                            </div>
		                            <div class="col-md-3 col-sm-3 col-xs-3">individual
		                                <label class="switch">
		                                  <input type="checkbox" name="distribution_type2" value="1">
		                                  <span class="slider round"></span>
		                                </label>
		                            </div>
		                        	</div>
	                            </div>
	                        </div>
							<div class="col-sm-6 col-md-12 circleDiv" style="display: none;">
								<div class="form-group">
									<label class="form-label">Choose Circles</label>
									<select class="form-control col-md-12" name="circle" id="circle">
										<option value="">Choose Circles</option>
										@if($circles)
											@foreach($circles as $circle)
												<option value="{{$circle->circle_code}}">{{$circle->circle_code.' ('.date('d-m-Y H:i:s', strtotime($circle->created_at)).')'}}</option>
											@endforeach
										@endif
									</select>
									@if ($errors->has('circle'))
		                                <span class="help-block" style="color:red;">
		                                    <strong>{{ $errors->first('circle') }}</strong>
		                                </span>
		                            @endif
								</div>
							</div>
							<div class="col-sm-6 col-md-12 userDiv" style="display: none;">
								<div class="form-group">
									<label class="form-label">Choose Users</label>
									<select class="form-control  col-md-12" name="user[]" id="user" multiple>
										<option value="">Choose Users</option>
										@if($users)
											@foreach($users as $user)
												<option value="{{$user->id}}">{{$user->first_name.' '.$user->last_name.' ('.$user->mobile_country_code.$user->mobile_number.')'}}</option>
											@endforeach
										@endif
									</select>
									@if ($errors->has('user'))
		                                <span class="help-block" style="color:red;">
		                                    <strong>{{ $errors->first('user') }}</strong>
		                                </span>
		                            @endif
								</div>
							</div>
							<div class="col-sm-6 col-md-12">
								<div class="form-group">
									<label class="form-label">Content</label>
									<textarea class="form-control col-md-12" name="content" id="content"></textarea>
									<p style="float: right;"></p>
									@if ($errors->has('content'))
		                                <span class="help-block" style="color:red;">
		                                    <strong>{{ $errors->first('content') }}</strong>
		                                </span>
		                            @endif
								</div>
							</div>	
							<div class="col-sm-6 col-md-12">
								<div class="form-group">
									<label class="form-label">Icon</label>
									<input type="file" class="form-control col-md-12" name="notification_icon" id="notification_icon">
									(Recomended size: 100px X 100px and should be JPEG, PNG, JEPG format)
									@if ($errors->has('notification_icon'))
		                                <span class="help-block" style="color:red;">
		                                    <strong>{{ $errors->first('notification_icon') }}</strong>
		                                </span>
		                            @endif
								</div>
							</div>							
						</div>
						<div class="card-footer text-center">
							<a href="{{route('admin.notification.list')}}" class="btn btn-secondary btn-lg custom-btn mr-2">Cancel</a>
							<button type="submit" class="btn btn-primary btn-lg custom-btn mr-2">Send</button>
						</div>
						</form>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</div>

@endsection
@section('scripts')
<style>
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #2196F3 !important; color: #fff !important; }
.select2-selection__choice__remove { color: #fff !important; }
.select2 { width: 100% !important; }
.switch {
  position: relative;
  display: inline-block;
  width: 41px;
  height: 16px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 11px;
  width: 11px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript">
	var baseURL = "{{url('/')}}";
	var csrf_token = "{{csrf_token()}}";
	$('#user').select2();
	$('input[name="distribution_type1"]').click(function(){
		$('input[name="distribution_type2"]').click();
		if(!$('input[name="distribution_type1"]').is(':checked')) {
			$('.circleDiv').show();
			$('.userDiv').show();
		} else {
			$('.circleDiv').hide();
			$('.userDiv').hide();
		}
	})
	$('input[name="distribution_type2"]').click(function(){
		$('input[name="distribution_type1"]').click();
		if($('input[name="distribution_type1"]').is(':checked')) {
			$('.circleDiv').hide();
			$('.userDiv').hide();
		} else {
			$('.circleDiv').show();
			$('.userDiv').show();
		}
	})
	$('body').on('change', '#circle', function(){
		var that = $(this);
		var circle_code = that.val();
		$.ajax({
          	data : { circle_code : circle_code },
          	url: `${baseURL}/admin/notification/getUsers`,
          	type: "POST",
          	headers: {
              	'X-CSRF-TOKEN': csrf_token,
              	'_token' : csrf_token
          	},    
          	dataType: 'JSON',
          	success:function (data) {
              	if (data.status == 200){
              		$('#user').html(data.data);	                
              	}
          	}, error:function (err) {                       
                    
          	}
      	})
	})
	$('#content').keyup(delay(function (e) {
	    if($(this).val().length > 70) {
	      	$(this).val($(this).val().substring(0, 70));
	    } else {
	      	$(this).next().html(70-parseInt($(this).val().length)+' characters left');
	    }
	}, 500));

	$('#notification_icon').on('change', function (e) {
        	var ext = this.files[0].name.split('.').pop().toLowerCase();
        	if($.inArray(ext, ['png','jpg','jpeg']) == -1) {
			    alert('Please choose image in png, jpg, jpeg format');
				$(this).val('');
			} else {
	            var _URL = window.URL || window.webkitURL;
	            var file = $(this)[0].files[0];
				img = new Image();
		        img.src = _URL.createObjectURL(file);
		        img.onload = function() {
		            if(this.width > 100 || this.height > 100 ) {
		            	alert('Recomended size: 100px X 100px');
		            	$('#notification_icon').val('');
		            }
		        }
       		}
        });

	function delay(callback, ms) {
	    var timer = 0;
	      return function() {
	      var context = this, args = arguments;
	      clearTimeout(timer);
	      timer = setTimeout(function () {
	        callback.apply(context, args);
	      }, ms || 0);
	    };
	}
</script>
@endsection