<script type="text/javascript">
    window.onload = function() {

        var chart1 = new CanvasJS.Chart("chartContainer", {
            theme: "light1", // "light2", "dark1", "dark2"
            animationEnabled: true, // change to true   
            exportEnabled: true,
            title: {
                text: "Users"
            },

            data: [{
                // Change type to "bar", "area", "spline", "pie",etc.
                type: "column",
                indexLabelFontSize: 17,
                dataPoints: [{
                        label: "Users",
                        color: '#20435A',
                        y: <?= $users ?>
                    },
                    {
                        label: "Instrumentalist",
                        color: '#638DA6',
                        y: <?= $users ?>
                    },
                    {
                        label: "Artist",
                        color: '#638DA6',
                        y: <?= $users ?>
                    },
                    {
                        label: "Songwriter",
                        color: '#638DA6',
                        y: <?= $users ?>
                    },
                    {
                        label: "Producer",
                        color: '#638DA6',
                        y: <?= $users ?>
                    },
                    {
                        label: "Industry Professional",
                        color: '#638DA6',
                        y: <?= $users ?>
                    }
                ]
            }]
        });

        var chart2 = new CanvasJS.Chart("myPieChart", {
            theme: "light2", // "light2", "dark1", "dark2"
            animationEnabled: true, // change to true   
            exportEnabled: true,
            title: {
                text: "Males & Females"
            },

            data: [{
                // Change type to "bar", "area", "spline", "pie",etc.
                type: "pie",
                indexLabelFontSize: 17,
                dataPoints: [{
                        label: "Males",
                        color: '#8E5A6A',
                        y: <?= $males ?>
                    },
                    {
                        label: "Females",
                        color: '#CC8A9F',
                        y: <?= $females ?>
                    }
                ]
            }]
        });
        chart1.render();
        chart2.render();


    }
</script>
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
        <!-- <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a> -->
    </div>

    <!-- Content Row -->
    <div class="row">

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-users shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#fff;">
                                Users</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $users ?></div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-3x" style="color:#fff;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-podcasts shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#fff;">
                                Instrumentalist</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $users ?></div>
                        </div>
                        <div class="col-auto">
                        	<img src="<?php echo base_url().'assets/theme/img/ilist.png'; ?>">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-males shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#fff;">Artist</div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800"><?= $males ?></div>
                                </div>
                                <!-- <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="col-auto">

                       <img src="<?php echo base_url().'assets/theme/img/aIcon.png'; ?>">
                     
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-males shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#fff;">Songwriter</div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800"><?= $males ?></div>
                                </div>
                                <!-- <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="col-auto">
                     <img src="<?php echo base_url().'assets/theme/img/sicon.png'; ?>">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-males shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#fff;">Producer</div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800"><?= $males ?></div>
                                </div>
                                <!-- <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="col-auto">
                                                <img src="<?php echo base_url().'assets/theme/img/picon.png'; ?>">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-females shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#fff;">
                                Industry Professional</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $females ?></div>
                        </div>
                        <div class="col-auto">
                               <img src="<?php echo base_url().'assets/theme/img/ipicon.png'; ?>">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Content Row  Industry Professional -->

    <div class="row">

        <!-- Area Chart -->
        <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="chart-area">
                        <div id="chartContainer" style="width: 100%; height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Pie Chart -->
        <div class="col-xl-4 col-lg-5 d-none">
            <div class="card shadow mb-4">

                <!-- Card Body -->
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <div id="myPieChart" style="width: 100%; height: 100%;"></div>
                        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="row">

        <!-- Area Chart -->
        <?php 

        foreach ($anaylatic as $key => $value) {
    


        ?>
        <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-body">
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#fff;">
    Anaylatic For <?php echo $value->dimensions[2]; ?> Users

</div>
                    <?php
                       //  echo "<pre>";
                       //  print_r($value);
                       // // print_r ($value->dimensions);
                       //  echo "</pre>";
                     ?>
                     <div class="table-responsive">
                <table class="table table-bordered"  width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Country</th>
                            <th>City</th>
                            <th>Active User</th>
                            <th>Screen Page View</th>
                            <th>Bones Rate</th>
                            <th>Sessions</th>
                            <th>Average Session Duration</th>
                            <th>Total User</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> <?php echo $value->dimensions[0]; ?> </td>
                            <td> <?php echo $value->dimensions[1]; ?> </td>
                            <td> <?php echo $value->metrics[0]; ?> </td>
                            <td> <?php echo $value->metrics[1]; ?> </td>
                             <td> <?php echo $value->metrics[3]; ?> </td>
                             <td><?php echo $value->metrics[4]; ?></td>
                            <td> <?php echo $value->metrics[5]; ?> </td>
                             <td> <?php echo $value->metrics[6]; ?> </td>
                        </tr>
                    </tbody>
                </table>
            </div>





   </div>
</div>
</div>
<?php } ?>

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

        <!-- Area Chart -->

        <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-body">
<div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#fff;">
   Engagement Anaylatic

</div>
                    <?php
                       //  echo "<pre>";
                       //  print_r($pageanaylatic);
                       // // print_r ($value->dimensions);
                       //  echo "</pre>";
                     ?>
                     <div class="table-responsive">
                <table class="table table-bordered"  width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Screen Name</th>
                            <th>Engagement Rate</th>
                           
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($pageanaylatic as $key => $value) {
                                            
                       //                          echo "<pre>";
                       //   print_r($value);
                       // // // print_r ($value->dimensions);
                       //   echo "</pre>";     # code...
                         ?>
                        <tr>
                            <td> <?php
                                if($value->dimensions[0]=="Song Pad"){
                                    echo "Home Page";
                                }else if($value->dimensions[0]=="(not set)"){
                                    echo "Recording Page";
                                }else{
                                    echo $value->dimensions[0];
                                }

                              ?> </td>
                            <td> <?php echo $value->metrics[0]."%"; ?> </td>
                           
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>





   </div>
</div>
</div>

</div>

</div>
<!-- /.container-fluid -->




<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
<script>
  // Initialize Firebase
  var config = {
     apiKey: "AIzaSyDf0f-cPfZViXvHAXrClAF9ug-JCgnXgLE",
  authDomain: "songpad-59207.firebaseapp.com",
  databaseURL: "https://songpad-59207-default-rtdb.firebaseio.com",
  projectId: "songpad-59207",
  storageBucket: "songpad-59207.appspot.com",
  messagingSenderId: "148539799390",
  appId: "1:148539799390:web:749bedb11ed12d77a941cf",
  measurementId: "G-5102SJJCPH"
  };
  firebase.initializeApp(config);


  const analytics = firebase.analytics();
  firebase.analytics().getAnalyticsCollection('events').then(function(analyticsCollection) {
  analyticsCollection.forEach(function(event) {
  	console.log(event);
    // Do something with the event data
  });
});

</script>






