<?php
include 'connection.php';
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>जिला लोक शिकायत केंद्र</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
#dgrc-heading{
  color: #2D8248;
  font-weight: 600;
  margin-bottom: 10px;
}
  .dgrc-service{
    padding: 15px;
    background: #fff;
  }
  .dgrc-service ul li{
    padding: 5px 0;
    border: 1px solid #eee;
    margin-bottom: 5px;
    box-shadow: 0 0 25px #eee;
    padding-left: 10px;
  }
  .dgrc-service ul li a{
    color: #000;
  }
  .dgrc-service ul li:hover{
    background: #e91e63;
  }
  .dgrc-service ul li:hover a{
    color: #fff;
  }
  button#view-more{
    background: #2D8248;
    outline: none;
    border: none;
    width: 150px;
    height: 35px;
  }
 button#view-more:hover{
    background: #e91e63;
  }
   button#view-more a{
    color: #fff;
    text-decoration: none;
   }

   .content-box{
    background: #fff;
    box-shadow: 0 0 25px #eee;
    padding: 50px 0;
    margin-bottom: 20px;
   }
   .content-box .content-img{
    margin-bottom: 25px;
    height: auto;
    width: 120px;
    
   }
   .content-box .content-img img{
    width: 110px;
    height: auto;
    background: #F3321B;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 25px;
   }
   .content-box .content-img.search img{
    background: #23D7EC;
   }
   .content-box .content-img.contact img{
    background: #FC890D;
   }
   #achievement{
    background: #2D8248;
    padding: 40px 0;
   }
   .achievement-box{
    background: #fff;
    padding: 25px 0;
    margin-bottom: 20px;
   }
   .achievement-box img{
      height: 80px;
      width: auto;
   }
   .achievement-box h2{
    font-weight: bold;
    padding: 15px 0 0 0;
   }
   .achievement-box p{
    font-weight: bold;
    text-transform: uppercase;
   }
/*---------Dc and CM Area-------*/
#dgrc-boss{
  background: #eee;
  padding: 40px 0;
}
.boss-content{
  background: #fff;
  padding: 30px 0;
  margin-bottom: 25px;
}
.boss-content img{
  height: 140px;
  width: auto;
  border-radius: 50%;
}
.boss-content div span{
  display: grid;
}
.boss-content div span:first-child{
  font-weight: 600;
  padding-top: 15px;
}
.boss-content div a i{
  font-size: 20px;
  color: #000;
  margin-top: 15px;
  margin-left: 10px;
  border: 1px solid #000;
  padding: 2px;
  margin-bottom: 20px;
}
.boss-content div a:hover i{
  background: #e91e63;
  color: #fff;
}

/*-------Footer----------*/
footer{
  background: #2D8248;
  padding: 30px 0;
}
footer .footer-content{
  margin-bottom: 15px;
}
footer .footer-content h4{
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
footer .footer-content P{
  color: #fff;
  text-align: justify;
}
footer .footer-content span{
  display: grid;
  color: #fff;
  font-size: 14px;
}
footer .footer-content span a{
  color: #fff;
  text-decoration: none;
}footer .footer-content span a:hover{
  color: #e91e63;
}
#end-footer{
  background: #000;
}
#end-footer span{
  color: #fff;
}
#end-footer .company{
  font-weight: 600;
  float: right;
}
#end-footer .company a{
  font-weight: 600;
  color: #38D7F0;
  font-size: 14px;
}
@media(max-width: 552px){
  #end-footer span{
    text-align: center;
  }
  #end-footer .company{
    float: none;
  }
}
#piechart{
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#toll-free{
  background: #2D8248;
  color: #fff;
  padding: 10px 0;
}
</style>
    
  </head>
  <body>
    <!--====Start Header====-->
    <?php include 'templets/header.php'; ?>
    <!--====End Header====-->
    <!--====Start Slider====-->
    <?php include 'templets/slider.php'; ?>
    <!--====End Slider====-->
    <!---=====Footer Area Start=========-->
    <section>
      <?php include 'templets/notice.php'; ?>
    </section>

    <!---=====Footer Area End=========-->

  <!--====About Us====-->
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-lg-8 col-12 col-sm-12">
          <div class="about-content">
            <h3 class="text-center">District Grievance Redressal Center</h3>
            <h3 style="font-size: 16px; color: #e91e63;">ESTABLISHMENT</h3>
            <p>On 29th of December 2021. District Administration, Ranchi launched a Grievance Redressal Service with application of Digital & Communication technology in form of “DISTRICT GRIEVANCE REDRESSAL CENTRE” Citizens are welcome in this forum for seeking satisfactory solutions to their problems with the system.</p>
            <p>The DGRC is being run by the Ranchi District Administration, GoJ for effective, transparent and speedy redress of the grievances of citizens at various levels throughout the District including direct interaction with the Deputy Commissioner.</p>
            <p>The status of the grievance filed in DGRC can be tracked with the registered mobile number or unique registration number. DGRC also provides appeal facility to the citizens if they are not satisfied with the resolution by the Nodal Officer. After closure of grievance if the complainant is not satisfied with the resolution, They can provide feedback.</p>
          </div>
        </div>
        <div class="col-md-4 col-lg-4 col-12 col-sm-12">
          <?php include 'templets/login2.php'; ?>
        </div>
      </div>
    </div>

    <!--=====Toll Free No====--->
    <section id="toll-free">
      <div class="container">
        <div class="row">
          <div class="col-md-3 text-heading">
            <h4><img src="images/toll-free.png" height="30px" width="auto"> Toll Free :</h4>
          </div>
          <div class="col-md-9">
            <h5>अपनी शिकायत अथवा सुझाव दर्ज करने के लिए टोल फ्री नंबर <span style="color: #F5F211; font-weight: 700;">1800 345 0808</span></h5>
          </div>
        </div>
      </div>
    </section>

    <!---=====About2 Area Start=========-->
    <section>
      <div class="container">
        <div class="row pt-5 pb-5">
          <div class="col-md-4 col-lg-4 col-12 col-sm-12">
            <div class="content-box" align="center">
              <div class="content-img">
                <img src="images/edit.png">
              </div>
              <button id="view-more"><a href="#">Login/Register</a></button>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-12 col-sm-12">
            <div class="content-box" align="center">
              <div class="content-img search">
                <img src="images/search.png">
              </div>
              <button id="view-more"><a href="#">View Status</a></button>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-12 col-sm-12">
            <div class="content-box" align="center">
              <div class="content-img contact">
                <img src="images/contact.png">
              </div>
              <button id="view-more"><a href="#">Contact Us</a></button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!---=====About2 Area End=========-->

    <!---=====Ranchi DC Area Start=========-->
    <section id="dgrc-boss">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-lg-4 col-sm-12 col-12">
            <div class="boss-content" align="center">
              <img src="images/CM.jpg">
              <div>
                <span>Chief Minister, Jharkhand</span>
                <span>Sri Hemant Soren</span>
              </div>
              <div>
                <a href=""><i class="fa fa-facebook"></i></a>
                <a href=""><i class="fa fa-twitter"></i></a>
                <a href=""><i class="fa fa-instagram"></i></a>
              </div>
              <button id="view-more"><a href=""><i class="fa fa-phone"></i> Connect</a></button>
            </div>
          </div>
          
          <div class="col-md-4 col-lg-4 col-sm-12 col-12">
            <div class="dgrc-service">
              <h3 id="dgrc-heading">Service Related To</h3>
              <?php
                $service="SELECT * FROM services limit 7";
                if ($query=mysqli_query($con,$service)) {
                  while ($row=mysqli_fetch_assoc($query)) {
              ?>
                <ul>
                  <li><a href="dgrc-service.php?service_id=<?php echo $row['id']; ?>"><?php echo $row['service']; ?></a></li>
                </ul>

              <?php
                  }
                }

              ?>
              <button id="view-more"><a href="services">All Category</a></button>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-sm-12 col-12">
            <div class="boss-content" align="center">
              <img src="images/dc.png">
              <div>
                <span>Deputy Commissioner Ranchi</span>
                <span>Sri Chhavi Ranjan, IAS</span>
              </div>
              <div>
                <a href=""><i class="fa fa-facebook"></i></a>
                <a href=""><i class="fa fa-twitter"></i></a>
                <a href=""><i class="fa fa-instagram"></i></a>
              </div>
              <button id="view-more"><a href=""><i class="fa fa-phone"></i> Connect</a></button>
            </div>
          </div>
          
        </div>
      </div>
    </section>
    <!---=====Ranchi DC Area End=========-->


    <!---=====Achievements Area End=========-->
    <section id="achievement">
      <h1 class="text-center text-white pt-3 ">Complaint Cum Complaince Summary</h1>
      <h5 class="text-center text-white pb-3">[Date Range : 15-12-2021 to 31-12-2021]</h5>
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-lg-3 col-6 col-sm-6">
            <div class="achievement-box" align="center">
              <img src="images/grievance.png">
              <h2>6500</h2>
              <p>Registerd Grievances</p>
            </div>
          </div>
          <div class="col-md-3 col-lg-3 col-6 col-sm-6">
            <div class="achievement-box" align="center">
              <img src="images/checked.png">
              <h2>4500</h2>
              <p>Resolved Grievances</p>
            </div>
          </div>
          <div class="col-md-3 col-lg-3 col-12 col-sm-12">
            <div class="achievement-box" align="center">
              <img src="images/cancel.png">
              <h2>2000</h2>
              <p>Pending Grievances</p>
            </div>
          </div>
          <div class="col-md-3 col-lg-3 col-12 col-sm-12">
            <div class="achievement-box" align="center">
              <div id="piechart"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!---=====Achievements Area End=========-->

    <!---=====Testimonials Area End=========-->
    <section style="padding: 40px 0; background: #252525;">
      <div class="container">
        <h2 class="text-center text-white pb-3"><b>Complainant's Feedback</b></h2>
        <?php include 'templets/testimonial.php'; ?>
      </div>
    </section>
    <!---=====Testimonials Area End=========-->

    <!---=====Social Media Area Start=========-->
    
    <!---=====Social Media Area End=========-->

    <!---=====Footer Area Start=========-->
    <?php include 'templets/footer.php'; ?>

    <!---=====Footer Area End=========-->



    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">
      // Load google charts
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      // Draw the chart and set the chart values
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Month'],
        ['Registered', 8],
        ['Resolved', 2],
        ['Pending', 4],
      ]);

        // Optional; add a title and set the width and height of the chart
        var options = {'title':'Data [In Graph]', 'width':250, 'height':250};

        // Display the chart inside the <div> element with id="piechart"
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>
