@extends('admin.base')
@section('title')

   EDUCATIVE | Eleve
    
@endsection

@section('meta')

   <!-- Required meta tags-->
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1">
      <meta name="keywords" content="">
      <meta name="description" content="">
      <meta name="author" content="">    
@endsection

@section('stylesheet')




@endsection

@section('body')

<div class="midde_cont">
  <div class="container-fluid">
     <!-- <div class="row column_title">
        <div class="col-md-12">
           <div class="page_title">
              <h2>Cours de {{$matiere->nom}} </h2>
           </div>
        </div>
     </div> -->
     <!-- row -->
     <div class="row column4 graph">
        <!-- Gallery section -->
        <div class="col-md-12">
           <div class="white_shd full margin_bottom_30">
              <div class="full graph_head">
                 <div class="heading1 margin_0">
                    <h2> Cours de {{$matiere->nom}}</h2>
                 </div>
              </div>
              <div class="full gallery_section_inner padding_infor_info">
                 <div class="row">
                    @foreach($cours as $cours)
                    <div class="col-md-4 margin_bottom_30">
                       <div class="column">
                        @if($cours->photo==null)
                          <a  href="#"><img style="width: 290px; height: 150px" class="img-responsive" src=" {{asset('admin/images/imgcours2.jpg')}} " alt="#" /></a>
                        @else
                          <a href="#"><img style="width: 290px; height: 150px" class="img-responsive" src=" {{asset($cours->photo)}} " alt="#" /></a>
                        @endif
                       </div>
                       <div class="pt-3 text-center">
                          <h4 class="" style="">
                            <!-- <a  href="#" title="Détails" data-toggle="modal" data-target="#cours{{$cours->id}}" >
                              <i style="" class="pull-left fa-solid fa-eye"></i>
                            </a> --> 
                             {{$cours->intitule}} 
                            <a download="{{$cours->intitule}}" href="{{asset($cours->fichier)}}" target="_blank">
                              <i style="" class=" fa-solid fa-download"></i>
                            </a>
                          </h4>
                       </div>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade" id="cours{{$cours->id}}" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                <h5 class="modal-title" >{{$matiere->nom}}-{{ $cours->intitule}}</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                   <span aria-hidden="true">&times;</span>
                                </button>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-5 col-sm-12 col-xs-12 mb-lm-30px mb-sm-30px">
                                            <!-- Swiper -->
                                            <div class="swiper-container gallery-top mb-4">
                                                <div class="swiper-wrapper">
                                                    <div  class="swiper-slide">
                                                    @if($cours->photo==null)
                                                    <img  class="img-responsive" src=" {{asset('admin/images/imgcours2.jpg')}} " alt="#" />
                                                   @else
                                                    <img class="img-responsive" src=" {{asset($cours->photo)}} " alt="#" />
                                                   @endif
                                                    </div>
                                                </div>
                                            </div>                  
                                        </div>
                                        <div class="col-md-7 col-sm-12 col-xs-12">
                                            <div class="product-details-content quickview-content">
                                                <h2>{{ $cours->intitule}}</h2>
                                                <div class="pricing-meta">
                                                </div>
                                                <p class="quickview-para">{{ $cours->description }}</p>
                                                <div class="pro-details-quality">
                                                <div class="modal-footer">
                                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Modal end -->

                    @endforeach
                 </div>
              </div>
           </div>
        </div>
     </div>
     <!-- footer -->
  </div>
  <!-- end dashboard inner -->
</div>


@endsection

@section('javascript')

   

@endsection