@extends('app')


<!--**********************************
   lien css ou js -- header
***********************************-->

@section('header')
{{-- <link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/images/favicon.png')}}"> --}}
<link rel="stylesheet" href="{{asset('assets/vendor/chartist/css/chartist.min.css')}}">
<link href="{{asset('assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css')}}" rel="stylesheet">
<link href="{{asset('assets/css/style.css')}}" rel="stylesheet">
@endsection

<!--**********************************
   fin lien css ou js -- header
***********************************-->




<!--**********************************
    body
***********************************-->
@section('content')
    
<div class="container-fluid">
   
    <div class="project-nav">
        <div class="card-action card-tabs  mr-auto">
            <ul class="nav nav-tabs style-2">
                <li class="nav-item">
                    <a href="#navpills-1" class="nav-link active" data-toggle="tab" aria-expanded="false">TOUT <span class="badge badge-pill shadow-primary badge-primary">3</span></a>
                </li>
                <li class="nav-item">
                    <a href="#navpills-2" class="nav-link" data-toggle="tab" aria-expanded="false">PROGRAMMER <span class="badge badge-pill badge-info shadow-info">1</span></a>
                </li>
                <li class="nav-item">
                    <a href="#navpills-3" class="nav-link" data-toggle="tab" aria-expanded="true">EN COURS <span class="badge badge-pill badge-warning shadow-warning">1</span></a>
                </li>
                <li class="nav-item">
                    <a href="#navpills-4" class="nav-link" data-toggle="tab" aria-expanded="true">TERMINER <span class="badge badge-pill badge-success shadow-success">1</span></a>
                </li>
            </ul>
        </div>
        {{-- <a href="javascript:void(0);" class="btn btn-primary">+New Project</a> --}}
    </div>
    <div class="tab-content project-list-group" id="myTabContent">	
        <div class="tab-pane fade active show" id="navpills-1">
            <div class="card">
                <div class="project-info">
                    <div class="col-xl-3 my-2 col-lg-4 col-sm-6">
                        <p class="text-primary mb-1">#SF-Matricule</p>
                        <h5 class="title font-w600 mb-2"><a href="post-details.html" class="text-black">Titre de la formation</a></h5>
                        <div class="text-dark"><i class="fa fa-calendar-o mr-3" aria-hidden="true"></i>Date de début : 20-02-2024</div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic1.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Employer</span>
                                <h5 class="mb-0 pt-1 font-w50 text-black">Alex Noer</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic2.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Formateur</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Yoast Esec</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="power-ic">
                                <i class="fa fa-bolt" aria-hidden="true"></i>
                            </div>
                            <div class="ml-2">
                                <span>Durée : 20h</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Date de fin : 21-02-2024</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex project-status align-items-center">
                            <span class="btn bgl-warning text-warning status-btn mr-3">EN COURS</span>
                            <div class="dropdown">
                                <a href="javascript:void(0);" data-toggle="dropdown" aria-expanded="false">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="project-info">
                    <div class="col-xl-3 my-2 col-lg-4 col-sm-6">
                        <p class="text-primary mb-1">#SF-Matricule</p>
                        <h5 class="title font-w600 mb-2"><a href="post-details.html" class="text-black">Titre de la formation</a></h5>
                        <div class="text-dark"><i class="fa fa-calendar-o mr-3" aria-hidden="true"></i>Date de début : 25-02-2024</div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic4.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Employer</span>
                                <h5 class="mb-0 pt-1 font-w50 text-black">Kevin Sigh</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic3.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Formateur</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Kevin Sigh</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="power-ic">
                                <i class="fa fa-bolt" aria-hidden="true"></i>
                            </div>
                            <div class="ml-2">
                                <span>Durée : 20h</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Date de fin : 21-02-2024</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex project-status align-items-center">
                            <span class="btn bgl-info text-info status-btn mr-3">PROGRAMMER</span>
                            <div class="dropdown">
                                <a href="javascript:void(0);" data-toggle="dropdown" aria-expanded="false">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="card">
                <div class="project-info">
                    <div class="col-xl-3 my-2 col-lg-4 col-sm-6">
                        <p class="text-primary mb-1">#SF-Matricule</p>
                        <h5 class="title font-w600 mb-2"><a href="post-details.html" class="text-black">Titre de la formation</a></h5>
                        <div class="text-dark"><i class="fa fa-calendar-o mr-3" aria-hidden="true"></i>Date de début : 25-02-2024</div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic4.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Employer</span>
                                <h5 class="mb-0 pt-1 font-w50 text-black">Kevin Sigh</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic3.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Formateur</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Kevin Sigh</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="power-ic">
                                <i class="fa fa-bolt" aria-hidden="true"></i>
                            </div>
                            <div class="ml-2">
                                <span>Durée : 20h</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Date de fin : 21-02-2024</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex project-status align-items-center">
                            <span class="btn bgl-success text-success status-btn mr-3">TERMINER</span>
                            <div class="dropdown">
                                <a href="javascript:void(0);" data-toggle="dropdown" aria-expanded="false">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <nav class="mt-5">
                <ul class="pagination pagination-gutter pagination-primary no-bg">
                    <li class="page-item page-indicator">
                        <a class="page-link" href="javascript:void(0)">
                            <i class="la la-angle-left"></i></a>
                    </li>
                    <li class="page-item "><a class="page-link" href="javascript:void(0)">1</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="javascript:void(0)">2</a></li>
                    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                    <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
                    <li class="page-item page-indicator">
                        <a class="page-link" href="javascript:void(0)">
                            <i class="la la-angle-right"></i></a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="tab-pane fade" id="navpills-2">
            <div class="card">
                <div class="project-info">
                    <div class="col-xl-3 my-2 col-lg-4 col-sm-6">
                        <p class="text-primary mb-1">#SF-Matricule</p>
                        <h5 class="title font-w600 mb-2"><a href="post-details.html" class="text-black">Titre de la formation</a></h5>
                        <div class="text-dark"><i class="fa fa-calendar-o mr-3" aria-hidden="true"></i>Date de début : 25-02-2024</div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic4.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Employer</span>
                                <h5 class="mb-0 pt-1 font-w50 text-black">Kevin Sigh</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic3.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Formateur</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Kevin Sigh</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="power-ic">
                                <i class="fa fa-bolt" aria-hidden="true"></i>
                            </div>
                            <div class="ml-2">
                                <span>Durée : 20h</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Date de fin : 21-02-2024</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex project-status align-items-center">
                            <span class="btn bgl-info text-info status-btn mr-3">PROGRAMMER</span>
                            <div class="dropdown">
                                <a href="javascript:void(0);" data-toggle="dropdown" aria-expanded="false">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="navpills-3">
            <div class="card">
                <div class="project-info">
                    <div class="col-xl-3 my-2 col-lg-4 col-sm-6">
                        <p class="text-primary mb-1">#SF-Matricule</p>
                        <h5 class="title font-w600 mb-2"><a href="post-details.html" class="text-black">Titre de la formation</a></h5>
                        <div class="text-dark"><i class="fa fa-calendar-o mr-3" aria-hidden="true"></i>Date de début : 20-02-2024</div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic1.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Employer</span>
                                <h5 class="mb-0 pt-1 font-w50 text-black">Alex Noer</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic2.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Formateur</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Yoast Esec</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="power-ic">
                                <i class="fa fa-bolt" aria-hidden="true"></i>
                            </div>
                            <div class="ml-2">
                                <span>Durée : 20h</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Date de fin : 21-02-2024</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex project-status align-items-center">
                            <span class="btn bgl-warning text-warning status-btn mr-3">EN COURS</span>
                            <div class="dropdown">
                                <a href="javascript:void(0);" data-toggle="dropdown" aria-expanded="false">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="navpills-4">
            <div class="card">
                <div class="project-info">
                    <div class="col-xl-3 my-2 col-lg-4 col-sm-6">
                        <p class="text-primary mb-1">#SF-Matricule</p>
                        <h5 class="title font-w600 mb-2"><a href="post-details.html" class="text-black">Titre de la formation</a></h5>
                        <div class="text-dark"><i class="fa fa-calendar-o mr-3" aria-hidden="true"></i>Date de début : 25-02-2024</div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic4.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Employer</span>
                                <h5 class="mb-0 pt-1 font-w50 text-black">Kevin Sigh</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-4 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="project-media">
                                <img src="{{asset('assets/images/users/pic3.jpg')}}" alt="">
                            </div>
                            <div class="ml-2">
                                <span>Formateur</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Kevin Sigh</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex align-items-center">
                            <div class="power-ic">
                                <i class="fa fa-bolt" aria-hidden="true"></i>
                            </div>
                            <div class="ml-2">
                                <span>Durée : 20h</span>
                                <h5 class="mb-0 pt-1 font-w500 text-black">Date de fin : 21-02-2024</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 my-2 col-lg-6 col-sm-6">
                        <div class="d-flex project-status align-items-center">
                            <span class="btn bgl-success text-success status-btn mr-3">TERMINER</span>
                            <div class="dropdown">
                                <a href="javascript:void(0);" data-toggle="dropdown" aria-expanded="false">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<!--**********************************
    fin body
***********************************-->






<!--**********************************
    lien js -- footer
***********************************-->
@section('footer')
     <!-- Required vendors -->
     <script src="{{asset('assets/vendor/global/global.min.js')}}"></script>
     <script src="{{asset('assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js')}}"></script>
     <script src="{{asset('assets/vendor/chart.js/Chart.bundle.min.js')}}"></script>
     
  
     <script src="{{asset('assets/js/custom.min.js')}}"></script>
     <script src="{{asset('assets/js/deznav-init.js')}}"></script>
@endsection

<!--**********************************
    fin lien  -- footer
***********************************-->