@extends('frontend.layout.app')

@section('title', 'Nagpur News - UCN News')

@section('content')
    <div class="row">
        <div class="col-lg-8">
            <h4 class="section-title mb-4"><span>नागपुर न्यूज़ (Nagpur News)</span></h4>

            <div class="card border-0 shadow-sm mb-4 overflow-hidden">
                <div class="row g-0">
                    <div class="col-md-5">
                        <img src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?q=80&w=500"
                            class="img-fluid h-100 w-100" style="object-fit: cover;">
                    </div>
                    <div class="col-md-7">
                        <div class="card-body">
                            <span class="badge bg-danger mb-2">LATEST</span>
                            <h3 class="fw-bold"><a href="{{ route('news.details') }}"
                                    class="text-dark text-decoration-none">नागपुर में विकास की नई रफ्तार, मेट्रो फेज-2 के
                                    टेंडर जारी।</a></h3>
                            <p class="text-muted small">शहर के उपनगरों को जोड़ने के लिए प्रशासन ने कमर कस ली है, जल्द ही
                                शुरू होगा निर्माण कार्य...</p>
                            <small class="text-secondary"><i class="bi bi-clock"></i> 1 hour ago</small>
                        </div>
                    </div>
                </div>
            </div>

            @for ($i = 1; $i <= 6; $i++)
                <div class="d-flex border-bottom pb-3 mb-3 align-items-center">
                    <img src="https://via.placeholder.com/150x100" class="rounded me-3"
                        style="width: 120px; height: 80px; object-fit: cover;">
                    <div>
                        <h5 class="fw-bold mb-1" style="font-size: 1.1rem;">
                            <a href="{{ route('news.details') }}" class="text-dark text-decoration-none hover-red">नागपुर पुलिस
                                की बड़ी सफलता, चोरी की 10 बाइक बरामद।</a>
                        </h5>
                        <small class="text-muted">Nagpur | {{ $i }} hour ago</small>
                    </div>
                </div>
            @endfor

            <nav class="mt-4">
                <ul class="pagination pagination-sm justify-content-center">
                    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item active"><a class="page-link bg-danger border-danger" href="#">1</a></li>
                    <li class="page-item"><a class="page-link text-danger" href="#">2</a></li>
                    <li class="page-item"><a class="page-link text-danger" href="#">3</a></li>
                    <li class="page-item"><a class="page-link text-danger" href="#">Next</a></li>
                </ul>
            </nav>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-3 mb-4 bg-light">
                <h5 class="fw-bold text-dark border-bottom pb-2 mb-3">Nagpur Weather</h5>
                <div class="text-center">
                    <i class="bi bi-cloud-sun-fill text-warning display-4"></i>
                    <h2 class="mb-0">38°C</h2>
                    <p class="text-muted">Sunny - Nagpur, MH</p>
                </div>
            </div>

            <div class="card border-0 shadow-sm p-3 sticky-top" style="top: 80px;">
                <h5 class="fw-bold text-danger border-bottom pb-2 mb-3">Trending in Nagpur</h5>
            </div>
        </div>
    </div>
@endsection