@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="quarter-wrap">

                        <figure class="quarteimg">
                            <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                            <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                        </figure>
                        <div class="quratercntnt">
                            <h3>Lorem Ipsum is simply dummy</h3>
                            <div class="loc">
                                <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                            </div>
                            <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                            <ul class="quraterlist1">
                                <li>Ad Type: <span> Offered</span></li>
                                <li>Gender: <span>Male</span></li>
                            </ul>
                            <ul class="quraterlist2">
                                <li>Room <span class="span1"> 404 CHEATS</span></li>
                                <li>Avid From: <span>15 Aug 2025</span></li>
                            </ul>
                            <div class="graphicquarter">
                                <div class="garphicimage">
                                    <figure>
                                        <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                    </figure>
                                    <h3>Naya <span>Graphic Designer</span></h3>
                                </div>
                                <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="quarter-wrap">

                        <figure class="quarteimg">
                            <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                            <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                        </figure>
                        <div class="quratercntnt">
                            <h3>Lorem Ipsum is simply dummy</h3>
                            <div class="loc">
                                <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                            </div>
                            <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                            <ul class="quraterlist1">
                                <li>Ad Type: <span> Offered</span></li>
                                <li>Gender: <span>Male</span></li>
                            </ul>
                            <ul class="quraterlist2">
                                <li>Room <span class="span1"> 404 CHEATS</span></li>
                                <li>Avid From: <span>15 Aug 2025</span></li>
                            </ul>
                            <div class="graphicquarter">
                                <div class="garphicimage">
                                    <figure>
                                        <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                    </figure>
                                    <h3>Naya <span>Graphic Designer</span></h3>
                                </div>
                                <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="quarter-wrap">

                        <figure class="quarteimg">
                            <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                            <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                        </figure>
                        <div class="quratercntnt">
                            <h3>Lorem Ipsum is simply dummy</h3>
                            <div class="loc">
                                <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                            </div>
                            <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                            <ul class="quraterlist1">
                                <li>Ad Type: <span> Offered</span></li>
                                <li>Gender: <span>Male</span></li>
                            </ul>
                            <ul class="quraterlist2">
                                <li>Room <span class="span1"> 404 CHEATS</span></li>
                                <li>Avid From: <span>15 Aug 2025</span></li>
                            </ul>
                            <div class="graphicquarter">
                                <div class="garphicimage">
                                    <figure>
                                        <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                    </figure>
                                    <h3>Naya <span>Graphic Designer</span></h3>
                                </div>
                                <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="quarter-wrap">

                        <figure class="quarteimg">
                            <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                            <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                        </figure>
                        <div class="quratercntnt">
                            <h3>Lorem Ipsum is simply dummy</h3>
                            <div class="loc">
                                <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                            </div>
                            <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                            <ul class="quraterlist1">
                                <li>Ad Type: <span> Offered</span></li>
                                <li>Gender: <span>Male</span></li>
                            </ul>
                            <ul class="quraterlist2">
                                <li>Room <span class="span1"> 404 CHEATS</span></li>
                                <li>Avid From: <span>15 Aug 2025</span></li>
                            </ul>
                            <div class="graphicquarter">
                                <div class="garphicimage">
                                    <figure>
                                        <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                    </figure>
                                    <h3>Naya <span>Graphic Designer</span></h3>
                                </div>
                                <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="quarter-wrap">

                        <figure class="quarteimg">
                            <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                            <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                        </figure>
                        <div class="quratercntnt">
                            <h3>Lorem Ipsum is simply dummy</h3>
                            <div class="loc">
                                <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                            </div>
                            <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                            <ul class="quraterlist1">
                                <li>Ad Type: <span> Offered</span></li>
                                <li>Gender: <span>Male</span></li>
                            </ul>
                            <ul class="quraterlist2">
                                <li>Room <span class="span1"> 404 CHEATS</span></li>
                                <li>Avid From: <span>15 Aug 2025</span></li>
                            </ul>
                            <div class="graphicquarter">
                                <div class="garphicimage">
                                    <figure>
                                        <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                    </figure>
                                    <h3>Naya <span>Graphic Designer</span></h3>
                                </div>
                                <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="quarter-wrap">

                        <figure class="quarteimg">
                            <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                            <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                        </figure>
                        <div class="quratercntnt">
                            <h3>Lorem Ipsum is simply dummy</h3>
                            <div class="loc">
                                <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                            </div>
                            <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                            <ul class="quraterlist1">
                                <li>Ad Type: <span> Offered</span></li>
                                <li>Gender: <span>Male</span></li>
                            </ul>
                            <ul class="quraterlist2">
                                <li>Room <span class="span1"> 404 CHEATS</span></li>
                                <li>Avid From: <span>15 Aug 2025</span></li>
                            </ul>
                            <div class="graphicquarter">
                                <div class="garphicimage">
                                    <figure>
                                        <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                    </figure>
                                    <h3>Naya <span>Graphic Designer</span></h3>
                                </div>
                                <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>





@endsection