@extends('layouts.master')
@section('content')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
   .form-switch .form-check-input:checked {
   border-color: #08441d;
   background-color: #1d8943;
   }
   .gra{
   background-image: linear-gradient(#676770, #403b3b);
   color:white;
   }
   div#myTable_filter {
   margin-right: 13px;
   }
   .flex.justify-between.flex-1.sm\:hidden {
   display: none;
   }
   p.text-sm.text-gray-700.leading-5 {
   display: none;
   }
   #print {
   margin-top: 0;
   margin-left: 12px;
   width: 25%;
   }
   button.btn.bg-gradient-primary.btn-sm.mb-0 {
   margin-top: 0;
   }
   .input-group.input-group-outline {
   display: flex;
   gap: 6px;
   }
   #print_report {
   margin-top: 0;
   }
</style>
<div class="container-fluid ">
<div id="statusMsg">
</div>
@if (Session::has('msg'))
<div class="alert alert-success">
   <ul>
      <li>{{ Session::get('msg') }}</li>
   </ul>
</div>
@endif
<div class="container-fluid py-4">
<div class="row mb-6">
   <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
      <div class="card">
         <div class="card-body p-3">
            <form action='{{ route("print_report_user") }}' method='post'>
               @csrf
               <div class='row'>
                  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                     <div class="input-group input-group-outline">
                        <select class="form-control select-district" name="district[]" multiple id='district' onchange="update_subscategories_div(Array.from(this.selectedOptions).map(option => option.value))">
                           <option value="">Select District</option>
                           @foreach($total_district as $data)
                           <option value="{{ $data->district_id }}">{{ $data->name }}</option>
                           @endforeach
                        </select>
                     </div>
                  </div>
                  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                     <div class="input-group input-group-outline">
                        <select class="select form-control multi_select" multiple name="facility_id[]" id='facility-dropdown'>
                           <option value=""  disabled>Select Facility</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                     <div class="input-group input-group-outline">
                        <select class="select form-control multi_select_category" multiple name="category_id[]" id='category-dropdown'>
                           <option value="" >Select Category</option>
                           @foreach($category as $item)
                           <option value="{{ $item->id }}">{{ $item->name }}</option>
                           @endforeach
                        </select>
                     </div>
                  </div>
                  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4" style="align-self: center;">
                     <div class="input-group input-group-outline" style='display:flex; align-items:center;'>
                        <small>Start Date</small>
                        <input type='date' class='form-control' name='start_date'>
                     </div>
                  </div>
                  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4" style="align-self: center; margin-top:10px;">
                     <div class="input-group input-group-outline" style='display:flex; align-items:center;'>
                        <small>End Date</small>
                        <input type='date' class='form-control' name='end_date'>
                     </div>
                  </div>
                  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4" style='margin-left:699px; margin-top:10px;'>
                     <div class="input-group input-group-outline">
                        <!--<a class="btn bg-gradient-primary btn-sm mb-0" id='apply' title="Apply">Apply</a>-->
                        <button class="btn bg-gradient-primary btn-sm mb-0" type='submit' id='print_report' title="Print">Print</button>
                        <!--<a class="btn bg-gradient-primary btn-sm mb-0"  id='filter_facilities' title="Filter Facilities">Filter Facilities</a>-->
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
<div class="row">
<div class="col-12">
<div class="card my-4">
   <div class="card">
      <div class="card-header pb-0">
         <div class="d-lg-flex">
            <h5 class="mb-0">Quiz Results</h5>
            <div class="ms-auto my-auto mt-lg-0 mt-4">
            </div>
         </div>
      </div>
      <div class="card-body px-0 pb-0">
         <div class="table-responsive">
            <div
               class="dataTable-wrapper dataTable-loading no-footer sortable searchable fixed-columns">
               <div class="dataTable-container">
                  <table class="table table-flush dataTable-table" id="myTable">
                     <thead class="thead-light">
                        <tr>
                           <th>Id</th>
                           <th>User name</th>
                           <th>User email</th>
                           <th>Level</th>
                           <th>Category</th>
                           <th>Health & Facility</th>
                           <th>Quiz</th>
                           <th>Total Question</th>
                           <th>Total Attempt</th>
                           <th>Correct Answers</th>
                           <th>Wrong Answers</th>
                           <th>Percent</th>
                           <th>Watch time</th>
                        </tr>
                     </thead>
                     <tbody>
                        @foreach ($quiz_results as $list)
                        @php
                        $user=App\Models\User::where('id',$list->user_id)->first();
                        $quiz=App\Models\Quiz::where('quiz_id',$list->quiz_id)->first();
                        $category=App\Models\Category::where('id',$list->category_id)->first();
          
                        $facility = DB::table('facility')->where('id', $user->facility_id)->first();
                        @endphp
                        <tr>
                           <td >
                              <span  class="d-flex flex-column justify-content-center"
                                 class="text-secondary text-xs font-weight-bold">{{ $loop->index+1 ?? "N/A" }}</span>
                           </td>
                           <td >
                              <span  class="d-flex flex-column justify-content-center"
                                 class="text-secondary text-xs font-weight-bold">{{ $user->first_name ?? "N/A" }} {{ $user->last_name ?? "N/A" }}</span>
                           </td>
                           <td >
                              <span  class="d-flex flex-column justify-content-center"
                                 class="text-secondary text-xs font-weight-bold">{{ $user->email ?? "N/A" }}</span>
                           </td>
                            <td >
                            <span class="text-secondary text-xs font-weight-bold">
                             {{$quiz->level_id == 1 ? "Beginner" : ($quiz->level_id == 2 ? "Intermediate" : ($quiz->level_id == 3 ? "Advanced" : 'N/A'))}}
                            </span>
                            </td>
                            <td >
                              <span
                                 class="text-secondary text-xs font-weight-bold">{{$category->name ?? 'N/A'}}</span>
                           </td>
                           <td >
                              <span
                                 class="text-secondary text-xs font-weight-bold">{{$facility->name ?? 'N/A'}}</span>
                           </td>
                           <td >
                              <span
                                 class="text-secondary text-xs font-weight-bold">{{$quiz->quiz_name ?? 'N/A'}}</span>
                           </td>
                           <td>
                              <span class="text-secondary text-xs font-weight-bold">{{ $list->total_question ?? "N/A" }}</span>
                           </td>
                           <td>
                              <span class="text-secondary text-xs font-weight-bold">{{ $list->total_attempt ?? "N/A" }}</span>
                           </td>
                           <td>
                              <span class="text-secondary text-xs font-weight-bold">{{ $list->correct_answer ?? "N/A" }}</span>
                           </td>
                           <td>
                              <span class="text-secondary text-xs font-weight-bold">{{ $list->wrong_answer ?? "N/A" }}</span>
                           </td>
                           <td>
                              <span class="text-secondary text-xs font-weight-bold">{{ $list->percent ?? "N/A" }}</span>
                           </td>
                           <td>
                              <span class="text-secondary text-xs font-weight-bold">{{ $list->watch_time ?? "N/A" }}</span>
                           </td>
                           <td>
                              <span class="text-secondary text-xs font-weight-bold">{{ $list->created_at ?? "N/A" }}</span>
                           </td>
                        </tr>
                        @endforeach
                     </tbody>
                  </table>
                  <div class="d-flex justify-content-center">
                     {{ $quiz_results->links() }}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
   function update_subscategories_div(id) {
               $("#facility-dropdown").html('');
               var district = id;
               var csrfToken = '{{ csrf_token() }}';
               var requestData = {
               district: district,
           };
               $.ajax({
                   url: '/bhcip/filter/facility',
                   type: 'POST',
                   data: requestData,
                     headers: {
                       'X-CSRF-TOKEN': csrfToken
                   },
                   success: function(response) {
                       console.log(response);
   
                         $('#facility-dropdown').html('<option value="">Select Facility</option>');
                           $.each(response.facility, function (key, value) {
                               $("#facility-dropdown").append('<option value="' + value
                                   .id + '">' + value.name +'('+value
                                   .id+')'+ '</option>');
                       });
                        $('.multi_select').selectpicker('refresh');
                   }
                   ,
                   error: function(xhr, status, error) {
                       console.error('Something went wrong:', error);
                   }
           }); 
   }
   
       $(document).ready( function () {        
       $('.select-district').selectpicker();
       $('.multi_select').selectpicker();
       $('.multi_select_category').selectpicker();
       $('.multi_select_district').selectpicker();
       $("#submit").click(function() {
               var district = $('#district').val();
               var facility_id = $('#facility-dropdown').val();
               var csrfToken = '{{ csrf_token() }}';
               var requestData = {
               district: district,
               facility_id: facility_id,
           };
               if(district==''){
                   alert('You must select District then filter data!');
               }
               else{
               $.ajax({
                   url: '/bhcip/filter/reporting',
                   type: 'POST',
                   data: requestData,
                     headers: {
                       'X-CSRF-TOKEN': csrfToken
                   },
                   success: function(response) {
                       console.log(response);
                       $('#first_level').html(response.first_level);
                       $('#second_level').html(response.second_level);
                       $('#third_level').html(response.third_level);
                       $('#pass_users').html(response.pass);
                       $('#fial').html(response.fial);
                   },
                   error: function(xhr, status, error) {
                       console.error('Something went wrong:', error);
                   }
           });
               }
           });
           
           
           
           
           
           
       
   
   
           
           
       
       $("#print").click(function() {
               var district = $('#district').val();
               var facility_id = $('#facility-dropdown').val();
               var csrfToken = '{{ csrf_token() }}';
               var requestData = {
               district: district,
               facility_id: facility_id,
           };
               
               $.ajax({
                   url: '/bhcip/print/report',
                   type: 'POST',
                   data: requestData,
                     headers: {
                       'X-CSRF-TOKEN': csrfToken
                   },
                   success: function(response) {
                       console.log(response);
                   },
                   error: function(xhr, status, error) {
                       console.error('Something went wrong:', error);
                   }
           });
               
           });
      })
</script>
@endsection