@extends('layout.master')
@section('nosformations_active', 'active-menu')
@section('content')

<!-- Page Banner Start -->
<div class="section page-banner-section" style="background-image: url({{asset('formation/assets/images/bg/page-banner.jpg')}});">
    <div class="shape-1">
        <img src="{{asset('formation/assets/images/shape/shape-7.png')}}" alt="">
    </div>
    <div class="shape-2">
        <img src="{{asset('formation/assets/images/shape/shape-1.png')}}" alt="">
    </div>
    <div class="shape-3"></div>
    <div class="container">
        <div class="page-banner-wrap">
            <div class="row">
                <div class="col-lg-12">
                    <!-- Page Banner Content Start -->
                    <div class="page-banner text-center">
                        <h2 class="title">Nos Formations</h2>
                        <ul class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a href="{{url('/')}}">Accueil</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Nos Formations</li>
                        </ul>
                    </div>
                    <!-- Page Banner Content End -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Page Banner End -->

<!-- Course List Start -->
<div class="section section-padding">
    <div class="container">

        <!-- Course List Wrapper Start -->
        <div class="course-list-wrapper">
            <div class="row">
                <div class="col-lg-3">
                    <!-- Sidebar Wrapper Start -->
                    <div class="sidebar-wrap-02">

                        <!-- Sidebar Wrapper Start -->
                        <div class="sidebar-widget-02">
                            <h3 class="widget-title">Categories</h3>

                            <div class="widget-checkbox">
                                <ul class="checkbox-list">
                                    <li class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="checkbox3">
                                        <label class="form-check-label" for="checkbox3">Formation metier (11)</label>
                                    </li>
                                    <li class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="checkbox4">
                                        <label class="form-check-label" for="checkbox4">Matinales (07)</label>
                                    </li>
                                    <li class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="checkbox5">
                                        <label class="form-check-label" for="checkbox5">Team Building (07)</label>
                                    </li>
                                    <li class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="checkbox6">
                                        <label class="form-check-label" for="checkbox6">BootCamps (11)</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- Sidebar Wrapper End -->

                        

                    </div>
                    <!-- Sidebar Wrapper End -->
                </div>
                <div class="col-lg-9">

                    <!-- Course Top Bar Start -->
                    <div class="course-top-bar">
                        <div class="course-top-text">
                            <p>Nos <span>Formations</span> </p>
                        </div>
                        <div class="course-top-inner">
                            <div class="course-top-menu">
                                <ul class="nav">
                                    <li><button class="active" data-bs-toggle="tab" data-bs-target="#grid"><i class="fa fa-th-large"></i></button></li>
                                    <li><button data-bs-toggle="tab" data-bs-target="#list"><i class="fa fa-th-list"></i></button></li>
                                </ul>
                            </div>
                            
                        </div>
                    </div>
                    <!-- Course Top Bar End -->

                    <!-- Course Collapse Start -->
                    <div class="collapse" id="collapseFilters">
                        <div class="course-collapse">
                            <div class="row">
                                
                                <div class="col-md-3">
                                    <!-- Sidebar Wrapper Start -->
                                    <div class="sidebar-widget-02">
                                        <h3 class="widget-title">Categories</h3>

                                        <div class="widget-checkbox">
                                            <ul class="checkbox-list">
                                                <li class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="checkbox16">
                                                    <label class="form-check-label" for="checkbox16">Technology (11)</label>
                                                </li>
                                                <li class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="checkbox17">
                                                    <label class="form-check-label" for="checkbox17">Business (07)</label>
                                                </li>
                                                <li class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="checkbox18">
                                                    <label class="form-check-label" for="checkbox18">Development (11)</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- Sidebar Wrapper End -->
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <!-- Course Collapse End -->

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="grid">
                            <div class="row">
                                @foreach($formation as $formations)
                                <div class="col-lg-4 col-sm-6">
                                    <!-- Single Courses Start -->
                                    <div class="single-course">
                                        <div class="courses-image">
                                            <a href="{{('detail_formationpage/'.$formations->IdFormation )}}"><img src="{{URL($formations->ImageFormation)}}" alt="Cours"></a>
                                        </div>
                                        <div class="courses-content">
                                            <!-- <div class="top-meta">
                                                <div class="tag-time">
                                                    <a class="tag" href="#">Beginner</a>
                                                    <p class="time"><i class="far fa-clock"></i> 2h 30m</p>
                                                </div>
                                                <span class="price">
                                                <span class="sale-price">Free</span>
                                                </span>
                                            </div> -->
                                            <h3 class="title"><a href="{{('detail_formationpage/'.$formations->IdFormation )}}">{!!__($formations->LibelleFormation)!!}</a></h3>
                                            <div class="courses-meta">
                                                <p class="author-name"><span>Par le</span> Cabinet SYNERGIE</p>
                                                <div class="rating">
                                                    <div class="rating-star">
                                                        <div class="rating-active" style="width: 80%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Courses End -->
                                </div>
                                @endforeach
                                
                            </div>
                        </div>
                        <div class="tab-pane fade " id="list">
                            <!-- Course List Start -->
                            <div class="course-list-items">

                                <!-- Course List Start -->
                                @foreach($formation as $formations)
                                <div class="single-course-list">
                                    <div class="course-image">
                                        <a href="{{('detail_formationpage/'.$formations->IdFormation )}}"><img src="{{URL($formations->ImageFormation)}}" alt="Courses"></a>
                                    </div>
                                    <div class="course-content">
                                        <h3 class="title"><a href="course-details.html">{!!__($formations->LibelleFormation)!!}</a></h3>
                                        <!-- <span class="author-name">Cabinet SYNERGIE</span> -->

                                        <p>