@extends('dashboard.layout.master')
@section('content')
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<style>
p.mb-2 {
    white-space: nowrap;
}


</style>

        
    
<!-- Content Start -->
<div class="content">
    <!-- Navbar Start -->
  
    @include('dashboard.layout.navbar')
    <!-- Navbar End -->

       @if ($message = Session::get('success'))
        <div class="alert alert-success alert-dismissible" role="alert" id='success-alert'>
         {{ $message }}
        </div>
       @elseif ($message = Session::get('error'))
        <div class="alert alert-danger" id='alert-danger'>
         {{ $message }}
         </div>
	    @endif

    @if(Auth::user()->role !== 56 && Auth::user()->role !== 57)
    <!-- Sale & Revenue Start -->
    @include('dashboard.charts&reports.countReports')
    @include('dashboard.charts&reports.PDNAChart')
    @include('dashboard.charts&reports.pdnaReportLotWise')
    @include('dashboard.chart.main_symmery')
    <!-- Sale & Revenue End -->
    @endif
   


    <!-- Recent Sales Start -->
    <div class="container-fluid pt-4 px-4">
    </div>
    <!-- Recent Sales End -->

    
    @if(Auth::user()->role == 56 || Auth::user()->role == 57 || Auth::user()->role == 1)
    <x-backend.grm.complaint.counters />
    @endif
    
    <script>
    
//     const data1 = {
//     labels: [
//         'collapsed',
//         'deflected',
//         'infact',
//     ],
//     datasets: [{
//         label: 'Foundation Status',
//         data: [10, 20, 30],
//         backgroundColor: [
//             'rgb(255, 99, 132)',
//             'rgb(54, 162, 235)',
//             'rgb(255, 205, 86)',
//         ],
//         hoverOffset: 4
//     }]
// };

// const config1 = {
//     type: 'pie',
//     data: data1,
//     options: {
//         plugins: {
//             tooltip: {
//                 callbacks: {
//                     label: function(tooltipItem) {
//                         const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0);
//                         const value = tooltipItem.raw;
//                         const percentage = ((value / total) * 100).toFixed(2);
//                         return `${tooltipItem.label}: ${value} (${percentage}%)`;
//                     }
//                 }
//             }
//         }
//     }
// };

// const myChart1 = new Chart(
//     document.getElementById('myChart1'),
//     config1
// );

        
     
    // Automatically close the alert after 5 seconds
    setTimeout(function() {
        $('#success-alert').fadeOut('slow');
        $('#alert-danger').fadeOut('slow');
    }, 2000); // 5000ms = 5 seconds

        
    </script>
    
    @endsection