@extends('panelVoting.panel')

@push('panel-styles')
    <link rel="stylesheet"
        href="{{ asset('css/panelVotingDiscourse.css') }}?v={{ filemtime(public_path('css/panelVotingDiscourse.css')) }}">
@endpush

@section('content')
    <div class="container-fluid panel-discourse-screen">

        <div class="discourse-hero">
            <div class="discourse-hero__topbar">
                <div class="discourse-hero__brand">
                    <div class="discourse-hero__brand-mark">◼</div>
                    <div class="discourse-hero__brand-copy">
                        <h2 class="discourse-hero__brand-name">
                            {{ optional($company)->shortName ?: optional($company)->fantasy_name ?: optional($company)->name ?: 'Instituição' }}
                        </h2>
                        <p class="discourse-hero__brand-subtitle">Participação remota do parlamentar em sessão plenária</p>
                    </div>
                </div>

                <div class="discourse-hero__live">
                    <span class="discourse-hero__live-dot"></span>
                    <span>DISCURSANDO</span>
                </div>

                <div class="discourse-hero__meta">
                    <span class="discourse-hero__meta-item">Data: {{ now()->format('d/m/Y') }}</span>
                    <span class="discourse-hero__meta-item">Hora: {{ now()->format('H:i') }}</span>
                </div>
            </div>

            <div class="discourse-hero__eyebrow">Participação remota</div>
            <h1 class="discourse-hero__title" id="session_data">-</h1>
            <p class="discourse-hero__subtitle">Sessão plenária em andamento com presença remota sincronizada.</p>
        </div>

        <div class="discourse-layout">
            <div class="discourse-media-shell">
                <div class="discourse-media-frame">
                    <div class="discourse-media-badges">
                        <span class="discourse-status-pill discourse-status-pill--remote"
                            id="assemblyman_discourse_presence_badge" style="display:none;">
                            <i class="fa fa-signal discourse-status-pill__icon" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="discourse-audio-indicator" id="discourse_audio_indicator" style="display:none;">
                        <div class="discourse-audio-indicator__header">
                            <span class="discourse-audio-indicator__label">Nível de fala</span>
                            <span class="discourse-audio-indicator__status" id="discourse_audio_indicator_status">Aguardando áudio</span>
                        </div>
                        <div class="discourse-audio-indicator__meter" id="discourse_audio_indicator_meter" aria-hidden="true">
                            <span class="discourse-audio-indicator__bar"></span>
                            <span class="discourse-audio-indicator__bar"></span>
                            <span class="discourse-audio-indicator__bar"></span>
                            <span class="discourse-audio-indicator__bar"></span>
                            <span class="discourse-audio-indicator__bar"></span>
                            <span class="discourse-audio-indicator__bar"></span>
                            <span class="discourse-audio-indicator__bar"></span>
                            <span class="discourse-audio-indicator__bar"></span>
                        </div>
                    </div>

                    <img class="assemblyman-discourse-image" id="assemblyman_discourse_img"
                        src="/front/assets/img/sem-foto.jpg" loading="eager" decoding="async">
                    <iframe class="assemblyman-discourse-iframe" id="assemblyman_discourse_iframe"
                        title="Transmissão remota" loading="lazy" allow="autoplay; fullscreen; picture-in-picture"
                        referrerpolicy="no-referrer" style="display:none;"></iframe>
                    <video class="assemblyman-discourse-video" id="assemblyman_discourse_video" autoplay playsinline
                        preload="auto" style="display:none;"></video>
                    <div class="discourse-media-unavailable" id="discourse_media_unavailable" aria-live="polite">
                        <i class="fa fa-video-camera discourse-media-unavailable__icon" aria-hidden="true"></i>
                        <strong class="discourse-media-unavailable__title" id="discourse_media_unavailable_title">Câmera indisponível</strong>
                        <span class="discourse-media-unavailable__detail" id="discourse_media_unavailable_detail">Áudio indisponível</span>
                    </div>
                </div>
            </div>

            <div class="discourse-info-shell">
                <div class="discourse-info-stack">
                    <div class="discourse-title-block">
                        <h2 class="discourse-name" id="assemblyman_discourse">-</h2>
                        <h3 class="discourse-role" id="assemblyman_responsibilities">-</h3>
                    </div>

                    <div class="discourse-timer-wrap">
                        <div class="discourse-timer-label">Tempo de fala</div>
                        <div class="discourse-timer-value" id="discourse_live_timer">00:00:00</div>
                    </div>

                    <div class="discourse-footer-grid discourse-footer-grid--two">
                        <div class="discourse-mini-card">
                            <span class="discourse-mini-card__label">Instituição</span>
                            <div class="discourse-mini-card__value">
                                {{ optional($company)->shortName ?: optional($company)->fantasy_name ?: optional($company)->name ?: 'Instituição' }}
                            </div>
                        </div>

                        <div class="discourse-mini-card discourse-mini-card--presence">
                            <span class="discourse-mini-card__label">Presença</span>
                            <div class="discourse-mini-card__value discourse-mini-card__value--status"
                                id="discourse_footer_presence_state">-</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('panel-scripts')
    @include('panelVoting.paineljs.discourse')
@endpush