@extends('theme.new.master')
@section('title')
<title>TCM Education (TOIL CHAMBER OF MATHMATICS)</title>
@endsection
@section('meta')
   <meta name="description" content="{{ $gsetting->meta_data_desc }}" />
<meta name="keywords" content=" Best CAT coaching in Allahabad, cat allahabad, clat coaching in allahabad, cat coaching in allahabad, ssc coaching in allahabad, Best online coaching For CAT, Best CAT Coaching, Best CAT coaching in prayagraj, Best CAT Coaching in India,
CAT Preparation,MBA Coaching, MBA Entrance, MBA CAT Coaching, MBA Entrance Preparation, CLAT Coaching, Best Coaching in Allahabd, Best Coaching in Parayagraj, Best entrance exam preparation coaching,
Best CLAT Coaching,CLAT Preparation, LAW Entrance, CLAT Coaching, Best online coaching For CAT Preparation, Best online coaching For MBA, Best online coaching For MBA Entrance Preparation,
Best online coaching For CAT Preparation, TCM Education, Toil Chamber OF Mathmatics, Top 5 CAT Coaching Institutes in Allahabad, IIM Admission 2020-21, CAT 2020-2021, ">
@endsection
@section('content')


<!-- Start main-content -->
  <div class="main-content"> 
   
    <!-- Section: home -->

    
    
     <!-- Section: team -->
    <!--<section class="bg-lighter">-->
    <!--  <div class="container pb-40">-->
    <!--    <div class="heading-line-bottom">-->
    <!--      <h3 class="heading-title">TCM Alumini</h3>-->
    <!--    </div>-->
    <!--    <div class="section-content">-->
         
          
    <!--      <div class="row">-->
    <!--          @foreach($success as $story)-->
    <!--                    <div class="col-md-6 text-black">-->
    <!--                      <blockquote class=" text-black" style="border-left: 3px solid #101622;background-color:white;   min-height: 400px;">-->
                              
    <!--                          <div class="thumb pull-left mb-0 mr-0 pr-20">-->
    <!--                            <img width="75" class="img-circle img-responsive" style="width:100px;height:96px;"  alt="" src="{{ asset('images/parampara/'.$story->image) }}">-->
    <!--                          </div>-->
    <!--                          <br>-->
    <!--                           <cite title="Source Title text-black">{{$story->name}}</cite><br>-->
                               <!--<label class="text-white"> Company Name :  {{$story->company_name}}</label><br>-->
    <!--                           <label class="text-black"> College Name: {{$story->college_name}}</label><br>-->
    <!--                          <p><b>Year Of Study:</b>  {{$story->year_of_study}} &nbsp;&nbsp;-->
    <!--                          <a href="{{$story->linkdin_link}}" target="blank"><i class="text-blue fa fa-linkedin" aria-hidden="true"></i></a> </p>-->
                            
                            
    <!--                       <p>{!!$story->message!!}</p>-->
    <!--                      </blockquote>-->
    <!--                    </div>-->
    <!--        @endforeach-->
            
    <!--      </div>-->
          
          
    <!--    </div>-->
    <!--    </div>-->
    <!--  </div>-->
    <!--</section>-->
    
    <section id="team">
      <div class="container">
          <div class="heading-line-bottom">
          <h3 class="heading-title">TCM Alumini</h3>
        </div>
        <div class="row mtli-row-clearfix">
             @foreach($success as $story)
          <div class="col-xs-12 col-sm-6  mb-10 col-md-4 sm-text-center {{$story->bgcolor}} maindiv mb-30 mb-sm-30" style="border-right: 16px solid white;" id="maindiv">
            <div class="team maxwidth400">
              <div class="thumb pt-40 pb-20 ">
                  <center>
                  <img class="img-circle" src="{{ asset('images/parampara/'.$story->image) }}" alt="" style="max-width: 115px;max-height: 111px;min-width: 115px;min-height: 111px;">
                    </center>
              </div>
                      <div class="content  p-15  clearfix text-white">
                        <h4 class="name text-white text-center mt-0">{{$story->name}}</h4>
                        <p class="mb-20 text-white text-center">{{$story->college_name}}</p>
                        <hr>
                        <div class="halfpara{{$story->id}}">
                        <p class="text-white text-justify" style="color:white;">{!! str_limit($story->message, $limit = 150, $end = '...') !!}</p>
                        </div>
                        <div class="fullpara{{$story->id}}" style="display:none;">
                        <p class="text-white text-justify" style="color:white;">{!! str_limit($story->message, $limit = 350, $end = '...') !!} </p>
                        </div>
                        
                        <a href="javascript:void(0);" class="btn btn-default btn-theme-colored btn-xs readmore{{$story->id}}" style="float: right;">Read More</a>
                        
                        <a href="javascript:void(0);" class="btn btn-default btn-theme-colored btn-xs readless{{$story->id}}" style="display:none;float: right;">Read Less</a>
                               
                            
                      </div>
                      
                    
                            
                     

                <script>
                    $(document).ready(function(){
                    $(".readmore{{$story->id}}").click(function(){
                        $(".halfpara{{$story->id}}").hide(); 
                        $(".readmore{{$story->id}}").hide();
                        $(".fullpara{{$story->id}}").show();
                        $(".readless{{$story->id}}").show();
                        $('.maindiv').css('min-height', '600px');
                
                    });
                    });
                    $(document).ready(function(){
                    $(".readless{{$story->id}}").click(function(){
                        $(".halfpara{{$story->id}}").show(); 
                        $(".readmore{{$story->id}}").show();
                        $(".fullpara{{$story->id}}").hide();
                        $(".readless{{$story->id}}").hide();
                        $('.maindiv').css('min-height', 'auto');
                
                    });
                    });
                    </script>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>
 
    

  </div>
  
  @endsection