@extends('superAdmin.layouts.auth')

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

@section('styles')
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
    
  <!-- Responsive Tab Css -->
  <link rel="stylesheet" type="text/css" href="{{asset('assets/plugins/responsive-tab/easy-responsive-tabs.css')}}" />
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
	    <h1>Employees</h1>	    
	</div>

	@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">
            <a href="{{ route('superAdmin.employees') }}">
              <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Employees</h1>
            </a>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="card">
                  <div class="card-body">
                    <div class="emp-details-topbar">
                      <!-- Avatar  -->
                      <div class="avt-updates">
                        <div class="upload admin">
                          <label for="admin">
                            <input type="file" class="d-none" name="" id="admin" onchange="loadProfileImage(event)">
                            <img  id="output_img" src="{{ url('storage/images/user/web/'.$userDetails->user_image) }}" alt="">
                          </label>
                          <!-- <p class="label">Update</p> -->
                        </div>
                      </div>
                      <!-- EMP FORM GROUP -->
                      <div class="emp-forms" style="display: none;">
                        <form action="">

                          <div class="form-group">
                            <label for="" class="form-label">Full Name *</label>
                            <input type="text" class="form-control" value="Paul Blart">
                          </div>

                          <div class="form-group">
                            <label for="" class="form-label">Email Address *</label>
                            <input type="text" class="form-control" value="Paul@starsecurity.ca">
                          </div>

                          <div class="form-group">
                            <label for="" class="form-label">Assigned Location *</label>
                            <div class="dropdown custom-dropdown">
                              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span
                                  class="dropdown-text"> Select Options</span>
                                <span class="caret"></span></button>
                              <ul class="dropdown-menu">
                                <li><a href="#"><label><input type="checkbox" class="selectall" /><span
                                        class="select-text"> Select</span> All</label></a></li>
                                <li class="divider"></li>
                                <li><a class="option-link" href="#"><label><input name='options[]' type="checkbox"
                                        class="option justone" value='Option 1 ' /> Option 1</label></a></li>
                                <li><a href="#"><label><input name='options[]' type="checkbox" class="option justone"
                                        value='Option 2 ' /> Option 2</label></a></li>
                                <li><a href="#"><label><input name='options[]' type="checkbox" class="option justone"
                                        value='Option 3 ' /> Option 3</label></a></li>
                              </ul>
                            </div>
                          </div>
                        </form>
                      </div>
                      <!-- Total PTS -->
                      <div class="save-infos">
                        <span class="total-pts">
                          <div class="info">
                            <h2>{{ $userDetails->count ?? 0 }}</h2>
                            <p class="text">Total pts.</p>
                          </div>
                          <img src="{{ asset('assets/images/total-pts.png') }}" alt="">
                        </span>
                        <!-- <button class="btn btn-success">Save Info</button> -->
                      </div>

                    </div>
                    <!-- EMP TAB BAR  -->
                    <div class="emp-tab-section">
                      <div id="horizontalTab">
                        <ul class="resp-tabs-list">
                          <li>Personal</li>      
                            <li>Finding</li>
                            <li>Challenges</li>                             
                            <li>Redeemed</li>
                          @if(false)
                            <li>Messages</li>
                          @endif
                        </ul>
                        <div class="resp-tabs-container">

                          <div class="personal">
                            <h4>About:</h4>
                            <p>{{$userDetails->user_about ?? ''}}</p>
                            <h4>Age:</h4>
                            <p>{{$userDetails->user_age ?? ''}}</p>
                            <h4>Gender:</h4>
                            <p>{{$userDetails->user_gender ?? ''}}</p>
                            <h4>Postal Code:</h4>
                            <p><strong>{{$userDetails->postal_code ?? ''}}</strong></p>
                          </div>
                          
                           
                            <div class="finding">
                              <table id="company_findings" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
                                  <thead>
                                    <tr>
                                      <th style="width: 100px;">Points</th>
                                      <th>Subject</th>
                                      <th>Submitted (Date | Time)</th>
                                      <th>View</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                  </tbody>
                              </table>                       
                              </div>
                            
                              <div class="challenges">
                                <table id="employee_challanges" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
                                  <thead>
                                    <tr>
                                      <th style="width: 100px;">Points</th>
                                      <th>Challanges</th>
                                      <th>Challanges Type</th>
                                      <th>Submitted (Date | Time)</th>
                                      <th>View</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                  </tbody>
                                 </table>
                              </div>
                            
                              <div class="redeemed">
                                <p>Redeemed</p>
                                <table id="employee_redeem" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
                                  <thead>
                                    <tr>
                                      <th>Points</th>
                                      <th>Gift Cards</th>
                                      <th>Submitted (Date | Time)</th>
                                      <th>View</th>
                                    </tr>
                                  </thead>
                                  <tbody>                              
                                  </tbody>
                                 </table>
                              </div>
                              @if(false)
                              <div class="messages">
                                <table class="fold-table">
                                  <thead>
                                    <tr>
                                      <th>User Name</th>
                                      <th>Message</th>
                                      <th>Submitted (Date | Time)</th>
                                      <th>View</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr class="view">
                                      <td><img class="avt-md" src="{{ asset('assets/images/emp.jpg') }}" alt=""> Security User Name</td>
                                      <td>Lorem ipsum doler sit amet, Consecteture.</td>
                                      <td>DD/MM/YYYY | 13:59:09</td>
                                      <td>&nbsp;</td>
                                    </tr>
                                    <tr class="fold">
                                      <td colspan="7">
                                        <div class="find-table-content">
                                          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ipsa rerum sint
                                            nostrum asperiores aperiam voluptate impedit saepe magnam vero enim, soluta,
                                            deserunt molestias deleniti et aspernatur? Illo, et temporibus. Lorem ipsum, dolor
                                            sit amet consectetur adipisicing elit. Ex ratione culpa facere repellendus ducimus
                                            quaerat temporibus deleniti, maiores dolorum voluptas dolorem reiciendis delectus
                                            eius perferendis cum. Ut vero laudantium doloremque.</p>
                                        </div>
                                      </td>
                                    </tr>
                                    <tr class="view">
                                      <td><img class="avt-md" src="{{ asset('assets/images/emp.jpg') }}" alt=""> Security User Name</td>
                                      <td>Lorem ipsum doler sit amet, Consecteture.</td>
                                      <td>DD/MM/YYYY | 13:59:09</td>
                                      <td>&nbsp;</td>
                                    </tr>
                                    <tr class="fold">
                                      <td colspan="7">
                                        <h3>demo testing</h3>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>                              
                            @endif
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data.min.js"></script>
<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/js/responsive-tab.js') }}"></script>

<script>

var loadProfileImage = function(event) {
    var output = document.getElementById('output_img');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
};


$('body').on("click", ".dropdown-menu", function (e) {
        $(this).parent().is(".open") && e.stopPropagation();
      });

      $('.selectall').click(function () {
        if ($(this).is(':checked')) {
          $('.option').prop('checked', true);
          var total = $('input[name="options[]"]:checked').length;
          $(".dropdown-text").html('(' + total + ') Selected');
          $(".select-text").html(' Deselect');
        } else {
          $('.option').prop('checked', false);
          $(".dropdown-text").html('(0) Selected');
          $(".select-text").html(' Select');
        }
      });

      $("input[type='checkbox'].justone").change(function () {
        var a = $("input[type='checkbox'].justone");
        if (a.length == a.filter(":checked").length) {
          $('.selectall').prop('checked', true);
          $(".select-text").html(' Deselect');
        }
        else {
          $('.selectall').prop('checked', false);
          $(".select-text").html(' Select');
        }
        var total = $('input[name="options[]"]:checked').length;
        $(".dropdown-text").html('(' + total + ') Selected');
      });
    </script>

    <!-- Accordion table -->
    <script>
      $(function () {
        $(".fold-table tr.view").on("click", function () {
          $(this).toggleClass("open").next(".fold").toggleClass("open");
        });
      });
    </script>
    <script type="text/javascript">

    var oTable = '';
    $(document).ready(function () {
        oTable = $('#company_findings').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('superAdmin.employeeFindings') }}",
                "type": "GET",
                "data": function(d) {
                     d.user_id = '{{ $userDetails->user_id }}';
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            columns: [
                {
                    data: 'finding_point',
                    className: 'text-center',
                    name: 'finding_point',                    
                },
                {
                    data: 'finding_title',
                    name: 'finding_title',
                },
               /* {
                    data: 'finding_submission_date',
                    name: 'finding_submission_date',
                },*/
                {
                  data: null,      
                  className: 'text-left',          
                  render: function (data, type, row) {                       
                       var local_date = new Date(data.finding_submission_date); 
                       var getYear = local_date.getFullYear();
                       var getmonth = local_date.getMonth();
                       var getmonth = (getmonth);
                       var getdays = local_date.getDate();
                       var gethours = local_date.getHours();
                       var getminutes = local_date.getMinutes();
                       var getseconds = local_date.getSeconds();                     
                       let utcDate = new Date(Date.UTC(getYear, getmonth , getdays, gethours, getminutes, getseconds));                    
                       utcDate =utcDate.toString();  
                       return moment(utcDate).format('DD/MM/YYYY | h:mm A');
                  }
                }, 
                {
                    className: 'details-control',
                    data: null,
                    defaultContent: ''
                },
                { data: 'id', name: 'id' },
            ],
            'columnDefs': [
                {
                    'targets': [3], /* column index */
                    'orderable': false, /* true or false */
                },
                {
                    'targets': [3], /* column index */
                    "searchable": false
                },
                {
                    "targets": [4],
                    "visible": false
                }
            ],
            createdRow: function (row, data, index) {
                $(row).addClass("view");
            },
            'aaSorting': [4, 'DESC']
        });

        // Add event listener for opening and closing details
        $('#company_findings tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = oTable.row( tr );

            oTable.rows().every(function(){
              if(this.child.isShown()){
                this.child.hide();
                $(this.node()).removeClass('open');
              }
            });
     
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('open');
            }else {
                row.child( format(row.data()) ).show();
                tr.addClass('open');
            }
        } );

        $('#company_findings tbody').on('click', '.open', function () {          
            var tr = $(this).closest('tr');
            var row = oTable.row( tr );
     
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('open');
            }else {
                row.child( format(row.data()) ).show();
                tr.addClass('open');
            }

        } );        

    });

    function format ( d ) {
        return `<div class="find-table-content side-panel">
                  <div class="find-sub-img">`+d.finding_image+`</div>
                  <div class="sub-content">
                    <p>`+d.finding_description+`</p>
                  </div>
                </div>`;      
    } 


    var cTable = '';
    $(document).ready(function () {
        cTable = $('#employee_challanges').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('superAdmin.employeeChallanges') }}",
                "type": "GET",
                "data": function(c) {
                     c.user_id = '{{ $userDetails->user_id }}';
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            columns: [
                {
                    data: 'challenge_point',
                    className: 'text-center',
                    name: 'challenge_point',
                },
                {
                    data: 'challenge_name',
                    name: 'challenge_name',
                },
                {
                    data: 'challenges_type',
                    name: 'challenges_type',
                },
                {
                  data: null,      
                  className: 'text-left',          
                  render: function (data, type, row) {                       
                       var local_date = new Date(data.challenge_submission_date); 
                       var getYear = local_date.getFullYear();
                       var getmonth = local_date.getMonth();
                       var getmonth = (getmonth);
                       var getdays = local_date.getDate();
                       var gethours = local_date.getHours();
                       var getminutes = local_date.getMinutes();
                       var getseconds = local_date.getSeconds();                     
                       let utcDate = new Date(Date.UTC(getYear, getmonth , getdays, gethours, getminutes, getseconds));                    
                       utcDate =utcDate.toString();  
                       return moment(utcDate).format('DD/MM/YYYY | h:mm A');
                  }
                },                
                {
                    className: 'challenge-details-control',
                    data: null,
                    defaultContent: ''
                },
                { data: 'id', name: 'id' },
            ],
            'columnDefs': [
                {
                    'targets': [4], /* column index */
                    'orderable': false, /* true or false */
                },
                {
                    'targets': [4], /* column index */
                    "searchable": false
                },
                {
                    "targets": [5],
                    "visible": false
                }
            ],
            createdRow: function (row, data, index) {
                $(row).addClass("view");
            },
            'aaSorting': [5, 'DESC']
        });

        // Add event listener for opening and closing details
        $('#employee_challanges tbody').on('click', 'td.challenge-details-control', function () {
          //console.log($(this).siblings('tr'));
            var tr = $(this).closest('tr');
            var row = cTable.row( tr );            
            
            cTable.rows().every(function(){
              if(this.child.isShown()){
                this.child.hide();
                $(this.node()).removeClass('open');
              }
            });
     
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('open');
            }else {
                row.child( challange_format(row.data()) ).show();
                tr.addClass('open');
            }
        } );

        $('#employee_challanges tbody').on('click', '.open', function () {          
            var tr = $(this).closest('tr');
            var row = cTable.row( tr );
     
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('open');
            }else {
                row.child( challange_format(row.data()) ).show();
                tr.addClass('open');
            }
        });


    });

    function challange_format ( c ) {
      //alert(c.challenges_type);
     // alert(c.challenge_question_answer_id);
      if(c.type_id==1){
        return `<div class="find-table-content side-panel">
                  <div class="sub-content">
                    <p><span style="font-weight:bold;">Question: </span>`+c.challenge_full_question+`</p>
                    <p><span style="font-weight:bold;">Correct Answer: </span>`+c.challenge_answer+`</p> 
                    <p><span style="font-weight:bold;">Employee Answer: </span>`+c.emp_answer+`</p> 
                  </div>
                </div>`;
      }else{
       //alert(c.challenge_question_answer_id);
        return `<div class="find-table-content side-panel">
                  <div class="find-sub-img"><img src="` + siteUrl + `storage/images/challenge/phototaking/thumbnail/` + c.challenge_image + `" ></div>                  
                  <div class="sub-content">
                    <p>`+c.challenge_title+`</p>                    
                  </div>
                </div>`;
      }
    }



    var redeemTable = '';
    $(document).ready(function () {
        redeemTable = $('#employee_redeem').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('superAdmin.employeeRedeemlist') }}",
                "type": "GET",
                "data": function(d) {
                     d.user_id = '{{ $userDetails->user_id }}';
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            columns: [
                {
                    data: 'redeem_point',
                    //className: 'text-center',
                    name: '',                    
                },
                {
                    data: 'giftcard_name',
                    name: '',
                               
                },
                /*{
                    data: 'finding_submission_date',
                    name: 'finding_submission_date',
                },*/
                {
                  data: null,      
                  className: 'text-left',          
                  render: function (data, type, row) {                       
                       var local_date = new Date(data.created_at); 
                       var getYear = local_date.getFullYear();
                       var getmonth = local_date.getMonth();
                       var getmonth = (getmonth);
                       var getdays = local_date.getDate();
                       var gethours = local_date.getHours();
                       var getminutes = local_date.getMinutes();
                       var getseconds = local_date.getSeconds();                     
                       let utcDate = new Date(Date.UTC(getYear, getmonth , getdays, gethours, getminutes, getseconds));                    
                       utcDate =utcDate.toString();  
                       return moment(utcDate).format('DD/MM/YYYY | h:mm A');
                  }
                },
                {
                    className: 'details-control',
                    data: null,
                    defaultContent: ''
                },
                { data: 'id', name: 'id' },
            ],
            'columnDefs': [
                {
                    'targets': [3], /* column index */
                    'orderable': false, /* true or false */
                },
                {
                    'targets': [3], /* column index */
                    "searchable": false
                },
                {
                    "targets": [4],
                    "visible": false
                }
            ],
            createdRow: function (row, data, index) {
                $(row).addClass("view");
            },
            'aaSorting': [4, 'DESC']
        });

        // Add event listener for opening and closing details
        $('#employee_redeem tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = redeemTable.row( tr );

            redeemTable.rows().every(function(){
              if(this.child.isShown()){
                this.child.hide();
                $(this.node()).removeClass('open');
              }
            });
     
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('open');
            }else {
                row.child( rformat(row.data()) ).show();
                tr.addClass('open');
            }
        } );


        $('#employee_redeem tbody').on('click', '.open', function () {          
            var tr = $(this).closest('tr');
            var row = redeemTable.row( tr );
     
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('open');
            }else {
                row.child( rformat(row.data()) ).show();
                tr.addClass('open');
            }

        } );
        

    });

    function rformat ( d ) {
        return `<div class="find-table-content side-panel">
              <div class="find-sub-img" width="50%">
                <img src="{{ asset('storage/images/giftcard/web') }}/`+d.gift_image+`" alt="" width="50%">
              </div>
              <div class="sub-content">
                <p>`+d.gift_desc+`</p>
                <p><strong>Amount: $`+d.redeem_amount+`</strong></p>
              </div>
            </div>`;
    }

    </script>
@endsection