@extends('event.layouts.app')

@section('styles')
<!-- Plugins css -->
<link href="{{ URL::asset('assets/admin/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('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;
    }
     #slabel {
        display: none;
    }
    #sdiv {
        display: none;
    }
    #img_label {
        display: none;
    }
    #img_div {
        display: none;
    }
    
     #vd_label {
        display: none;
    }
    #vd_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('event.layouts.header')
@endsection

@section('sidemenu')
	@include('event.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">Edit Question</li>
                                </ol>
                            </div>
                            <h4 class="page-title">Edit 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">Edit Question</h3>

                                    <div class="row" id="div-single-registration">
                                        <div class="col-sm-1"></div>
                                        <div class="col-sm-10">
                                            @if($qdetails != '')
                                            <form id="createQuestionForm" name="createQuestionForm" method="POST" action="/BNA/public/admin/voting/edit-question/{{ $qdetails[0]->question_id }}" 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 for="staticEmail" class="col-sm-4 col-form-label m-t-5">Select Event <span class="required">*</span></label>
                                                    <div class="col-sm-8">
                                                        <select class="form-control" name="event" id="event" required>
                                                            @foreach($events as $val)
                                                                @if($val->id == $qdetails[0]->event_id)
                                                                <option value='{{ $val->id }}' selected>{{ $val->name }}</option>
                                                                @else
                                                                <option value='{{ $val->id }}'>{{ $val->name }}</option>
                                                                @endif
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    
                                                    <label id="slabel" class="col-sm-4 col-form-label m-t-5">Select Session </label>
                                                    <div class="col-sm-8" id="sdiv">
                                                        <select class="form-control" name="session" id="session" onchange="gettopics();">
                                                            <option value='{{ $qdetails[0]->session_id }}' >Select Session</option>
                                                            
                                                        </select>
                                                    </div>
													
													<label class="col-sm-4 col-form-label m-t-5">Select Topic <span class="required">*</span></label>
                                                    <div class="col-sm-8"> 
                                                     <select class="form-control" name="topic_id" id="topic_id" required>
                                                        <option value='{{ $qdetails[0]->topic_id }}' >Select Topic</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" @if($qdetails[0]->question_type == 'voting') checked @endif required> Voting<br>
														<input class="radio-inline custom-radio-wrapper" type="radio" name="question_type" value="poll" @if($qdetails[0]->question_type == 'poll') checked @endif required> Poll<br>
                                                    </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" value="{{ $qdetails[0]->question }}" required>{{ $qdetails[0]->question }}</textarea>
                                                        <p class="text-muted m-t-5"><input type="checkbox" name="is_image" id="is_image" value="Yes" @if($qdetails[0]->image1 != '') checked @endif> &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">
                                                            @if($qdetails[0]->image1 != '')
                                                            <img class="imageThumb" src="/BNA/public/uploads/voting/img/{{ $qdetails[0]->image1 }}">
                                                            @endif
                                                            @if($qdetails[0]->image2 != '')
                                                            <img class="imageThumb" src="/BNA/public/uploads/voting/img/{{ $qdetails[0]->image2 }}">
                                                            @endif
                                                            @if($qdetails[0]->image3 != '')
                                                            <img class="imageThumb" src="/BNA/public/uploads/voting/img/{{ $qdetails[0]->image3 }}">
                                                            @endif
                                                            @if($qdetails[0]->image4 != '')
                                                            <img class="imageThumb" src="/BNA/public/uploads/voting/img/{{ $qdetails[0]->image4 }}">
                                                            @endif
                                                            @if($qdetails[0]->image5 != '')
                                                            <img class="imageThumb" src="/BNA/public/uploads/voting/img/{{ $qdetails[0]->image5 }}">
                                                            @endif
                                                        </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"></label>
                                                    <div class="col-sm-8 m-t-5">
                                                    <p class="text-muted m-t-5"><input type="checkbox" name="is_video" id="is_video" value="Yes" @if($qdetails[0]->video != '') checked @endif> &nbsp;Do you want to add video to explain your question? </p>
                                                    @if($qdetails[0]->video != '')
                                                    <p class="text-muted m-t-5"><a href="/BNA/public/uploads/voting/video/{{ $qdetails[0]->video }}" target="_blank">View Video file</a></p>
                                                    @endif
                                                    </div>
                                                    
                                                    <label id="vd_label" class="col-sm-4 col-form-label">Upload Video</label>
                                                    <div class="col-sm-8 m-t-5 m-b-10" id="vd_div">
                                                        <input type="file" id="video" name="video" accept=".mp4" onchange="validateSize(this)" />
                                                        <!--<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" value="{{ $qdetails[0]->question_timing }}" />
                                                    </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" value="{{ $qdetails[0]->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" value="{{ $qdetails[0]->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" value="{{ $qdetails[0]->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" value="{{ $qdetails[0]->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" value="{{ $qdetails[0]->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" @if($qdetails[0]->correct_answer == 'A') selected @endif >A</option>
                                                            <option value="B" @if($qdetails[0]->correct_answer == 'B') selected @endif >B</option>
                                                            <option value="C" @if($qdetails[0]->correct_answer == 'C') selected @endif >C</option>
                                                            <option value="D" @if($qdetails[0]->correct_answer == 'D') selected @endif >D</option>
                                                            <option value="E" @if($qdetails[0]->correct_answer == 'E') selected @endif >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" @if($qdetails[0]->is_dummy == '1') checked @endif >&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>
                                            @endif
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Alert</h5>
       <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">×</button>
     </div>
     <div class="modal-body">
       <p id="msgbox"></p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
       <!--<button type="button" class="btn btn-primary">Save changes</button>-->
     </div>
   </div>
 </div>
</div>
@endsection

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

@section('scripts')
<!-- Plugins js -->
<script src="{{ URL::asset('assets/admin/plugins/select2/js/select2.min.js') }}" type="text/javascript"></script>
<script src="{{ URL::asset('assets/admin/plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">

getsessions();
function getsessions(){
    var eid = $('#event').val();
    var sid = $('#session').val();
    
      $.ajax({
          url:'/BNA/public/admin/session/getsessions',
          type:'get',
          data:{eid:eid},
          success: function(response){
             
            //   console.log(response);
             if(response.length != 0){
              $('#slabel').show();
              $('#sdiv').show();
              $('#session').empty();
              $('#session').focus();
              $('#session').append("<option value=''>Select Session</option>");
              $.each(response, function(key, value){
            
                if(sid == value.id){
                  $('#session').append("<option value='"+value.id+"' selected>"+value.sno+" + "+value.title+"</option>");
                }else{
                    $('#session').append("<option value='"+value.id+"'>"+value.sno+" + "+value.title+"</option>");
                }
              });
            }else{
                $('#session').empty();
                  $('#session').append("<option value=''>Select Session</option>");
                  $('#slabel').hide();
                  $('#sdiv').hide(); 
            }
              
            },
        });
        gettopics();
}

function gettopics(){
    
    var eid = $('#event').val();
    var sid = $('#session').val();
    var tid = $('#topic_id').val();
    
        $.ajax({
          url:'/BNA/public/admin/session/gettopics',
          type:'get',
          data:{eid:eid, sid:sid},
          success: function(response){
             
            //   console.log(response);
              $('#topic_id').empty();
              $('#topic_id').focus();
              $('#topic_id').append("<option value=''>Select Topic</option>");
              $.each(response, function(key, value){
            
                if(tid == value.id){
                    $('#topic_id').append("<option value='"+value.id+"' selected>"+value.title+" "+value.event_date+" "+value.start_time+"-"+value.end_time+"</option>");
                }else{
                    $('#topic_id').append("<option value='"+value.id+"'>"+value.title+" "+value.event_date+" "+value.start_time+"-"+value.end_time+"</option>");
                }
              });
              
            },
        });
        
}

    // validate pdf size and type
    function validateSize(input) {
          const fileSize = input.files[0].size / 1024 / 1024; // in MiB
        //   alert(fileSize);
          if (fileSize > 15) {
            // alert('File size exceeds 2 MiB');
                $('#exampleModal').modal('toggle');
                $('#msgbox').html("File size exceeds 15 MB");
                $(input).val(''); //for clearing with Jquery
                
                // console.log(input);
          } else {
            // Proceed further
            // console.log(input.value);
                var fileName = input.value;
                var idxDot = fileName.lastIndexOf(".") + 1;
                var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
                if (extFile=="mp4"){
                    //TO DO
                }else{
                    // alert("Only pdf files are allowed!");
                    $('#exampleModal').modal('toggle');
                    $('#msgbox').html("Please select mp4 file only");
                    input.value="";
                }   
          }
    }
    // validate pdf size and type
</script>
<script type="text/javascript">
            $(document).ready(function() {
				// $("#session").change(function() {
    //             var id = jQuery(this).val();
				// if(id)
    //               {  
    //               jQuery.ajax({
    //                  url : '/BNA/public/admin/voting/create-question/' +id,
    //                  type : "GET",
    //                  dataType : "json",
    //                  success:function(data)
    //                  {
    //                     console.log(data);
    //                     jQuery('select[name="topic_id"]').empty();
    //                     $('select[name="topic_id"]').append('<option value="">Select Topic</option>');
    //                     jQuery.each(data, function(key,value){
    //                       $('select[name="topic_id"]').append('<option value="'+ key +'">'+ value +'</option>');
    //                     });
    //                  }
    //               });
    //               }	
    //             });
        isvoting();
        function isvoting(){ 
                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);					
				}
        }
        
		isimage();
        function isimage(){ 	
				if ($('#is_image').is(":checked")){
                    $('#img_label').show();
                    $('#img_div').show();
                }
                else{
                    $('#img_label').hide();
                    $('#img_div').hide();
                }
        }
        
        isvideo();
        function isvideo(){ 
                if ($('#is_video').is(":checked")){
                    $('#vd_label').show();
                    $('#vd_div').show();
                }
                else{
                    $('#vd_label').hide();
                    $('#vd_div').hide();
                }
        }
        
                $('#is_image').change(function() {
                    isimage();
                });
                
                $('#is_video').change(function() {
                    isvideo();
                });
				
				$('input[name=question_type]').change(function() {
					isvoting();	
                });

                $("#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>
@endsection