@extends('frontend.layouts.master')
@section('meta_title', 'Forums || ' . $setting->app_name)
@section('contents')
<!-- breadcrumb-area -->

<section class="breadcrumb__area breadcrumb__bg" data-background="{{ asset(Cache::get('setting')?->breadcrumb_image) }}">
    <div class="container">

        <div class="row" style="display: flex; align-items: center;">
            <div class="col-5">
                <div class="breadcrumb__content">
                    <h3 class="title">Forums</h3>
                    <nav class="breadcrumb">

                        <span property="itemListElement" typeof="ListItem">
                            <a href="{{ route('home') }}">Home</a>
                        </span>
                        <span class="breadcrumb-separator"><i class="fas fa-angle-right"></i></span>
                        <span property="itemListElement" typeof="ListItem">
                            <a href="javascript:;">Forums</a>
                        </span>
                    </nav>
                </div>
            </div>
            <div class="col-7 d-flex align-items-center justify-content-end">

                <div class="filter-search-form">
                    <form method="get" style="display: flex; gap: 10px; align-items: center;">


                        <div class="col-md-5"></div>
                        <div class="col-md-5">
                            <input type="text" placeholder="Search here" name="search" class="form-control" value="{{ request('search') }}">
                        </div>
                        <button type="submit" class="search-btn">Filter</button>
                    </form>
                </div>

            </div>
        </div>

    </div>
    <div class="breadcrumb__shape-wrap">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape01.svg') }}" alt="img" class="alltuchtopdown">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape02.svg') }}" alt="img" data-aos="fade-right"
            data-aos-delay="300">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape03.svg') }}" alt="img" data-aos="fade-up"
            data-aos-delay="400">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape04.svg') }}" alt="img" data-aos="fade-down-left"
            data-aos-delay="400">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape05.svg') }}" alt="img" data-aos="fade-left"
            data-aos-delay="400">
    </div>
</section>




<!-- breadcrumb-area-end -->

<!-- blog-area -->
<section class="blog-area section-py-120">
    <div class="container">
        <div class="row">

            <div class="col-xl-12 col-lg-12">





                <div class="list-group">
                    @forelse($models as $model)
                    <div class="list-group-item forum-item list-group-item-action">
                        <div class="row">
                            <div class="col-md-2 d-flex align-items-center">
                                <img src="{{ asset($model->image) }}" alt="Author Image" class=" rounded-2 img-fluid">
                            </div>
                            <div class="col-md-10">
                                <div class="d-flex justify-content-between">
                                    <h5 class="mb-1 topic-title">
                                        <a href="{{ route('forums.show', ['slug' => Str::slug($model->title),'id' => $model->id]) }}">
                                            {{ truncate($model->title, 50) }}
                                        </a>
                                    </h5>
                                    <!-- <small class="last-post-time">Last post: 1 hour ago</small> -->
                                </div>
                                <p class="mb-1">
                                    {{ truncate(strip_tags($model->description), 200) }}


                                </p>
                                <div class="d-flex justify-content-between mt-2 user-info">
                                    <span>
                                        <i class="flaticon-user-1"></i> <strong> {{ truncate(@$model->author->name, 14) }}</strong> |
                                        <i class="flaticon-calendar"></i><strong> {{ formatDate($model->created_at) }}</strong>
                                    </span>
                                    <span>Replies: {{ $model->comments_count}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <p class="text-center">{{ __('No Data Found') }}</p>
                    @endforelse

                </div>

                <nav class="pagination__wrap mt-25">
                    {{ $models->links() }}
                </nav>
            </div>
            <div class="col-xl-3 col-lg-4" style="display: none;">
                <aside class="blog-sidebar">
                    <div class="blog-widget widget_search">
                        <div class="sidebar-search-form">
                            <form action="{{ route('forums') }}" method="get">
                                <input type="text" placeholder="{{ __('Search here') }}" name="search" value="{{ request('search') }}">
                                <button type="submit"><i class="flaticon-search"></i></button>
                            </form>
                        </div>
                    </div>
                    <div class="blog-widget">
                        <h4 class="widget-title">{{ __('Categories') }}</h4>
                        <div class="shop-cat-list">
                            <ul class="list-wrap">
                                @forelse($categories as $category)
                                <li>
                                    <a href="{{ route('forums', ['category' => $category->slug]) }}">
                                        <i class="flaticon-angle-right"></i>{{ $category->title }}</a>
                                </li>
                                @empty
                                <li>
                                    {{ __('No Category Found') }}
                                </li>
                                @endforelse

                            </ul>
                        </div>
                    </div>

                </aside>
            </div>
        </div>
    </div>
</section>
<!-- blog-area-end -->
@endsection

@push('styles')
<style>
    .breadcrumb__bg {
        padding: 20px 0;
    }

    .courses__item {
        min-height: 388px;
        max-height: 388px;
    }

    .section-py-120 {
        padding: 60px 0;
    }

    .btn.btn-primary:hover {
        color: #ffffff;
    }

    .instructor__area {
        padding: 30px 0 50px;
    }

    .blog-sidebar {
        margin-left: 0px;
    }

    .blog__post-item.shine__animate-item {
        height: 385px;
    }


    .filter-search-form {
        width: 100%;
    }

    .search-btn {
        font-weight: 600;
        padding: 1px 20px;
        border-radius: 3px;
        background-color: #DC6135;
        color: white;
        border: 2px solid #DC6135;
        background-image: linear-gradient(to right, #DC6135, #DC6135);
    }

    .search-btn:hover {
        background-color: #FFF;
        color: #DC6135;
        background-image: linear-gradient(to right, #FFF, #FFF);
    }
</style>
<style>
    .forum-item {
        transition: background-color 0.2s ease;
    }

    .forum-item:hover {
        background-color: #f8f9fa;
    }

    .user-info {
        font-size: 0.9rem;
        color: #6c757d;
    }

    .topic-title a {
        text-decoration: none;
        color: #007bff;
    }

    .topic-title a:hover {
        text-decoration: underline;
    }

    .last-post-time {
        font-size: 0.85rem;
        color: #adb5bd;
    }

    .list-group-item-action [class*="flaticon-"] {
        display: inline;
    }
</style>
@endpush