@extends('layouts.frontend')
@section('title_page', $news->NewsTitle . ' - Rusizi Veterinary')

@section('content')

<!--Start breadcrumb area-->
<section class="breadcrumb-area style2" style="background-image: url({{asset('images/resources/breadcrumb-bg-2.jpg')}});">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content-box clearfix">
                    <div class="title-s2 text-center">
                        <span>News Details</span>
                        <h1>{{ $news->NewsTitle }}</h1>
                    </div>
                    <div class="breadcrumb-menu float-left">
                        <ul class="clearfix">
                            <li><a href="/">Home</a></li>
                            <li><a href="{{ route('news.index') }}">News</a></li>
                            <li class="active">Details</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start News Detail Area-->
<section class="news-detail-area">
    <div class="container">
        <div class="row">
            <div class="col-xl-8 col-lg-7">
                <div class="news-detail-content">
                    <!-- News Header -->
                    <div class="news-header">
                        <div class="category-badge">{{ $news->CategoryType }}</div>
                        <h1 class="news-title">{{ $news->NewsTitle }}</h1>
                        <div class="news-meta">
                            <div class="meta-item">
                                <i class="fas fa-user"></i>
                                <span>By:  Rusizi Veterinary </span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-calendar"></i>
                                {{-- <span>{{ $news->Date->format('F d, Y') }}</span> --}}
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-clock"></i>
                                {{-- <span>{{ $news->created_at->format('h:i A') }}</span> --}}
                            </div>
                        </div>
                    </div>

                    <!-- News Image -->
                    @if($news->Image)
                    <div class="news-image">
                        <img src="{{asset('public/news/'. $news->Image)}}" alt="{{ $news->NewsTitle }}">
                    </div>
                    @endif

                    <!-- News Content -->
                    <div class="news-body">
                        <div class="news-text">
                            {!! nl2br(e($news->NewsDetails)) !!}
                        </div>
                    </div>

                    <!-- News Actions -->
                    <div class="news-actions">
                        <div class="action-buttons">
                            <a href="{{ route('news.index') }}" class="back-btn">
                                <i class="fas fa-arrow-left"></i>
                                Back to News
                            </a>
                            @if(Auth::id() == $news->user_id || Auth::user()->isAdmin())
                            <div class="edit-actions">
                                <a href="{{ route('news.edit', $news->id) }}" class="edit-btn">
                                    <i class="fas fa-edit"></i>
                                    Edit
                                </a>
                                <form action="{{ route('news.destroy', $news->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete this news?')">
                                        <i class="fas fa-trash"></i>
                                        Delete
                                    </button>
                                </form>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-xl-4 col-lg-5">
                <div class="news-sidebar">
                    <!-- Recent News -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">
                            <i class="fas fa-history"></i>
                            Recent News
                        </h3>
                        <div class="recent-news">
                            @foreach($recentNews as $recent)
                            <div class="recent-item">
                                @if($recent->Image)
                                <div class="recent-image">
                                    <img src="{{ $recent->image_url }}" alt="{{ $recent->NewsTitle }}">
                                </div>
                                @endif
                                <div class="recent-content">
                                    <h4>
                                        <a href="{{ route('news.show', $recent->id) }}">{{ Str::limit($recent->NewsTitle, 50) }}</a>
                                    </h4>
                                    <span class="recent-date">{{ $recent->Date->format('M d, Y') }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Categories -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">
                            <i class="fas fa-folder"></i>
                            Categories
                        </h3>
                        <div class="category-list">
                            @foreach($categories as $category => $count)
                            <a href="{{ route('news.index', ['category' => $category]) }}" class="category-item">
                                <span class="category-name">{{ $category }}</span>
                                <span class="category-count">{{ $count }}</span>
                            </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End News Detail Area-->

<style>
    .news-detail-area {
        padding: 80px 0;
        background: #f8fafc;
    }

    .news-detail-content {
        background: white;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
    }

    .news-header {
        margin-bottom: 30px;
        text-align: center;
    }

    .category-badge {
        display: inline-block;
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .news-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #2c3e50;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .news-meta {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #7f8c8d;
        font-size: 0.9rem;
    }

    .meta-item i {
        color: #27ae60;
    }

    .news-image {
        margin-bottom: 30px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .news-image img {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }

    .news-body {
        margin-bottom: 40px;
    }

    .news-text {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #2c3e50;
    }

    .news-text p {
        margin-bottom: 20px;
    }

    .news-actions {
        border-top: 1px solid #ecf0f1;
        padding-top: 30px;
    }

    .action-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .back-btn {
        background: #34495e;
        color: white;
        padding: 12px 25px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }

    .back-btn:hover {
        background: #2c3e50;
        color: white;
        text-decoration: none;
        transform: translateX(-5px);
    }

    .edit-actions {
        display: flex;
        gap: 10px;
    }

    .edit-btn, .delete-btn {
        padding: 12px 20px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .edit-btn {
        background: #3498db;
        color: white;
    }

    .delete-btn {
        background: #e74c3c;
        color: white;
    }

    .edit-btn:hover {
        background: #2980b9;
        color: white;
        text-decoration: none;
    }

    .delete-btn:hover {
        background: #c0392b;
        color: white;
    }

    /* Sidebar Styles */
    .news-sidebar {
        position: sticky;
        top: 100px;
    }

    .sidebar-widget {
        background: white;
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
    }

    .widget-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .widget-title i {
        color: #27ae60;
    }

    .recent-item {
        display: flex;
        gap: 15px;
        padding: 15px 0;
        border-bottom: 1px solid #ecf0f1;
    }

    .recent-item:last-child {
        border-bottom: none;
    }

    .recent-image {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .recent-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .recent-content h4 {
        margin: 0 0 5px 0;
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .recent-content h4 a {
        color: #2c3e50;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .recent-content h4 a:hover {
        color: #27ae60;
    }

    .recent-date {
        font-size: 0.8rem;
        color: #7f8c8d;
    }

    .category-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .category-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        background: #f8fafc;
        border-radius: 8px;
        text-decoration: none;
        color: #2c3e50;
        transition: all 0.3s ease;
    }

    .category-item:hover {
        background: #27ae60;
        color: white;
        text-decoration: none;
        transform: translateX(5px);
    }

    .category-count {
        background: white;
        color: #27ae60;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .category-item:hover .category-count {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .news-detail-content {
            padding: 25px;
        }

        .news-title {
            font-size: 1.8rem;
        }

        .news-meta {
            flex-direction: column;
            gap: 10px;
        }

        .news-image img {
            height: 250px;
        }

        .action-buttons {
            flex-direction: column;
            align-items: stretch;
        }

        .edit-actions {
            justify-content: center;
        }
    }
</style>

@endsection