@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Challenge Answers
@endsection

@section('styles')
<!-- Data table css -->
  <link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
    <!-- MAIN BODY CONTENT -->
          @if ($errors->any())
            <div class="alert alert-danger">
              <ul>
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
              </ul>
            </div>
          @endif

          <div class="top-header">
            <h1>Messages</h1>
          </div>
					<div class="row">
					  <div class="col-md-12">
              <div class="card">
                <div class="card-body">
                  <div class="row">

                    <div class="col-md-3">
                      <select id="challenge_category" class="form-control">
                        <option value="">All Messages</option>
                        @if($challengeCategories)
                          @foreach($challengeCategories as $key => $category)
                            <option value="{{ $category->id }}">Challenge - {{ $category->name }}</option>
                          @endforeach
                        @endif
                      </select>
                    </div>

                    <div class="col-md-3">
                      <select id="challenge_type" class="form-control">
                        <option value="">Challenge Type</option>
                        @if($challengeTakingTypes)
                          @foreach($challengeTakingTypes as $key => $type)
                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                          @endforeach
                        @endif
                      </select>
                    </div>
                  </div>

                   <!-- Message Tab section -->
                   <div class="msg-tab-section">
                    <div id="horizontalTab">
                      <ul class="resp-tabs-list">
                        <li value="{{ $challengeApprovedStatus['pending'] }}" class="resp-tabs-item">Inbox</li>
                        <li value="{{ $challengeApprovedStatus['approved'] }}" class="resp-tabs-item">Approved</li>
                        <li value="{{ $challengeApprovedStatus['rejected'] }}" class="resp-tabs-item">Declined</li>  
                        <button id="message_decline" class="btn btn-warning approve_decline_btn" style="float:right;margin-left:4px;">Decline</button>    
                        <button id="message_approve" class="btn btn-info approve_decline_btn" style="float:right;">Approve</button>
                      </ul>
                      <div class="resp-tabs-container">
                        <!-- inbox -->
                        <div class="inbox">
                          <!-- Messages table -->
                          <div class="table-responsive">
                              <table id="challenge_messages" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
                                <thead>
                                  <tr>
                                  <th>User</th>
                                  <th width="30%">Challenge Title</th>
                                  <th>Message</th>
                                  <th>Answer</th>
                                  <th>Attachment</th>
                                  <th>Date</th>                          
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                              </table> 

                              <table id="challenge_qmessages" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
                                <thead>
                                  <tr>
                                  <th>User</th>
                                  <th>Challenge Title</th>
                                  <th>Message</th>
                                  <th>Answer</th>
                                  <th>Date</th>                          
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                              </table> 

                              <table id="challenge_pmessages" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
                                <thead>
                                  <tr>
                                    <th><input type="checkbox" id="pmall"></th>
                                    <th>User</th>
                                    <th>Challenge Title</th>
                                    <th>Message</th>
                                    <th>Attachment</th>
                                    <th>Date</th>
                                  </tr>
                                </thead>
                                <tbody>
                                </tbody>
                              </table>

                          </div>
                        </div>                        

                      </div>
                    </div>
                  </div>

                  

              </div>
            </div>
					</div>
					<!--// MAIN BODY CONTENT -->
				</div>
@endsection

@section('scripts')

<!-- Data tables -->
<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/responsive-tab/easy-responsive-tabs.js') }}"></script>
<script src="{{ asset('assets/plugins/responsive-tab/responsive-tab.js') }}"></script>

 <script>
    var oTable = '';
    var qTable = '';
    var pTable = '';

    $(document).ready(function () {
        oTable = $('#challenge_messages').DataTable({
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            paging: true,
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            ajax: {
                "url": "{{ route('companyAdmin.getChallangeMessages') }}",
                "type": "GET",
                "data": function(d) {
                     d.msg_status =  $('.resp-tabs-list .resp-tab-active').val();
                     d.challenge_category =  $('#challenge_category').val();
                     d.challenge_type =  $('#challenge_type').val();
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            "drawCallback": function( settings ) {
                getLocalDateTime();
            },
            columns: [
                {
                  data: "user_image",
                    render: function (data, type, row) {
                      return '<img class="avtar" src="'+row.user_image+'" alt=""><span>'+row.user_name+'</span>';
                    }
                },
                {
                  data: "challenge_title",
                    render: function (data, type, row) {
                      return '<a href="{{ url('/companyadmin/messages/challenges/view') }}/'+row.id+'" >'+row.challenge_title+'</a>';
                    }
                },
                {
                  data: "challenge_message",
                  render: function (data, type, row) {
                    return '<a href="{{ url('/companyadmin/messages/challenges/view') }}/'+row.id+'" >'+row.challenge_message+'</a>';
                  }
                },
                {
                  data: "challenges_answer",
                  name: 'challenges_answer',
                },
                {
                  data: "challenges_attachment",
                  render: function (data, type, row) {
                    if(row.challenges_attachment!=''){
                      return '<img class="sq-img" src="'+row.challenges_attachment+'" alt="">';
                    }else{
                      return '';
                    }
                  }
                },
                {
                  data: null,
                  name: 'challenge_submission_date',
                  render: function (data, type, row) {
                      return '<p class="datetime">'+row.challenge_submission_date+'</p>';
                  }
                },
                // {
                //   data: 'challenge_submission_date',
                //   name: 'challenge_submission_date',
                // },
                { 
                  data: 'id',
                  name: 'id' 
                },
            ],
            'columnDefs': [
                {
                    "targets": [6],
                    "visible": false
                }
            ],
            'aaSorting': [6, 'DESC']
        });

        // datatable for questionaire challenge
        qTable = $('#challenge_qmessages').DataTable({
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            paging: true,
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            ajax: {
                "url": "{{ route('companyAdmin.getChallangeMessages') }}",
                "type": "GET",
                "data": function(d) {
                     d.msg_status =  $('.resp-tabs-list .resp-tab-active').val();
                     d.challenge_category =  $('#challenge_category').val();
                     d.challenge_type =  $('#challenge_type').val();
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            "drawCallback": function( settings ) {
                getLocalDateTime();
            },
            columns: [
                {
                  data: "user_image",
                  render: function (data, type, row) {
                    return '<img class="avtar" src="'+row.user_image+'" alt=""><span>'+row.user_name+'</span>';
                  }
                },
                {
                  data: "challenge_title",
                  render: function (data, type, row) {
                    return '<a href="{{ url('/companyadmin/messages/challenges/view') }}/'+row.id+'" >'+row.challenge_title+'</a>';
                  }
                },
                {
                  data: "challenge_message",
                  render: function (data, type, row) {
                    return '<a href="{{ url('/companyadmin/messages/challenges/view') }}/'+row.id+'" >'+row.challenge_message+'</a>';
                  }
                },
                {
                    data: 'challenges_answer',
                    name: 'challenges_answer',
                },
                {
                  data: null,
                  name: 'challenge_submission_date',
                  render: function (data, type, row) {
                      return '<p class="datetime">'+row.challenge_submission_date+'</p>';
                  }
                },
                // {
                //     data: 'challenge_submission_date',
                //     name: 'challenge_submission_date',
                // },
                { data: 'id', name: 'id' },
            ],
            'columnDefs': [
                {
                    "targets": [5],
                    "visible": false
                }
            ],
            'aaSorting': [5, 'DESC']
        });

        // datatable for photo takin challenge
        pTable = $('#challenge_pmessages').DataTable({
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            paging: true,
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            ajax: {
                "url": "{{ route('companyAdmin.getChallangeMessages') }}",
                "type": "GET",
                "data": function(d) {
                     d.msg_status =  $('.resp-tabs-list .resp-tab-active').val();
                     d.challenge_category =  $('#challenge_category').val();
                     d.challenge_type =  $('#challenge_type').val();
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            "drawCallback": function( settings ) {
                getLocalDateTime();
            },
            columns: [
                {
                data: "id",
                  render: function (data, type, row) {
                    return '<input type="checkbox" class="pmsingle" id="'+row.id+'">';
                  }
                },
                {
                  data: "user_image",
                  render: function (data, type, row) {
                    return '<img class="avtar" src="'+row.user_image+'" alt=""><span>'+row.user_name+'</span>';
                  }
                },
                {
                  data: "challenge_title",
                  render: function (data, type, row) {
                    return '<a href="{{ url('/companyadmin/messages/challenges/view') }}/'+row.id+'" >'+row.challenge_title+'</a>';
                  }
                },
                {
                  data: "challenge_message",
                  render: function (data, type, row) {
                    return '<a href="{{ url('/companyadmin/messages/challenges/view') }}/'+row.id+'" >'+row.challenge_message+'</a>';
                  }
                },
                {
                  data: "challenges_attachment",
                  render: function (data, type, row) {
                    if(row.challenges_attachment) {
                      return '<img class="sq-img" src="'+row.challenges_attachment+'" alt="">';
                    }else {
                      return '';
                    }
                  }
                },
                {
                  data: null,
                  name: 'challenge_submission_date',
                  render: function (data, type, row) {
                      return '<p class="datetime">'+row.challenge_submission_date+'</p>';
                  }
                },
                // {
                //     data: 'challenge_submission_date',
                //     name: 'challenge_submission_date',
                // },
                { data: 'id', name: 'id' },
            ],
            'columnDefs': [
                {
                    'targets': [0],
                    'orderable': false,
                },
                {
                    "targets": [6],
                    "visible": false
                }
            ],
            'aaSorting': [6, 'DESC']
        });

        $('#challenge_qmessages , #challenge_qmessages_wrapper').hide();
        $('#challenge_pmessages , #challenge_pmessages_wrapper').hide();
        $('.approve_decline_btn').hide();

        $("#challenge_type").change(function() {
          $('.resp-tabs-list li').removeClass('resp-tab-active');
          $('.resp-tabs-list li:first').addClass('resp-tab-active');
          var challenge_type=$("#challenge_type").val();
          if(challenge_type==''){
            $('#challenge_messages , #challenge_messages_wrapper').show();
            $('#challenge_qmessages , #challenge_qmessages_wrapper').hide();
            $('#challenge_pmessages , #challenge_pmessages_wrapper').hide();
          }else if(challenge_type==1){
            $('#challenge_messages , #challenge_messages_wrapper').hide();
            $('#challenge_qmessages , #challenge_qmessages_wrapper').show();
            $('#challenge_pmessages , #challenge_pmessages_wrapper').hide();
          }else if(challenge_type==2){
            $('#challenge_messages , #challenge_messages_wrapper').hide();
            $('#challenge_qmessages , #challenge_qmessages_wrapper').hide();
            $('#challenge_pmessages , #challenge_pmessages_wrapper').show();
          }
        });

        $(".resp-tabs-item").click(function() {
          var challenge_type=$("#challenge_type").val();
          if(challenge_type==''){
            oTable.draw();
          }else if(challenge_type==1){
            qTable.draw();
          }else if(challenge_type==2){
            pTable.draw();
            var msg_stat=$('.resp-tabs-list .resp-tab-active').val();
            if(msg_stat==0){
            pTable.column(0).visible(true);
            }else{
            pTable.column(0).visible(false);
            }
          }
          $('.inbox').show();
        });

        $("#challenge_category , #challenge_type").change(function() {
          var challenge_type=$("#challenge_type").val();
          if(challenge_type==''){
            oTable.draw();
            $('.resp-tabs-item').show();
            $('.approve_decline_btn').hide();
          }else if(challenge_type==1){
            qTable.draw();
            $('.resp-tabs-item').hide();
            $('.approve_decline_btn').hide();
          }else if(challenge_type==2){
            pTable.draw();
            $('.resp-tabs-item').show();
            //$('.approve_decline_btn').show();
          }
        });

        $("#pmall").click(function(){
            $('.pmsingle').not(this).prop('checked', this.checked);
            var checked_msg_array=[];
            $(".pmsingle:checked").each(function(){
                checked_msg_array.push($(this).attr('id'));
            });
            if(checked_msg_array.length>0){
             $('.approve_decline_btn').show();
            }else{
              $('.approve_decline_btn').hide();
            }
        });
     
        $("body").on('click', '.pmsingle', function(){
            var checked_msg_array=[];
            $(".pmsingle:checked").each(function(){
                checked_msg_array.push($(this).attr('id'));
            });
            if(checked_msg_array.length>0){
             $('.approve_decline_btn').show();
            }else{
              $('.approve_decline_btn').hide();
            }
        });

        $("#message_approve").click(function(){
          //console.log('2222');
            $('.pmsingle').not(this).prop('checked', this.checked);
            var checked_msg_array=[];
            $(".pmsingle:checked").each(function(){
                checked_msg_array.push($(this).attr('id'));
            });
            if(checked_msg_array.length===0){
             alert('Please select atleast one message to approve.');
            }else{
                $.ajax({
                  data: { 'message_ids' : checked_msg_array , 'message_action' : "{{ $challengeApprovedStatus['approved'] }}" },
                  type: 'POST',
                  url: '{{ route('companyAdmin.messages.challenges.multipleApproveDecline') }}',
                  headers: {
                      'X-CSRF-TOKEN': '{{csrf_token()}}',
                      '_token' : '{{csrf_token()}}'
                  },
                  success : function(data){
                    alert('Successfully approved.');
                    pTable.draw();
                  },
                  error:function(){
                  }
              });
            }
        });

        $("#message_decline").click(function(){
            $('.pmsingle').not(this).prop('checked', this.checked);
            var checked_msg_array=[];
            $(".pmsingle:checked").each(function(){
                checked_msg_array.push($(this).attr('id'));
            });
            if(checked_msg_array.length===0){
             alert('Please select atleast one message to decline.');
            }else{
                $.ajax({
                  data: { 'message_ids' : checked_msg_array , 'message_action' : "{{ $challengeApprovedStatus['rejected'] }}" },
                  type: 'POST',
                  url: '{{ route('companyAdmin.messages.challenges.multipleApproveDecline') }}',
                  headers: {
                      'X-CSRF-TOKEN': '{{csrf_token()}}',
                      '_token' : '{{csrf_token()}}'
                  },
                  success : function(data){
                    alert('Successfully declined.');
                    pTable.draw();
                  },
                  error:function(){
                  }
              });
            }
        });
        
    });

  $( window ).on("load", function() {
    setTimeout(function() {
      $("#challenge_type").trigger("change");
    }, 1000);
    
  });

  function getLocalDateTime() {
    $(".datetime").each(function() {
        datetime = $(this).text();
        dateFormat = "DD/MM/YYYY hh:mmA";
        
        if(this.hasAttribute('dateFormat')) {
          dateFormat = $(this).attr('dateFormat');
        }

        convertedDateTime = utcToLocalDatetimeConverter(datetime, dateFormat);
        $(this).text(convertedDateTime);
    });
  }

  </script>

@endsection