@extends('layouts.admin_template')
@section('content')
<!-- container Start -->
<div class="container-fluid px-3 px-xxl-5">
	<div class="titel-head pb-4">
        <h1>@lang('translate.send_email')</h1>
	</div>
	<div class="flash-message">
		@foreach (['danger', 'warning', 'success', 'info'] as $msg)
		@if(Session::has('alert-' . $msg))
		<div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
			<strong>{{ ucfirst(($msg == 'danger') ? "Error" : $msg) }}!</strong> {{ Session::get('alert-' . $msg) }}
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>
		@endif
		@endforeach
	</div>
	<div class="bg-dark rounded-3 px-4 py-4 px-xl-6 py-xl-5 mb-4">
        <form role="form" method="post" action="{{ url('/admin/sendemailstore') }}">
			@csrf
			<div class="row gx-4 gx-xl-5">
				<div class="col-sm-12 col-md-6 col-lg-6">
					<div class="mb-4">
						<label for="sentto" class="form-label">@lang('translate.send_to') <span class="required-mark">*</span></label>
						<select class="form-control form-control-lg bg-secondary @error('sentto') is-invalid @enderror" name="sentto" id="sentto">
							<option value="all">@lang('translate.all_crm_users')</option>							
							<option value="selectedusers">@lang('translate.selected_users')</option>								
							<option value="selectgroup">Send To Group User</option>			
						</select>
						@error('sentto')
						<div class="invalid-feedback">
							{{ $message }}
						</div>
						@enderror
					</div>
				</div>
			</div>
			<div class="row gx-4 gx-xl-5" id="SelectedUsersList">
				<div class="col-sm-12 col-md-6 col-lg-6">
					<div class="mb-4">
						<label for="selectedusers" class="form-label">@lang('translate.select_users') <span class="required-mark">*</span></label>
						<select class="form-control useremailajax @error('selectedusers') is-invalid @enderror" name="selectedusers[]" id="useremailajax" multiple>
						</select>
						@error('selectedusers')
						<div class="invalid-feedback">
							{{ $message }}
						</div>
						@enderror
					</div>
				</div>
			</div>

			<div class="row gx-4 gx-xl-5" id="SelectedGroupList">
				<div class="col-sm-12 col-md-6 col-lg-6">
					<div class="mb-4">
						<label for="selectedgroups" class="form-label">Select Group <span class="required-mark">*</span></label>
						<select class="select2 form-control @error('selectedgroups') is-invalid @enderror" name="selectedgroups" id="selectedgroups">
							@foreach($grouplist as $group)
								<option value="{{$group->mtgroup}}">{{$group->name}}({{$group->mtgroup}})</option>
							@endforeach
						</select>
						@error('selectedgroups')
						<div class="invalid-feedback">
							{{ $message }}
						</div>
						@enderror
					</div>
				</div>
			</div>

			<div class="row gx-4 gx-xl-5">
				<div class="col-sm-12 col-md-6 col-lg-6">
					<div class="mb-4">
						<label for="subject" class="form-label">@lang('translate.subject') <span class="required-mark">*</span></label>
						<input name="subject" class="form-control form-control-lg @error('subject') is-invalid @enderror" id="subject" placeholder="@lang('translate.enter_subject')">
						@error('subject')
						<div class="invalid-feedback">
							{{ $message }}
						</div>
						@enderror
					</div>
				</div>
			</div>
			<div class="row gx-4 gx-xl-5">
				<div class="col-sm-12 col-md-6 col-lg-6">
					<div class="mb-4">
						<label for="body" class="form-label">@lang('translate.body') <span class="required-mark">*</span></label>
						<textarea class="form-control ckeditor form-control-lg @error('body') is-invalid @enderror" id="body" name="body" rows="20" cols="80">{{ old('body') }}</textarea>
						@error('body')
						<div class="invalid-feedback">
							{{ $message }}
						</div>
						@enderror
					</div>
				</div>
			</div>
			<div class="row gx-4 gx-xl-5">
				<div class="col-md-12 pt-2">
					<button class="btn btn-primary btn-xs font-15" type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();">@lang('translate.submit')</button>
				</div>
			</div>
		</form>
	</div>
</div>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/37.0.1/classic/ckeditor.js"></script>
<script type="text/javascript">
	$(function() {
		$('#SelectedUsersList').hide();
		$('#SelectedGroupList').hide();
		$("#sentto").change(function() {
			if($(this).val() == 'selectedusers'){
				$('#SelectedUsersList').show();
				$('#SelectedGroupList').hide();				
			}
			else if ($(this).val() == 'selectgroup') {
				$('#SelectedUsersList').hide();
				$('#SelectedGroupList').show();
			}
			else{
				$('#SelectedUsersList').hide();
				$('#SelectedGroupList').hide();
			}
		});
		window.addEventListener("load", (e)=>{
			ClassicEditor.create( document.querySelector( '#body' ) )
			.then( editor => {
				//console.log( editor );
			} )
			.catch( error => {
				//console.error( error );
			} );
		});
	});
</script>
@endsection