@extends('user.layouts.app')

@section('body_class', 'president')

@section('content')
<section class="banner-slider">
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
</section>
<div class="banner-inner-content">
  <div class="container">
    <ul class="bread-come">
      <li>
        <a href="/">Home</a>
      </li>
      <li>Past Presidents</li>
    </ul>
  </div>
</div>

<section class="president-gallery-page">
  <div class="container">
    <ul class="president-gallery">
      <!-- <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president1.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">EJ Oakley</div>
            <div class="president-year">1922 - 1923</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president2.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">G Stapledon</div>
            <div class="president-year">1925</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president3.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">G Morgan</div>
            <div class="president-year">1928 - 1929</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president4.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">RWB Dunlop</div>
            <div class="president-year">1938 - 1939</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president5.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">DH Wilmer</div>
            <div class="president-year">1944 - 1945</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president6.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">WH Batty</div>
            <div class="president-year">1948</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president7.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">JE Waterfield</div>
            <div class="president-year">1951 - 1952</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president8.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Alexander</div>
            <div class="president-year">1951 - 1953</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president9.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">RJL Oakley</div>
            <div class="president-year">1953</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president10.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">RHD Campbell</div>
            <div class="president-year">1954 - 1956</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president11.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">J Latimer</div>
            <div class="president-year">1957</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president12.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">AT Montgomery</div>
            <div class="president-year">1958 - 1959</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president13.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">PH Sykes</div>
            <div class="president-year">1962 - 1964</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president14.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">CMA Bathurst</div>
            <div class="president-year">1964 - 1965</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president15.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">A Keown</div>
            <div class="president-year">1966</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president16.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Michael Parsons</div>
            <div class="president-year">1967 - 1968</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president17.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">PL Roy</div>
            <div class="president-year">1968</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president18.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">RB Chopra</div>
            <div class="president-year">1969</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president19.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">SP Acharya</div>
            <div class="president-year">1971 - 1972</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president20.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">CJ Will</div>
            <div class="president-year">1972 - 1973</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president21.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">M Bhagat</div>
            <div class="president-year">1973 - 1974</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president22.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Mr</div>
            <div class="president-year">1974 - 1975</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president23.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">JR Bammi</div>
            <div class="president-year">1975 - 1976</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president24.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">CJT Blease</div>
            <div class="president-year">1976 - 1977</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president25.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">HD Wahi</div>
            <div class="president-year">1978 - 1979</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president26.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">AWG MacIntyre</div>
            <div class="president-year">1978 - 1980</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president27.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Sharanbir Singh</div>
            <div class="president-year">1980</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president28.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">KK DattaGupta</div>
            <div class="president-year">1981</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president29.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">PK Gupta</div>
            <div class="president-year">1982</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president30.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">S Niyogi</div>
            <div class="president-year">1983</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president31.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">JN Sapru</div>
            <div class="president-year">1984</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president32.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">AC Puri</div>
            <div class="president-year">1985</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president33.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">KSB Sanyal</div>
            <div class="president-year">1987 - 1988</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president34.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">VK Lamba</div>
            <div class="president-year">1988 - 1989</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president35.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">RN Deogun</div>
            <div class="president-year">1989 - 1990</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president36.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">JM Thomas</div>
            <div class="president-year">1990 - 1991</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president37.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">BP Bajoria</div>
            <div class="president-year">1991 - 1992</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president38.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">MH Chinoy</div>
            <div class="president-year">1992 - 1993</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president39.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">SS Prasad</div>
            <div class="president-year">1993 - 1994</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president40.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">KL Chugh</div>
            <div class="president-year">1994 - 1995</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president41.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">S Subberwal</div>
            <div class="president-year">1995 - 1996</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president42.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">AK Dutt</div>
            <div class="president-year">1996 - 1997</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president43.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">NF Tankariwala</div>
            <div class="president-year">1997 - 1998</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president44.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">AV Iyengar</div>
            <div class="president-year">1998 - 1999</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president45.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">PK Dutt</div>
            <div class="president-year">1999 - 2000</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president46.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">YC Deveshwar</div>
            <div class="president-year">2000 - 2001</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president47.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">D Atal</div>
            <div class="president-year">2001 - 2002</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president48.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">SK Dhall</div>
            <div class="president-year">2002 - 2003</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president49.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Anup Singh</div>
            <div class="president-year">2003 - 2004</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president50.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">G Chakravartti</div>
            <div class="president-year">2004 - 2005</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president51.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Subir Bose</div>
            <div class="president-year">2005 - 2006</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president52.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Abhijit Mazumdar</div>
            <div class="president-year">2006 - 2007</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president53.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">MJZ Mowla</div>
            <div class="president-year">2007 - 2008</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president54.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Saibal Sen</div>
            <div class="president-year">2008 - 2009</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president55.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">TV Ramaswamy</div>
            <div class="president-year">2009 - 2010</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president56.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Lahiri</div>
            <div class="president-year">2010 - 2011</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president57.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">CS Bedi</div>
            <div class="president-year">2011 - 2012</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president58.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">SK Menon</div>
            <div class="president-year">2012 - 2013</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president59.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Sandipan Chakravarty</div>
            <div class="president-year">2013 - 2014</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president60.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Krush Grant</div>
            <div class="president-year">2014 - 2015</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president61.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Kallol Dutta</div>
            <div class="president-year">2015 - 2016</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president62.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Viren Sinha</div>
            <div class="president-year">2017 - 2018</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president63.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Ronen Roy</div>
            <div class="president-year">2019 - 2020</div>
          </div>
        </div>
      </li>
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="./images/president64.jpg" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">Dhir</div>
            <div class="president-year">2022 - 2023</div>
          </div>
        </div>
      </li> -->

      @foreach($president_data as $president)
      <li data-aos="fade-up">
        <div class="president-gallery-inner">
          <div class="president-image">
            <img src="{{ asset('/storage/' . $president->image) }}" alt="" />
          </div>
          <div class="president-content">
            <div class="president-name">{{$president->name}}</div>
            <div class="president-year">{{$president->start_date}} - {{$president->end_date}}</div>
          </div>
        </div>
      </li>
      @endforeach
    </ul>
  </div>
</section>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection