@extends('layouts.portal')

@section('title', $sponsor['name'])
@section('portal_class', 'portal-mode-watch')

@section('content')
<div class="portal-flow" data-portal-player>
    <section class="portal-card portal-intro" data-portal-intro>
        <div class="portal-card-body">
            <h1 class="portal-card-title">
                Esta conexão é patrocinada por <strong>{{ $sponsor['name'] }}</strong>
            </h1>

            <div class="portal-card-logo-center">
                @include('portal._sponsor-logo')
            </div>

            <p class="portal-card-text">
                Para liberar a internet, assista a um vídeo por
                <strong>{{ $watchSeconds }} segundos</strong>.
            </p>

            <p class="portal-card-text">
                O tempo de conexão será de <strong>{{ $grantMinutes }} minutos</strong>.
            </p>

            <button type="button" class="portal-btn portal-btn-primary" data-portal-start>
                Ver vídeo
            </button>

            @include('portal._platform-brand')
        </div>
    </section>

    <div class="portal-stage-wrap" data-portal-stage hidden>
        <div class="portal-media-wrap">
            @if ($isEmbed)
                <iframe
                    class="portal-embed"
                    data-portal-embed
                    src="{{ $video->embed_url }}"
                    title="{{ $video->title }}"
                    allow="autoplay; encrypted-media; picture-in-picture"
                    allowfullscreen
                    loading="lazy"
                ></iframe>
            @else
                <video
                    class="portal-watch-video"
                    playsinline
                    webkit-playsinline
                    preload="auto"
                    disablepictureinpicture
                    disableremoteplayback
                    data-portal-video
                >
                    <source src="{{ route('portal.stream', ['token' => $playbackToken]) }}" type="{{ $video->mime ?: 'video/mp4' }}">
                </video>
            @endif

            <div class="portal-timer-bar" aria-hidden="true">
                <span class="portal-timer-fill" data-portal-progress></span>
            </div>

            <div class="portal-timer-label">
                <span data-portal-timer-text>{{ $watchSeconds }}s</span>
            </div>
        </div>

        <p class="portal-stage-note" data-portal-status hidden></p>

        <button type="button" class="portal-btn portal-btn-primary portal-unlock-btn" data-portal-unlock hidden>
            Internet liberada
        </button>

        <div data-portal-stage-brand>
            @include('portal._platform-brand', ['variant' => 'stage'])
        </div>
    </div>
</div>

<script type="application/json" id="portal-config">
{!! json_encode([
    'token' => $playbackToken,
    'heartbeatUrl' => route('portal.heartbeat'),
    'abandonUrl' => route('portal.abandon'),
    'completedUrl' => route('portal.session', $session->public_id),
    'sourceType' => $video->source_type->value,
    'embedUrl' => $video->embed_url,
    'requiredWatchMs' => $video->requiredWatchMs(),
    'heartbeatIntervalMs' => (int) config('hotspot.heartbeat_interval_ms', 5000),
    'alreadyCompleted' => (bool) ($videoView?->isCompleted()),
], JSON_THROW_ON_ERROR) !!}
</script>
@endsection