@extends('layouts.apps')

@section('content')
    <!-- PAGE -->
    <div class="page">
        <div class="page-main">

            <!-- app-Header -->
            @include('layouts.navbarhaut')
            <!-- /app-Header -->

            <!--APP-SIDEBAR-->
            @include('layouts.navbargauche')
            <!--/APP-SIDEBAR-->

            <!--app-content open-->
            <div class="app-content main-content mt-0">
                <div class="side-app">

                    <!-- CONTAINER -->
                    <div class="main-container container-fluid">


                        <!-- PAGE-HEADER -->
                        <div class="page-header">
                            <div>
                                <h1 class="page-title"> Parlons du succes </h1>
                            </div>
                            <div class="ms-auto pageheader-btn">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javascript:void(0);">Parlons du Success</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Liste Articles succès </li>
                                </ol>
                            </div>
                        </div>
                        <!-- PAGE-HEADER END -->








                        <!-- row -->
                        <div class="row">
                            <div class="col-xl-8 col-lg-7 col-md-12">
                                <div class="card overflow-hidden">



                                    @if (!empty($SuccesAtricles))
                                        @foreach ($SuccesAtricles as $SuccesAtricle)
                                            <div class="embed-responsive embed-responsive-16by9">
                                                <iframe width="560" height="315" src="{{ $SuccesAtricle->lien }}"
                                                    frameborder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen></iframe>
                                                {{-- <iframe class="embed-responsive-item"
                                            src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> --}}
                                            </div>

                                            {{-- <a href="blog-details.html" class="card custom-card background-image-blog img1 mb-0">
                                                <span class="badge rounded-pill bg-primary-gradient blog-label label1">nature</span>
                                            </a> --}}
                                            <div class="card-body">
                                                <a href="blog.html#"
                                                    class="text-dark blog-title">{{ $SuccesAtricle->titre }}</a>
                                                <p class="mb-0 text-muted mt-4">{{ $SuccesAtricle->message }}</p>
                                                <a href="blog-details.html" class="btn btn-outline-primary mt-2">Read
                                                    More</a>
                                            </div>
                                            <div class="card-footer">
                                                <div class="d-sm-flex align-items-center">
                                                    {{-- <div class="avatar-list indicators">
                                                        <a href="javascript:void(0)"
                                                            class="avatar avatar-md rounded-circle cover-image"
                                                            data-bs-image-src="https://laravel8.spruko.com/noa/assets/images/users/4.jpg"></a>
                                                    </div> --}}
                                                    <h6 class="mb-0 text-muted ms-sm-2 mt-sm-0 mt-2">
                                                        Par {{ $SuccesAtricle->User->name }}</h6>
                                                    <div class="d-sm-flex ms-sm-auto">
                                                        <a href="blog.html#" class="d-flex me-3"><span
                                                                class="fe fe-calendar text-muted me-2 text-17"></span>
                                                            <div class="mt-0 mt-0   text-muted">
                                                                {{ $SuccesAtricle->created_at }}</div>
                                                        </a>
                                                        {{-- <a class="me-0 d-flex" href="blog.html#"><span
                                                                class="fe fe-message-square text-muted me-2 text-17"></span>
                                                            <div class="mt-0 mt-0   text-muted">11 Comments</div>
                                                        </a> --}}
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>




                            <div class="col-xl-4 col-lg-5 col-md-12">
                                <div class="card overflow-hidden">
                                    <div class="">
                                        <div class="card-header border-bottom d-block">
                                            <div class="tabs-menu">
                                                <!-- Tabs -->
                                                <ul class="nav panel-tabs">
                                                    <li><a href="blog.html#trending" class="my-1 active me-1 text-default"
                                                            data-bs-toggle="tab">Trending</a></li>
                                                    <li><a href="blog.html#popular" data-bs-toggle="tab"
                                                            class="my-1 me-1 text-default">Popular</a></li>
                                                    <li><a href="blog.html#recent" data-bs-toggle="tab"
                                                            class="my-1 me-1 text-default">Recent</a></li>
                                                    <li><a href="blog.html#editorpicks" data-bs-toggle="tab"
                                                            class="my-1 text-default">Editor Picks</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        {{-- <div class="card-body">
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="trending">
                                                    <div class="item-list">
                                                        <ul class="list-group mb-0">
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm1.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Tourism</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Explore
                                                                        tourism by visitinig places.</a>
                                                                    <small class="d-block text-muted">2 day ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm2.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Beautician</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Beautification
                                                                        courses are available.</a>
                                                                    <small class="d-block text-muted">2 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm3.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Music</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Music
                                                                        in a peaceful way </a>
                                                                    <small class="d-block text-muted">1 day ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm4.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Literature</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">English
                                                                        and spanish classes in Your way</a>
                                                                    <small class="d-block text-muted">1 week ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm5.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Health</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Health
                                                                        care and fitness awareness</a>
                                                                    <small class="d-block text-muted">22 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm2.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Health</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Health
                                                                        care and fitness awareness</a>
                                                                    <small class="d-block text-muted">22 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pt-0 pb-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm3.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Music</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Music
                                                                        in a peaceful way </a>
                                                                    <small class="d-block text-muted">1 day ago</small>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="tab-pane" id="popular">
                                                    <div class="item-list">
                                                        <ul class="list-group mb-0">
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog1.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Tourism</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Explore
                                                                        tourism by visitinig places.</a>
                                                                    <small class="d-block text-muted">2 day ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm2.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Beautician</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Beautification
                                                                        courses are available.</a>
                                                                    <small class="d-block text-muted">2 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm3.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Music</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Music
                                                                        in a peaceful way </a>
                                                                    <small class="d-block text-muted">1 day ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm4.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Literature</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">English
                                                                        and spanish classes in Your way</a>
                                                                    <small class="d-block text-muted">1 week ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm5.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Health</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Health
                                                                        care and fitness awareness</a>
                                                                    <small class="d-block text-muted">22 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm2.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Health</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Health
                                                                        care and fitness awareness</a>
                                                                    <small class="d-block text-muted">22 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pt-0 pb-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm3.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Music</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Music
                                                                        in a peaceful way </a>
                                                                    <small class="d-block text-muted">1 day ago</small>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="tab-pane" id="recent">
                                                    <div class="item-list">
                                                        <ul class="list-group mb-0">
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog1.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Tourism</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Explore
                                                                        tourism by visitinig places.</a>
                                                                    <small class="d-block text-muted">2 day ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm2.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Beautician</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Beautification
                                                                        courses are available.</a>
                                                                    <small class="d-block text-muted">2 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm3.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Music</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Music
                                                                        in a peaceful way </a>
                                                                    <small class="d-block text-muted">1 day ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm4.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Literature</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">English
                                                                        and spanish classes in Your way</a>
                                                                    <small class="d-block text-muted">1 week ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm5.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Health</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Health
                                                                        care and fitness awareness</a>
                                                                    <small class="d-block text-muted">22 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm2.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Health</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Health
                                                                        care and fitness awareness</a>
                                                                    <small class="d-block text-muted">22 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pt-0 pb-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm3.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Music</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Music
                                                                        in a peaceful way </a>
                                                                    <small class="d-block text-muted">1 day ago</small>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="tab-pane" id="editorpicks">
                                                    <div class="item-list">
                                                        <ul class="list-group mb-0">
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog1.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Tourism</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Explore
                                                                        tourism by visitinig places.</a>
                                                                    <small class="d-block text-muted">2 day ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm2.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Beautician</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Beautification
                                                                        courses are available.</a>
                                                                    <small class="d-block text-muted">2 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm3.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Music</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Music
                                                                        in a peaceful way </a>
                                                                    <small class="d-block text-muted">1 day ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm4.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Literature</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">English
                                                                        and spanish classes in Your way</a>
                                                                    <small class="d-block text-muted">1 week ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm5.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Health</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Health
                                                                        care and fitness awareness</a>
                                                                    <small class="d-block text-muted">22 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pb-4 pt-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm2.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Health</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Health
                                                                        care and fitness awareness</a>
                                                                    <small class="d-block text-muted">22 hrs ago</small>
                                                                </div>
                                                            </li>
                                                            <li
                                                                class="list-group-item d-flex pt-0 pb-0 px-0 border-bottom-0">
                                                                <img src="assets/images/photos/blog-sm3.jpg"
                                                                    class="avatar br-5 avatar-lg me-3 my-auto"
                                                                    alt="avatar-img">
                                                                <div>
                                                                    <span class="d-block text-muted">Music</span>
                                                                    <a href="blog.html#"
                                                                        class="text-dark text-16 font-weight-semibold">Music
                                                                        in a peaceful way </a>
                                                                    <small class="d-block text-muted">1 day ago</small>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /row -->


                    </div>
                </div>
            </div>
            <!-- CONTAINER CLOSED -->
        </div>





        <!-- End Page-content -->
        @include('layouts.footer')

    </div>
    <!-- page -->

    <!-- BACK-TO-TOP -->
    <a href="#top" id="back-to-top"><i class="fa fa-long-arrow-up"></i></a>


    @include('layouts.javascripts')
@endsection