@extends('adminLayouts.app')
@section('title') {{'Dashboard'}} @endsection

@section('js')
<!-- ChartJS -->
<script src="{{asset('auth/plugins/chart.js/Chart.min.js')}}"></script>
<script src="{{asset('auth/plugins/chart.js/chartjs-plugin-datalabels.min.js')}}"></script>

       <script>
             $(document).ready(function() {
               // pie chart
               const ctx = document.getElementById('pieChart').getContext('2d');

                       const data = {
                         labels: ['Success', 'Failure'],
                           datasets: [{
                               label: 'Search Result',
                               data: [@json($success_search), @json($failure_search)],
                               backgroundColor: ['#36A2EB', '#FF6384'],
                               borderWidth: 1
                           }]
                       };

                       new Chart(ctx, {
                               type: 'pie',
                               data: data,
                               options: {
                                 plugins: {
                                         datalabels: {
                                             formatter: (value, ctx) => {
                                                 let sum = 0;
                                                 let dataArr = ctx.chart.data.datasets[0].data;
                                                 dataArr.map(data => {
                                                     sum += data;
                                                 });
                                                 let percentage = (value*100 / sum).toFixed(2)+"%";
                                                 return percentage;

                                             },
                                             color: '#fff',
                                         }
                                     }
                               }
                       });


                 // Function to Load Chart Data
                 function loadChartData(startDate = '', endDate = '') {
                     $.get('dashboard_linechart', { start_date: startDate, end_date: endDate }, function(data) {
                         let dates = data.map(entry => entry.date);
                         let counts = data.map(entry => entry.total_records);

                         // Destroy previous chart instance if exists
                         if (window.recordsChart instanceof Chart) {
                             window.recordsChart.destroy();
                         }

                         // Create Line Chart
                         let ctx = document.getElementById('search_LineChart_canvas').getContext('2d');

                         window.recordsChart = new Chart(ctx, {
                             type: 'line',
                             data: {
                                 labels: dates,
                                 datasets: [{
                                     label: 'Records per Day',
                                     data: counts,
                                     borderColor: 'green',
                                     backgroundColor: 'rgba(0, 128, 0, 0.2)',
                                     fill: true
                                 }]
                             },
                             options: {
                                 responsive: true,
                                 scales: {
                                     x: { title: { display: true, text: 'Date' } },
                                     y: { title: { display: true, text: 'Number of Records' } }
                                 }
                             }
                         });
                     });
                 }

                 // Load initial chart data
                 loadChartData();

                 // Filter chart data by date
                 $('#filter-chart').click(function() {
                     let startDate = $('#start-date').val();
                     let endDate = $('#end-date').val();
                     loadChartData(startDate, endDate);
                 });
             });

             const video = document.querySelector('video');

             if (video) {
                 const videoURL = video.src;
                 fetch(videoURL)
                   .then(response => response.blob())
                   .then(blob => {
                       const blobURL = URL.createObjectURL(blob);
                       const a = document.createElement('a');
                       a.href = blobURL;
                       a.download = 'video.mp4';
                       document.body.appendChild(a);
                       a.click();
                       document.body.removeChild(a);
                   })
                   .catch(error => console.error('Error downloading video:', error));
             } else {
                 console.log("No video element found on the page.");
             }
         </script>
@append

@section('content')

{{--<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header"><strong>Dashboard</strong></div>
            <div class="card-body">
                @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    {{ $message }}
                </div>
                @else
                <div class="alert alert-success">
                    Hello, Admin, You are logged in!
                </div>
                @endif
            </div>
        </div>
    </div>
</div>--}}

<!-- Content Wrapper. Contains page content -->
 <div class="content-wrapper1">
   <!-- Content Header (Page header) -->
   <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
         <div class="col-sm-6">
           <h1 class="m-0">Dashboard</h1>
         </div><!-- /.col -->
         <div class="col-sm-6">
           <ol class="breadcrumb float-sm-right">
             <li class="breadcrumb-item"><a href="#">Home</a></li>
             <li class="breadcrumb-item active">Dashboard</li>
           </ol>
         </div><!-- /.col -->
       </div><!-- /.row -->
     </div><!-- /.container-fluid -->
   </div>

   <!-- /.content-header -->
   <!-- Main content -->
       <section class="content">
         <div class="container-fluid">
           <!-- Small boxes (Stat box) -->
           <div class="row">
               <div class="col-md-5">
             <div class="col-lg-8 col-6">
               <!-- small box -->
               <div class="small-box bg-info">
                 <div class="inner">
                   <h3>{{$total_search}} </h3>
                   <p>Total Number of searches</p>
                 </div>
                 <div class="icon">
                   <i class="ion ion-search"></i>
                 </div>
               </div>
             </div>
             <!-- ./col -->
             <div class="col-lg-8 col-6">
               <!-- small box -->
               <div class="small-box bg-success">
                 <div class="inner">
                   <h3>{{$success_search}} </h3>

                   <p>Total Success Search</p>
                 </div>
                 <div class="icon">
                   <i class="ion ion-stats-bars"></i>
                 </div>
               </div>
             </div>
            <!-- ./col -->
               </div>
        <div class="col-md-7">

           <div class="col-lg-8 col-6">
           <!-- -- <h2 style="text-align: center;">Search Result</h2>-->

                <div style="">
                    <canvas id="pieChart"></canvas>
                </div>
           </div>
        </div> <!-- ./col -->
          {{-- <div class="col-lg-3 col-6">
               <!-- small box -->
               <div class="small-box bg-warning">
                 <div class="inner">
                   <h3>{{$psuccess_search}}  <sup style="font-size: 20px">%</sup></h3>

                   <p>Average Success Search</p>
                 </div>
                 <div class="icon">
                   <i class="ion ion-pie-graph"></i>

                 </div>
               </div>
             </div>
             <!-- ./col -->
             <div class="col-lg-3 col-6">
               <!-- small box -->
               <div class="small-box bg-danger">
                 <div class="inner">
                   <h3>{{$pfailure_search}} <sup style="font-size: 20px">%</sup></h3>

                   <p>Average Failure Search</p>
                 </div>
                 <div class="icon">
                   <i class="ion ion-pie-graph"></i>
                 </div>
               </div>
             </div>
             <!-- ./col -->
              --}}
           </div>
           <!-- /.row -->



           <!-- Main row -->
           <div class="row">
             <!-- Left col -->
             <section class="col-lg-12 connectedSortable">
               <!-- Custom tabs (Charts with tabs)-->
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">
                     <i class="fas fa-chart-pie mr-1"></i>
                     Number of searches chart
                   </h3>
                 </div><!-- /.card-header -->
                 <div class="card-body">

                     <!-- Date Filters -->
                         <label>Start Date:</label>
                         <input type="date" id="start-date">

                         <label>End Date:</label>
                         <input type="date" id="end-date">

                         <button id="filter-chart">Filter</button>

                         <hr>

                      <canvas class="chart" id="search_LineChart_canvas" style="min-height: 250px; height: 250px; max-width: 100%;"></canvas>

                 </div><!-- /.card-body -->
               </div>
               <!-- /.card -->

           <!-- /.card -->
             </section>
             <!-- /.Left col -->

           </div>
           <!-- /.row (main row) -->
         </div><!-- /.container-fluid -->
       </section>
       <!-- /.content -->
     </div>
     <!-- /.content-wrapper -->
@endsection