@extends('back.layouts.main')
@if ($model->exists)
@section('title', 'تعديل اشعار #' . $model->id)
@else
@section('title', 'انشاء اشعار ')
@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='1'>
					<div class="w-100"></div>

					<div class='col-md-6 form-group'>
						<label for="MessageContent">عنوان الرسالة (في حالة ال notifications)</label>
						<input required type='text' class='form-control' name='Message[title]' value='{{ $model->title }}'>

					</div>
					<div class='col-md-6 form-group'>
						<label for="MessageContent"> عنوان الرسالة EN (في حالة ال notifications)</label>
						<input type='text' class='form-control' name='Message[title_en]' value='{{ $model->title_en }}'>

					</div>

					
					<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>
					<div class='col-md-6 form-group'>
						<label for="MessageImage">الصورة (في حالة ال notifications)</label>
						<input type="file" name='Message[image]' class="form-control" id="MessageImage"
							placeholder="Enter Image" value='{{ $model->image }}'>
						@if ($model->image != '')
						<img src={{ url('uploads/' . $model->image) }} style='width:100px;margin-top: 10px;'>
						@endif

					</div>


					@include('back.message._filter')
					
					<div class='col-md-12'>
						<h3>الصفحات </h3>
					</div>
					<div class='col-md-4'>
						<label for="">لنك خارجي</label>
						<input type="text" class="form-control" name="Message[link]" value='{{ $model->link }}'>
					</div>
					<div class='col-md-4'>
						<label for="">او اختر الصفحة الداخلية</label>
						<select name="Message[page]" class="form-control">
							<option value=""> اختر الصفحة </option>
							@foreach ($pages as $page)
								<option {{ selected($page['page'], $model->page) }} value="{{ $page['page'] }}">
									{{ $page['page'] }}
								</option>
							@endforeach
						</select>

						<label for="">ID الصفحة </label>
						<input type="text" class="form-control" name="Message[page_params][id]"
							value='{{ @$model->page_params['id'] }}'>
					</div>

				</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/sms') }}">الرسائل</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