<?php
session_start();
if(isset($_SESSION['officer'])){
  $username = $_SESSION['officer'];

    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta charset="utf-8" />
        <?php include('../admin/includes/styles.php'); ?>
        <title>Dashboard | <?php echo $church_name; ?></title>

    
        <?php
        $sql =  "SELECT DISTINCT(districtID) FROM members";
        $conn->query($sql);
        $chart_data = '';
        $result_set = $conn->fetchMultiple();

        foreach ($result_set as $member_details){
      //fetch class names
      $sql = "SELECT name FROM districts WHERE id =:districtID";
      $conn->query($sql);
      $conn->bind(":districtID", $member_details->districtID);
      $branch_name = $conn->fetchColumn();

        

      //total number of students per class
      $sql = "SELECT COUNT(districtID) FROM members WHERE districtID =:districtID AND conyear='2024'";
      $conn->query($sql);
      $conn->bind(":districtID", $member_details->districtID);
      $total_members = $conn->fetchColumn();
      $chart_data .= "{branch:'".$branch_name."', members:".$total_members.",}, ";
    }

    $chart_data = substr($chart_data, 0, -2);


   
        
    ?>


    </head>
    <body class="fixed-header dashboard">
   
<?php include('includes/sidebar.php'); ?>

<?php
        $sql = "SELECT * FROM general_settings";
        $conn->query($sql);
        $result = $conn->fetchSingle();
        $curreg = ucwords($result->curreg);
        $curtype = $result->curtype;


        ?>

 <?php 
    $conyear = date('Y');                         
    $sql = "SELECT COUNT(id) FROM members WHERE conyear=:conyear";
    $conn->query($sql);
    $conn->bind(":conyear", $conyear);
    $totalreg = $conn->fetchColumn();
    
  ?> 


    <!-- START PAGE-CONTAINER -->
    <div class="page-container ">
        <?php include('includes/header.php'); ?>
        <!-- START PAGE CONTENT WRAPPER -->
        <div class="page-content-wrapper ">
            <!-- START PAGE CONTENT -->
            <div class="content sm-gutter">
                <!-- START CONTAINER FLUID -->
                <div class="container-fluid padding-25 sm-padding-10">
                    <div class="row">
                        <div class="col-lg-12 sm-p-t-50" style="margin-top: 40px">
                            <div class="alert alert-danger" style="color: white; height: 120px;background: linear-gradient( 60deg, #f1ad83 0%, #4358d0 100% );" role="alert">
                                <img src="<?php echo $base_url; ?>assets/img/admin-avatar.jpg" width="80" height="80" style="border-radius: 50%; border: 3px solid #fff; margin-left: 50px;margin: 0;position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);">
                                <?php
                                $sql = "SELECT name FROM officer WHERE username=:username";
                                $conn->query($sql);
                                $conn->bind(":username", $_SESSION['officer']);
                                $dasboard = $conn->fetchSingle();
                                $username = $dasboard->name;
                                ?>

                                <span style="left: 110px;margin: 0;position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);"> <strong><?php
// I'm India so my timezone is Asia/Calcutta
date_default_timezone_set('Africa/Lagos');

// 24-hour format of an hour without leading zeros (0 through 23)
$Hour = date('G');

if ( $Hour >= 0 && $Hour <= 11 ) {
    echo "Good Morning";
} else if ( $Hour >= 12 && $Hour <= 16 ) {
    echo "Good Afternoon";
} else if ( $Hour >= 17 || $Hour <= 23 ) {
    echo "Good Evening";
}
?> <?php echo $username; ?>,</strong>
                            <br>It's nice to see you again. Here is your overview</span>
                            </div></div>
                    </div>

                    <!-- START ROW -->
                    <div class="row">
                    <div class="col-lg-4">
                    <div class="card no-border widget-loader-bar m-b-10">
                  <div class="container-xs-height full-height">
                    <div class="row-xs-height">
                      <div class="col-xs-height col-top">
                        <div class="card-header  top-left top-right">
                          <div class="card-title">
                            <span class="font-montserrat all-caps d-flex align-items-center">Conference Status
				                        </span>
                          </div>
                          <div class="card-controls">
                            <ul>
                            <li><a href="#" class="portlet-refresh text-black" data-toggle="refresh"><i class="card-icon card-icon-refresh"></i></a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row-xs-height">
                      <div class="col-xs-height col-top">
                        <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                          <h3 class="no-margin p-b-5"><?php echo $curreg; ?></h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                    </div>
                    <div class="col-lg-4">
                    <div class="card no-border widget-loader-bar m-b-10">
                  <div class="container-xs-height full-height">
                    <div class="row-xs-height">
                      <div class="col-xs-height col-top">
                        <div class="card-header  top-left top-right">
                          <div class="card-title">
                            <span class="font-montserrat all-caps d-flex align-items-center">Conference Year
				                        </span>
                          </div>
                          <div class="card-controls">
                            <ul>
                              <li><a href="#" class="portlet-refresh text-black" data-toggle="refresh"><i class="card-icon card-icon-refresh"></i></a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row-xs-height">
                      <div class="col-xs-height col-top">
                        <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                          <h3 class="no-margin p-b-5"><?php echo date('Y'); ?></h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                    </div>
                    <div class="col-lg-4">
                    <div class="card no-border widget-loader-bar m-b-10">
                  <div class="container-xs-height full-height">
                    <div class="row-xs-height">
                      <div class="col-xs-height col-top">
                        <div class="card-header  top-left top-right">
                          <div class="card-title">
                            <span class="font-montserrat all-caps d-flex align-items-center">Total Registered
				                        </span>
                          </div>
                          <div class="card-controls">
                            <ul>
                            <li><a href="#" class="portlet-refresh text-black" data-toggle="refresh"><i class="card-icon card-icon-refresh"></i></a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row-xs-height">
                      <div class="col-xs-height col-top">
                        <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                          <h3 class="no-margin p-b-5"><?php echo $totalreg; ?></h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                    </div>
                </div>
                    <!-- END ROW -->


                    <!-- START ROW -->
                    
                    <!-- END ROW -->

                    

                    <div class="row" style="display: none">
                        <div class="col-lg-8 m-b-10">
                            <!-- START WIDGET widget_mapWidget-->
                            <div class="widget-13 card   no-margin widget-loader-circle">
                                <div class="card-header  pull-up top-right ">
                                    <div class="card-controls">
                                        <ul>
                                            <li><a href="#" class="card-refresh text-black" data-toggle="refresh"><i class="card-icon card-icon-refresh"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="container-sm-height no-overflow">
                                    <div class="row row-sm-height">
                                        <div class="col-sm-5 col-lg-4 col-xlg-3 col-sm-height col-top no-padding">
                                            <div class="card-header  ">
                                                <div class="card-title">Geolocation
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <ul class="nav nav-pills m-t-10 m-b-15" role="tablist">
                                                    <li class="active">
                                                        <a href="#tab1" data-toggle="tab" role="tab" class="b-a b-grey text-color">
                                                            fb
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#tab2" data-toggle="tab" role="tab" class="b-a b-grey text-color">
                                                            gl
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#tab3" data-toggle="tab" role="tab" class="b-a b-grey text-color">
                                                            am
                                                        </a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="tab1">
                                                        <h3 class="m-t-5 m-b-20">Facebook</h3>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Views</p>
                                                        <p class="all-caps font-montserrat  no-margin text-success ">14,256</p>
                                                        <br>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Today</p>
                                                        <p class="all-caps font-montserrat  no-margin text-warning ">24</p>
                                                        <br>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Week</p>
                                                        <p class="all-caps font-montserrat  no-margin text-success ">56</p>
                                                    </div>
                                                    <div class="tab-pane " id="tab2">
                                                        <h3 class="m-t-5 m-b-20">Google</h3>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Views</p>
                                                        <p class="all-caps font-montserrat  no-margin text-success ">14,256</p>
                                                        <br>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Today</p>
                                                        <p class="all-caps font-montserrat  no-margin text-warning ">24</p>
                                                        <br>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Week</p>
                                                        <p class="all-caps font-montserrat  no-margin text-success ">56</p>
                                                    </div>
                                                    <div class="tab-pane" id="tab3">
                                                        <h3 class="m-t-5 m-b-20">Amazon</h3>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Views</p>
                                                        <p class="all-caps font-montserrat  no-margin text-success ">14,256</p>
                                                        <br>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Today</p>
                                                        <p class="all-caps font-montserrat  no-margin text-warning ">24</p>
                                                        <br>
                                                        <p class="hint-text all-caps font-montserrat small no-margin ">Week</p>
                                                        <p class="all-caps font-montserrat  no-margin text-success ">56</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-l-20 p-r-20 p-t-10 p-b-10 pull-bottom full-width hidden-xs">
                                                <p class="no-margin">
                                                    <a href="#" class="btn-circle-arrow b-grey"><i class="pg-icon">chevron_down</i></a>
                                                    <span class="hint-text">Super secret options</span>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-sm-7 col-lg-8 col-xlg-9 col-sm-height col-top no-padding relative">
                                            <div class="bg-success widget-13-map">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END WIDGET -->
                        </div>
                        <div class="col-lg-4 m-b-10">
                            <!-- START WIDGET widget_realtimeWidget-->
                            <div class="widget-14 card   no-margin widget-loader-circle">
                                <div class="container-xs-height full-height">
                                    <div class="row-xs-height">
                                        <div class="col-xs-height">
                                            <div class="card-header ">
                                                <div class="card-title">Server load
                                                </div>
                                                <div class="card-controls">
                                                    <ul>
                                                        <li><a href="#" class="card-refresh text-black" data-toggle="refresh"><i
                                                                        class="card-icon card-icon-refresh"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height">
                                            <div class="p-l-20 p-r-20">
                                                <p>Server: www.revox.io</p>
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-12">
                                                        <h4 class="bold no-margin">5.2GB</h4>
                                                        <p class="small no-margin">Total usage</p>
                                                    </div>
                                                    <div class="col-lg-3 col-md-6">
                                                        <h5 class=" no-margin p-t-5">227.3KB</h5>
                                                        <p class="small no-margin">Currently</p>
                                                    </div>
                                                    <div class="col-lg-3 col-md-6">
                                                        <h5 class=" no-margin p-t-5">117.6MB</h5>
                                                        <p class="small no-margin">Average</p>
                                                    </div>
                                                    <div class="col-lg-3 visible-xlg">
                                                        <div class="widget-14-chart-legend bg-transparent text-black no-padding pull-right"></div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height relative bg-contrast-lowest">
                                            <div class="widget-14-chart_y_axis"></div>
                                            <div class="widget-14-chart rickshaw-chart top-left top-right bottom-left bottom-right"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END WIDGET -->
                        </div>
                    </div>


                    <div class="row">
          <!-- Left col -->
          <section class="col-lg-12 connectedSortable">
            <div class="card">
              <div class="card-header">
                Showing Total Number of Registered Members in <?php echo date('Y'); ?> from All Districts
              </div>
              <div class="card-body">
                <div id="chart">

                </div>
              </div>
            </div>
            <!-- Custom tabs (Charts with tabs)-->

            <!-- /.card -->
          </section>
          <!-- /.Left col -->
          <!-- right col (We are only adding the ID to make the widgets sortable)-->
          
          <!-- right col -->
        </div>

                </div>
                <!-- END CONTAINER FLUID -->
            </div>
            <!-- END PAGE CONTENT -->
            <?php include('../admin/includes/foot.php'); ?>
        </div>
        <!-- END PAGE CONTENT WRAPPER -->
    </div>
    <!-- END PAGE CONTAINER -->
<?php include('../admin/includes/footer.php'); ?>

    <!--        Podcast Modal Start-->
    <div class="modal fade slide-up disable-scroll" id="podcast" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content-wrapper">
                <div class="modal-content text-center">
                    <div class="modal-header clearfix" style="display: block">
                        <button aria-label="" type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-icon">close</i>
                        </button>
                        <h5 style="margin-bottom: -6px"><span class="semi-bold">Listen to Our Podcasts</span></h5>
                    </div>
                    <div class="modal-body clearfix" style="margin: 0 auto">
                        <a href="https://anchor.fm/nkcnigeria"> <div class="pgn push-on-sidebar-open pgn-circle m-t-20"><div class="alert alert-success"><div>
                                        <div class="pgn-thumbnail"><div><img width="40" height="40" style="display: inline-block;" src="../assets/img/anchor.png" data-src="assets/img/anchor.pnp" data-src-retina="assets/img/anchor.pnp" alt=""></div></div>
                                        <div class="pgn-message"><div><p class="bold">Anchor FM Podcast</p><p>Weekly Podcasts on Anchor!</p></div></div></div>
                                </div></div></a>

                        <a href="https://open.spotify.com/show/7d9HX8g8VYlcDaog0SZIa4?si=30447d271af84cd5"> <div class="pgn push-on-sidebar-open pgn-circle m-t-20"><div class="alert alert-success"><div>
                                        <div class="pgn-thumbnail"><div><img width="40" height="40" style="display: inline-block;" src="../assets/img/spotify.gif" data-src="assets/img/anchor.pnp" data-src-retina="assets/img/anchor.pnp" alt=""></div></div>
                                        <div class="pgn-message"><div><p class="bold">Spotify Podcast</p><p>Weekly Podcasts on Spotify!</p></div></div></div>
                                </div></div></a>

                        <a href="https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy85NTMyYWFjNC9wb2RjYXN0L3Jzcw?sa=X&ved=2ahUKEwjk8pXj-bT6AhUugc4BHSVgC9EQ9sEGegQIARAC"> <div class="pgn push-on-sidebar-open pgn-circle m-t-20"><div class="alert alert-success"><div>
                                        <div class="pgn-thumbnail"><div><img width="40" height="40" style="display: inline-block;" src="../assets/img/google-podcasts.png" data-src="assets/img/anchor.pnp" data-src-retina="assets/img/anchor.pnp" alt=""></div></div>
                                        <div class="pgn-message"><div><p class="bold">Google Podcast</p><p>Weekly Podcasts on Google!</p></div></div></div>
                                </div></div></a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--        Podcast Modal End-->

    <!--<div id="notify" class="pgn-wrapper" data-position="top" style="top: 59px;"><div class="pgn push-on-sidebar-open pgn-bar"><div class="alert alert-success"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>Welcome back <b>John4peace!</b></div></div></div>-->


    <script>
        setTimeout(function() {
            $('#notify').fadeOut('fast');
        }, 3000); // <-- time in milliseconds
    </script>

<script>
  var barColorsArray = ['#3498DB', '#34495E', '#26B99A', '#DE8244', '#DE4244', '#12B0E8', '#02B290', '#E07C24', '#3FBDD0', '#8D3DAF'];
  var colorIndex = 0;
  Morris.Bar ({
    element: 'chart',
    data: [<?php echo $chart_data; ?>],
    xkey: 'branch',
    ykeys: ['members'],
    labels: ['Members'],
    barColors: function(){
      if (colorIndex < 8)
        return barColorsArray[++colorIndex];
        else {
          colorIndex = 0;
          return barColorsArray[++colorIndex];
        
      }
    },
    xLabelAngle: 35,
    hideHover: 'auto',
    resize: true,


  });

  $('[data-toggle = "tooltip"]').tooltip();

 </script>
 <script>
    $.widget.bridge('uibutton', $.ui.button)
</script>



   

    <script>
        setTimeout(function() {
            $('#notify').fadeOut('fast');
        }, 3000); // <-- time in milliseconds
    </script>
  
<?php
}else{
    ?>
    
  <?php include('session.php'); ?>

    <?php

}

?>