@extends('layout.app')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css">
<style>
  .project-name {
    text-align: center;
    padding: 10px 0;
  }

  #timeline .timeline-item:after,
  #timeline .timeline-item:before {
    content: '';
    display: block;
    width: 100%;
    clear: both;
  }

  #timeline {
    width: 100%;
    margin: 30px auto;
    position: relative;
    padding: 0 20px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  #timeline:before {
    content: "";
    width: 3px;
    height: 100%;
    background: #f35626;
    left: 50%;
    top: 0;
    position: absolute;
  }

  #timeline:after {
    content: "";
    clear: both;
    display: table;
    width: 100%;
  }

  #timeline .timeline-item {
    margin-bottom: 50px;
    position: relative;
  }

  #timeline .timeline-item .timeline-icon {
    background: #f35626;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    margin-left: -23px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
  }

  #timeline .timeline-item .timeline-icon svg,
  #timeline .timeline-item .timeline-icon .fa {
    position: relative;
    top: 13px;
    left: 14px;
    font-size: 24px;
    color: #fff;
  }

  #timeline .timeline-item .timeline-content {
    width: 45%;
    background: #fffcf8;
    padding: 20px;
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  }

  /* #timeline .timeline-item .timeline-content h2 {
  padding: 8px 16px;
  background: #1C71A4;
  color: #fff;
  margin: -20px -20px 0 -20px;
  font-weight: 600;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -ms-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  font-size: 18px;
} */
  #timeline .timeline-item .timeline-content p {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* #timeline .timeline-item .timeline-content:before {
    content: '';
    position: absolute;
    left: 45%;
    top: 14px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #1C71A4;
  } */

  #timeline .timeline-item .timeline-content.right {
    float: right;
  }

  #timeline .timeline-item .timeline-content.right:before {
    content: '';
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #1C71A4;
    display: none;
  }


  @media screen and (max-width: 768px) {
    #timeline {
      margin: 30px;
      padding: 0px;
      width: 90%;
    }

    #timeline:before {
      left: 0;
    }

    #timeline .timeline-item .timeline-content {
      width: 90%;
      float: right;
    }

    #timeline .timeline-item .timeline-content:before,
    #timeline .timeline-item .timeline-content.right:before {
      left: 10%;
      margin-left: -6px;
      border-left: 0;
      border-right: 7px solid #1C71A4;
    }

    #timeline .timeline-item .timeline-icon {
      left: 0;
    }
  }


  /* Animation CSS */

  /* icon animation */
  .timeline-icon.is-hidden {
    visibility: hidden;
  }

  .timeline-icon.animate-it {
    visibility: visible;
    -webkit-animation: bounce-1 0.6s;
    -moz-animation: bounce-1 0.6s;
    animation: bounce-1 0.6s;
  }

  /* content block animation */
  .timeline-content.is-hidden {
    visibility: hidden;
  }

  .timeline-content.animate-it {
    visibility: visible;
    -webkit-animation: bounce-2 0.6s;
    -moz-animation: bounce-2 0.6s;
    animation: bounce-2 0.6s;
  }

  @media only screen and (min-width: 769px) {

    /* Inverse bounce effect on even content blocks */
    .timeline-content.right.animate-it {
      -webkit-animation: bounce-2-inverse 0.6s;
      -moz-animation: bounce-2-inverse 0.6s;
      animation: bounce-2-inverse 0.6s;
    }
  }

  @media only screen and (max-width: 768px) {

    /* Inverse bounce effect on all content blocks */
    .timeline-content.animate-it,
    .timeline-content.right.animate-it {
      -webkit-animation: bounce-2-inverse 0.6s;
      -moz-animation: bounce-2-inverse 0.6s;
      animation: bounce-2-inverse 0.6s;
    }
  }

  /* ALL animation types called */

  @-webkit-keyframes bounce-1 {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5);
    }

    60% {
      opacity: 1;
      -webkit-transform: scale(1.2);
    }

    100% {
      -webkit-transform: scale(1);
    }
  }

  @-moz-keyframes bounce-1 {
    0% {
      opacity: 0;
      -moz-transform: scale(0.5);
    }

    60% {
      opacity: 1;
      -moz-transform: scale(1.2);
    }

    100% {
      -moz-transform: scale(1);
    }
  }

  @keyframes bounce-1 {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -o-transform: scale(0.5);
      transform: scale(0.5);
    }

    60% {
      opacity: 1;
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
    }

    100% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
    }
  }

  @-webkit-keyframes bounce-2 {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateX(20px);
    }

    100% {
      -webkit-transform: translateX(0);
    }
  }

  @-moz-keyframes bounce-2 {
    0% {
      opacity: 0;
      -moz-transform: translateX(-100px);
    }

    60% {
      opacity: 1;
      -moz-transform: translateX(20px);
    }

    100% {
      -moz-transform: translateX(0);
    }
  }

  @keyframes bounce-2 {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100px);
      -moz-transform: translateX(-100px);
      -ms-transform: translateX(-100px);
      -o-transform: translateX(-100px);
      transform: translateX(-100px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateX(20px);
      -moz-transform: translateX(20px);
      -ms-transform: translateX(20px);
      -o-transform: translateX(20px);
      transform: translateX(20px);
    }

    100% {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @-webkit-keyframes bounce-2-inverse {
    0% {
      opacity: 0;
      -webkit-transform: translateX(100px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateX(-20px);
    }

    100% {
      -webkit-transform: translateX(0);
    }
  }

  @-moz-keyframes bounce-2-inverse {
    0% {
      opacity: 0;
      -moz-transform: translateX(100px);
    }

    60% {
      opacity: 1;
      -moz-transform: translateX(-20px);
    }

    100% {
      -moz-transform: translateX(0);
    }

    f
  }

  @keyframes bounce-2-inverse {
    0% {
      opacity: 0;
      -webkit-transform: translateX(100px);
      -moz-transform: translateX(100px);
      -ms-transform: translateX(100px);
      -o-transform: translateX(100px);
      transform: translateX(100px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateX(-20px);
      -moz-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      -o-transform: translateX(-20px);
      transform: translateX(-20px);
    }

    100% {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
    }
  }

  

  .timeline-btn a {
    color: #18284d;
    font-weight: 600;
    font-size: 16px;
    padding: 4px 8px;
    font-size: 12px;
    background: #e4eff8;
  }

  .card {
    position: relative;
  }

  .card-holder>.card {
    width: 100%;
    height: 48px;
    border-radius: 35px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    display: flex;
    align-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all ease-in-out 0.5s;
    flex-direction: row;
    align-items: center;
    margin: 0;
    background: #2671ac;
    border-radius: 35px;
  }

  .year-badge h2 {
    color: #fff;
    margin-bottom: 0;
    font-size: 18px;
  }

  .card-holder>.card>.timeline-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 100px;
    transform: translateY(0px) translateX(-2px);
    margin: 0px;
    left: 0;
    background: linear-gradient(135deg, #003f75 0%, #003f75 100%) !important;
    /* border-radius: 50% 0 0; */
    border-radius: 10% 10% 10% 8%;
    font-size: 24px;
    font-weight: 800;
    color: coral;
    padding-right: 10px;
  }
  .card-holder>.card>.timeline-logo>img {
    width: 32px;
    padding: 4px;
  }

  .timeline-logo img {
    max-width: 70px !important;
  }

  .card-holder>.card>.content-container {
    margin: 5px;
    margin-left: 5px;
    margin-left: 100px;
    overflow: hidden;
    position: relative;
    flex: 1;
    padding-right: 20px;
  }

  .card-holder>.card>.content-container>.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all ease-in-out 0.5s;
    gap: 5px;
  }

  .card-holder>.card>.content-container>.content h3 {
    font-size: 14px !important;
    color: #081635 !important;
    margin-bottom: 0;
    font-weight: 500;
  }

  .card-holder>.card>.content-container>.content p {
    margin-bottom: 0;
    color: #a41d23;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .timeline-logo {
    position: absolute;
  }
  
.timeline-content.left .timeline-logo {
  left: -10px;
  right: auto;
  padding-left: 22px;
}

.timeline-content.right .timeline-logo {
  left: auto;
  right: -10px;
}
.timeline-content.right .content-container {margin-left: 18px;}
</style>
@endsection

@section('content')
<div class="slider-area2 section-bg2" data-background="{{ asset('new_img/twitter-img/DGs_Visit_RMRCNE.jpg') }}">
  <div class="slider-height2 d-flex align-items-center">
    <div class="container">
      <div class="row">
        <div class="col-xl-12">
          <div class="hero-cap hero-cap2">
            <h2>{{$name}}</h2>
              <h4>
                  <a href={{route('index')}}>Home</a> <span>/</span>
                  @if($first!=null)
                        <a href="#">{{$first}}</a><span>/</span>
                  @endif
                  @if($second!=null)
                      </span> <a href="#">{{$second}}</a><span>/</span>
                  @endif
                      <a href="#">{{$name}}</a>
              </h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<section class="home-blog-area section-padding40">
  <div class="container">
    <div class="timeline-container">
      <div id="timeline">
        @foreach($timelines as $index => $timeline)
        @php
        $colors = ['#f35626', '#3fc683', '#9e7eea', '#FFC0A5', '#A5FFC0']; // Add more colors as needed
        $color = $colors[$index % count($colors)];
        @endphp

        <div class="timeline-item">
          <div class="timeline-icon">
            <i class="fa fa-trophy" aria-hidden="true"></i>
          </div>
          <div class="timeline-content @if($index % 2 == 0) left @else right @endif">
            <div class="year-badge">
              <div class="card-holder" style="width: 100%;">
                <a href="#" class="card">
                  <div class="timeline-logo" style="background: linear-gradient(135deg, #52c234 0%, #061700 100%); ">
                    {{$timeline->year}}
                  </div>
                  <div class="content-container">
                    <div class="content content-1">
                      <h2>{{$timeline->title}}</h2>
                    </div>
                  </div>
                </a>
              </div>
          </div>
          @if($timeline->file)
          <img src="{{$timeline->file}}" alt="">
          @endif
          <p>{!!$timeline->brief !!}</p>
          <span class="time-stamp">
            <!-- <i class="fa fa-calendar" aria-hidden="true"></i> {{$timeline->year}} -->
          </span>

          <span style="float:right" class="timeline-btn">
            @if($timeline->content)
            <a href="#"><i class="fa fa-chevron-circle-right"></i> Read More</a>
            @elseif($timeline->pdf)
            <a href="{{$timeline->pdf}}"><i class="fa fa-chevron-circle-right"></i>Click Here</a>
            @elseif($timeline->url)
            <a href="{{$timeline->url}}"><i class="fa fa-chevron-circle-right"></i>Click Here</a>
            @endif
          </span>
        </div>
      </div>
      @endforeach
    </div>
  </div>
  </div>
</section>
@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.0/wow.min.js"></script>
<script>
  $(function() {
    var timelineBlocks = $('.timeline-item'),
      offset = 0.8;

    //hide timeline blocks which are outside the viewport
    hideBlocks(timelineBlocks, offset);

    //on scolling, show/animate timeline blocks when entering the viewport
    $(window).on('scroll', function() {
      (!window.requestAnimationFrame) ?
      setTimeout(function() {
        showBlocks(timelineBlocks, offset);
      }, 100): window.requestAnimationFrame(function() {
        showBlocks(timelineBlocks, offset);
      });
    });

    function hideBlocks(blocks, offset) {
      blocks.each(function() {
        ($(this).offset().top > $(window).scrollTop() + $(window).height() * offset) && $(this).find('.timeline-icon, .timeline-content').addClass('is-hidden');
      });
    }

    function showBlocks(blocks, offset) {
      blocks.each(function() {
        ($(this).offset().top <= $(window).scrollTop() + $(window).height() * offset && $(this).find('.timeline-icon').hasClass('is-hidden')) && $(this).find('.timeline-icon, .timeline-content').removeClass('is-hidden').addClass('animate-it');

      });
    }
  });
</script>
@endsection('js')