@extends('layouts.app')

@section('title', 'Pagamento - ' . $screen->name)

@section('content')
<div class="container">
    <h1>Pagamento para {{ $screen->name }}</h1>
    <div class="row">
        <div class="col-12">
                <form method="POST" action="{{ route('media.upload-public', $screen->qr_code_token) }}" enctype="multipart/form-data" id="uploadForm" data-minute-rate="{{ $minute_rate ?? 0 }}">
                    @csrf
                    <div class="mb-3">
                        <label for="media" class="form-label">Escolha sua mídia (foto ou vídeo)</label>
                        <input type="file" class="form-control" id="media" name="media" accept="image/jpeg,image/png,video/mp4" required>
                    </div>
                    <div class="mb-3" id="durationField" style="display: none;">
                        <label for="duration" class="form-label">Duração de exibição (segundos)</label>
                        <input type="number" class="form-control" id="duration" name="duration" value="15" min="1" required>
                    </div>
                    <div class="mb-3" id="durationDisplay" style="display: none;">
                        <label for="duration" class="form-label">Duração do vídeo (segundos)</label>
                        <p id="videoDuration" class="fw-bold text-white">0</p>
                        <input type="hidden" id="durationHidden" name="duration">
                    </div>
                    <div class="action-buttons">
                        <div id="estimatedCostWrapper" style="display: none;">
                            <i class="fa-solid fa-coins"></i>
                            <span>Custo estimado: R$ <span id="estimatedCost">0,00</span></span>
                        </div>
                        <button type="submit" class="btn btn-screen-payment-primary fw-bold" id="submitButton" style="display: none;">Enviar e Pagar</button>
                    </div>
                    <div class="info-block">
                        <p>Após confirmar o pagamento, sua mídia confirmada e se caso aprovada será exibida uma única vez com a duração escolhida.
                        <br/>
                        Se alguma das nossas condições presentes em nossos termos de uso for violado não exibiremos a sua mídia e o estorno será feito, a tentativa consecutiva do mesmo ato resultará em bloqueio permanente!
                        </p>
                    </div>
                </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    @vite('resources/js/payment-screen.js')
@endpush