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


        <!-- Hero Start -->
        <div class="upstudy-hero-section section" style="background-image: url(assets/images/bg/hero-bg.jpg);">
            <div class="shape-3">
                <img src="formation/assets/images/shape/shape-1.png" alt="">
            </div>
            <div class="shape-4"></div>
            <div class="shape-5">
                <img src="formation/assets/images/shape/hero-shape2.png" alt="">
            </div>
            <div class="svg-shape">
                <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390">
                    <path d="M 0,400 C 0,400 0,200 0,200 C 247.5,166.5 495,133 735,133 C 975,133 1207.5,166.5 1440,200 C 1440,200 1440,400 1440,400 Z" stroke="none" stroke-width="0" fill-opacity="1"></path>
                </svg>
            </div>
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <!-- Hero Content Start -->
                        <div class="hero-content">
                            <p class="text" data-aos="fade-up" data-aos-delay="800">Découvrez et optez pour nos formations</p>
                            <h2 class="title" data-aos="fade-up" data-aos-delay="700">Synergie <span>Global</span> Institute</h2>
                            <div class="hero-btn" data-aos="fade-up" data-aos-delay="900">
                                <a class="btn" href="{{url('formations_page')}}">Nos formations</a>
                            </div>
                        </div>
                        <!-- Hero Content End -->
                    </div>
                    <div class="col-lg-6">
                        <!-- Hero Images Start -->
                        <div class="hero-images">
                            <img class="shape-1" src="formation/assets/images/shape/hero-shape1.png" alt="">
                            <div class="shape-2"></div>
                            <div class="shape-6">
                                <img src="formation/assets/images/shape/shape-7.png" alt="">
                            </div>
                            <div class="image">
                                <img src="formation/assets/images/format1.png" alt="">
                                <div class="image-content text-center">
                                    <img src="formation/assets/images/reseaux.png" alt="">
                                    <div class="image-text">
                                        <h3 class="number">20k+</h3>
                                        <p>Suivez nous sur les réseaux sociaux</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Hero Images End -->
                    </div>
                </div>
            </div>

        </div>
        <!-- Hero End -->

        <!-- Category Start -->
        <div class="section upstudy-category-section">
            <div class="container">
                <div class="category-wrap">
                    <div class="row">
                        <div class="section-title text-center">
                            <h2 class="title">Nos <span>Categories</span></h2>
                        </div>
                    </div>
                    <div class="category-content-wrap">
                        <div class="row">
                            <div class="col-xl-3 col-lg-4 col-sm-6">
                                <!-- Category Item Start -->
                                <a href="javascript:void(0)" class="category-item">
                                    <div class="category-icon">
                                        <img src="formation/assets/images/cat-icon4.png" alt="">
                                    </div>
                                    <div class="category-content">
                                        <h3 class="title">Les Formations métiers</h3>
                                    </div>
                                </a>
                                <!-- Category Item End -->
                            </div>
                            <div class="col-xl-3 col-lg-4 col-sm-6">
                                <!-- Category Item Start -->
                                <a href="javascript:void(0)" class="category-item color-2">
                                    <div class="category-icon">
                                        <img src="formation/assets/images/cat-icon4.png" alt="">
                                    </div>
                                    <div class="category-content">
                                        <h3 class="title">Les matinales</h3>
                                    </div>
                                </a>
                                <!-- Category Item End -->
                            </div>
                            <div class="col-xl-3 col-lg-4 col-sm-6">
                                <!-- Category Item Start -->
                                <a href="javascript:void(0)" class="category-item color-3">
                                    <div class="category-icon">
                                        <img src="formation/assets/images/cat-icon4.png" alt="">
                                    </div>
                                    <div class="category-content">
                                        <h3 class="title">Team Building</h3>
                                    </div>
                                </a>
                                <!-- Category Item End -->
                            </div>
                            <div class="col-xl-3 col-lg-4 col-sm-6">
                                <!-- Category Item Start -->
                                <a href="javascript:void(0)" class="category-item color-4">
                                    <div class="category-icon">
                                        <img src="formation/assets/images/cat-icon4.png" alt="">
                                    </div>
                                    <div class="category-content">
                                        <h3 class="title">Bootcamps</h3>
                                    </div>
                                </a>
                                <!-- Category Item End -->
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Category End -->

        <!-- Offer Start -->
        <div class="section upstudy-offer-section section-padding-03">
            <div class="container">
                <!-- Offer Wrap Start -->
                <div class="offer-wrap">
                    <div class="row">
                        <div class="col-lg-6">
                            <!-- Single offer Start -->
                            <div class="single-offer">
                                <div class="offer-images">
                                    <img src="formation/assets/images/demande.png" alt="offer">
                                </div>
                                <div class="offer-content">
                                    <!-- <h4 class="sub-title">Pour Enterprise!</h4> -->
                                    <h3 class="title">Formation sur mésure</h3>
                                    <p>Voulez vous une formation pour votre équipe ?
                                    Contactez-nous</p>
                                    <a href="{{url('contact_page')}}" class="btn">Demander</a>
                                </div>
                            </div>
                            <!-- Single Offer End -->
                        </div>
                        <div class="col-lg-6">
                            <!-- Single offer Start -->
                            <div class="single-offer">
                                <div class="offer-images">
                                    <img src="formation/assets/images/question.png" alt="offer">
                                </div>
                                <div class="offer-content">
                                    <h3 class="title">Demande de renseignements</h3>
                                    <p>Avez-vous des questions ? Veuillez nous les soumettre</p>
                                    <a href="{{url('contact_page')}}" class="btn">Nous contacter</a>
                                </div>
                            </div>
                            <!-- Single Offer End -->
                        </div>
                    </div>
                </div>
                <!-- Offer Wrap End -->
            </div>
        </div>
        <!-- Offer End -->

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

                <!-- Course Header Start -->
                <div class="course-header">
                    <!-- Section Title Start -->
                    <div class="section-title">
                        <h2 class="title"><span>Nos</span> Formations</h2>
                    </div>
                    <!-- Section Title End -->

                    <div class="tab-menu">
                        <ul class="nav justify-content-center justify-content-lg-start">
                            
                            <li><button class="active" data-bs-toggle="tab" data-bs-target="#tab1">Formations métiers</button></li>
                            <li><button data-bs-toggle="tab" data-bs-target="#tab2">Matinales</button></li>
                            <li><button data-bs-toggle="tab" data-bs-target="#tab3">Team Building</button></li>
                            <li><button data-bs-toggle="tab" data-bs-target="#tab4">Bootscamps</button></li>
                        </ul>
                    </div>
                </div>
                <!-- Course Header End -->

                <!-- Courses Wrapper Start -->
                <div class="courses-wrapper">

                    <!-- Courses Tab Start -->
                    <div class="courses-tab">

                        <!-- Courses Tab Content Start -->
                        <div class="tab-content courses-tab-content">
                            <div class="tab-pane fade show active" id="tab1">

                                <div class="row">
                                    @foreach($formationmetier as $formationmetiers)
                                    <div class="col-lg-3 col-sm-6">
                                        <!-- Single Courses Start -->
                                        <div class="single-course" id="single-course{{$formationmetiers->IdFormation}}">
                                            <div class="courses-image">
                                                <a href="{{('detail_formationpage/'.$formationmetiers->IdFormation )}}"><img src="{{URL($formationmetiers->ImageFormation)}}" alt="Courses"></a>
                                            </div>
                                            <div class="courses-content">
                                                <div class="top-meta">
                                                    <div class="tag-time">
                                                        <a class="tag" href="#">Formations métiers</a>
                                                    </div>
                                                    <span class="price">
                                                    <!-- <span class="sale-price">Free</span> -->
                                                    <p class="time"><i class="far fa-clock"></i> 3h 30m</p>
                                                    </span>
                                                </div>
                                                <h3 class="title"><a href="{{('detail_formationpage/'.$formationmetiers->IdFormation )}}">{!!__($formationmetiers->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: 60%;"></div>
                                                        </div>
                                                        <span>(4.5)</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Single Courses End -->
                                    </div>
                                    <!-- course hover Start -->
                                    <!-- <div id="course-hover{{$formationmetiers->IdFormation}}" class="course-hover{{$formationmetiers->IdFormation}}" style="display: none;">
                                        <div class="course-hovern">
                                            <div class="courses-content">
                                                <h3 class="title"><a href="{{('detail_formationpage/'.$formationmetiers->IdFormation )}}">{!! $formationmetiers->LibelleFormation !!}</a></h3>
                                            </div>
                                            <div class="rating">
                                                <div class="rating-star">
                                                    <div class="rating-active" style="width: 60%;"></div>
                                                </div>
                                                <span>(4.5)</span>
                                            </div>