@extends('website.layouts.web-layouts')
@section('title', "FBCCI | $news->title")
@section('description', 'FBCCI | ' . $news->title)
@section('image', site_setting()->logo)
@section('url', url()->full())

@section('content')

    <div class="breadcrumb mb-0" style="background: url('{{ asset('images/sm-2.jpg') }}');">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="content">
                            <h3 class="text-white">News Details</h3>
                            <ul class="d-flex pt-2 list-unstyled">
                                <li><a href="{{ url('/') }}"> <i class="fas fa-home"></i> Home</a></li>
                                <li class="px-2">/</li>

                                <li>Media</li>
                                <li class="px-2">/</li>
                                <li class="px-2"><a
                                        href="{{ get_news_breadcrumb($news->category->id) }}">{{ $news->category->title }}</a>
                                </li>
                                <li class="px-2">/</li>
                                <li>{{ str_limit($news->title, 30) }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="news-details">
        <div class="container">
            <div class="row">
                {{-- <div class="col-lg-12">
                    <div class="heading">
                        <h2>News Details</h2>
                    </div>
                </div> --}}
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="title">
                        <h3>{{ global_title_format($news->title) ?? '' }}</h3>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-xl-8">
                    <div class="image-main">
                        <div class="news-details-main">
                            <div class="details-image">
                                <img src="{{ $news->image ?? '' }}" alt="" class="img-fluid w-100">
                            </div>
                        </div>
                    </div>
                    <div class="text-main">
                        <p>
                            {{-- <span class="big-letter">{{ ucfirst(get_first_letter($news->description)) }}</span> --}}
                            {!! $news->description !!}
                        </p>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="fixed-sidebar-news">
                        <div class="search">
                            <form action="" method="get">
                                <input value="{{ $keyword }}" name="keyword" type="text"
                                    placeholder="Enter your keyword...">
                                <button type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </form>
                        </div>
                        <div class="related-news pt-4">
                            <h3 class="rn mb-4">Recent News</h3>
                            @forelse ($recent as $item)
                                <div class="news-item-list">
                                    <div class="img">
                                        <img src="{{ $item->image }}" alt="news-list-image-1" class="img-fluid w-100">
                                    </div>
                                    <div class="text">
                                        <a href="#">
                                            <ul class="list-unstyled">
                                                <li>
                                                    <i class="fas fa-calendar-check pe-1"></i>
                                                    {{ global_date_format($item->date) }}
                                                </li>
                                            </ul>
                                            <h3 class="pt-1">{{ ucfirst($item->title) }}</h3>
                                        </a>
                                    </div>
                                </div>
                            @empty
                                <x-empty-component></x-empty-component>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection