@extends('layouts.app')

@section('title', 'Daftar Channel Streaming')

@push('css')
<style>
    .channels-header {
        margin-bottom: 24px;
    }

    .channels-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #e2e8f0;
        margin-bottom: 4px;
    }

    .channels-header p {
        font-size: 0.875rem;
        color: #64748b;
    }

    .channels-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 20px;
    }

    @media (max-width: 480px) {
        .channels-grid {
            grid-template-columns: 1fr;
        }
    }

    .channel-card {
        background-color: #111827;
        border: 1px solid #1e293b;
        border-radius: 12px;
        overflow: hidden;
        transition: border-color 0.2s, transform 0.2s;
    }

    .channel-card:hover {
        border-color: #10b981;
        transform: translateY(-2px);
    }

    .channel-card__head {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        border-bottom: 1px solid #1e293b;
    }

    .channel-card__logo {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        object-fit: cover;
        border: 1px solid #1e293b;
        background-color: #0f172a;
        flex-shrink: 0;
    }

    .channel-card__logo-placeholder {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background-color: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #10b981;
        font-size: 1.4rem;
    }

    .channel-card__info {
        flex: 1;
        min-width: 0;
    }

    .channel-card__name {
        font-size: 1rem;
        font-weight: 600;
        color: #e2e8f0;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .channel-card__count {
        font-size: 0.75rem;
        color: #64748b;
    }

    .channel-card__count strong {
        color: #10b981;
        font-weight: 600;
    }

    .channel-card__streams {
        padding: 4px 0;
    }

    .channel-stream-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 20px;
        transition: background-color 0.15s;
        text-decoration: none;
        color: inherit;
    }

    .channel-stream-item:hover {
        background-color: rgba(16, 185, 129, 0.05);
    }

    .channel-stream-item__badge {
        flex-shrink: 0;
    }

    .channel-stream-item__info {
        flex: 1;
        min-width: 0;
    }

    .channel-stream-item__title {
        font-size: 0.8125rem;
        font-weight: 500;
        color: #e2e8f0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 2px;
    }

    .channel-stream-item__teams {
        font-size: 0.7rem;
        color: #64748b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .channel-stream-item__arrow {
        color: #475569;
        font-size: 0.75rem;
        flex-shrink: 0;
        transition: color 0.15s, transform 0.15s;
    }

    .channel-stream-item:hover .channel-stream-item__arrow {
        color: #10b981;
        transform: translateX(2px);
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
    }

    .empty-state__icon {
        font-size: 3rem;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state__title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #94a3b8;
        margin-bottom: 4px;
    }

    .empty-state__desc {
        font-size: 0.875rem;
        color: #64748b;
    }
</style>
@endpush

@section('content')

{{-- ============================================
     PAGE HEADER
     ============================================ --}}
<div class="channels-header">
    <h1><i class="bi bi-tv" style="color: #10b981; margin-right: 8px;"></i>Channel Streaming</h1>
    <p>Daftar saluran yang tersedia untuk menonton live streaming</p>
</div>

{{-- ============================================
     HEADER AD SLOT
     ============================================ --}}
@include('partials.ad-slot', ['position' => 'channels_header'])

{{-- ============================================
     CHANNEL GRID
     ============================================ --}}
@if(isset($channels) && $channels->isNotEmpty())

    <div class="channels-grid">
        @foreach($channels as $channel)
            @php
                $channelName = $channel->channel_name;
                $channelStreams = isset($streamsByChannel[$channelName])
                    ? $streamsByChannel[$channelName]
                    : collect();
                $streamCount = $channelStreams->count();
            @endphp

            <div class="channel-card">
                {{-- Channel Header --}}
                <div class="channel-card__head">
                    @if(!empty($channel->channel_logo))
                        <img
                            src="{{ $channel->channel_logo }}"
                            alt="{{ $channelName }}"
                            class="channel-card__logo"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                        >
                        <div class="channel-card__logo-placeholder" style="display:none;">
                            <i class="bi bi-broadcast"></i>
                        </div>
                    @else
                        <div class="channel-card__logo-placeholder">
                            <i class="bi bi-broadcast"></i>
                        </div>
                    @endif
                    <div class="channel-card__info">
                        <div class="channel-card__name">{{ $channelName }}</div>
                        <div class="channel-card__count">
                            <strong>{{ $streamCount }}</strong>
                            {{ $streamCount === 1 ? 'siaran tersedia' : 'siaran tersedia' }}
                        </div>
                    </div>
                </div>

                {{-- Stream List --}}
                @if($channelStreams->isNotEmpty())
                    <div class="channel-card__streams">
                        @foreach($channelStreams as $stream)
                            <a href="{{ route('watch', ['id' => $stream->id]) }}" class="channel-stream-item">
                                <div class="channel-stream-item__badge">
                                    @if($stream->is_live)
                                        <span class="badge badge-live">
                                            <span class="live-pulse" style="width:6px;height:6px;"></span> LIVE
                                        </span>
                                    @else
                                        <span class="badge badge-scheduled">
                                            <i class="bi bi-clock"></i> Terjadwal
                                        </span>
                                    @endif
                                </div>
                                <div class="channel-stream-item__info">
                                    <div class="channel-stream-item__title">{{ $stream->title }}</div>
                                    <div class="channel-stream-item__teams">
                                        {{ $stream->home_team ?? '' }}{{ ($stream->home_team && $stream->away_team) ? ' vs ' : '' }}{{ $stream->away_team ?? '' }}
                                    </div>
                                </div>
                                <div class="channel-stream-item__arrow">
                                    <i class="bi bi-chevron-right"></i>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @else
                    <div style="padding: 16px 20px; text-align: center;">
                        <span style="font-size: 0.8rem; color: #475569;">Belum ada siaran pada channel ini</span>
                    </div>
                @endif
            </div>
        @endforeach
    </div>

@else

    {{-- ============================================
         EMPTY STATE
         ============================================ --}}
    <div class="empty-state">
        <div class="empty-state__icon">
            <i class="bi bi-broadcast"></i>
        </div>
        <div class="empty-state__title">Belum ada channel yang tersedia</div>
        <div class="empty-state__desc">Channel streaming akan muncul di sini ketika sudah ditambahkan.</div>
    </div>

@endif

{{-- ============================================
     FOOTER AD SLOT
     ============================================ --}}
@include('partials.ad-slot', ['position' => 'channels_footer'])

@endsection