@extends('frontend.layout.app')

@section('title', 'UCN News | Nagpur News Live | आज तक स्टाइल')

@section('content')

    <div class="my-4 border shadow-sm bg-white overflow-hidden">
        <div class="p-4 text-center border-bottom bg-light">
            <h1 class="fw-black text-uppercase display-4 mb-0" style="letter-spacing: -2px; font-weight: 900;">
                <span class="text-danger">Live</span> <i class="bi bi-play-circle-fill text-danger"></i> <span
                    style="color: #003366;">CHANNELS</span>
            </h1>
        </div>
        <div class="d-flex justify-content-center p-0 bg-white border-bottom">
            <button class="channel-tab bg-danger text-white border-0 py-3 px-4 fw-bold flex-grow-1"
                onclick="switchChannel('news', this)">UCN NEWS</button>
            <button class="channel-tab bg-light text-dark border-0 py-3 px-4 fw-bold flex-grow-1"
                onclick="switchChannel('ent', this)">UCN ENTERTAINMENT</button>
            <button class="channel-tab bg-light text-dark border-0 py-3 px-4 fw-bold flex-grow-1"
                onclick="switchChannel('info', this)">UCN INFO</button>
        </div>
        <div class="position-relative bg-black" style="min-height: 450px; background: #000;">
            <div id="ent-menu" class="bg-danger p-3 shadow-lg text-center"
                style="width: 250px; display: none; position: absolute; left: 50%; transform: translateX(-50%); z-index: 10;">
                <ul class="list-unstyled mb-0">
                    @foreach(['UCN PRIME', 'UCN PUB', 'UCN SHRADDHA', 'UCN MARATHI', 'UCN LAMHE', 'UCN BLOCKBUSTER'] as $sub)
                        <li class="py-2 border-bottom border-danger-subtle"><a href="#"
                                class="text-white text-decoration-none fw-bold small">{{ $sub }}</a></li>
                    @endforeach
                </ul>
            </div>
            <div class="d-flex justify-content-center align-items-center h-100 p-5">
                <div class="text-center text-white mt-5">
                    <i class="bi bi-play-btn-fill display-1 text-danger"></i>
                    <h2 class="fw-bold mt-3">Watching Live Stream</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-2">
        <div class="col-lg-8">
            <div class="position-relative overflow-hidden border-bottom border-danger border-4 h-100">
                <a href="{{ route('news.details') }}" class="text-decoration-none">
                    <img src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?q=80&w=1200"
                        class="img-fluid w-100 h-100" style="object-fit: cover; min-height: 500px;">
                    <div class="position-absolute bottom-0 start-0 w-100 p-4"
                        style="background: linear-gradient(transparent, rgba(0,0,0,0.95));">
                        <span class="badge bg-danger mb-2 rounded-0 px-3 py-2 fw-bold animate-pulse">बड़ी खबर</span>
                        <h1 class="text-white fw-bold display-5 headline-title">नागपुर मेट्रो फेज-2 का काम शुरू: शहर के इन
                            रूटों पर अब नहीं लगेगा जाम</h1>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="bg-white border mb-2">
                <div class="bg-danger text-white px-3 py-2 fw-bold d-flex justify-content-between">
                    <span>बड़ी बातें</span> <i class="bi bi-list-task"></i>
                </div>
                <div class="list-group list-group-flush px-2">
                    @foreach(["महाराष्ट्र चुनाव: नागपुर में हलचल तेज", "जरीपटका मर्डर केस: पुलिस को मिला सुराग", "नागपुर यूनिवर्सिटी: कल बंद रहेंगे कॉलेज", "विदर्भ क्रिकेट: टीम ने रचा नया इतिहास"] as $key => $text)
                        <a href="#"
                            class="list-group-item list-group-item-action border-0 py-3 d-flex align-items-start px-0 border-bottom">
                            <span class="h1 mb-0 me-3 fw-bold text-light" style="line-height: 1;">{{ $key + 1 }}</span>
                            <p class="mb-0 fw-bold small text-dark mt-1">{{ $text }}</p>
                        </a>
                    @endforeach
                </div>
            </div>
            <div class="text-center bg-light border p-2">
                <small class="text-muted d-block mb-1" style="font-size: 9px;">ADVERTISEMENT</small>
                <img src="https://placehold.jp/24/333333/ffffff/300x250.png?text=Sidebar+Ad" class="img-fluid w-100">
            </div>
        </div>
    </div>



    <div class="my-5 text-center">
        <img src="https://placehold.jp/24/e00000/ffffff/970x90.png?text=728x90+Mega+Banner+Ad"
            class="img-fluid border shadow-sm">
    </div>

    <div class="mt-5">
        <h4 class="fw-bold mb-3 border-bottom border-danger border-2 pb-2">नागपुर सिटी (Local News)</h4>
        <div class="row g-2">
            @for ($j = 1; $j <= 4; $j++)
                <div class="col-md-3">
                    <div class="bg-white border h-100 hover-shadow transition">
                        <img src="https://via.placeholder.com/400x230/eee/333" class="img-fluid">
                        <div class="p-2">
                            <h6 class="fw-bold small mb-1">हिंगना एमआईडीसी में लगी भीषण आग, लाखों का माल स्वाहा...</h6>
                            <small class="text-danger small fw-bold">Nagpur City</small>
                        </div>
                    </div>
                </div>
            @endfor
        </div>
    </div>

    <div class="row mt-5 g-2">
        <div class="col-md-6"><img src="https://placehold.jp/20/004a99/ffffff/468x60.png?text=Study+Abroad+Ad"
                class="img-fluid border w-100"></div>
        <div class="col-md-6"><img src="https://placehold.jp/20/1a1a1a/ffffff/468x60.png?text=Real+Estate+Ad"
                class="img-fluid border w-100"></div>
    </div>

    <div class="row mt-5">
        <div class="col-md-8">
            <h4 class="fw-bold border-start border-danger border-4 ps-3 mb-4">राजनीति (Politics)</h4>
            @for ($m = 1; $m <= 4; $m++)
                <div class="d-flex border-bottom pb-3 mb-3 bg-white p-2">
                    <img src="https://via.placeholder.com/150x100" class="me-3"
                        style="width: 150px; height: 100px; object-fit: cover;">
                    <div>
                        <h5 class="fw-bold fs-6">महाराष्ट्र विधानसभा चुनाव: नागपुर की सीटों पर समीकरण बिगड़े...</h5>
                        <p class="small text-muted mb-1 d-none d-md-block">निर्दलीय उम्मीदवार बने चुनौती, राजनीतिक पंडितों का
                            मानना है कि...</p>
                        <small class="text-danger fw-bold">Politics | 20 min ago</small>
                    </div>
                </div>
            @endfor
        </div>
        <div class="col-lg-4">
            <div class="sticky-top" style="top: 100px;">
                <div class="text-center p-2 bg-light border mb-2">
                    <small class="text-muted d-block" style="font-size: 9px;">ADVERTISEMENT</small>
                    <img src="https://placehold.jp/22/1a1a1a/ffffff/300x600.png?text=Skyscraper+Ad" class="img-fluid">
                </div>
            </div>
        </div>
    </div>

    <div class="mt-5 bg-dark p-0 overflow-hidden">
        <div class="row g-0">
            <div class="col-md-7 p-4">
                <h4 class="text-white fw-bold mb-4 border-start border-danger border-4 ps-3">LIVE TV BROADCAST</h4>
                <div class="ratio ratio-16x9 shadow-lg border border-secondary">
                    <iframe src="https://www.youtube.com/embed/S_8Vp40f13w" allowfullscreen></iframe>
                </div>
            </div>
            <div class="col-md-5 p-4 bg-black">
                <h5 class="text-danger fw-bold mb-3">वीडियो गैलरी</h5>
                @for ($v = 1; $v <= 3; $v++)
                    <div class="d-flex mb-3 border-bottom border-secondary pb-3">
                        <div class="position-relative me-3">
                            <img src="https://via.placeholder.com/120x80/222/fff" style="width: 100px;">
                            <i
                                class="bi bi-play-circle-fill position-absolute top-50 start-50 translate-middle text-danger fs-3"></i>
                        </div>
                        <p class="text-white small fw-bold mb-0">नागपुर रेलवे स्टेशन का नया स्वरूप, देखिए खास रिपोर्ट।</p>
                    </div>
                @endfor
            </div>
        </div>
    </div>

    <div class="container-fluid my-5 p-5 text-center bg-danger text-white">
        <h2 class="fw-bold">विदर्भ का सबसे बड़ा न्यूज़ नेटवर्क - UCN NEWS</h2>
        <p>विज्ञापन के लिए संपर्क करें: ads@ucnnews.live</p>
        <button class="btn btn-outline-light btn-lg rounded-0 px-5">Join Us</button>
    </div>

    <div class="mt-5">
        <h4 class="fw-bold mb-3 border-bottom border-info border-2 pb-2">मनोरंजन (Entertainment)</h4>
        <div class="row g-2">
            <div class="col-md-6">
                <div class="position-relative overflow-hidden text-white h-100">
                    <img src="https://via.placeholder.com/800x450/333/fff" class="img-fluid h-100"
                        style="object-fit: cover;">
                    <div class="position-absolute bottom-0 p-3 w-100 bg-gradient-dark">
                        <h4 class="fw-bold">नागपुर के इस कलाकार ने बॉलीवुड में मचाया धमाका</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                @for ($e = 1; $e <= 4; $e++)
                    <div class="bg-white border p-2 mb-2 d-flex align-items-center">
                        <img src="https://via.placeholder.com/80" class="me-2">
                        <h6 class="small fw-bold mb-0">Upcoming Movie Review: फिल्म सिटी में हलचल...</h6>
                    </div>
                @endfor
            </div>
        </div>
    </div>

    <div class="mt-5 mb-5 pb-5">
        <h4 class="section-title"><span>खेल दुनिया (Sports)</span></h4>
        <div class="row g-2 mt-3">
            @for ($sp = 1; $sp <= 4; $sp++)
                <div class="col-md-3">
                    <div class="bg-light border p-2 text-center">
                        <img src="https://via.placeholder.com/300x180/004a99/fff" class="img-fluid mb-2">
                        <h6 class="fw-bold small">विदर्भ ने जीता रणजी ट्रॉफी का सेमीफाइनल!</h6>
                    </div>
                </div>
            @endfor
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function switchChannel(type, element) {
            // 1. Reset ALL tabs to the 'inactive' state (Light background, Dark text)
            document.querySelectorAll('.channel-tab').forEach(btn => {
                btn.classList.remove('bg-danger', 'bg-dark', 'text-white');
                btn.classList.add('bg-light', 'text-dark');
            });

            // 2. Hide the submenu by default
            const menu = document.getElementById('ent-menu');
            menu.style.display = 'none';

            // 3. Activate the clicked tab
            if (type === 'news') {
                element.classList.remove('bg-light', 'text-dark');
                element.classList.add('bg-danger', 'text-white');
            } else if (type === 'ent') {
                element.classList.remove('bg-light', 'text-dark');
                element.classList.add('bg-dark', 'text-white');
                menu.style.display = 'block'; // Show the red submenu
            } else if (type === 'info') {
                element.classList.remove('bg-light', 'text-dark');
                element.classList.add('bg-dark', 'text-white');
            }
        }
    </script>
    <style>
        .channel-tab {
            transition: 0.3s all ease;
            cursor: pointer;
            border-radius: 0 !important;
        }

        .card,
        .btn,
        .list-group-item,
        .badge {
            border-radius: 0 !important;
        }

        .headline-title {
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
        }

        .bg-gradient-dark {
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
        }

        .hover-shadow:hover {
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
            transform: translateY(-3px);
        }

        .transition {
            transition: 0.3s all ease-in-out;
        }

        /* Force the inactive text color */
        .channel-tab.bg-light {
            color: #003366 !important;
            /* Dark Blue like your logo */
        }

        /* Fix submenu position */
        #ent-menu {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
            /* Align to the top of the black area */
            z-index: 100;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border-radius: 0 0 10px 10px;
            /* Rounded only at bottom */
        }
    </style>
@endpush