@extends('layouts/layout')
@section('title', 'Send Notifications')
@push('style')
@endpush

@section('content')
@if ($message = Session::get('success'))
@include('sweetalert::alert')
@endif
    <!-- page content -->
			<div class="" role="main">
				<div class="">
					<div class="row">
						<div class="col-md-12 col-sm-12 mt-2">
							<div class="x_panel">
								<div class="x_title">
									<h2>Send Notifications</h2>
									
									<div class="clearfix"></div>
								</div>
								<div class="x_content mt-0 p-0">
                                <form action="{{url('notificationsend')}}" method="post" class="mb-3">
                                        @csrf
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Message Name</label>
                                                <select class="select2 form-control" name="message" id="message" data-toggle="select2">
                                                    <option value="" selected>Select Message Name</option>
                                                    @foreach($messages as $message)
                                                        <option value="{{$message->template_id}}">{{$message->templates_purpose}}</option>
                                                        <!-- <option value="{{$message->template_id}}">{!! html_entity_decode($message->body, ENT_QUOTES, 'UTF-8') !!}</option> -->
                                                    @endforeach    
                                                </select>
                                                <span id="message_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">User Type</label>
                                                <select class="select2 form-control" name="user" id="user" data-toggle="select2">
                                                    <option value="User">User</option>
                                                    <option value="Client">Client</option>
                                                </select>
                                                <span id="user_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Designation</label>
                                                 <select class="custome-dropdown form-control select2" id="RoleId" name="rolemultiple[]" data-placeholder="Select Designations" data-toggle="select2" multiple="multiple">
                                                 @foreach($roles as $role)
                                                        <option value="{{$role->id}}"                                                            >{{$role->display_name}}</option>
                                                    @endforeach
                                                </select>
                                                <span id="RoleId_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">User Name</label>
                                                <select class="custome-dropdown form-control select2" id="UserId" name="usermultiple[]" data-placeholder="Select User Name" multiple="multiple" data-toggle="select2">
                                                    @foreach($users as $user)
                                                        <option value="{{$user->id}}">{{$user->name}}</option>
                                                    @endforeach   
                                                </select>
                                                <span id="UserId_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                            <div class="form-group">
                                                <label class="mb-1">Description</label><hr>
                                                <span id="description" name="description" value=""></span>
                                                <span id="description_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <input id="descriptions" name="descriptions" class="d-none">
										<div class="form-group ">
											<div class="col-md-6 col-sm-6 offset-md-5 mt-3">
												<button type="submit" id="send_notification" class="btn btn-round btn-primary">Submit</button>
											</div>
										</div>
									</form>
                                   
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /page content -->
    @endsection
@push('scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
    $(document).ready(function(){
        $('.select2').select2();
    });
</script>
<script>
$(document).ready(function() {
    $("#send_notification").on('click', function() {
        var error_msg = "";

        if ($("#message").val() == "") {
            $("#message_error").text("Please Select Message Name.");
            error_msg = "Error";
        } else {
            $("#message_error").text("");
        }

        if ($("#user").val() == "") {
            $("#user_error").text("Please select User type.");
            error_msg = "Error";
        } else {
            $("#user_error").text("");
        }

        if ($("#UserId").val() == "") {
            $("#UserId_error").text("Please select User.");
            error_msg = "Error";
        } else {
            $("#UserId_error").text("");
        }

        if ($("#RoleId").val() == "") {
            $("#RoleId_error").text("Please select Designation.");
            error_msg = "Error";
        } else {
            $("#RoleId_error").text("");
        }
        if (error_msg) {
            return false;
        }
    });

});
</script>
<script>
    $(document).ready(function () {
        $('#user').on('change', function() {
            var user = $('#user').val();
              $("#RoleId").html('');
                $.ajax({
                    url: "{{url('loadroles')}}",
                    type: "post",
                    data: {
                        user : user,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                         console.log(res);
                         if(res == "Clients")
                         {
                            $("#RoleId").append('<option value="Client">' + "Client" + '</option>');
                         }
                         else
                         {
                            $.each(res,function(key, value){
                                console.log(key, value);
                                $("#RoleId").append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                            });
                        }
                    }
                });
           });
       });
</script>
<script>
    $(document).ready(function () {
        $('#RoleId').on('change', function() {
            var RoleId = $('#RoleId').val();
            var Usertype = $('#user').val();
              $("#UserId").html('');
                $.ajax({
                    url: "{{url('loadusers')}}",
                    type: "post",
                    data: {
                        lang_arr : RoleId,
                        Usertype : Usertype,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                         console.log(res);
                        $.each(res,function(key, value){
                            if(Usertype == "Client")
                            {
                                        $("#UserId").append('<option value="' + value
                                .client_id + '">' + value.client_name + '</option>');
                            }else{
                                        $("#UserId").append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                            }
                       
                        });
                    }
                    });
           });
       });
</script>

<script>
    $(document).ready(function () {
        $('#message').on('change', function() {
            var message = $('#message').val();
              $("#description").html('');
                $.ajax({
                    url: "{{url('loadmessages')}}",
                    type: "post",
                    data: {
                        message : message,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                         console.log(res);
                            //$("#description").text(res.body);
                          
                            $.each(res,function(key, value){
                                $("#descriptions").val(value.body);
                            $("#description").append('<span class="">' + value.body + '</span>');
                           
                            });
                         }
                   
                });
           });
       });
</script>
@endpush