@extends('layouts.admin')

@section('content')
<div class="row">  
  @if (session('success'))
    <div class="alert alert-success" role="alert">
      {{ session('success') }}
    </div>
  @endif
</div>
    <ul class="nav nav-tabs nav-tabs-bordered">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#polls">Live Polls</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#audience">Audience Q&A</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#analytics">Feedback Analysis</button>
        </li>    
    </ul>

    <div class="tab-content pt-2">
        <div class="tab-pane fade show active pt-3" id="polls">
            <div class="card">
                <div class="card-header">
                    Live Polls
                </div>
                <div class="card-body">
                    <div id="live-polls"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-content pt-2">
        <div class="tab-pane fade pt-3" id="audience">
            <div class="card">
                <div class="card-header">
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                      Questions
                      <div class="btn-group">
            <a href="#"  id="download-questions"><i class="fas fa-download fa-sm text-white-50"></i></a>
            
          </div>
                </div>
                <div class="card-body">
                    
                    <div class="col-md-12 table-responsive">
                    <table class="table table-responsive" id="example">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Station</th>
                                <th scope="col">Category</th>
                                <th scope="col">Question</th>
                                <th scope="col">Action</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($questions as $question)
                                <tr>
                                    <th scope="row"></th>
                                    <td>{{ $question->user->name }}</td>
                                    <td>{{ $question->user->station->name }}</td>
                                    <td>{{ $question->category->name }}</td>
                                    <td>{{ $question->question }}</td>
                                    <td>
                                      <a href="#" class="btn btn-primary"><i class="fas fa-edit"></i></a>
                                      <a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a>
                                        
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-content pt-2">
        <div class="tab-pane fade pt-3" id="analytics">
            <div class="card">
                <div class="card-header">
                   <div class="d-sm-flex align-items-center justify-content-between mb-4">
                     Feedback Analysis
                      
                </div>
                </div>
                <div class="card-body">
                         <!-- Sales Card -->
                  <div class="row">
                    
                          <!-- Left side columns -->
                          <div class="col-lg-8">
                            <div class="row">
                  
                              <!-- Sales Card -->
                              <div class="col-xxl-4 col-md-6">
                                <div class="card info-card sales-card">                  
                                  
                                  <div class="card-body">
                                    <h5 class="card-title">Feedback<span>| Total</span></h5>
                  
                                    <div class="d-flex align-items-center">
                                      <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                        <i class="bi bi-chat"></i>
                                      </div>
                                      <div class="ps-3">
                                        
                                        <span class="text-success small pt-1 fw-bold">{{ $feedback->count() }}</span>
                  
                                      </div>
                                    </div>
                                  </div>
                  
                                </div>
                              </div><!-- End Sales Card -->
                  
                              <!-- Revenue Card -->
                              <div class="col-xxl-4 col-md-6">
                                <div class="card info-card revenue-card">
                  
                                  
                  
                                  <div class="card-body">
                                    <h5 class="card-title">Objectives Rating <span>| Average</span></h5>
                  
                                    <div class="d-flex align-items-center">
                                      <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                        <i class="bi bi-star-half"></i>
                                      </div>
                                      <div class="ps-3">
                                       
                                        <span class="text-success small pt-1 fw-bold">{{$averageRating}}</span> 
                  
                                      </div>
                                    </div>
                                  </div>
                  
                                </div>
                              </div><!-- End Revenue Card -->
                  
                              <!-- Customers Card -->
                              <div class="col-xxl-4 col-xl-12">
                  
                                <div class="card info-card customers-card">
                  
                                                    
                                  <div class="card-body">
                                    <h5 class="card-title">Dealer <span>| Registration</span></h5>
                  
                                    <div class="d-flex align-items-center">
                                      <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                        <i class="bi bi-people"></i>
                                      </div>
                                       <div class="ps-3">
                                        <span class="text-danger small pt-1 fw-bold">{{$count}}</span>
                  
                                      </div>
                                    </div>
                  
                                  </div>
                                </div>
                  
                              </div><!-- End Customers Card -->
                                      <!-- Rating Card -->
                              <div class="col-12">
                                <div class="card recent-sales overflow-auto">

                                  <div class="filter">
                                    <a class="icon" href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                      <li class="dropdown-header text-start">
                                        <h6>Filter</h6>
                                      </li>

                                      <li><a class="dropdown-item" href="#">Today</a></li>
                                      <li><a class="dropdown-item" href="#">This Month</a></li>
                                      <li><a class="dropdown-item" href="#">This Year</a></li>
                                    </ul>
                                  </div>

                                  <div class="card-body">
                                    <h5 class="card-title">Rating <span>| Average</span></h5>

                                    <table class="table table-borderless datatable">
                                      <thead>
                                        <tr>
                                          <th scope="col">#</th>
                                          <th scope="col">Workshop Component</th>                                          
                                          <th scope="col">Rating</th>
                                        </tr>
                                      </thead>
                                      <tbody>
                                        @php
                                        $components = [
                                          'content_agenda_rating',
                                          'materials_handouts_rating',
                                          'consultants_rating',
                                          'workshop_length_rating',
                                          'logistical_arrangements_rating',
                                          'venue_rating',
                                          'lunches_tea_breaks_rating'
                                        ];
                                        @endphp
                              
                                        @foreach ($components as $index => $component)
                                        <tr>
                                          <th scope="row"><a href="#">{{ $index + 1 }}</a></th>
                                          <td>{{ ucfirst(str_replace('_', ' ', $component)) }}</td>
                                          <td>
                                            @php
                                            $feedbacks = \App\Models\Feedback::whereNotNull($component)->get();
                                            $ratingCount = $feedbacks->count();
                                            $ratingSum = $feedbacks->pluck($component)->map(function ($rating) {
                                              return ['Unsatisfactory' => 1, 'Poor' => 2, 'Average' => 3, 'Good' => 4, 'Excellent' => 5][$rating];
                                            })->sum();
                                            $averageRating = ($ratingCount > 0) ? round($ratingSum / $ratingCount, 2) : 0;
                                            echo $averageRating;
                                            @endphp
                                          </td>
                                        </tr>
                                        @endforeach
                                                            
                                      </tbody>
                                    </table>

                                  </div>

                                </div>
                              </div><!-- End Rating Card -->
                  
                  
                            </div>
                  
                           
                          </div><!-- End Left side columns -->
                  
                          <!-- Right side columns -->
                          <div class="col-lg-4">
                  
                  
                            <!-- News & Updates Traffic -->
                            <div class="card">                             
                  
                              <div class="card-body pb-0" style="overflow-y: scroll; max-height: 400px;">
                                <h5 class="card-title">Feedback Updates <span>| Live</span></h5>
                                <div class="news">
                                    @foreach($feedback as $item)
                                    <div class="post-item clearfix">                                   
                                     
                               
                                        <h4><a href="#">{{ $item->user->name }}</a></h4>
                                        <div class="row">
                                          <div class="col"> <strong>Overall Assessment</strong></div>
                                          <div class="col">{{ $item->overall_assessment }}</div>
                                        </div>
                                        <div class="row">
                                          <div class="col"> <strong>Interesting Aspect</strong></div>
                                          <div class="col">{{ $item->most_interesting_aspect }}</div>
                                        </div>
                                        <div class="row">
                                          <div class="col"> <strong>Liked Most</strong></div>
                                          <div class="col">{{ $item->liked_most }}</div>
                                        </div>
                                        <div class="row">
                                          <div class="col"><strong>Least Liked</strong></div>
                                          <div class="col">{{ $item->liked_least }}</div>
                                        </div>
                                        <div class="row">
                                          <div class="col"> <strong>Improvements</strong></div>
                                          <div class="col">{{ $item->improvement_suggestions }}</div>
                                        </div>
                                        <div class="row">
                                          <div class="col"> <strong>Workshop Improvements</strong></div>
                                          <div class="col">{{ $item->improvement_suggestions_workshop }}</div>
                                        </div>                                       
                                                                              
                                        
                                    </div>
                                    @endforeach
                                </div><!-- End sidebar recent posts-->
                            </div>
                            
                            </div><!-- End News & Updates -->
                  
                          </div><!-- End Right side columns -->
                  
                        </div>
            
  
                      </div>
  
                </div>
              </div><!-- End Reports -->
                </div>
            </div>
        </div>
    </div>
@endsection
@pushOnce('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var filterForm = document.getElementById('filter-form');
        var questionsTable = document.getElementById('questions-table');

        filterForm.addEventListener('submit', function (event) {
            event.preventDefault();

            var formData = new FormData(filterForm);
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        questionsTable.innerHTML = xhr.responseText;
                    } else {
                        console.error('Request failed. Status:', xhr.status);
                    }
                }
            };
            xhr.open(filterForm.method, filterForm.action);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.send(formData);
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var livePollsTab = document.getElementById('polls');
        var livePollsContent = document.getElementById('live-polls');

        // Load live polls content on tab activation
        livePollsTab.addEventListener('show.bs.tab', function (event) {
            if (event.target.id === 'polls') {
                loadLivePolls();
            }
        });

        // Function to load live polls content
        function loadLivePolls() {
            // Perform an AJAX request to fetch the live polls data
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        livePollsContent.innerHTML = xhr.responseText;
                    } else {
                        console.error('Request failed. Status:', xhr.status);
                    }
                }
            };
            xhr.open('GET', '{{ route('admin.live-polls') }}');
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.send();
        }

        // Load live polls content initially
        loadLivePolls();
    });
</script>
<script>
  $(document).ready(function() {
    // Initialize DataTable with search pane
    var table = $('#example').DataTable({
      dom: 'Plfrtip',
      columnDefs: [
        {
          targets: [3],
          searchPanes: {
            show: true
          }
        }
      ],
      buttons: [
        {
          extend: 'pdfHtml5',
          text: 'Download PDF',
          className: 'btn btn-primary',
          exportOptions: {
            columns: [0, 1, 2, 3, 4]
          }
        }
      ]
    });

    // Add PDF download button
    var pdfButton = new $.fn.dataTable.Buttons(table, {
      buttons: [
        {
          extend: 'pdfHtml5',
          text: 'Download PDF',
          className: 'btn btn-primary',
          exportOptions: {
            columns: [0, 1, 2, 3, 4]
          }
        }
      ]
    });

    // Append the PDF button to the existing button
    pdfButton.container().appendTo('#download-questions');
  });
</script>

@endPushOnce