@extends('layout.app')
@section('content')
    <style>
        .top-slider-banner {
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(90deg, #32CD32 0%, #9BE7FF 50%, #32CD32 100%);
            color: #fff;
            overflow: hidden;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            border-radius: 10px;
        }

        .slider-content {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            animation: slide-left 80s linear infinite;
            cursor: pointer;
        }

        @keyframes slide-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }

    </style>
    <!-- Floating Advertisement Banner -->
    <div class="top-slider-banner">
        <div class="slider-content">
            📢 Want More Customers? Promote Your Business Here — Advertise Now & Reach Thousands! 🚀 &nbsp;&nbsp;&nbsp;&nbsp;
            📢 $50/for 2 weeks; $75/for month. There is a 20% discount for small businesses with < 20 employees. 🚀
            &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>
    <div class="d-flex justify-content-center justify-content-md-end gap-3 mt-3" style="margin-right: 282px">
        <!-- Grid Listing Button -->
        <a href="{{ route('training.tabular.listing') }}"
           class="btn {{ request()->routeIs('training.tabular.listing') ? 'btn-outline-primary' : 'btn-outline-secondary' }}">
            <i class="fa-solid fa-table-list"></i>
        </a>


        <!-- Quarter Listing Button -->
        <a href="{{route('training.quarter.listing')}}" class="btn {{ request()->routeIs('training.quarter.listing') ? 'btn-outline-primary' : 'btn-outline-secondary' }}">
            <i class="fas fa-th-large"></i>
        </a>
    </div>

    <section class="tabular-section" style="padding: 2rem!important;">
        <div class="container">

            <div class="row align-items-center">
                <div class="col-md-4 col-md-3 mb-3">
                    <!-- Action Buttons -->
                    <div class="suggestion-card p-3 shadow-sm mb-4 rounded bg-white">
                        <div class="row g-2">
                            <div class="col-6">
                                @if (Auth::check() && Auth::user()->hasRole('user'))
                                    <a class="btn btn-primary w-100" href="{{ route('training.page.create.list') }}">
                                        <i class="fas fa-edit me-2"></i> Training
                                    </a>
                                @else
                                    <a class="btn btn-primary w-100" href="{{ route('guest.user') }}">
                                        <i class="fas fa-edit me-2"></i> Training
                                    </a>
                                @endif
                            </div>
                            <div class="col-6">
                                <a class="btn btn-warning w-100" href="{{ route('addInfo') }}">
                                    <i class="fas fa-plus-circle me-2"></i> Add Info
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Links -->
                    <div class="help-card p-3 shadow-sm rounded bg-light">
                        <ul class="list-unstyled mb-3">
                            <li class="d-flex justify-content-between">
                                <a href="{{ route('newsPage') }}">News</a>
                                <a href="#">About</a>
                                <a href="#">Privacy Policy</a>
                            </li>
                            <li class="d-flex justify-content-between">
                                <a href="{{ route('contact') }}">Contact</a>
                                <a href="#">Cookies Policy</a>
                            </li>
                            <li class="d-flex justify-content-between">
                                <a href="#">Career</a>
                                <a href="#">Language</a>
                                <a href="#">Copyright Policy</a>
                            </li>
                        </ul>
                        <div class="copyrght-chat text-center border-top pt-2">
                            <a href="#" class="fw-bold text-dark">404 Chats</a>
                            <div class="small text-muted">
                                <i class="fas fa-copyright"></i> Copyright 2025
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-md-4">

                    <div class="tabularwrap">
                        <h2>Lorem Ipsum is simply dummy</h2>
                        <ul class="tabliast1">
                            <li class="green1"><span><i class="fas fa-location-circle"></i></span><a
                                    href="">21 Ann St,United States</a></li>
                            <li><span><i class="far fa-clock"></i></span>3 min ago</li>
                            <li><span><i class="fal fa-user"></i></span> Naya</li>
                        </ul>
                        <ul class="tablist2">
                            <li><a href="">$256/Month</a></li>
                            <li><a href="">Graphic Designer</a></li>
                            <li><a href="">Male/female</a></li>
                            <li><a href="">Available Form: 15 Aug 2025</a></li>
                        </ul>
                        <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="tabularwrap">
                        <h2>Lorem Ipsum is simply dummy</h2>
                        <ul class="tabliast1">
                            <li class="green1"><span><i class="fas fa-location-circle"></i></span><a
                                    href="">21 Ann St,United States</a></li>
                            <li><span><i class="far fa-clock"></i></span>3 min ago</li>
                            <li><span><i class="fal fa-user"></i></span> Naya</li>
                        </ul>
                        <ul class="tablist2">
                            <li><a href="">$256/Month</a></li>
                            <li><a href="">Graphic Designer</a></li>
                            <li><a href="">Male/female</a></li>
                            <li><a href="">Available : 15 Aug </a></li>
                        </ul>
                        <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="tabularwrap">
                        <h2>Lorem Ipsum is simply dummy</h2>
                        <ul class="tabliast1">
                            <li class="green1"><span><i class="fas fa-location-circle"></i></span><a
                                    href="">21 Ann St,United States</a></li>
                            <li><span><i class="far fa-clock"></i></span>3 min ago</li>
                            <li><span><i class="fal fa-user"></i></span> Naya</li>
                        </ul>
                        <ul class="tablist2">
                            <li><a href="">$256/Month</a></li>
                            <li><a href="">Graphic Designer</a></li>
                            <li><a href="">Male/female</a></li>
                            <li><a href="">Available : 15 Aug </a></li>
                        </ul>
                        <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="tabularwrap">
                        <h2>Lorem Ipsum is simply dummy</h2>
                        <ul class="tabliast1">
                            <li class="green1"><span><i class="fas fa-location-circle"></i></span><a
                                    href="">21 Ann St,United States</a></li>
                            <li><span><i class="far fa-clock"></i></span>3 min ago</li>
                            <li><span><i class="fal fa-user"></i></span> Naya</li>
                        </ul>
                        <ul class="tablist2">
                            <li><a href="">$256/Month</a></li>
                            <li><a href="">Graphic Designer</a></li>
                            <li><a href="">Male/female</a></li>
                            <li><a href="">Available : 15 Aug </a></li>
                        </ul>
                        <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="tabularwrap">
                        <h2>Lorem Ipsum is simply dummy</h2>
                        <ul class="tabliast1">
                            <li class="green1"><span><i class="fas fa-location-circle"></i></span><a
                                    href="">21 Ann St,United States</a></li>
                            <li><span><i class="far fa-clock"></i></span>3 min ago</li>
                            <li><span><i class="fal fa-user"></i></span> Naya</li>
                        </ul>
                        <ul class="tablist2">
                            <li><a href="">$256/Month</a></li>
                            <li><a href="">Graphic Designer</a></li>
                            <li><a href="">Male/female</a></li>
                            <li><a href="">Available Form: 15 Aug 2025</a></li>
                        </ul>
                        <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="tabularwrap">
                        <h2>Lorem Ipsum is simply dummy</h2>
                        <ul class="tabliast1">
                            <li class="green1"><span><i class="fas fa-location-circle"></i></span><a
                                    href="">21 Ann St,United States</a></li>
                            <li><span><i class="far fa-clock"></i></span>3 min ago</li>
                            <li><span><i class="fal fa-user"></i></span> Naya</li>
                        </ul>
                        <ul class="tablist2">
                            <li><a href="">$256/Month</a></li>
                            <li><a href="">Graphic Designer</a></li>
                            <li><a href="">Male/female</a></li>
                            <li><a href="">Available : 15 Aug </a></li>
                        </ul>
                        <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                    </div>
                </div>
            </div>
        </div>
    </section>





    {{--    <section class="reviewsec">--}}
    {{--        <div class="container">--}}
    {{--            <h2 class="mainHead text-center">Testimonials</h2>--}}
    {{--            <div class="row">--}}
    {{--                <div class="swiper reviewSlider">--}}
    {{--                    <div class="swiper-wrapper">--}}
    {{--                        <div class="swiper-slide">--}}
    {{--                            <div class="tetsiwrap">--}}
    {{--                                <h3>IT Friends</h3>--}}
    {{--                                <p>“Lorem Ipsum has been the industry's standard dummy text ever since the 1500.”</p>--}}
    {{--                                <h4>James Brower,Lead Designer</h4>--}}
    {{--                                <div class="reviewwrap">--}}
    {{--                                    <h4>4.5 Excellent</h4>--}}
    {{--                                    <ul class="star">--}}
    {{--                                        <li><a href=""><i class="fas fa-star"></i></a></li>--}}
    {{--                                        <li><a href=""><i class="fas fa-star"></i></a></li>--}}
    {{--                                        <li><a href=""><i class="fas fa-star"></i></a></li>--}}
    {{--                                        <li><a href=""><i class="fas fa-star"></i></a></li>--}}
    {{--                                    </ul>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                        <div class="swiper-slide">--}}
    {{--                            <div class="tetsiwrap">--}}
    {{--                                <h3>IT Friends</h3>--}}
    {{--                                <p>“Lorem Ipsum has been the industry's standard dummy text ever since the 1500.”</p>--}}
    {{--                                <h4>James Brower,Lead Designer</h4>--}}
    {{--                                <div class="reviewwrap">--}}
    {{--                                    <h4>4.5 Excellent</h4>--}}
    {{--                                    <ul class="star">--}}
    {{--                                        <li><a href=""><i class="fas fa-star"></i></a></li>--}}
    {{--                                        <li><a href=""><i class="fas fa-star"></i></a></li>--}}
    {{--                                        <li><a href=""><i class="fas fa-star"></i></a></li>--}}
    {{--                                        <li><a href=""><i class="fas fa-star"></i></a></li>--}}
    {{--                                    </ul>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}

    {{--                    </div>--}}
    {{--                </div>--}}
    {{--            </div>--}}
    {{--            <!-- <div class="swiper-button-next"></div>--}}
    {{--            <div class="swiper-button-prev"></div> -->--}}
    {{--        </div>--}}
    {{--    </section>--}}

@endsection