@extends('layout.master')

@section('content')


<style>
    .active_btn{
        background-color: #324173!important;
    }
</style>

<div class="main-mobile-header doc-mobile-header">
      <a id="menuLink" href="#" class="menu-link"><i class="ri-menu-line"></i></a>
    </div>

   

    



     <div class="main main-app p-3 p-lg-4">
     	

        <div class="mb-4">
          <ol class="breadcrumb fs-sm mb-1">
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Feedback List</li>
          </ol>
        </div>



      <div class="">
        <div class="row">

          <div class="col-lg-8">
            <h2 class="main-title">Feedback List</h2>
            
          </div>
          <div style="text-align: right;" class="col-lg-4 text-right">
           <!--  <button type="button" class="btn btn-primary">Add Employee</button> -->
            <!-- <a href="/form" class="btn btn-primary">Create Hotel</a> -->
            <!-- <a type="button" href="{{ route('tyre.create') }}" class="btn btn-success btn-icon-text mb-2 mb-md-0">
              <i class="btn-icon-prepend" data-feather="package"></i>
              Import Tyre
            </a> -->
            
          </div>

        </div>
        
        <br><br>
        
        
                 <div class="row">
  <div class="col-lg-12 margin-tb">
    
    
    
    <div class=" mb-3">
        
    <a data-id="store" href="javascript:void();" class="unassigned display-btn btn btn-primary btn-icon-text mb-2 mb-md-0 active_btn">
        Open Tickets
    </a>
    
    <a data-id="assigned" href="javascript:void();" class="assigned display-btn btn btn-primary btn-icon-text mb-2 mb-md-0">
        Working Tickets
    </a>
    
    <a data-id="service" href="javascript:void();" class="service display-btn btn btn-primary btn-icon-text mb-2 mb-md-0">
        Closed Tickets
    </a>
            
    </div>
  </div>
</div>

<script>

$(document).ready(function() {
  $('.display-btn').click(function() {
    const data = $(this).data('id');
    console.log(data);
    // do something with attributeValue
    if(data== "assigned"){
        $('#assigned').show();
        $('#unassigned').hide();
        $('#service').hide();
        $('#scrap').hide();
        $('.assigned').addClass('active_btn');
        $('.unassigned').removeClass('active_btn');
        $('.service').removeClass('active_btn');
        $('.scrap').removeClass('active_btn');
        
    }
    else if(data== "store"){
        $('#unassigned').show();
        $('#assigned').hide();
        $('#service').hide();
        $('#scrap').hide();
        $('.unassigned').addClass('active_btn');
        $('.assigned').removeClass('active_btn');
        $('.service').removeClass('active_btn');
        $('.scrap').removeClass('active_btn');
    }
    else if(data== "service"){
        $('#service').show();
        $('#unassigned').hide();
        $('#assigned').hide();
        $('#scrap').hide();
        $('.unassigned').removeClass('active_btn');
        $('.assigned').removeClass('active_btn');
        $('.service').addClass('active_btn');
        $('.scrap').removeClass('active_btn');
    }
    else if(data== "scrap"){
        $('#service').hide();
        $('#unassigned').hide();
        $('#assigned').hide();
        $('#scrap').show();
        $('.unassigned').removeClass('active_btn');
        $('.assigned').removeClass('active_btn');
        $('.scrap').addClass('active_btn');
        $('.service').removeClass('active_btn');
    }
    
  });
});

   
 </script>


        <hr class="main-separator">        
    


<!--         <h5 id="section9" class="main-subtitle">Basic Example</h5>
 -->        <!-- <p>In this examples, we load the data from an existing HTML table.</p> -->



     
     <div id="unassigned">
        <div class="card card-example">
    <div class="card-body" style="background-color: white;">
        <div class="table-responsive">
        <table id="tableGrid2" class="table table-hover">
                <thead class="text-center">
                    <tr>
                        <th>No</th>
                        <th>Date</th>
                        <th>User</th>
                        <th>Issue Type</th>
                        <th>Module</th>
                        <th>Page Url</th>
                        <th>Audio Video Url</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                @foreach ($datas->where('status', 'Open') as $key => $data)
                     @php
                      $id=$data->user_id;
                      $user= $users->where('id', $id)->first();
                      $user_name = $user->name; // Corrected this line

                     @endphp
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $data->created_at }}</td>
                        <td>{{ $user_name }}</td>
                        <td>{{ $data->issue_type }}</td>
                        <td>{{ $data->module }}</td>
                        <td>{{ $data->page_url }}</td>
                        <td>{{ $data->audio_video_url }}</td>
                        <td>
                              <a href="javascript:void();">                                
                                <span class="badge bg-danger">{{ $data->status }}</span>
                              </a>
                        </td>  
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div><!-- table-responsive -->
    </div><!-- card-body -->
</div><!-- card -->
     </div>


     <div style="display:none;" id="assigned">
        <div class="card card-example">
    <div class="card-body" style="background-color: white;">
        <div class="table-responsive">
         <table id="tableGrid1" class="table table-hover">
                <thead class="text-center">
                    <tr>
                        <th>No</th>
                        <th>Date</th>
                        <th>User</th>
                        <th>Issue Type</th>
                        <th>Module</th>
                        <th>Page Url</th>
                        <th>Audio Video Url</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($datas->where('status', 'Working') as $key => $data)
                     @php
                      $id=$data->user_id;
                      $user= $users->where('id', $id)->first();
                      $user_name = $user->name; // Corrected this line

                     @endphp
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $data->created_at }}</td>
                        <td>{{ $user_name }}</td>
                        <td>{{ $data->issue_type }}</td>
                        <td>{{ $data->module }}</td>
                        <td>{{ $data->page_url }}</td>
                        <td>{{ $data->audio_video_url }}</td>
                        <td>
                              <a href="javascript:void();">                                
                                <span class="badge bg-danger">{{ $data->status }}</span>
                              </a>
                            </td>  
                        <td>{{ $data->status }}</td>                       
                    </tr>
                    @endforeach
                </tbody>
            </table>
      </div><!-- table-responsive -->
    </div><!-- card-body -->
</div><!-- card -->
     </div>

     
          <div style="display:none;" id="service">
        <div class="card card-example">
    <div class="card-body" style="background-color: white;">
        <div class="table-responsive">
        <table id="tableGrid3" class="table table-hover">
                <thead class="text-center">
                    <tr>
                        <th>No</th>
                        <th>Date</th>
                        <th>User</th>
                        <th>Issue Type</th>
                        <th>Module</th>
                        <th>Page Url</th>
                        <th>Audio Video Url</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                @foreach ($datas->where('status', 'Closed') as $key => $data)
                     @php
                      $id=$data->user_id;
                      $user= $users->where('id', $id)->first();
                      $user_name = $user->name; // Corrected this line

                     @endphp
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $data->created_at }}</td>
                        <td>{{ $user_name }}</td>
                        <td>{{ $data->issue_type }}</td>
                        <td>{{ $data->module }}</td>
                        <td>{{ $data->page_url }}</td>
                        <td>{{ $data->audio_video_url }}</td>
                        <td>
                              <a href="javascript:void();">                                
                                <span class="badge bg-danger">{{ $data->status }}</span>
                              </a>
                        </td>  
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div><!-- table-responsive -->
        </div><!-- table-responsive -->
    </div><!-- card-body -->
</div><!-- card -->
     </div>

       




        <br><br><br>


<div class="modal fade" id="addUser" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" style="padding: 3rem;">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">
                    Update Status
                </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <form action="{{ route('feedback.status_update') }}" method="POST" enctype="multipart/form-data" id="orm">
                            @csrf
                            <input type="hidden" name="ticket_id" id="ticket_id">
                            <input type="hidden" name="user_name" id="user_name">
                            
                            <div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="mb-3">
                                            <label class="form-label">Issue Type</label>
                                            <input id="issue_type" name="issue_type" type="text" class="form-control" value="" disabled />
                                        </div>
                                    </div>
                                                                        
                                    <div class="col-sm-12">
                                        <div class="mb-3">
                                            <label class="form-label">Status</label>
                                            <select id="status" name="status" class="form-select" data-width="100%">
                                                <option value="Open">Open</option>
                                                <option value="Working">Working</option>
                                                <option value="Closed">Closed</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                </div>
                                <br />
                                <div class="row" style="margin: 0px 0px;">
                                    <div class="col-sm-7"></div>
                                    <div class="col-sm-5">
                                        <div class="row justify-content-end">
                                            <button type="submit" value="submit" class="btn btn-primary mr-2" style="width: 100px;">Update</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <br />
            </div>
        </div>
    </div>
</div>
        

</div><!-- container -->


<script type="text/javascript">
$(document).ready(function() {
    $('.pagi-btn').click(function() {

  $('.gridjs .gridjs-tr th:first-child').hide();
  $('.gridjs .gridjs-tr td:first-child').hide();

      
     $('.gridjs .gridjs-tr').click(function() {
         var firstTd = $(this).find('td:first');
         var id= firstTd.text();
         window.location.href = '/feedback/details/' + id;
     });

    }); 
    
   setTimeout(function(){
     
     $('.gridjs .gridjs-tr th:first-child').hide();
     $('.gridjs .gridjs-tr td:first-child').hide();

     $('.gridjs .gridjs-tr').click(function() {
        var firstTd = $(this).find('td:first');
        var id= firstTd.text();
        window.location.href = '/feedback/details/' + id;
    });
    
      
  }, 200);

}); 
</script>

     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>

    <script type="text/javascript">
      $("#tableGrid1").Grid({
        className: {
          table: 'table table-bordered mb-0'
        },
        search: true
      });
    </script>
     
     <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    .gridjs-head{
      display: flex;
    }
    .gridjs-search{
      width: 50%;
    }
    .filter{
      margin-left: auto;
      width: 200px;
    }
    </style>

   <script>
$(document).ready(function() {
  setTimeout(function(){
    $('.active_status .gridjs-head').append('<div class="filter mb-2"><div class=" sel"><select id="fliterdrop" class="form-select"  onchange="getval(this);"><option value="Active" selected>Active</option><option value="Inactive">Inactive</option></select></div></div>');
    $('.inactive_status .gridjs-head').append('<div class="filter mb-2"><div class=" sel"><select id="fliterdrop2" class="form-select"  onchange="getval(this);"><option value="Active">Active</option><option value="Inactive" selected>Inactive</option></select></div></div>');
  }, 200);
});
function getval(sel){
  var value = sel.value;
  console.log(value);
  $('.active_status .gridjs-head .filter').html('');
  $('.active_status .gridjs-head .filter').append('<div class=" sel"><select id="fliterdrop" class="form-select"  onchange="getval(this);"><option value="Active" selected>Active</option><option value="Inactive">Inactive</option></select></div>');
  $('.inactive_status .gridjs-head .filter').html('');
  $('.inactive_status .gridjs-head .filter').append('<div class=" sel"><select id="fliterdrop2" class="form-select"  onchange="getval(this);"><option value="Active">Active</option><option value="Inactive" selected>Inactive</option></select></div>');
    if (value=='Active') {
    $('.active_status').show();
    $('.inactive_status').hide();
    }
    else if (value=='Inactive') {
    $('.inactive_status').show();
    $('.active_status').hide();
    }
    // console.log($("#fliterdrop").val);
    // $(".filter").html("");
}
// $('.filter').change(function() {
//   console.log("here is my on change");
//     var value = $(this).val();
//     if (value=='Active') {
//     $('.active_status').show();
//     $('.inactive_status').hide();
//     }
//     else if (value=='Inactive') {
//     $('.inactive_status').show();
//     $('.active_status').hide();
//     }
// });
</script>


    <script type="text/javascript">

      $("#tableGrid1").Grid({
  className: {
    table: 'table table-bordered mb-0'
  },
  search: true
});

 //       $('#filter').change(function() {
 //   console.log('Button clicked!');
 //   var value = $(this).val();
 //   alert(value)

 // });


    </script>

<script type="text/javascript">
       $(document).on('click', '.addUser', function() {
        e.preventDefault();
            var id = $(this).data('id');
            console.log(id)

    var initialMydata = {!! json_encode($datas->toArray()) !!};

    var filteredMydata = initialMydata.filter(function(entry) {
      return entry.id == id ;
    });
    console.log(filteredMydata[0].issue_type)
  
   // Update the PurchaseOrder options
   
      $('#addUser #ticket_id').val(filteredMydata[0].id);
      $('#addUser #issue_type').val(filteredMydata[0].issue_type);


      
                   
        });
         
</script>


@endsection