@extends('layouts.webmaster')
@section('page-links')
<style>
   .item-media img{
   height: 300px;
   width: 100%;
   }
   h4.entry-title {
   font-size: 18px !important;
   }
   .banner{
   width:100%;
   }
   .banner img{
   width: 100%;
   height: 400px;
   }
   a:hover,a:focus{
   text-decoration: none;
   outline: none;
   }
   .vertical-tab1{
   font-family: 'Lato', sans-serif;
   display: table;
   }
   .vertical-tab1 .nav-tabs1{
   display: table-cell;
   width: 28%;
   min-width: 28%;
   vertical-align: top;
   border: none;
   border-right: 5px solid #404040;
   }
   .vertical-tab1 .nav-tabs1 li{
   float: none;
   vertical-align: top;
   }
   .vertical-tab1 .nav-tabs1 li a{
   color: #404040;
   background: transparent;
   font-size: 18px;
   font-weight: 600;
   text-align: left;
   text-transform: uppercase;
   padding: 10px 15px;
   margin: 0 15px 10px 0;
   border-radius: 0;
   border: none;
   position: relative;
   transition: all 0.5s ease 0s;
   }
   .vertical-tab1 .nav-tabs1 li a:hover,
   .vertical-tab1 .nav-tabs1 li.active a,
   .vertical-tab1 .nav-tabs1 li.active a:hover{
   color: #E2181D;
   background-color: transparent;
   border: none;
   }
   .vertical-tab1 .nav-tabs1 li a:before,
   .vertical-tab1 .nav-tabs1 li a:after{
   content: '';
   height: 100%;
   width: 0;
   /* border: 2px solid #404040; */
   border-left: 5px solid #E2181D;
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s ease 0s;
   }
   .vertical-tab1 .nav-tabs1 li a:after{
   background-color: #404040;
   height: 10px;
   width: 10px;
   border-radius: 50%;
   border-color: transparent;
   transform: translateY(-50%);
   top: 50%;
   left: auto;
   right: -23px;
   }
   .vertical-tab1 .nav-tabs1 li a:hover:before,
   .vertical-tab1 .nav-tabs1 li.active a:before{
   width: 100%;
   opacity: 1;
   }
   .vertical-tab1 .nav-tabs1 li a:hover:after,
   .vertical-tab1 .nav-tabs1 li.active a:after{
   background-color: #E2181D;
   border: 2px solid #fff;
   box-shadow: 0 0 5px #000;
   opacity: 1;
   transform: translateY(-50%) scale(2);
   }
   .vertical-tab1 .tab-content{
   color: #404040;
   /* background-color: rgba(0,0,0,0.07); */
   background: #ffe1d13d;
   font-size: 15px;
   text-align: justify;
   letter-spacing: 1px;
   line-height: 24px;
   padding: 15px 25px;
   border-radius: 0 20px 20px 0;
   display: table-cell;
   position: relative;
   }
   .vertical-tab1 .tab-content h3{
   font-weight: 600;
   margin: 0 0 5px 0;
   }
   @media only screen and (max-width: 479px){
   .vertical-tab1 .nav-tabs1{
   width: 100%;
   display: block;
   border: none;
   }
   .vertical-tab1 .nav-tabs1 li a{
   padding: 7px 20px;
   margin: 0 0 10px 0;
   }
   .vertical-tab1 .nav-tabs1 li a:after{ right: 10px; }
   .vertical-tab1 .tab-content{
   padding: 20px 15px 10px;
   border-radius: 0;
   display: block;
   }
   .vertical-tab1 .tab-content h3{ font-size: 18px; }
   }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
   {
   .display_table_cell
   {
   display: flex;
   align-items: center;
   }
   .mainmenu_wrapper
   {
   margin-top: -120px !important;
   margin-left: 158px !important;
   }
   .header_right_buttons
   {
   margin-top: -100px !important;
   margin-left: 1000px !important;
   }
   }

   .product-grid1{
      height: 250px;
      /* width: 180px; */
    text-align: center;
    margin: 5px 15px 0;
    border-radius: 10px;
    box-shadow:  0 0 3px rgba(0,0,0,0.1);
    transition: all 0.5s;
}
.product-grid1:hover{ box-shadow:  0 0 15px rgba(0,0,0,0.1); }
.product-grid1 .product-image1{ position: relative; }
.product-grid1 .product-image a.image1{
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    display: block;
}
.product-grid1 .product-image1 img{  
   height: 180px;
   width: 180px;
}

.product-grid1 .product-content1{
    background-color: #fff;
    text-align: left;
    padding: 15px 10px;
    border-top: 1px solid transparent;
    border-radius: 0 0 10px 10px;
    transition: all 0.3s;
}
.product-grid1:hover .product-content1{ border-top-color: #dbdbdb; }
.product-grid1 .title1{
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0;
}
.product-grid1 .title1 a{
    color: #e74c3c;
    transition: all 0.4s ease-out;
}
.product-grid1 .title1 a:hover{ color: #b71540; }
@media screen and (max-width:990px){
    .product-grid1{ margin: 5px 15px 30px; }
}

.owl-carousel .owl-item img{
   border: none;
}
@media only screen and (max-width: 768px) {
	.banner img{
		width: 100%;
		height: 200px;
	}
	.header_white {
		height: 60px;
	}
	.toggler_xs_right .toggle_menu {
		margin-top: 2px;
	}
   .form-pdf{
      width: 50%!important;
   }
   .logo{
      display:none;
   }
   }
</style>
@endsection
@section('page-content')
<section style="background-color:#971012;">
   <div class="banner">
      <img src="/img/images/bannerImg.jpg" alt="event-img">
   </div>
</section>
<section class="page_breadcrumbs ds background_cover  " style="background-color:#171A2B;">
   <div class="container">
      <div class="row">
         <div class="col-sm-12 text-center">
            <ol class="breadcrumb greylinks">
               <li> <a href="{{ route('website') }}">
                  Home
                  </a> 
               </li>
               <li class="active" style="color:#E2181D;">Download</li>
            </ol>
         </div>
      </div>
   </div>
</section>
{{-- <section class="ls" style="padding: 50px 0;">
   <div class="container">
      <div class="row">
         <div class="container">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
               <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingOne">
                     <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Saraswani
                        </a>
                     </h4>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                     <div class="panel-body">
                        <!--  Coming Soon... -->
                        <div class="owl-carousel loop-colors topmargin_40 event-box" data-dots="false" data-nav="true" data-responsive-lg="4">
                           @foreach($brochures as $brochure)
                           <div>
                              <article class="vertical-item content-padding post format-standard  with_border  text-center">
                                 <div class="item-media"> 
                                    <a href="{{url('brochure_view/'.$brochure->id)}}" rel="bookmark" target="_blank">
                                    <img src="{{url('storage/'.$brochure->coverfile)}}" alt="">
                                    </a>
                                 </div>
                                 <div class="item-content">
                                    <header class="entry-header">
                                       <h4 class="entry-title margin_0">
                                          <a href="{{url('brochure_view/'.$brochure->id)}}" rel="bookmark" target="_blank">
                                          {{ucfirst($brochure->title)}}
                                          </a> 
                                       </h4>
                                    </header>
                                 </div>
                              </article>
                           </div>
                           @endforeach
                        </div>
                     </div>
                  </div>
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingTwo">
                     <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Forms
                        </a>
                     </h4>
                  </div>
                  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                     <div class="panel-body">
                        <div class="col-md-12">
                           <div class="row color3">
                              <style type="text/css">
                                 .pdf-img{width: 50px;display: inline-block;margin: 0 10px;}
                              </style>
                              @foreach($downloadsForms as $form)
                              <div class="col-sm-4 text-center form-pdf">
                                 <a href="{{route('downloads.show',$form->id)}}" target="_blank">
                                    <img src="{{ asset('www/img/pdf.png') }}" class="img-responsive img-thumbnail pdf-img" alt="">
                                    <div class="caption">
                                       <p>{{$form->title}}</p>
                                    </div>
                                 </a>
                              </div>
                              @endforeach
                              <!--  <div class="col-sm-3 text-center">
                                 <a href="{{ asset('www/pdf/Vidyarthi_Puraskar_2019.pdf') }}" target="_blank"><img src="{{ asset('www/img/pdf.png') }}" class="img-responsive img-thumbnail pdf-img" alt="">
                                 <div class="caption">
                                      <p>Vidyarthi Puraskar 2019.pdf</p></div>
                                      </a>
                                 
                                 </div> -->
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingThree">
                     <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Resources
                        </a>
                     </h4>
                  </div>
                  <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                     <div class="panel-body">
                        Coming Soon...
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section> --}}
<section style="margin-top:50px;">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <div class="vertical-tab1" role="tabpanel">
              
               <ul class="nav nav-tabs1" role="tablist">
                  <li role="presentation" class="active"><a href="#formationmanagement" aria-controls="home" role="tab" data-toggle="tab">Saraswani</a></li>
                  <li role="presentation"><a href="#forms" aria-controls="profile" role="tab" data-toggle="tab">Forms</a></li>
                  <li role="presentation"><a href="#resources" aria-controls="messages" role="tab" data-toggle="tab">Resources</a></li>
               </ul>
               <div class="tab-content tabs">
                  <div role="tabpanel" class="tab-pane fade in active" id="formationmanagement">
                     <div class="entry-content">
                        <div lass="col-md-12">
                           <div class="row">
                                                @foreach($brochures as $brochure)
                                       <div class="col-md-3">
                        <div class="product-grid1">
                           <div class="product-image1">
                              <a href="{{url('storage/'.$brochure->file)}}" rel="bookmark" target="_blank">
                                 <img src="{{url('storage/'.$brochure->coverfile)}}" alt="">
                              </a>
                           </div>
                           <div class="product-content1">
                            <h3 class="title1"><a href="{{url('storage/'.$brochure->file)}}" rel="bookmark" target="_blank">
                              {{ucfirst($brochure->title)}}</a></h3>
                           </div>
                        </div>
                     </div>
                     @endforeach
                           </div>
                        </div>
                     </div>
                  </div>



                  
                  <div role="tabpanel" class="tab-pane fade" id="forms">
                     <div class="entry-content">
                      <div class="col-md-12">
                        <div class="row color3">
                           <style type="text/css">
                              .pdf-img{width: 50px;display: inline-block;margin: 0 10px;}
                           </style>
                           @foreach($downloadsForms as $form)
                           <div class="col-sm-3 text-center">
                              <a href="{{route('downloads.show',$form->id)}}" target="_blank">
                                 <img src="{{ asset('www/img/pdf.png') }}" class="img-responsive img-thumbnail pdf-img" alt="">
                                 <div class="caption">
                                    <p>{{$form->title}}</p>
                                 </div>
                              </a>
                           </div>
                           @endforeach
                        </div>
                      </div>
                     </div>
                  </div>
                  <div role="tabpanel" class="tab-pane fade" id="resources">
                    <div class="entry-content">
                       <div class="col-md-12">Coming Soon...</div>
                    </div>
                 </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
@endsection