@extends('Layouts.dashboardLayout')
@section('content')
    <div id="msg"></div>
    @include('Includes.messages')
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="box box-block tile tile-2 bg-white mb-2">
                <div class="t-icon right"><i class="ti-user"></i></div>
                <div class="t-content">
                    <h1 class="mb-1">{{$sentMessage}}</h1>
                    <h5 class="">Sent</h5>
                    <h6 class="text-uppercase">{{$sentMessage}}</h6>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="box box-block tile tile-2 bg-white mb-2">
                <div class="t-icon right"><i class="ti-bar-chart"></i></div>
                <div class="t-content">
                    <h1 class="mb-1">{{$draftMessage}}</h1>
                    <h5>Draft</h5>
                    <h6 class="text-uppercase"></h6>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="box box-block tile tile-2 bg-white mb-2">
                <div class="t-icon right"><i class="ti-package"></i></div>
                <div class="t-content">
                    <h1 class="mb-1">{{$organization}}</h1>
                    <h5>Organizations</h5>
                    <h6 class="text-uppercase"></h6>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="box box-block tile tile-2 bg-white mb-2">
                <div class="t-icon right"><i class="ti-receipt"></i></div>
                <div class="t-content">
                    <h1 class="mb-1">{{$allMessage}}</h1>
                    <h5>All</h5>
                </div>
            </div>
        </div>
    </div>
    {{--<div class="container"><h3>Search Messages</h3></div>
    <div class="card card-block">
        <h6 class="card-title">Search Parameters</h6>
        <form action="" method="post">
            <div class="col-md-12">
                {{csrf_field()}}
                <div class="col-md-3">
                    <label>Select</label>
                    <select class="form-control" name="examtype">
                        <option selected disabled>Select</option>
                        <option>Sent</option>
                        <option>Draft</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label>Select Organization</label>
                    <select class="form-control" name="subject">
                        <option selected disabled>Select</option>
                    </select>
                </div>
                --}}{{--<div class="col-md-2">
                    <label>Select Question Type</label>
                    <select class="form-control" name="qtype">
                        <option value="objective">Objective</option>
                        <option value="theory">Theory</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label>Select Year</label>
                    <select class="form-control" name="year">
                        <option selected disabled>Select</option>

                    </select>
                </div>--}}{{--

                <div class="col-md-2">
                    <button class="btn btn-success btn-group-lg" type="button" style="margin-top: 25px" id="filter">Filter</button>
                </div>
            </div>
        </form>

    </div>--}}
    {{--<div class="card card-block">
        <div class="col-md-12">
            <ul class="nav nav-tabs mb-0-5" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-expanded="false">Objective</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="home" role="tabpanel">
                    <h6 class="mb-1">Questions</h6>
                    <div class="overflow-x-auto">
                        <table class="table table-striped table-bordered dataTable" id="table-1">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Question</th>
                                <th>Options</th>
                                <th>Answer</th>
                                <th>Question Image</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    --}}{{--<p></p>--}}{{--
                </div>

            </div>
        </div>
    </div>--}}
    {{--edit modal--}}
    <div class="card card-block">
        <h6 class="card-title"></h6>
            <div class="col-md-12">
                <a href="/composeMessage" class="btn btn-success">Compose new message</a>
                <a href="/testMail" class="btn btn-info">Send a test mail to myself.</a>
            </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">Edit Question</h4>
                </div>
                <form id="editQn" method="post" enctype="multipart/form-data">
                    <div class="modal-body">

                        <input type="hidden" class="form-control" id="theId" name="theId">
                        <div class="form-group">
                            <label  class="form-control-label">Question</label>
                            <input type="text" class="form-control" id="quest" name="quest">
                        </div>
                        <div class="form-group">
                            <label  class="form-control-label">Options</label>
                            <input type="text" class="form-control" id="opt" name="opt">
                        </div>
                        <div class="form-group">
                            <label  class="form-control-label">Answer</label>
                            <input type="text" class="form-control" id="ans" name="ans">
                        </div>
                        {{--<div class="form-group">
                            <label  class="form-control-label">Question Image</label>
                            <input type="text" class="form-control" id="qimage">
                        </div>--}}
                        <div class="form-group" id="takeExtra">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="submitEdit">Edit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{--message--}}
    <div class="modal fade small-modal" tabindex="-1" role="dialog" id="successmsg" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="mySmallModalLabel">Success!</h4>
                </div>
                <div class="modal-body" id="showmsg">

                </div>
                <div class="modal-footer">
                    {{--<button type="button" class="btn btn-primary">OK</button>--}}
                    <button type="button" class="btn btn-info" data-dismiss="modal">Ok</button>
                </div>
            </div>
        </div>
    </div>
    {{--confirm delete--}}
    <div class="modal fade small-modal" tabindex="-1" role="dialog" id="confirmDelete" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="mySmallModalLabel">Confirm Delete</h4>
                </div>
                <div class="modal-body" id="takeDeleteDetails">
                    <input type="hidden" id="getId">
                    Are you sure you want to delete this question:
                    <b><i id="tquest"></i> ?</b>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="del">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $.ajaxSetup({
            headers:
                {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        $(document).on('click', '.ti-close', function () {
            $(this).parent().remove();
        });

        $(document).on('click','.nav-link', function () {
            //return alert($(this).next());
            if($(this).hasClass('active')){
                var text = $(this).text();
                if(text == "Objective"){
                    $('option[value="objective"]').attr('disabled', false);
                    $('option[value="objective"]').prop('selected', true);
                    $('option[value="theory"]').prop('selected', false);
                    $('option[value="theory"]').attr('disabled', true);
                }else if(text == "Theory"){
                    $('option[value="theory"]').attr('disabled', false);
                    $('option[value="theory"]').prop('selected', true);
                    $('option[value="objective"]').prop('selected', false);
                    $('option[value="objective"]').attr('disabled', true);
                }
            }
        });

        $(document).on('click', '#filter', function (response) {
            var ths =$(this);
            var examtype = $('select[name="examtype"]').val();
            var qtype = $('select[name="qtype"]').val();
            var subject = $('select[name="subject"]').val();
            var year = $('select[name="year"]').val();
            var toSend = {'examtype':examtype, 'qtype':qtype, 'subject':subject, 'year': year};
            console.log(toSend);
            $.ajax({
                type: "POST",
                url: "",
                data: toSend,
                //contentType: "application/json; charset=utf-8",
                //dataType: "json",
                beforeSend: function () {
                    ths.attr('disabled', true);
                    ths.text('..processing');
                },
                success: function (response) {
                    console.log(response);
                    if(response.questions.length > 0){
                        populateDataTable(response, qtype);
                    }else{
                        //$("#table-1").DataTable().clear();
                        $('#successmsg').modal('toggle');
                        $('#showmsg').empty();
                        $('#showmsg').append('No data return for this search.');
                        //$(window).scrollTop(0);
                    }
                    ths.attr('disabled', false);
                    ths.text('Filter');
                    $(window).scrollTop(200);
                }
            });

        });

        /*function populateDataTable(data, questionType = null) {
            // clear the table before populating it with more data
            var tabpane = $('.tab-content').find('.tab-pane.active');
            var tableName = tabpane.find('table').attr('id');
            //return alert(tableName);
            $("#"+tableName).DataTable().clear();
            var length = Object.keys(data.questions).length;
            if(questionType == "objective"){
                for(var i = 0; i < length; i++) {
                    var question = data.questions[i];

                    // You could also use an ajax property on the data table initialization
                    $('#'+tableName).dataTable().fnAddData( [
                        i+1,
                        question.question,
                        question.options,
                        question.answer,
                        (question.question_image!==null? question.question_image: 'No image'),
                        "<button class='btn btn-sm btn-primary edit' data-id='"+question.id+"' data-question='"+question.question+"' data-ans='"+question.answer+"' data-image='"+question.question_image+"'  data-opt='"+question.options+"' data-toggle='modal' data-target='#exampleModal'>Edit</button> <button class='btn btn-sm btn-danger delete' data-toggle='modal' data-target='#confirmDelete' data-id='"+question.id+"' data-question='"+question.question+"' data-toggle='modal' data-target=''>Delete</button>"
                    ]);
                }
            }else if(questionType == "theory"){
                for(var i = 0; i < length; i++) {
                    var question = data.questions[i];

                    // You could also use an ajax property on the data table initialization
                    $('#'+tableName).dataTable().fnAddData( [
                        i+1,
                        question.question,
                        question.answer,
                        (question.question_image!==null? question.question_image: 'No image'),
                        "<button class='btn btn-sm btn-primary edit' data-id='"+question.id+"' data-question='"+question.question+"' data-ans='"+question.answer+"' data-image='"+question.question_image+"'  data-opt='"+question.options+"' data-toggle='modal' data-target='#exampleModal'>Edit</button> <button class='btn btn-sm btn-danger delete' data-toggle='modal' data-target='#confirmDelete' data-id='"+question.id+"' data-question='"+question.question+"' data-toggle='modal' data-target=''>Delete</button>"
                    ]);
                }
            }else{
                for(var i = 0; i < length; i++) {
                    var question = data.questions[i];

                    // You could also use an ajax property on the data table initialization
                    $('#'+tableName).dataTable().fnAddData( [
                        i+1,
                        question.question,
                        question.options,
                        question.answer,
                        (question.question_image!==null? question.question_image: ''),
                        "<button class='btn btn-sm btn-primary edit' data-id='"+question.id+"' data-question='"+question.question+"' data-ans='"+question.answer+"' data-image='"+question.question_image+"'  data-opt='"+question.options+"' data-toggle='modal' data-target='#exampleModal'>Edit</button> <button class='btn btn-sm btn-danger delete' data-toggle='modal' data-target='#confirmDelete' data-id='"+question.id+"' data-question='"+question.question+"' data-toggle='modal' data-target=''>Delete</button>"
                    ]);
                }
            }

        }*/

        var userId = "{{Auth::user()->id}}";

        $(document).on('click', '.edit', function(){
            $('#theId').val($(this).data('id'));
            $('#quest').val($(this).data('question'));
            var question = $(this).data('question');
            $('#ans').val($(this).data('ans'));
            $('#opt').val($(this).data('opt'));
            $('#qimage').val($(this).data('image'));
            var img = $(this).data('image');
            if(img !== null){
                $('#takeExtra').empty();
                $('#takeExtra').append('<img src="/storage/'+userId+'/'+img+'" width="400px" height="300px">')
            }else{
                $('#takeExtra').empty();
                $('#takeExtra').append('<input type="file" id="qimage" name="qimage" class="form-control" accept="image/*">');
            }
        });

        $('form#editQn').on('submit', function (e) {
            e.preventDefault();
            //var dat = {question: $('#quest').val(), options: $('#opt').val(), ans:$('#ans').val(), qimage: $('#qimage').val };
            var formdata = new FormData(this);
            var tabpane = $('.tab-content').find('.tab-pane.active');
            var tableName = tabpane.find('table').attr('id');
            $.ajax({
                url: '',
                type: 'POST',
                data: formdata,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    $('#submitEdit').attr("disabled", "disabled");
                    $('#editQn').css("opacity", ".5");
                },
                success: function (response) {
                    console.log(response);
                    $('#submitEdit').removeAttr("disabled");
                    $('#editQn').css("opacity", "");
                    $('#msg').empty();
                    if (response.questions !== null && response.status == 1) {
                        $('#msg').empty();
                        /*$('#msg').append('<div class="alert alert-success">\
                         Questions updated successfully\
                         <i class="pull-right ti-close"></i>\
                         </div>');*/
                        var qtype;
                        if(tableName == "table-1"){
                            qtype = "objective"
                            populateDataTable(response, qtype);
                        }else if(tableName == "table-3"){
                            qtype = "theory"
                            populateDataTable(response, qtype);
                        }

                        $('#successmsg').modal('show');
                        $('#showmsg').empty();
                        $('#showmsg').append('Question successfully updated');
                    }else if(response == "Not authorized"){
                        location.href = "/sign-in"
                    }else if(response.errors !== null){
                        $('#msg').empty();
                        $('#msg').append('<div class="alert alert-danger">\
                            Make sure the fields : question, answer and options are not empty\
                            <i class="pull-right ti-close"></i>\
                            </div>');
                    }else {
                        $('#msg').empty();
                        $('#msg').append('<div class="alert alert-danger">\
                            Error in connection\
                            <i class="pull-right ti-close"></i>\
                            </div>');
                    }
                    $('#exampleModal').modal('toggle');
                    $('html body').animate({scrollTop:40}, "fast");
                }
            });
        });

        var del;

        $(document).on('click', '.delete', function(){
            del = $(this);
            $('#getId').val($(this).data('id'));
            $('#tquest').text($(this).data('question'));
        });

        $(document).on('click', '#del', function(){
            var ths = $(this);
            $("#table-1").DataTable().row(del.parents('tr')).remove().draw();
            $.ajax({
                url: '',
                type: 'POST',
                data: {id:$('#getId').val()},
                beforeSend: function () {
                    ths.attr('disabled', true);
                    ths.text('..processing');
                },
                success: function (resp) {
                    console.log(resp);
                    ths.attr('disabled', false);
                    ths.text('Delete');
                    if(resp == "success"){
                        $('#confirmDelete').modal('toggle');
                        $('#successmsg').modal('toggle');
                        $('#showmsg').empty();
                        $('#showmsg').append('Question successfully updated');
                    }else{
                        $('#msg').empty();
                        $('#msg').append('<div class="alert alert-danger">\
                            Error in connection, please try again.\
                            <i class="pull-right ti-close"></i>\
                            </div>');
                        $(window).scrollTop(0);
                    }

                }
            });
        });
    </script>

@stop