@extends('layouts.admin-app')

@section('content')
<style>
    .bg-title-page {
    background-image: url(img/event-1.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 400px;
}
@media (max-width:768px){
    .bg-title-page {
    background-size: 100% 62%;
    background-attachment: scroll;

    height: 370px;
    margin-top: -69px;
}
}
.pagetitle {
    color: green;
    /* background: #dedede; */
}

.pagetitle-inner {
    padding-top: 140px;
    padding-bottom: 112px;
}

.fadeInUp {
    animation-name: fadeInUp;
}

.pagetitle h1 {
    margin-bottom: 28px;
    padding-top: 0;
    margin-top: 0;
    font-size: 73px;
    line-height: 48px;
    font-weight: 600;
    color: green;
}
@media (max-width:768px){
  .pagetitle h1 {

    font-size: 40px !important;
    line-height: 66px !important;

}
}
@media (max-width:480px){
  .pagetitle h1 {

    font-size: 25px !important;
    line-height: 33px !important;
  }
  .breadcrumb1 {
        margin-top: -17px;
        font-size: 10px;
    }
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.pagetitle a:link, .pagetitle a:visited {
    color: green;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.breadcrumb1 span a span, .breadcrumb2 span a span, .breadcrumb1 span.current-item, .breadcrumb2 span.current-item {
    padding: 0;
    font-weight: 500;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}

.editor-styles-wrapper, .entry-content {
    counter-reset: footnotes;
}
/* 2nd section */

.elementor-460 .elementor-element.elementor-element-da0b444 {
    margin-top: -115px;
    margin-bottom: 100px;
}
.elementor-element {
    --widgets-spacing: 20px;
}
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1140px;
}
.elementor-section .elementor-container {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
.elementor *, .elementor :after, .elementor :before {
    box-sizing: border-box;
}
@media (min-width: 768px){
.elementor-column.elementor-col-100, .elementor-column[data-col="100"] {
    width: 100%;
}
}
.elementor-element, .elementor-lightbox {
    --swiper-theme-color: #000;
    --swiper-navigation-size: 44px;
    --swiper-pagination-bullet-size: 6px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
}
.elementor-element {
    --widgets-spacing: 20px;
}


.elementor-column {
    position: relative;
    min-height: 1px;
    display: flex;
    margin-left: 101px;
    margin-top: 11px;
}

@media (max-width: 991px){
    .elementor-column {
  display: none !important;
}
.elementor-460 .elementor-element.elementor-element-da0b444 {

    margin-bottom: 172px;
}

}
@media (max-width: 768px){
    .elementor-460 .elementor-element.elementor-element-da0b444 {

margin-bottom: 75px !important;
}

}
.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 10px;
}
.elementor-widget-wrap {
    position: relative;
    width: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap {
    display: flex;
}
.elementor-widget-wrap>.elementor-element {
    width: 100%;
}
.elementor-section {
    position: relative;
}
@media (min-width: 768px){
.elementor-460 .elementor-element.elementor-element-8e3f050 {
    width: 30.353%;
}}
@media (min-width: 768px){
.elementor-460 .elementor-element.elementor-element-0c86c56 {
    width: 38.124%;
}}
.zoomIn {
    animation-name: zoomIn;
}
.elementor-460 .elementor-element.elementor-element-0c86c56:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-460 .elementor-element.elementor-element-0c86c56 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #FFFFFF;
}
.elementor-460 .elementor-element.elementor-element-0c86c56 > .elementor-element-populated {
    border-style: solid;
    border-width: 8px 0px 0px 0px;
    border-color: #b56447ff;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 0px 0px 0px 0px;
    --e-column-margin-right: 0px;
    --e-column-margin-left: 0px;
    padding: 20px 30px 20px 50px;
    box-shadow: 2px 0px 9px -3px black;

}
.elementor-widget-wrap {
    position: relative;
    width: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elementor-widget-wrap>.elementor-element {
    width: 100%;
}
.elementor-element .elementor-widget-container {
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
}
.elementor *, .elementor :after, .elementor :before {
    box-sizing: border-box;
}
.elementor-460 .elementor-element.elementor-element-b415383 {
    margin-top: 0px;
    margin-bottom: 100px;
    padding: 0px 15px 0px 10px;
}
.fadeInUp {
    animation-name: fadeInUp;
}
.animated {
    animation-duration: 1.25s;
}
.about-section h6{
    color: #b56447ff;
    letter-spacing: 1px;
    font-size: 20px;
}
/* .about-section h1{
    font-size: 32px;
    color: #b56447ff;

} */
.about-section p{
    letter-spacing: 1px;
    text-align: justify;
    font-size: 13px;

}
.about-section .bg-about{
    border: 1px solid black;
    background: #f6f6f6;
    padding: 20px;
  border-left: 7px solid #b56447ff;
}
.project-section .integrity{
    margin-bottom: 100px;
}
/* .project-section .thumb{
padding: 0px;

} */
.project-section .integrity .caption{
   height: 128px;
   border: 2px solid #b56447;
   padding: 10px;
   margin-bottom: 20px;
}

.project-section .integrity .caption h4{
    font-size: 14px;
    /* text-align: center; */
    font-weight: 600;
    letter-spacing: 1px;
    color: green;
}
.project-section .integrity .caption h5{
  font-size: 14px;
  letter-spacing: 1px;

}
.project-section .integrity .caption p{
letter-spacing: 1px;
font-size: 12px;
}
.project-section .integrity .caption p b{
color: brown;
}
.project-section .integrity .caption .fa-calendar-days{
  font-size: 18px;
  color: brown;
  margin-right: 8px;

}
.carousel-indicators {
  position: absolute;
    top: 92%;
    transform: translateY(-50%);
    left: 124px;
    z-index: 15;
    width: 39%;
    }

    .carousel-indicators li {
      background-color: #bbb;
      border: 2px solid green;
      /* border-radius: 50%; */
      width: 12px;
      height: 12px;
      margin: 0 8px;
      cursor: pointer;
    }

    .carousel-indicators .active {
      background-color: maroon;
    }
 .pagination {
      display: flex;
      justify-content: center;
      margin-top: -15px;
    margin-bottom: 42px;
    }

    .pagination button {
      padding: 5px 13px;
    margin: 0 5px;
    cursor: pointer;
    background-color: #b56447;
    color: white;
    border: none;
    border-radius: 5px;
}


    .pagination button:hover {
      background-color:  #974d32;
    }

    .project-section {
      overflow: hidden;
    }

    .row.integrity:not(:first-child) {
      display: none;
    }
    /*footer*/
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 25px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:before {
    content: '←';
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 26px;
    line-height: 1;
    opacity: .75;
    color:black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.client-section{
  background: url(img/carousel-bg.png);
}


.auto{
  margin-top: -40px;
  margin-left: 54px;
  font-size: 20px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
@media (max-width: 768px) {
  .auto{
  margin-top: -16px;

}
}

@media (min-width: 450px) {
      .main-card {
        width: 96%;
        max-width: 400px;
        height: calc(100% - 159px) !important;
        border-radius: 8px !important;
        max-height: 600px;
      margin: 16px!important;
      }
    }

    .collapsed_new {
      width: 53px !important;
      height: 53px !important;
      border-radius: 26px !important;
      margin: 16px!important;
    }

    .main-card {
      background: white;
      color: white;
      width: 100%;
      height: 100%;
      margin: 0px;
      border-radius: 0px;
      display: flex;
      border: 2px solid white;
      flex-direction: column;
      overflow: hidden;
      right: 0;
      bottom: 0;
      position: absolute;
      transition: all 0.5s;
      box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
#chatbot_toggle {
  position: absolute;
    right: -2px;
    border: none;
    height: 54px;
    width: 54px;
    background: #b56447;
    cursor: pointer;
    padding: 13px;
    color: white;
    outline: none;
}
#chatbot_toggle:hover {
  background: #b56447;

}
.line-chat {
  height: 1px;
  background-color: brown;
  width: 100%;
  opacity: 0.2;
}
.main-title {
    background-color: #efe3e3;
  font-size: large;
  font-weight: bold;
  display: flex;
  color: #b56447ff;
  height: 54px;
   color: transparent;
  background-image: linear-gradient(#613013, #e0a072);
  -webkit-background-clip: text;
}
.main-title>div{
  height:48px;
  width:48px;
  display:flex;
  margin-left:8px;
}
.main-title svg {
  height: 24px;
  margin: auto;
}
.main-title > span {
  margin: auto auto auto 8px;
  color: transparent; background-image: linear-gradient(#613013, #e0a072); -webkit-background-clip: text;
}
.chat-area {
  flex-grow: 1;
  overflow: auto;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.input-message {
  padding: 8px 48px 8px 16px;
  flex-grow: 1;
  border: none;
  padding-right: 0px;
  font-size: 13px;
}
.input-message:focus {
  outline: none;
}
.input-div {
  height: 48px;
  display: flex;
}

.input-send {
  background: transparent;
  width: 96px;
  height: 48px;
  right: 0%;
  border: none;
  cursor: pointer;
}
.input-send:hover {
  background: lavender;
}
.input-send svg {
  fill:  #b56447ff;
  margin: 11px 8px;
}
.chat-message-div {
  display: flex;
}

.chat-message-sent {
  background-color: white;
  margin: 8px 16px 8px 64px;
  padding: 8px 16px;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 100ms;
  color: black;
  border-radius: 8px 8px 2px 8px;
  background-color: lavender;
}

.chat-message-received {
  background-color: white;
  margin: 8px 64px 8px 16px;
  padding: 8px 16px;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 100ms;
  color: black;
  border-radius: 8px 8px 8px 2px;
  background-color: lavender;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/*End Footer*/
</style>

<div class="bg-title-page pagetitle breadcrumbleft">
    <div class="pagetitle-inner">
        <div class="container animatedcustom animated fadeInUp">
            <div class="row">
                <div class="col-lg-8">
                    <h1><span style="color: #b56447ff;">N</span>ews & <span style="color: #b56447ff;">E</span>vents</h1>
                    <div class="breadcrumb1">
                        <span property="itemListElement" typeof="ListItem">
                        <a property="item" typeof="WebPage" title="Go to Dustro." href="{{route('main_index')}}" class="home"><span property="name">Home</span></a>
                        </span>
                        <span property="itemListElement" typeof="ListItem"><span property="name" class="post post-page current-item">News & Events</span><meta property="url" content="http://rayoflightthemes.com/wordpress-themes/dustro-wordpress-theme/about-us/"><meta property="position" content="2"></span>
                    </div>
                </div>
                <div class="col-lg-4"></div>
            </div>
        </div>
    </div>
</div>
<div class="post-460 page type-page status-publish hentry" id="post-460">
    <div class="post-inner">
        <div class="entry-content">
        <div data-elementor-type="wp-page" data-elementor-id="460" class="elementor elementor-460">
        <section class="elementor-section elementor-top-section elementor-element elementor-element-da0b444 text-center-1024 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="da0b444" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fa458e2" data-id="fa458e2" data-element_type="column">
    <div class="elementor-widget-wrap elementor-element-populated">
    <section class="elementor-section elementor-inner-section elementor-element elementor-element-06fd6a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="06fd6a0" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-0a5c8e5 elementor-hidden-tablet elementor-hidden-phone" data-id="0a5c8e5" data-element_type="column">
			<div class="elementor-widget-wrap">
									</div>

		</div>
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-8e3f050 elementor-hidden-tablet elementor-hidden-phone" data-id="8e3f050" data-element_type="column">
			<div class="elementor-widget-wrap">
									</div>
		</div>
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-0c86c56 box-shadow animated zoomIn " data-id="0c86c56" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;zoomIn&quot;}">
			<div class="elementor-widget-wrap elementor-element-populated">
								<div class="elementor-element elementor-element-40f0baa call-us-box-767 elementor-widget elementor-widget-text-editor" data-id="40f0baa" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
			<style>/*! elementor - v3.16.0 - 12-09-2023 */
.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style>

<img src="{{asset('img/logo10.png')}}" alt="" style="width: 90%; height:130px;">

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

    </div>

</div>

        </section>
        </div>

        </div>

    </div>
</div>
<section class="about-section">
    <div class="container">
        <div class="row">
           <div class="col-lg-12">
              <h1>News & Events</h1>
              <br>
            </div>
        </div>
    </div>
</section>
<section class="project-section ">
    <div class="container">
        <div class="row integrity" id="row_1" style="margin-top: -36px;">
            @foreach ($event as $project)
                <div class="col-md-4">
                    <div class="thumbnail">
                        <!-- Carousel -->
                        <div id="imageCarousel-{{ $loop->iteration }}" class="carousel slide" data-ride="carousel">
                            <!-- Slides -->
                            <div class="carousel-inner">
                                @php
                                    $photos = explode(',', $project->photos);
                                @endphp
                                @foreach ($photos as $index => $photo)
                                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                        <a href="#" class="photo-link" data-toggle="modal" data-target="#photoModal" data-src="{{ asset('image/' . $photo) }}" data-title="{{ $project->name }}">
                                            <img src="{{ asset('image/'.$photo) }}" alt="Image {{ $loop->iteration }}" style="width:100%;height:268px;">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                            <!-- Indicators -->
                            <ul class="carousel-indicators">
                                @foreach ($photos as $index => $photo)
                                    <li data-target="#imageCarousel-{{ $loop->parent->iteration }}" data-slide-to="{{ $index }}" class="{{ $index === 0 ? 'active' : '' }}"></li>
                                @endforeach
                            </ul>
                            <!-- Controls -->
                            <a class="carousel-control-prev" href="#imageCarousel-{{ $loop->iteration }}" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#imageCarousel-{{ $loop->iteration }}" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                        <!-- Caption -->
                        <div class="caption">
                            <h5><i class="fa-solid fa-calendar-days"></i>{{ date('d-F-y', strtotime($project->date)) }}</h5>
                            <h4>{{ $project->name }}</h4>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="pagination" id="pagination-container">
        <button onclick="previousPage()">Previous</button>
        <span id="page-numbers"></span>
        <button onclick="nextPage()">Next</button>
    </div>
</section>
<!--footer-->
<section class="client-section bggray">
    <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="client-outer" style="padding-right: 23px; padding-left: 21px;">
          <div class="slick-slider client-slider ">


        <div class="wow-outer">
                 <div class="item wow slideInLeft" data-wow-delay=".1s">
                  <center>
               <a target="_blank" href="https://www.india.gov.in/"> <img src="{{ asset('img/client/govtlogo-1.png')}}" class="img-fluid" width="200" height="150" alt="Imageteam" ></a></center>
            </div>
                    </div>

            <div class="wow-outer">
                 <div class="item wow slideInLeft" data-wow-delay=".1s">
                  <center>
               <!-- <a target="_blank" href="https://odisha.gov.in/"><img src="img/client/govtlogo-8.png" class="img-fluid" style="height: 111px; margin-top:15px;" alt="Imageteam" ></a> -->
               <a target="_blank" href="https://janasunani.odisha.gov.in/">  <img src="{{ asset('img/client/govtlogo-8(9) (1) (1).png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" style="margin-top: 3px;"></a>
              </center>
            </div>
                    </div>

              <div class="wow-outer">


    <div class="item wow slideInLeft"  data-wow-delay=".3s">
      <center>
              <a target="_blank" href="https://janasunani.odisha.gov.in/">  <img src="{{ asset('img/client/govtlogo-2.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam"></a>
                </center>
            </div>
                    </div>

            <div class="wow-outer">
    <div class="item wow slideInLeft" data-wow-delay=".5s">
      <center>
             <a target="_blank" href="https://digitalindia.gov.in/"> <img src="{{ asset('img/client/govtlogo-3.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" ></a>
                </center>
            </div>
                    </div>
                     <div class="wow-outer">
    <div class="item wow slideInLeft"  data-wow-delay=".7s">
      <center>
                <a target="_blank" href="https://swachhbharatmission.gov.in/sbmcms/index.htm"><img src="img/client/govtlogo-4.png" width="200" height="150" class="img-fluid" alt="Imageteam" ></a>
                </center>
            </div>
                    </div>

                        <div class="wow-outer">
    <div class="item wow slideInLeft" data-wow-delay=".9s">
      <center>
               <a target="_blank" href="https://www.iitbbs.ac.in/"> <img src="{{ asset('img/client/govtlogo-5.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" ></a>
                </center>
            </div>
                    </div>

                    <div class="wow-outer">
                 <div class="item wow slideInLeft" data-wow-delay=".11s">
                  <center>
               <a target="_blank" href="https://odisha.data.gov.in/"> <img src="{{ asset('img/client/govtlogo-6.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" ></a>
                </center>
            </div>
                    </div>



                    </div>

                </div>

         </div>
        </div>


        </div>
      <div class="auto">
    <div id="pauseButton" onclick="togglePausePlay()"><i class="fa-solid fa-pause"></i></div>
    <div id="playButton" style="display: none;" onclick="togglePausePlay()"><i class="fa-solid fa-play"></i></div>
    </div>

    </section>








      <footer class="footer-area pt-100">

    <div class="container">
       <video autoplay loop muted plays-inline class="background-clip">
          <!-- <source src="img/footer_vdo1.mp4" type="video/mp4"> -->
          <source src="{{ asset('img/BHARATPUR POLICE STATION.mp4')}}" type="video/mp4">

        </video>
    <div class="row">
    <div class="col-lg-2 col-sm-6 col-6">
    <div class="footer-widget">
 <h3>Quick Links</h3>
    <ul class="footer-bg-clr">
    <li>
    <a href="{{route('photo_gallery_user')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Photo Gallery
    </a>
    </li>

    <li>
    <a href="{{route('csr')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  CSR</a>
    </li>
    <li>
    <a href="{{route('tender')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Tenders</a>
    </li>
    <li>
    <a href="{{route('contact_us')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Contact us</a>
    </li>
    <li>
    <a href="#"><i class="fa-solid fa-caret-right"></i>&nbsp; FAQ</a>
    </li>

    </ul>

    <div class="footer-social">
    <a href="http://tinyurl.com/3hc48vcy" target="_blank" class="social-facebook">
          <i class="fab fa-facebook-f"></i>
            </a>

     <a href="http://tinyurl.com/5f7zpkrh" target="_blank" class="social-twitter">
     <i class="fa-brands fa-x-twitter"></i>
     </a>
       <a href="http://tinyurl.com/434m8vjd" target="_blank" class="social-twitter">
          <i class="fab fa-instagram"></i>
          </a>
        <a href="http://tinyurl.com/yckave58" target="_blank" class="social-twitter">
      <i class="fab fa-linkedin-in"></i>
     </a>

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

    <div class="col-lg-2 col-sm-6 col-6">
    <div class="footer-widget pl-35">
    <h3>Company Info</h3>
    <ul class="footer-bg-clr">
    <li>
    <a href="{{route('aboutus')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  About us
    </a>
    </li>
    <li>
    <a href="{{route('visionmission')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Vision & Mission</a>
    </li>
    <li>
    <a href="{{route('corevalues')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Core Values</a>
    </li>
    <li>
    <a href="{{route('objectives')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Objectives</a>
    </li>
    <li>
    <a href="{{route('Cmddesk')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  CMD's Desk</a>
    </li>

    </ul>
    </div>
    </div>
    <div class="col-lg-2 col-sm-6 col-12">
    <div class="footer-widget pl-35">
    <h3>Achievements</h3>
    <ul class="footer-bg-clr">
    <li>
    <a href="{{route('Completed_Projects')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Completed Projects</a>
    </li>
    <li>
    <a href="{{route('ongoing')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Ongoing Projects</a>
    </li>
    <li>
    <a href="#"><i class="fa-solid fa-caret-right"></i>&nbsp;  Upcoming Projects</a>
    </li>
    <li>
    <a href="{{route('iconic_project')}}">  <i class="fa-solid fa-caret-right"></i>&nbsp;   Iconic Projects</a>
    </li>

      <button  id="appoint-btn">  <a style="color: white;" class="nav-link" href="{{ route('admin.login') }}">Login</a></button>
    </ul>
    </div>
    </div>
    <div class="col-lg-3 col-sm-6 col-12">
    <div class="footer-widget">
    <h3>Contacts</h3>
    <ul>
    <li  id="contact_border" >
      <a href="tel:">
      <i id="contact-icon" class="fa-solid fa-phone"></i>

        0674-2541545
      </a>
    </li>
    <li id="contact_border">
    <a  href="mailto:email@xpat.com">
    <i id="contact-icon" class="fa-solid fa-envelope"></i>

    ophwc.od@nic.in
    </a>
    </li>

    <li id="contact_border">
    <a  href="3">
    <i id="contact-icon" class="fa-solid fa-location-dot"></i>

    The Odisha State Police Housing and Welfare Corporation
    Janpath, Bhoi nagar
    Bhubaneswar-751022
    </a>
    </li>
    </ul>
    </div>
    </div>


    <div class="col-lg-3 col-sm-12 col-12">
    <div class="footer-widget">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3742.119735434149!2d85.8390012750967!3d20.295310481176745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a1909f098eae211%3A0x2197f2ff1f402f4c!2sOdisha%20State%20Police%20Housing%20and%20Welfare%20Corporation!5e0!3m2!1sen!2sin!4v1698916522140!5m2!1sen!2sin" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    </div>
    </div>
    </div>
    <div class="footer-bottom">
    <div class="container">

    <center>
    <div class="col-lg-12">
    <div class="copyright-text">
    <p>&copy Copyright 2024 OPHWC || All Rights Reserved</p>
    </div>
    </div>
    </center>

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




        <div id="chatbot" class="main-card collapsed collapsed_new">
            <button id="chatbot_toggle">
              <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15 4v7H5.17l-.59.59-.58.58V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
          </svg>
            </button>
            <div class="main-title">
              <div >
                <svg viewBox="0 0 640 512"  title="robot">
                  <path fill="currentColor" d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z" />
                </svg>

              </div>
              <span>Welcome To OPHWC</span>

            </div>
            <div class="chat-area" id="message-box">
            </div>
            <div class="line-chat"></div>
            <div class="input-div">
              <input class="input-message" name="message" type="text" id="message" placeholder="Type your message ..." />
              <button class="input-send" onclick="send()">
                <svg style="width:24px;height:24px">
                  <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z" />
                </svg>
              </button>
            </div>
          </div>

    </div>
    <script>
        let currentPage = 1;
        const projectsPerPage = 3; // Adjust as per your requirement
        const maxVisiblePages = 4; // Max number of visible page buttons

        function showPage(pageNumber) {
            const projects = document.querySelectorAll('.integrity .col-md-4');
            const totalProjects = projects.length;
            const totalPages = Math.ceil(totalProjects / projectsPerPage);
            currentPage = pageNumber;

            const startIndex = (pageNumber - 1) * projectsPerPage;
            const endIndex = startIndex + projectsPerPage;

            projects.forEach((project, index) => {
                project.style.display = index >= startIndex && index < endIndex ? 'block' : 'none';
            });

            updatePaginationButtons(totalPages);
        }

        function previousPage() {
            if (currentPage > 1) {
                showPage(currentPage - 1);
            }
        }

        function nextPage() {
            const totalProjects = document.querySelectorAll('.integrity .col-md-4').length;
            const totalPages = Math.ceil(totalProjects / projectsPerPage);
            if (currentPage < totalPages) {
                showPage(currentPage + 1);
            }
        }

        function updatePaginationButtons(totalPages) {
            const pageNumbersContainer = document.getElementById('page-numbers');
            pageNumbersContainer.innerHTML = '';

            const startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
            const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

            for (let i = startPage; i <= endPage; i++) {
                const button = document.createElement('button');
                button.textContent = i;
                button.className = i === currentPage ? 'active' : '';
                button.onclick = function () {
                    showPage(i);
                };
                pageNumbersContainer.appendChild(button);
            }
        }

        // Initial display
        document.addEventListener('DOMContentLoaded', function() {
            const totalProjects = document.querySelectorAll('.integrity .col-md-4').length;
            const totalPages = Math.ceil(totalProjects / projectsPerPage);
            showPage(1);
            updatePaginationButtons(totalPages);
        });
    </script>



     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="js/jquery-3.3.1.slim.min.js"></script>
   <script src="js/popper.min.js"></script>
   <script src="js/bootstrap.min.js"></script>

   <script src="js/jquery-3.3.1.min.js"></script>
 <script src="js/wow.min.js"></script>



   <script type="text/javascript" src="js/rev-slider/jquery.themepunch.revolution.min.js"></script>
   <script type="text/javascript" src="js/rev-slider/jquery.themepunch.tools.min.js"></script>

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

	<script type="text/javascript" src="js/jquery.counterup.min.js"></script>
	  <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>

     <script>
  $(document).ready(function($) {
    var $element = $('.counter');
    if ($element.length > 0) {
      $element.counterUp({
        delay: 10,
        time: 1000
      });
    }
  });
</script>

<script>
  $('.testimonial-slider').slick({
    slidesToShow: 3,
    dots: false,
    arrows: true,
    autoplay: true,  // Ensure autoplay is set to true
    autoplaySpeed: 3000,
    prevArrow: '<i class="fas fa-chevron-left prev"></i>',
    nextArrow: '<i class="fas fa-chevron-right next"></i>',
    swipe: true,
    swipeToSlide: true,
    responsive: [
      // Responsive settings here
    ]
  });
</script>



<script>
  $(document).ready(function(){
    function initializeSlider() {
      $('.client-slider_new').slick({
        slidesToShow: 6,
        slidesToScroll: 3,
        dots: false,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 3000,
        swipe: true,
        swipeToSlide: false,
        responsive: [
          // Add responsive settings if needed
        ]
      });
    }

    // Initial setup
    initializeSlider();

    // Media query for screen width less than or equal to 768px
    const mediaQuery = window.matchMedia('(max-width: 768px)');

    function handleMediaQuery(event) {
      if (event.matches) {
        // Activate the slider with different settings
        $('.client-slider_new').slick('unslick');
        $('.client-slider_new').slick({
          slidesToShow: 3,
          slidesToScroll: 3,
          dots: false,
          arrows: true,
          autoplay: true,
          autoplaySpeed: 3000,
          swipe: true,
          swipeToSlide: false,
          responsive: [
            // Add responsive settings if needed
          ]
        });
      } else {
        // Re-initialize the slider with the default settings
        $('.client-slider_new').slick('unslick');
        initializeSlider();
      }
    }

    // Attach the listener
    mediaQuery.addListener(handleMediaQuery);

    // Call the initial check
    handleMediaQuery(mediaQuery);
  });
</script>

<script>
  $(document).ready(function(){
    $('.client-slider').slick({
      slidesToShow: 6,

      dots: false,
      arrows: true,
      autoplay: true,
      autoplaySpeed: 3000,
      swipe: true,
      swipeToSlide: true,
      responsive: [

      ]
    });
  });
</script>
<script>
    function togglePausePlay() {
        let pauseButton = document.getElementById('pauseButton');
        let playButton = document.getElementById('playButton');

        if (pauseButton.style.display !== 'none') {
            // Pause button is visible, hide it and show play button
            pauseButton.style.display = 'none';
            playButton.style.display = 'inline-block';
            $('.client-slider').slick('slickPause');
        } else {
            // Play button is visible, hide it and show pause button
            pauseButton.style.display = 'inline-block';
            playButton.style.display = 'none';
            $('.client-slider').slick('slickPlay');
        }
    }
</script>


<script>
    function a(){
        let x = document.getElementById('p2');
        let y = document.getElementById('t1');
        let z = document.getElementById('t2')
        if( x.type == "password"){
            x.type = "text";
            y.style.display = "block";
            z.style.display = "none";

        }
        else{
            x.type = "password"
            y.style.display = "none";
            z.style.display = "block";

        }

     }


</script>

<script>
  $('.project-slider').slick({
    slidesToShow: 4,
    dots: false,
    arrows: true,
    autoplay: true,  // Ensure autoplay is set to true
    autoplaySpeed: 3000,
    swipe: true,
    swipeToSlide: true,
    responsive: [
      // Responsive settings here
    ]
  });
</script>

<script>
  $('.ticker-slider').slick({
    speed: 500,
    arrows: false,
    fade: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    prevArrow: '<i class="fas fa-chevron-left tab-prev"></i>',
    nextArrow: '<i class="fas fa-chevron-right tab-next"></i>',
    dots: false,
    autoplay: true  // Ensure autoplay is set to true
  });
</script>

<script>
  window.addEventListener('load', function() {
    baguetteBox.run('.gallery');
  });
</script>

<script src="js/wow.min.js"></script>
<script>
  new WOW().init();
</script>

<script>
  $('.blog-slider').slick({
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: true,  // Ensure autoplay is set to true
    autoplaySpeed: 2000,
    dots: true,
    responsive: [
      // Responsive settings here
    ]
  });
</script>


<script>
    $(document).ready(function(){
	   $(window).scroll(function(){//scroll--top---indicator---arrow-jquery----//
		   if($(window).scrollTop() > 600){//---position---600----px scroll-----//
			   $("#scrollUp").fadeIn();
		   }
		   else{
			   $("#scrollUp").css("display","none");
		   }
	   });
	});

   </script>




  	  <script>
 $(document).ready(function(){
     	$(window).scroll(function(){
		if($(window).scrollTop() < 90){ //-navbar-----scrolltop---fixed---jquery--/
			$('#navigation').removeClass('navbar-scroll');
		}
		else {
		   $('#navigation').addClass('navbar-scroll');
		}
});

 });

</script>






<script type="text/javascript">
				jQuery(document).ready(function() {
					   // revolution slider
        var revapi;
        revapi = jQuery( '#revolution-slider-half' )
            .revolution( {
                delay:9000,
                startwidth:1200,
                startheight:630,
                onHoverStop: "on",
                thumbWidth: 100,
                thumbHeight: 50,
                thumbAmount: 3,
                touchenabled: "on",
                stopAtSlide: -1,
                stopAfterLoops: -1,
                touchenabled: "on",
                navigationType:"none",
                navigationArrows:"solo",
                navigationStyle:"preview1",
                touchenabled:"on",
                onHoverStop:"on",
                swipe_velocity: 0.7,
                swipe_min_touches: 1,
                swipe_max_touches: 1,
                drag_block_vertical: false,
                keyboardNavigation:"on",
                navigationHAlign:"center",
                navigationVAlign:"bottom",
                navigationHOffset:0,
                navigationVOffset:20,
                soloArrowLeftHalign:"left",
                soloArrowLeftValign:"center",
                soloArrowLeftHOffset:20,
                soloArrowLeftVOffset:0,
                soloArrowRightHalign:"right",
                soloArrowRightValign:"center",
                soloArrowRightHOffset:20,
                soloArrowRightVOffset:0,
                dottedOverlay: "",
                fullWidth: "on",
                stopAfterLoops:0,
                stopAtSlide:1,
                shadow: 0
            } );

            revapi = jQuery( '#revolution-slider-full' )
            .revolution( {
                delay:9000,
                startwidth:960,
                startheight:730,
                onHoverStop: "on",
                thumbWidth: 100,
                thumbHeight: 50,
                thumbAmount: 3,
                touchenabled: "on",
                stopAtSlide: -1,
                stopAfterLoops: -1,
                touchenabled: "on",
                navigationType:"none",
                navigationArrows:"solo",
                navigationStyle:"preview1",
                touchenabled:"on",
                onHoverStop:"on",
                swipe_velocity: 0.7,
                swipe_min_touches: 1,
                swipe_max_touches: 1,
                drag_block_vertical: false,
                keyboardNavigation:"on",
                navigationHAlign:"center",
                navigationVAlign:"bottom",
                navigationHOffset:0,
                navigationVOffset:20,
                soloArrowLeftHalign:"left",
                soloArrowLeftValign:"center",
                soloArrowLeftHOffset:20,
                soloArrowLeftVOffset:0,
                soloArrowRightHalign:"right",
                soloArrowRightValign:"center",
                soloArrowRightHOffset:20,
                soloArrowRightVOffset:0,
                dottedOverlay: "",
                fullWidth: "on",
                fullScreen:"on",
                stopAfterLoops:0,
                stopAtSlide:1,
                shadow: 0
            } );

            // revolution slider ver 2
            var revext=jQuery;
            var revapi;
            revext(document).ready(function() {
                if(revext("#rev-commerce").revolution == undefined){
                    revslider_showDoubleJqueryError("#rev-commerce");
                }else{
                        revapi = revext("#rev-commerce").show().revolution({
                        sliderType:"standard",
                        jsFileLocation:"revolution/js/",
                        sliderLayout:"auto",
                        dottedOverlay:"none",
                        delay:9000,
                        navigation: {
                        keyboardNavigation:"off",
                        keyboard_direction: "horizontal",
                        mouseScrollNavigation:"off",
                        mouseScrollReverse:"default",
                        onHoverStop:"on",
                        touch:{
                        touchenabled:"on",
                        swipe_threshold: 75,
                        swipe_min_touches: 50,
                        swipe_direction: "horizontal",
                        drag_block_vertical: false
                        }
                        ,
                        arrows: {
                        style:"gyges",
                        enable:true,
                        hide_onmobile:false,
                        hide_onleave:false,
                        tmp:'',
                        left: {
                        h_align:"right",
                        v_align:"bottom",
                        h_offset:160,
                        v_offset:0
                        },
                        right: {
                        h_align:"right",
                        v_align:"bottom",
                        h_offset:80,
                        v_offset:0
                        }
                        }
                        },
                        responsiveLevels:[1240,1024,778,480],
                        visibilityLevels:[1240,1024,778,480],
                        gridwidth:[1200,1024,778,480],
                        gridheight:[600,600,600,600],
                        lazyType:"single",
                        parallax: {
                        type:"scroll",
                        origo:"slidercenter",
                        speed:400,
                        levels:[5,10,15,20,25,30,35,40,45,46,47,48,49,50,51,55],
                        type:"scroll",
                        },
                        shadow:0,
                        spinner:"off",
                        stopLoop:"off",
                        stopAfterLoops:-1,
                        stopAtSlide:-1,
                        shuffle:"off",
                        autoHeight:"off",
                        disableProgressBar:"on",
                        hideThumbsOnMobile:"off",
                        hideSliderAtLimit:0,
                        hideCaptionAtLimit:0,
                        hideAllCaptionAtLilmit:0,
                        debugMode:false,
                        fallbacks: {
                        simplifyAll:"off",
                        nextSlideOnWindowFocus:"off",
                        disableFocusListener:false,
                        }
                      });
                    }
                });

				});
			</script>




<script>
        var running = false;
function send() {
  if (running == true) return;
  var msg = document.getElementById("message").value;
  if (msg == "") return;
  running = true;
  addMsg(msg);
  //DELEAY MESSAGE RESPOSE Echo
  window.setTimeout(addResponseMsg, 1000, msg);
}
function addMsg(msg) {
  var div = document.createElement("div");
  div.innerHTML =
    "<span style='flex-grow:1'></span><div class='chat-message-sent'>" +
    msg +
    "</div>";
  div.className = "chat-message-div";
  document.getElementById("message-box").appendChild(div);
  //SEND MESSAGE TO API
  document.getElementById("message").value = "";
  document.getElementById("message-box").scrollTop = document.getElementById(
    "message-box"
  ).scrollHeight;
}
function addResponseMsg(msg) {
  var div = document.createElement("div");
  div.innerHTML = "<div class='chat-message-received'>" + msg + "</div>";
  div.className = "chat-message-div";
  document.getElementById("message-box").appendChild(div);
  document.getElementById("message-box").scrollTop = document.getElementById(
    "message-box"
  ).scrollHeight;
  running = false;
}
document.getElementById("message").addEventListener("keyup", function (event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    send();
  }
});
 document.getElementById("chatbot_toggle").onclick = function () {
    if (document.getElementById("chatbot").classList.contains("collapsed_new")) {
      document.getElementById("chatbot").classList.remove("collapsed_new")
      document.getElementById("chatbot_toggle").children[0].style.display = "none"
      document.getElementById("chatbot_toggle").children[1].style.display = ""
      setTimeout(addResponseMsg,1000,"Hi, I'm OPHWC Bot, How can i help you today ?")
    }
    else {
      document.getElementById("chatbot").classList.add("collapsed_new")
      document.getElementById("chatbot_toggle").children[0].style.display = ""
      document.getElementById("chatbot_toggle").children[1].style.display = "none"
    }
  }

      </script>

@endsection