@extends('back.layouts.main')
@if ($model->exists)
@section('title', 'تعديل sms #' . $model->id)
@else
@section('title', 'انشاء sms ')
@endif

@section('content')
<div class="card">
	<div class="card-content collapse show">
		<div class="card-body card-dashboard">
			<form method='post' enctype="multipart/form-data">
				@csrf
				<div class="message-form row">
					<input type='hidden' name='Message[type]' value='2'>					
					
					<div class='col-md-6 form-group'>
						<label for="MessageContent">المحتوى</label>
						<div data-emojiarea data-type="unicode" data-global-picker="false">
							<div class="emoji-button">&#x1f604;</div>
							<textarea name='Message[content]' class="form-control" id="MessageContent" required
								placeholder="محتوى الرسالة">{!!  $model->content !!}</textarea>
						</div>
						<br>
					</div>
					<div class='col-md-6 form-group'>
						<label for="MessageContent">المحتوى EN</label>
						<div data-emojiarea data-type="unicode" data-global-picker="false">
							<div class="emoji-button">&#x1f604;</div>
							<textarea name='Message[content_en]' class="form-control" id="MessageContent" 
								placeholder="محتوى الرسالة EN"  >{!!  $model->content_en !!}</textarea>
						</div>
						<br>
					</div>
				
					@include('back.message._filter')
				</div>


				<div class='clearfix'></div>
				<div class="col-md-12">
					<br>
					<input type='submit' value='حفظ' name='save' class='btn btn-primary'>
					@if ($model->exists)
					<button type="submit" name='resend' class="btn btn-success">تعديل واعادة الارسال</button>
					@else
					<button type="submit" name='save' class="btn btn-success"> ارسال</button>
					@endif
				</div>
			</form>
		</div>
	</div>

	@if (isset($errors))
	@push('footer')
	{!! $model->viewErrors() !!}
	@endpush
	@endif
	@stop
	@section('breadcrumbs')
	<li class="breadcrumb-item"><a href="{{ url('backend/message/notifications') }}">الرسائل</a></li>
	@if ($model->exists)
	<li class="breadcrumb-item active">تعديل</li>
	@else
	<li class="breadcrumb-item active">انشاء</li>
	@endif
	@stop
	@push('footer')
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
	<script>
		$('.radiobutton input').change(function(){
			$('.tab').hide();
			$('.tab input').val('');
    		var val = $(this).val();
			$('.'+val).show();
    	})
		$('.selectUser').select2({
			ajax: {
				url: 'user/select_user',
				processResults: function (data, params) {
					data = $.parseJSON(data) ;
					return data ;
				}	
			},
				minimumInputLength: 2,
		});

		$('#message-type').change(function(){
			var val = $(this).val();
			if(val == 1)
				$('.custom_number').hide();
			else
				$('.custom_number').show();
			
		})

       $('#message-type').trigger('change');
       $('.radiobutton input').each(function(){
           if($(this).is(':checked')){
               $(this).trigger('change');
           }
       })
	</script>
	<style>
		.radiobutton {
			width: 160px;
			display: inline-block;
		}
	</style>
	@endpush
	@push('footer')
	<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
	<script>
		$('.daterange').daterangepicker({
                autoUpdateInput: false,                
                locale: {
                    format: 'YYYY/MM/DD',
                    cancelLabel: 'Clear'
                }
            });
            
            $('.daterange').on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
                $('.search input[type=submit]').trigger('click');
            });

             $('.daterange').on('cancel.daterangepicker', function (ev, picker) {
                 $(this).val('');
                 $('.search input[type=submit]').trigger('click');
             });
             $('.timerange').daterangepicker({
                 timePicker: true,
                 timePicker24Hour: true,
                 timePickerIncrement: 1,
                 timePickerSeconds: true,
                 locale: {
                     format: 'HH:mm:ss'
                 }
             }).on('show.daterangepicker', function (ev, picker) {
                 picker.container.find(".calendar-table").hide();
             });
	</script>

	<script>
		$('#emirate_id').change(function(){
                 var val = $(this).val();
                 $('#region_id').css('background' , '#f2f2f2') ;
                 $('#region_id option').each(function(){
                     if($(this).val() == '')$(this).attr('selected') ;
                     
                     if($(this).data('emirate_id') != val){
                         $(this).hide();
                         $(this).removeAttr('selected') ;
                     }
                     else
                         $(this).show();
                 }) ;
                 setTimeout(function(){
                     $('#region_id').css('background' , 'white') ;			
                 } , 500)
             })
	</script>
	<link rel="stylesheet" href="../admin/app-assets/js/scripts/emoji/assets/css/style.css">
	<script src="../admin/app-assets/js/scripts/emoji/assets/js/jquery.emojiarea.js"></script>
	@endpush
	@push('header')
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
	@endpush
	@push('footer')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
	<style>
		.select2-search__field {
			text-align: right !important;
		}
	</style>
	<script>
		$('.purpose-select2').select2({
            placeholder : 'الغرض',
            align:'right'
        });
	</script>
	@endpush