@extends('companyAdmin.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 -->

  @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('companyAdmin.employeeList') }}">
              <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Employees</h1>
            </a>
            <!-- <div class="filter-group">
              <label for="deactive" class="custom-radio-fill">
                <input type="radio" name="selectstate" value="option1" id="deactive" class="d-none">
                <span>Deactive</span>
              </label>
              <label for="active"  class="custom-radio-fill">
                <input type="radio" name="selectstate" id="active" value="option2" class="d-none">
                <span>Active</span>
              </label>
            </div> -->
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-body">
                <form action="{{ route('companyAdmin.updateEmployeeNew') }}" method="post" id="addEmp" enctype="multipart/form-data">
                    @csrf
                 <div class="emp-details-topbar">
                   <!-- Avatar  -->
                  
                   <div class="avt-updates">
                    <div class="upload admin">
                      <label for="profile_image">
                        <input type="file" class="d-none" name="profile_image" id="profile_image" onchange="loadProfileImage(event)" >                       
                        <img id="output_img" src="{{ url('storage/images/user/web/'.$userDetails->user_image) }}" alt="">
                       <img src="{{ asset('assets/images/upload-photo.svg') }}" alt="" class="add">
                      </label>
                    <p class="label">Update</p>
                    </div>
                   </div>                  
                   <!-- EMP FORM GROUP -->
                   <div class="emp-forms">                     

                       <div class="form-group">
                         <label for="" class="form-label">First Name *</label>
                         <input type="text" name="first_name" class="form-control" value="{{ $userDetails->first_name }}">
                         <input type="hidden" name="emp_id" id="emp_id" value="{{ $userDetails->user_id }}">
                       </div>
                       <div class="form-group">
                         <label for="" class="form-label">last Name *</label>
                         <input type="text" name="last_name" class="form-control" value="{{ $userDetails->last_name }}">
                       </div>

                       <div class="form-group">
                        <label for="" class="form-label">Email Address *</label>
                        <input type="text" class="form-control" value="{{ $userDetails->email }}" readonly>
                      </div> 

                      
                      <div class="form-group">
                                    <label for="" class="form-label">Assign Location(s)</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 location-dropdown" />
                                                <span class="select-text"> Select</span> All</label></a></li>
                                                <li class="divider"></li>
                                                @foreach($getLocation as $location)
                                      <li><a class="option-link" href="#"><label>
                                          <input name='locations[]' type="checkbox" @if(in_array($location['id'], $assignLocation)) checked="checked" @endif class="option justone location-dropdown"  value="{{$location['id']}}"/> {{$location['name']}}</label></a>
                                      </li>
                                  @endforeach
                                        </ul>
                                    </div>
                                </div>

        
                      <div class="form-group">
                        <label for="" class="form-label">Assign Active Location</label>
                            <select name="active_location" id="active_location" class="active_location form-control">
                            <option value="">Select</option>
                                @foreach($getLocation as $location)
                                    <option value="{{$location['id']}}"  @if($location['id'] == $activeLocation['location_id']){{'selected'}}@endif >{{$location['name']}}</option>
                                @endforeach
                            </select>
                    </div>
                    
                   </div>
                  
                   <!-- Total PTS -->
                   <div class="save-infos">
                     <span class="total-pts">
                       <div class="info">
                        <h2>{{ $totalUserPoints }}</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> 
                 </form>
                <!-- 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>                      
                      <li>Messages</li>
                      
                    </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>
                      
                      <div class="messages">
                       <!--  <p>Messages</p> -->
                       <table id="employee_messages" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
                          <thead>
                            <tr>
                              <th>User Name</th>
                              <th>Message</th>
                              <th>Submitted (Date | Time)</th>
                              <th>View</th>
                            </tr>
                          </thead>
                          <tbody>                              
                          </tbody>
                         </table>
                        
                      </div>
                     
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!--// MAIN BODY CONTENT -->
        </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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/js/bootstrap-multiselect.min.js"></script>


<script>
    $(document).ready(function() {
        $('.locations').multiselect();
    });
    function frmsubmit(){
        //alert("Hello");
        $('#addEmp').submit();
    }

    $('.selectall').click(function () {
        if ($(this).is(':checked')) {
          $('.option').prop('checked', true);
          var total = $('input[name="locations[]"]: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="locations[]"]:checked').length;
        $(".dropdown-text").html('(' + total + ') Selected');
      });

        $('.location-dropdown').on("click",function () {          
            $('.active_location option').attr("disabled", true);
            $("select.active_location option").prop("selected", false).first().prop("selected", true);
            
            $('.location-dropdown').each(function () {
                if($(this).is(':checked')){
                    $('.active_location option[value="'+($(this).val())+'"]').attr("disabled", false);
                }
                
            });
        });

 
</script>

  <!-- Accordion table -->
  <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
    }
 };

    // $(function(){
    //   $(".fold-table tr.view").on("click", function(){
    //     $(this).toggleClass("open").next(".fold").toggleClass("open");
    //   });
    // });
    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('companyAdmin.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 collapse_data=`<div class="find-table-content">
      //       <div class="find-sub-img">
      //         <img src="../assets/images/house.jpg" alt="">
      //       </div>
      //       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
      //     </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('companyAdmin.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 mTable = '';
    $(document).ready(function () {
        mTable = $('#employee_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.employeeMessageslist') }}",
                "type": "GET",
                "data": function(d) {
                     d.user_id = '{{ $userDetails->user_id }}';
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            columns: [
                {
                    data: 'user_image',
                    //className: 'text-center',
                    name: '',                    
                },
                {
                    data: null,
                    //name: 'emp_message',
                    render: function (data, type, row) {   
                      return data.emp_message.substring(0,75)+'...';
                     }            
                },
                /*{
                    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');
                  }*/
                  data: 'created_at',
                    name: 'created_at',
                }, 
                {
                    className: 'details-control',
                    data: null,
                    defaultContent: ''
                },
                { data: 'thread_id', name: 'thread_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_messages tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = mTable.row( tr );

            mTable.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( mformat(row.data()) ).show();
                tr.addClass('open');
            }
        } );


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

        } );
        

    });

    function mformat ( d ) {
        return `<div class="find-table-content side-panel">               
                  <div class="sub-content">
                    <p>`+d.emp_message+`</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('companyAdmin.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">
                <img src="{{ asset('storage/images/giftcard/web') }}/`+d.gift_image+`" alt="">
              </div>
              <div class="sub-content">
                <p>`+d.gift_desc+`</p>
                <p><strong>Amount: $`+d.redeem_amount+`</strong></p>
              </div>
            </div>`;
    }


  </script>
@endsection