@extends('layouts.frontend')
@section('title_page', 'News Report - Rusizi Veterinary')

@section('content')

{{-- Breadcrumb Section --}}
<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>My Account</span>
                        <h1>Welcome <span class="text-success">{{ Auth::user()->name }}</span></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">Report News</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Main Content Section --}}
<section class="single-service-area">
    <div class="container">
        <div class="row">
            @include('frontend.partials.sidebar')

            <div class="col-xl-8 col-lg-7 col-md-12 col-sm-12">
                <section class="login-register-area">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-xl-12">
                                
                                {{-- Page Header --}}
                                <div class="news-header">
                                    <div class="header-content">
                                        <div class="header-icon">
                                            <i class="fas fa-newspaper"></i>
                                        </div>
                                        <div class="header-text">
                                            <h2>All News Reports</h2>
                                            <p>Stay updated with the latest news and announcements</p>
                                        </div>
                                    </div>
                                    <div class="header-actions">
                                        <a href="{{ route('news.create') }}" class="create-btn">
                                            <i class="fas fa-plus"></i>
                                            Report News
                                        </a>
                                    </div>
                                </div>

                                 
                                {{-- Flash Messages --}}
                                @if(session('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <i class="fa fa-check-circle"></i> {{ session('success') }}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif

                                @if(session('error'))
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        <i class="fa fa-exclamation-circle"></i> {{ session('error') }}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif

                                {{-- News Content --}}
                                @if($news->count() > 0)
                                    {{-- News Grid --}}
                                    <div class="news-grid">
                                        @foreach($news as $item)
                                            <article class="news-card">
                                                @if($item->Image)
                                                    <div class="news-image">
                                                        <img src="{{ asset('public/news/' . $item->Image) }}" 
                                                             alt="{{ $item->NewsTitle }}"
                                                             loading="lazy">
                                                        <div class="category-badge">{{ $item->CategoryType }}</div>
                                                    </div>
                                                @endif
                                                
                                                <div class="news-content">
                                                    <div class="news-meta">
                                                        <span class="author">
                                                            <i class="fas fa-user"></i> 
                                                            {{ $item->user->name }}
                                                        </span>
                                                        <span class="date">
                                                            <i class="fas fa-calendar"></i> 
                                                            {{ $item->Date->format('M d, Y') }}
                                                        </span>
                                                    </div>
                                                    
                                                    <h3 style="font-size:25px; color:black" class="news-title">{{ $item->NewsTitle }}</h3>
                                                 
                                                    
                                                    <div class="news-actions">
                                                        <a href="{{ route('news.show', $item->id) }}" 
                                                           class="read-more">
                                                            <i class="fas fa-eye"></i>
                                                            Read More
                                                        </a>
                                                        
                                                        @if(Auth::id() == $item->user_id || Auth::user()->isAdmin())
                                                            <div class="action-buttons">
                                                                <a href="{{ route('news.edit', $item->id) }}" 
                                                                   class="edit-btn"
                                                                   title="Edit">
                                                                    <i class="fas fa-edit"></i>
                                                                </a>
                                                                <form action="{{ route('news.destroy', $item->id) }}" 
                                                                      method="POST" 
                                                                      class="d-inline"
                                                                      onsubmit="return confirm('Are you sure you want to delete this news?')">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" 
                                                                            class="delete-btn"
                                                                            title="Delete">
                                                                        <i class="fas fa-trash"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </article>
                                        @endforeach
                                    </div>

                                    {{-- Pagination --}}
                                    <div class="pagination-container">
                                        {{ $news->links() }}
                                    </div>
                                @else
                                    {{-- Empty State --}}
                                    <div class="no-news">
                                        <div class="no-news-icon">
                                            <i class="fas fa-newspaper"></i>
                                        </div>
                                        <h3>No News Reports Found</h3>
                                        <p>There are no news reports to display at the moment.</p>
                                        <a href="{{ route('news.create') }}" class="create-btn">
                                            <i class="fas fa-plus"></i>
                                            Create First News Report
                                        </a>
                                    </div>
                                @endif

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

@endsection

 
<style>
    /* News Area Styles */
    .news-area {
        padding: 80px 0;
        background: #f8fafc;
    }

    /* Header Section */
    .news-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
        background: white;
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .header-content {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .header-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #27ae60, #219653);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.8rem;
        flex-shrink: 0;
    }

    .header-text h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
    }

    .header-text p {
        color: #7f8c8d;
        margin: 5px 0 0 0;
    }

    /* Create Button */
    .create-btn {
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
        padding: 12px 25px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
        white-space: nowrap;
    }

    .create-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
        color: white;
        text-decoration: none;
    }

    /* Category Filter */
    .category-filter {
        background: white;
        padding: 25px;
        border-radius: 15px;
        margin-bottom: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .filter-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
        font-weight: 600;
        color: #2c3e50;
    }

    .filter-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .filter-option {
        padding: 8px 20px;
        background: #f8fafc;
        border: 2px solid #e8f0fe;
        border-radius: 25px;
        text-decoration: none;
        color: #7f8c8d;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .filter-option:hover,
    .filter-option.active {
        background: #27ae60;
        color: white;
        border-color: #27ae60;
        text-decoration: none;
    }

    /* News Grid */
    .news-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 30px;
        margin-bottom: 40px;
    }

    /* News Card */
    .news-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        border: 1px solid #f0f0f0;
        display: flex;
        flex-direction: column;
    }

    .news-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    }

    .news-image {
        position: relative;
        height: 200px;
        overflow: hidden;
        background: #f8fafc;
    }

    .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .news-card:hover .news-image img {
        transform: scale(1.05);
    }

    .category-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(39, 174, 96, 0.9);
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        backdrop-filter: blur(5px);
    }

    /* News Content */
    .news-content {
        padding: 25px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .news-meta {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        font-size: 0.85rem;
        color: #7f8c8d;
        flex-wrap: wrap;
        gap: 10px;
    }

    .news-meta span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

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

    .news-excerpt {
        color: #5d6d7e;
        line-height: 1.6;
        margin-bottom: 20px;
        flex-grow: 1;
    }

    /* News Actions */
    .news-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    .read-more {
        color: #27ae60;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }

    .read-more:hover {
        color: #219653;
        text-decoration: none;
        gap: 12px;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
    }

    .edit-btn, 
    .delete-btn {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        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;
        transform: scale(1.1);
    }

    .delete-btn:hover {
        background: #c0392b;
        color: white;
        transform: scale(1.1);
    }

    /* Empty State */
    .no-news {
        text-align: center;
        padding: 60px 20px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .no-news-icon {
        width: 100px;
        height: 100px;
        background: #f8fafc;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        color: #bdc3c7;
        font-size: 2.5rem;
    }

    .no-news h3 {
        color: #2c3e50;
        margin-bottom: 10px;
        font-size: 1.5rem;
    }

    .no-news p {
        color: #7f8c8d;
        margin-bottom: 25px;
    }

    /* Pagination */
    .pagination-container {
        text-align: center;
        margin-top: 40px;
    }

    /* Alert Styles */
    .alert {
        border-radius: 15px;
        padding: 15px 20px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .alert i {
        font-size: 1.2rem;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .news-header {
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }

        .header-content {
            flex-direction: column;
            text-align: center;
        }

        .header-text h2 {
            font-size: 1.8rem;
        }

        .news-grid {
            grid-template-columns: 1fr;
        }

        .news-meta {
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }

        .filter-options {
            justify-content: center;
        }

        .news-actions {
            flex-wrap: wrap;
            gap: 10px;
        }
    }

    @media (max-width: 480px) {
        .header-icon {
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
        }

        .header-text h2 {
            font-size: 1.5rem;
        }

        .create-btn {
            padding: 10px 20px;
            font-size: 0.9rem;
        }

        .news-title {
            font-size: 1.1rem;
        }
    }
</style>
 
<script>
    // Auto-dismiss alerts after 5 seconds
    document.addEventListener('DOMContentLoaded', function() {
        const alerts = document.querySelectorAll('.alert');
        
        alerts.forEach(function(alert) {
            setTimeout(function() {
                alert.style.transition = 'opacity 0.5s ease';
                alert.style.opacity = '0';
                
                setTimeout(function() {
                    alert.remove();
                }, 500);
            }, 5000);
        });
    });
</script>