@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">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="/BNA/public/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 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)
                                                                <option value='{{ $val->id }}' selected>{{ $val->name }}</option>
                                                            @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=''>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=''>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" 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 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<span class="required">(5 Image Upto 2MB&.png/jpeg file only)</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" onchange="validateSize(this)" multiple />-->
                                                        <input type="file" id="images" name="images[]" accept="image/x-png,image/jpeg,image/jpg" onchange="validateImages(this)" 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"></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"> &nbsp;Do you want to add video to explain your question? </p>
                                                    </div>
                                                    
                                                    <label id="vd_label" class="col-sm-4 col-form-label">Upload Video<span class="required">(Upto 5MB&.mp4 file)</span></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)" />-->
                                                        <input type="file" id="video" name="video" accept=".mp4" onchange="uploadVideo(this)" />
                                                        <progress id="progressBar" value="0" max="100" style="display: none;"></progress>
                                                        <!--<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" value="20" 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>

<!-- 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',
          dataType: "json",
          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){
            
                  $('#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();
    
        $.ajax({
          url:'/BNA/public/admin/session/gettopics',
          dataType: "json",
          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){
            
                  $('#topic_id').append("<option value='"+value.id+"'>"+value.title+" "+value.event_date+" "+value.start_time+"-"+value.end_time+"</option>");
              });
              
            },
        });
        
}
function uploadVideo(input) {
    const file = input.files[0];
    const fileSize = file.size / 1024 / 1024; // in MiB

    if (fileSize > 5) {
        $('#exampleModal').modal('toggle');
        $('#msgbox').html("File size exceeds 5 MB");
        $(input).val('');
        return;
    }

    const fileName = file.name;
    const idxDot = fileName.lastIndexOf(".") + 1;
    const extFile = fileName.substr(idxDot, fileName.length).toLowerCase();

    if (extFile !== "mp4") {
        $('#exampleModal').modal('toggle');
        $('#msgbox').html("Please select mp4 file only");
        input.value = "";
        return;
    }

    const progressBar = document.getElementById("progressBar");
    progressBar.style.display = "block";

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "your_upload_endpoint_url", true);

    // Progress event listener
    xhr.upload.addEventListener("progress", function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            progressBar.value = percentComplete;
        }
    });

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            // Handle response, if needed
            // For example, display success message or trigger further actions
        }
    };

    xhr.send(file);
}
    // validate pdf size and type
    function validateSize(input) {
          const fileSize = input.files[0].size / 1024 / 1024; // in MiB
        //   alert(fileSize);
          if (fileSize > 5) {
            // alert('File size exceeds 2 MiB');
                $('#exampleModal').modal('toggle');
                $('#msgbox').html("File size exceeds 5 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
    
    function validateImages(input) {
    const totalFiles = input.files.length;
    const maxSizeMB = 2;
    const allowedFormats = ['png', 'jpeg', 'jpg'];

    // Check total number of files
    if (totalFiles > 5) {
        $('#exampleModal').modal('toggle');
        $('#msgbox').html("You can upload up to 5 images only");
        $(input).val('');
        return;
    }

    // Iterate through each file
    for (let i = 0; i < totalFiles; i++) {
        const file = input.files[i];
        const fileSizeMB = file.size / 1024 / 1024; // in MiB
        const fileName = file.name;
        const fileExtension = fileName.split('.').pop().toLowerCase();

        // Check file size
        if (fileSizeMB > maxSizeMB) {
            $('#exampleModal').modal('toggle');
            $('#msgbox').html(`File '${fileName}' exceeds ${maxSizeMB} MB limit`);
            $(input).val('');
            return;
        }

        // Check file format
        if (!allowedFormats.includes(fileExtension)) {
            $('#exampleModal').modal('toggle');
            $('#msgbox').html(`Please select PNG , JPEG, JPG files only`);
            $(input).val('');
            return;
        }
    }

    // If all validations passed, proceed further
    // TO DO: Implement further actions if needed
}
</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>');
    //                     });
    //                  }
    //               });
    //               }	
    //             });
				
                $('#is_image').change(function() {
                    if ($('#is_image').is(":checked")){
                        $('#img_label').show();
                        $('#img_div').show();
                    }
                    else{
                        $('#img_label').hide();
                        $('#img_div').hide();
                    }
                });
                
                $('#is_video').change(function() {
                    if ($('#is_video').is(":checked")){
                        $('#vd_label').show();
                        $('#vd_div').show();
                    }
                    else{
                        $('#vd_label').hide();
                        $('#vd_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>
@endsection