@extends('layouts.admin', ['title' => 'گزارشات کلاب'])

@section('content')


<div class="row">
	<div class="col-md-8">

		<h3>گزارشات کلاب</small>


			<a href="{{ route('admin.customers-club.usersreport') }}" class="btn btn-link">بازگشت</a>

		</h3>

	</div>
	<div class="col-md-4 text-left">

	</div>
</div>
<div class="row">
	<div class="col-md-6">

		<form action="{{ url()->full() }}" method="POST">
			@csrf
			<div class="row">
				<div class="col-md-6">
					<div class="form-group">
						<label for="type">نوع پیام</label>
						<select name="type" id="type" class="form-control">
							<option selected value="">انتخاب کنید</option>
							<option value="sms">پیامک</option>
							<option value="notification">نوتیفیکیشن</option>
							<option value="email">ایمیل</option>
						</select>
					</div>
				</div>
			</div>

			<div class="form-group">
				<label for="defaultMessage">پیام پیش فرض</label>
				<select id="defaultMessage" class="form-control">
					<option selected value="">انتخاب کنید...</option>
				</select>
			</div>

			<div class="form-group">
				<label for="title">عنوان پیام</label>
				<input type="text" name="title" id="title" class="form-control" />
			</div>

			<div class="form-group">
				<label for="defaultMessage">متن پیام</label>
				<textarea name="content" id="content" class="form-control" rows="6"></textarea>
			</div>

			<p>توجه: این پبام برای <span style="color:red;">{{ $data->count() }}</span> نفر ارسال خواهد شد.</p>

			<button type="submit" class="btn btn-primary">ارسال پیام</button>
		</form>

	</div>
</div>
@stop

@section('javascript')
<script>
	var data = {!! json_encode($defaultMessages->toArray()) !!} ;
	$(document).ready(function(){
		 $('#type').change(function(){
			var type = $(this).val();
			loadDefaultMessage(type); 
		 });

		 $('#defaultMessage').change(function(){
			var id = $(this).val(); 
			getTitleAndContent(id);
		 });
	});

	function getTitleAndContent(id)
	{
		$('#title').val('');
		$('#content').val('');

		data.forEach(function(item) {
			if(id == item.id)
			{
				$('#title').val(item.title);
				$('#content').val(item.content);
			}
		});
	}

	function loadDefaultMessage(type)
	{
		//remove all options list except first item
		$('#defaultMessage option').each(function(){
			if($(this).attr('value') != '')
				$(this).remove();
		});

		data.forEach(function(item) {
			if(type == item.type)
			{
				$('#defaultMessage').append(`<option value="${item.id}">${item.title}</option>`);
			}
		}); 
	}

</script>
@endsection