@extends('admin.layouts.app')

@section('styles')
<!-- Plugins css -->
<link href="/AOCN-IANCON-2022/public/assets/admin/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<link href="/AOCN-IANCON-2022/public/assets/admin/plugins/bootstrap-touchspin/css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
<style type="text/css">
    .required{
        color:red;
    }
    .card label{
        font-size: 16px;
        letter-spacing: 1px;
        color: #545454;
    }
    .divider{
        border-bottom: 2px solid rgba(0,0,0,.1);
        margin-top: 5px;
    }
    input[type="file"] {
        display:block;
    }
    .imageThumb {
        max-height: 75px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 5px 1px;
    }
    #img_label {
        display: none;
    }
    #img_div {
        display: none;
    }
    #img_list {
        margin-top: 5px;
        border: 2px solid #ccc;
        border-radius: 5px;
        height: 180px;
        background: #ccc;
    }
</style>
<script type="text/javascript">
    function validateForm() {
        var question = $("#question").val();
        var is_image = $('input[name=is_image]:checked').val();
        var image_length = $("#images").get(0).files.length;
        var ans1 = $("#answer1").val();
        var ans2 = $("#answer2").val();
        var ans3 = $("#answer3").val();
        var ans4 = $("#answer4").val();
        if(question == ""){
            alert("Question is required field.");
            return false;
        }
        if(is_image == "Yes"){
            if(image_length == 0){
                alert("Upload image is required.");
                return false;
            }
        }
        if(ans1 == ""){
            alert("Answer A is required field.");
            return false;
        }
        if(ans2 == ""){
            alert("Answer B is required field.");
            return false;
        }
        if(ans3 == "" && ans4 !== ""){
            alert("Answer C is required field if you fill the answer D.");
            return false;
        }
        return true;
    }
</script>
@endsection

@section('header')
	@include('admin.layouts.header')
@endsection

@section('sidemenu')
	@include('admin.layouts.sidemenu')
@endsection

@section('content')
<div class="content-page">
    <div class="content">
        <div class="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="float-right">
                                <ol class="breadcrumb p-0 m-0">
                                    <li class="breadcrumb-item"><a href="">Admin</a></li>
                                    <li class="breadcrumb-item"><a href="">Voting</a></li>
                                    <li class="breadcrumb-item active">Create Question</li>
                                </ol>
                            </div>
                            <h4 class="page-title">Create Question</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <div class="row">
                        <div class="col-md-12 col-lg-12 col-xl-1"></div>
                        <div class="col-md-12 col-lg-12 col-xl-10">
                            @if(session()->has('success-message'))
                                <div class="alert alert-success text-center">{{ session()->get('success-message') }}</div>
                            @endif
                            @if(session()->has('error-message'))
                                <div class="alert alert-danger text-center">{{ session()->get('error-message') }}</div>
                            @endif

                            <div class="card m-b-20">
                                <div class="card card-body">
                                    <h3 class="card-title font-20 mb-4 text-primary text-center">Create Question</h3>

                                    <div class="row" id="div-single-registration">
                                        <div class="col-sm-1"></div>
                                        <div class="col-sm-10">
                                            <form id="createQuestionForm" name="createQuestionForm" method="POST" action="/AOCN-IANCON-2022/server.php/admin/voting/create-question" enctype="multipart/form-data" onsubmit="return validateForm();">
                                            <!--<form id="createQuestionForm" name="createQuestionForm" method="POST" action="/admin/voting/create-question" enctype="multipart/form-data" novalidate>-->
                                                {{ csrf_field() }}
                                                <div class="row">
												    <label class="col-sm-4 col-form-label">Select Day <span class="required">*</span></label>
                                                    <div class="col-sm-8">
                                                    <select class="form-control" name="changeday" id="changeday"  onchange="myFunction()" required> 
                                                    <option value="" selected>---Select Day---</option>
                                                    <option value="2022-11-02">Day 1 [02 Nov]</option>
                                                    <option value="2022-11-03">Day 2 [03 Nov]</option>
                                                    <option value="2022-11-04">Day 3 [04 Nov]</option>
                                                    <option value="2022-11-05">Day 4 [05 Nov]</option>
                                                    <option value="2022-11-06">Day 5 [06 Nov]</option>

                                                   
                                                    </select> 
                                                    </div>
												    <label class="col-sm-4 col-form-label">Question Type<span class="required">*</span></label>
                                                    <div class="col-sm-8">
                                                        <input class="radio-inline custom-radio-wrapper" type="radio" name="question_type" value="voting" required> Voting<br>
														<input class="radio-inline custom-radio-wrapper" type="radio" name="question_type" value="poll" required> Poll<br>
                                                    </div>
												    
                                                    <label class="col-sm-4 col-form-label">Select Session <span class="required">*</span></label>
                                                    <div class="col-sm-8">
                                                        <select class="form-control" name="session_id" id="session_id" required>
                                                            <option>---Select---</option>
                                                        </select>
                                                    </div>
													
													<label class="col-sm-4 col-form-label">Select Topic <span class="required">*</span></label>
                                                    <div class="col-sm-8">
                                                     <select class="form-control" name="topic_id" id="topic_id" required>

                                                     </select>   
                                                    </div>
												
													<label class="col-sm-4 col-form-label m-t-5">Question <span class="required">*</span></label>
                                                    <div class="col-sm-8 m-t-5">
                                                        <textarea class="form-control" name="question" id="question" rows="4" required></textarea>
                                                        <p class="text-muted m-t-5"><input type="checkbox" name="is_image" id="is_image" value="Yes"> &nbsp;Do you want to add images to explain your question? </p>
                                                    </div>
                                                    <label id="img_label" class="col-sm-4 col-form-label">Upload Images</label>
                                                    <div class="col-sm-8 m-t-5 m-b-10" id="img_div">
                                                        <input type="file" id="images" name="images[]" accept="image/x-png,image/jpeg" multiple />
                                                        <div id="img_list"></div>
                                                        <p class="text-muted m-t-5">Image resolution should be 800x400 for better presentation.</p>
                                                    </div>
                                                     <label class="col-sm-4 col-form-label m-t-5">Question Timing</label>
                                                    <div class="col-sm-8 m-t-5">
                                                        <input type="number" class="form-control" name="question_timing" id="question_timing" min="1" />
                                                    </div>
                                                    <label class="col-sm-4 col-form-label m-t-5">Answer A <span class="required">*</span></label>
                                                    <div class="col-sm-8 m-t-5">
                                                        <input type="text" class="form-control" name="answer1" id="answer1" required>
                                                    </div>
                                                    <label class="col-sm-4 col-form-label m-t-5">Answer B <span class="required">*</span></label>
                                                    <div class="col-sm-8 m-t-5">
                                                        <input type="text" class="form-control" name="answer2" id="answer2" required>
                                                    </div>
                                                    <label class="col-sm-4 col-form-label m-t-5">Answer C </label>
                                                    <div class="col-sm-8 m-t-5">
                                                        <input type="text" class="form-control" name="answer3" id="answer3" >
                                                    </div>
                                                    <label class="col-sm-4 col-form-label m-t-5">Answer D </label>
                                                    <div class="col-sm-8 m-t-5">
                                                        <input type="text" class="form-control" name="answer4" id="answer4" >
                                                    </div>
                                                    <label class="col-sm-4 col-form-label m-t-5">Answer E </label>
                                                    <div class="col-sm-8 m-t-5">
                                                        <input type="text" class="form-control" name="answer5" id="answer5" >
                                                    </div>
													
                                                    <label class="col-sm-4 col-form-label m-t-5" id="correct_answer_label" style="display:none">Correct Answer <span class="required">*</span></label>
                                                    <div class="col-sm-8 m-t-5" id="correct_answer_div" style="display:none">
                                                        <select class="form-control" name="correct_answer" id="correct_answer">
														    <option value="">-Select-</option>
                                                            <option value="A">A</option>
                                                            <option value="B">B</option>
                                                            <option value="C">C</option>
                                                            <option value="D">D</option>
                                                            <option value="E">E</option>
                                                        </select>
                                                    </div>
													<br>
												
												<label class="col-sm-4 col-form-label">Is Dummy</label>
                                                    <div class="col-sm-8">
                                                        <p class="text-muted m-t-5"><input class="radio-inline custom-radio-wrapper" type="checkbox" name="dummy" value="1" >&nbsp; Is Dummy</p><br>
													</div>
                                                </div>
                                                <div class="col-sm-12 mt-4 text-center">
                                                   <button type="submit" class="btn btn-primary" name="save_question">Save</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>

                        </div> <!-- end col -->
                    </div> <!-- end row -->
    </div>
</div>
@endsection

@section('footer')
	@include('admin.layouts.footer')
@endsection

@section('scripts')
<!-- Plugins js -->
<script type="text/javascript">
    function myFunction() {
     var changeday = $('#changeday').val();
          $.ajax({
          url:'/AOCN-IANCON-2022/server.php/admin/voting/voting-questions/gettopic',
          type:'get',
          data:{changeday:changeday},
          success: function(response){
            // console.log(response);
               $('select[name="session_id"]').empty();
              $('select[name="session_id"]').focus;
             $('select[name="session_id"]').append('<option>---Select Session---</option>'); 
              $.each(response, function(key, value){
                        $('select[name="session_id"]').append('<option value="'+ value.session_id +'">' + value.session_name +":" +" " +value.title+" "+value.start_date+" "+value.start_time+" "+value.end_time+  '</option>');
                    });

               
            },
        });
        };
</script>
<script type="text/javascript">
            $(document).ready(function() {
				$("#session_id").change(function() {
                var id = jQuery(this).val();
				if(id)
                  {  
                  jQuery.ajax({
                     url : '/AOCN-IANCON-2022/server.php/admin/voting/create-question/' +id,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {
                        console.log(data);
                        jQuery('select[name="topic_id"]').empty();
                        jQuery.each(data, function(key,value){
                           $('select[name="topic_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });
                     }
                  });
                  }	
                });
				
                $('#is_image').change(function() {
                    if ($('#is_image').is(":checked")){
                        $('#img_label').show();
                        $('#img_div').show();
                    }
                    else{
                        $('#img_label').hide();
                        $('#img_div').hide();
                    }
                });
				
				$('input[name=question_type]').change(function() {
					var radioValue = $("input[name='question_type']:checked").val();
					//alert(radioValue);
					if(radioValue === "voting")
					{
					$("#correct_answer_label").show();
					$("#correct_answer_div").show();
                    $("#correct_answer").attr("required", true);					
					}
					else
					{
					$("#correct_answer_label").hide();
					$("#correct_answer_div").hide();
                    $("#correct_answer").attr("required", false);					
					}	
				     
                });

                $("#answer4").keyup(function(){
                    var val = $("#answer3").val();
                    if(val == ""){
                        alert("First fill answer 3.");
                        $(this).val("");
                    }
                });

                if(window.File && window.FileList && window.FileReader) {
                    $("#images").on("change",function(e) {
                        $("#img_list").html('');
                        var c = 0;
                        var files = e.target.files,
                        filesLength = files.length;
                        for (var i = 0; i < filesLength ; i++) { 
                            var f = files[i]
                            var fileReader = new FileReader();
                            fileReader.onload = (function(e) {
                                var file = e.target; 
                                c++;
                                $("<img></img>",{
                                    class : "imageThumb",
                                    src : e.target.result,
                                    title : file.name
                                }).appendTo("#img_list");
                                $("<input>",{
                                    type : "hidden",
                                    name : "image"+c,
                                    value : e.target.result
                                }).appendTo("#img_list");
                            });
                            fileReader.readAsDataURL(f);
                        }
                    });
                }
                else { 
                    alert("Your browser doesn't support to File API");
                }
            });
        </script>
        <script src="/AOCN-IANCON-2022/public/assets/admin/plugins/select2/js/select2.min.js" type="text/javascript"></script>
<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>

@endsection