@extends('layouts.app')

@section('title', 'Minhas telas')

@section('content')
    <div class="media-container" style="display: none; overflow: hidden;">
        <div id="mediaPlayer">
            <div id="media1" class="media-item"></div>
            <div id="media2" class="media-item" style="overflow: hidden; display: none;"></div>
        </div>
        <button id="exit-button" style="display: none;">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>

    <div id="qrCodeContainer" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: none; background: white; padding: 15px; border-radius: 10px; text-align: center; width: 200px;">
        <p style="margin: 0 0 10px 0; font-size: 16px; color: #333;">Escaneie o QR Code</p>
        <canvas id="qrCodeCanvas"></canvas>
        <p style="margin: 10px 0 0 0; font-size: 16px; color: #333;">e envie sua mídia!</p>
    </div>

    <div class="container" id="screensList" style="display: block;"
        data-base-pay-url="{{ url('/pay/screen') }}"
        data-is-manager="{{ Auth::check() && Auth::user()->manager ? 'true' : 'false' }}">
        
        <div class="title-screen" style="text-align:center; margin-bottom: 30px;"><h2>Minhas Telas</h2></div>
        
        <div id="screensContainer">
            @forelse ($screens as $screen)
                <div class="col">
                    <div class="card-default" style="z-index: 1001;">
                        @if ($screen->media->first() && $screen->media->first()->thumbnail_path && Storage::disk('upload_thumbnail')->exists($screen->media->first()->thumbnail_path))
                            <img class="card-default-img-top" 
                                 src="{{ Storage::disk('upload_thumbnail')->url($screen->media->first()->thumbnail_path) }}" 
                                 alt="Thumbnail da tela">
                        @endif
                        <div class="action-buttons-default">
                            <div class="dropdown" style="z-index: 1003;">
                                <button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item edit-screen" 
                                           data-screen-id="{{ $screen->id }}" 
                                           data-plan-id="{{ $screen->plan_name }}"
                                           data-bs-toggle="modal" 
                                           data-bs-target="#editScreenModal"
                                           href="#">
                                            <i class="fa-solid fa-pen-to-square color-bg"></i> Editar
                                        </a>
                                    </li>
                                    @if(Auth::check() && Auth::user()->manager)
                                        <li>
                                            <a class="dropdown-item invite-manager" 
                                            href="#"
                                            data-screen-id="{{ $screen->id }}"
                                            data-screen-name="{{ $screen->name }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#inviteManagerModal">
                                                <i class="fa-solid fa-user-plus color-bg"></i> Convidar Gestor
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item gestao-screen"
                                            href="#"
                                            data-screen-id="{{ $screen->id }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#gestaoScreenModal">
                                                <i class="fa-solid fa-briefcase color-bg"></i> Gestão
                                            </a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                        <button class="btn play-screen" 
                                data-screen-id="{{ $screen->id }}"
                                data-is-playing="{{ $screen->is_playing ? 'true' : 'false' }}"
                                data-qr-code-token="{{ $screen->is_ad_screen ? $screen->qr_code_token : '' }}"
                                id="play-{{ $screen->id }}">
                            <i class="fa-solid fa-play"></i>
                        </button>
                        <div class="card-default-body">
                            <h5 class="card-default-title">{{ $screen->name }}</h5>
                            <h5 class="screen-info-default">
                                @if ($screen->is_ad_screen)
                                    Monetize seu espaço
                                @else
                                    Plano: {{ $screen->plan_name ?? 'Nenhum' }}<br>
                                    Expira em: {{ $screen->expires_at ? $screen->expires_at->format('d/m/Y') : 'Nunca' }}
                                @endif
                            </h5>
                        </div>
                    </div>
                </div>
            @empty
                <div class="no-screens">
                    <p>Você ainda não tem telas disponíveis.</p>
                </div>
            @endforelse
        </div>
    </div>

    @if(Auth::check() && Auth::user()->manager)
        <div class="modal fade" id="inviteManagerModal" tabindex="-1" aria-labelledby="inviteManagerModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="inviteManagerModalLabel">Convidar Gestor para a Tela: <span></span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Copie e envie o link abaixo para o usuário que você deseja convidar para gerenciar esta tela.</p>
                        <p class="text-muted small">O link é válido por 48 horas.</p>

                        <div id="invitationLinkContainer" style="display: none;">
                            <div class="input-group">
                                <input type="text" id="invitationLinkInput" class="form-control" readonly style="background-color: #e9ecef;">
                                <button class="btn btn-outline-primary" type="button" id="copyInvitationLinkButton" title="Copiar link">
                                    <i class="fa-solid fa-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div id="loadingSpinner" class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Gerando link...</span>
                            </div>
                            <p class="mt-2">Gerando link...</p>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="modal fade" id="editScreenModal" tabindex="-1" aria-labelledby="editScreenModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editScreenModalLabel">Editar Tela</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="editScreenForm" method="POST" action="">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="mb-3">
                            <label for="screenName" class="form-label">Nome</label>
                            <input type="text" class="form-control" id="screenName" name="name" required>
                        </div>
                        <div id="adScreenFields" style="display: none;">
                            <div class="mb-3">
                                <label for="minuteRate" class="form-label">Valor por Minuto (R$)</label>
                                <input type="number" step="0.01" min="0" class="form-control" id="minuteRate" name="minute_rate">
                            </div>
                        </div>

                        @if(Auth::check() && Auth::user()->manager)
                            <hr>
                            <div class="manager-fields-section">
                                <div class="mb-3">
                                    <label class="form-label fw-bold text-primary">Link de contato</label>
                                    <div class="input-group mb-2">
                                        <input type="text" id="publicLink" class="form-control" readonly placeholder="Link para contratar a tela...">
                                        <button class="btn btn-outline-secondary copy-btn" type="button" data-target="#publicLink" title="Copiar link de contratação">
                                            <i class="fa-solid fa-copy"></i>
                                        </button>
                                    </div>

                                    <label class="form-label fw-bold text-primary">Link de reprodução</label>
                                    <div class="input-group">
                                        <input type="text" id="playbackLinkInput" class="form-control" readonly placeholder="Link para reproduzir a tela...">
                                        <button class="btn btn-outline-secondary copy-btn" type="button" data-target="#playbackLinkInput" title="Copiar link de reprodução">
                                            <i class="fa-solid fa-copy"></i>
                                        </button>
                                        <button class="btn btn-outline-success" type="button" id="regeneratePlaybackLinkBtn" title="Gerar novo link (invalida o anterior)">
                                            <i class="fa-solid fa-sync-alt"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <label for="localization" class="form-label">Localização da Tela <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="localization" name="localization" required>
                                </div>
                            </div>

                            <div class="mt-4">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="mb-0"><i class="fas fa-users-cog me-2"></i>Gestores Atuais</h6>
                                    <button type="button" 
                                            class="btn btn-sm btn-outline-primary" 
                                            id="inviteManagerBtnEdit"
                                            data-bs-toggle="modal" 
                                            data-bs-target="#inviteManagerModal">
                                        <i class="fa-solid fa-user-plus"></i> Convidar
                                    </button>
                                </div>

                                <div id="currentManagersList_Edit" class="list-group">
                                    <p class="text-muted small">Carregando...</p>
                                </div>

                                <div id="pendingInvitationsWrapper_Edit" style="display: none;">
                                    <h6 class="mt-4"><i class="fas fa-envelope-open-text me-2"></i>Convites Pendentes</h6>
                                    <div id="pendingInvitationsList_Edit" class="list-group">
                                        </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Salvar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="gestaoScreenModal" tabindex="-1" aria-labelledby="gestaoScreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="max-width: 1140px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="gestaoScreenModalLabel">Gestão da Tela</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="manager-fields-section">
                        <h6 class="text-primary"><i class="fas fa-share-alt me-2"></i>Links de Compartilhamento</h6>
                        <div class="mb-3">
                            <label class="form-label small">Link de contratação (Página Pública)</label>
                            <div class="input-group">
                                <input type="text" id="publicLinkGestao" class="form-control" readonly>
                                <button class="btn btn-outline-secondary copy-btn" type="button" data-target="#publicLinkGestao" title="Copiar link">
                                    <i class="fa-solid fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small">Link de reprodução (Player)</label>
                            <div class="input-group">
                                <input type="text" id="playbackLinkInputGestao" class="form-control" readonly>
                                <button class="btn btn-outline-secondary copy-btn" type="button" data-target="#playbackLinkInputGestao" title="Copiar link">
                                    <i class="fa-solid fa-copy"></i>
                                </button>
                                <button class="btn btn-outline-success" type="button" id="regeneratePlaybackLinkBtnGestao" title="Gerar novo link">
                                    <i class="fa-solid fa-sync-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div id="publicUploadLinksSection" class="mt-4">
                        <hr>
                        <h6 class="text-primary"><i class="fas fa-link me-2"></i>Links de Contribuição (Pastas Públicas)</h6>
                        <p class="text-muted small">Crie links para clientes enviarem mídias. Você pode definir expiração para o link (a pasta) ou para os slots individuais.</p>

                        <form id="createPublicLinkForm" class="p-3" style="background-color: #3a3a3a; border-radius: 8px; border: 1px solid #555;">

                            <div class="row g-3">
                                <div class="col-md-7">
                                    <label for="publicLinkNameGestao" class="form-label small mb-1">Nome do Link (Ex: Cliente Loja X)</label>
                                    <input type="text" class="form-control form-control-sm" id="publicLinkNameGestao" required>
                                </div>
                                <div class="col-md-5">
                                    <label for="publicLinkExpiresAt" class="form-label small mb-1">Expiração do Link (Opcional)</label>
                                    <input type="date" class="form-control form-control-sm" id="publicLinkExpiresAt" min="{{ now()->toDateString() }}">
                                </div>
                            </div>

                            <hr class="my-3" style="border-color: #555;">

                            <div id="slotConfigContainer" class="d-flex flex-column gap-3">
                            </div>

                            <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top" style="border-color: #555 !important;">
                                <button type="button" id="addSlotTypeBtn" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-plus me-1"></i> Adicionar Tipo de Slot
                                </button>
                                <button type="button" id="createPublicLinkBtn" class="btn btn-primary btn-sm">
                                    <i class="fas fa-save me-1"></i> Criar Novo Link
                                </button>
                            </div>
                        </form>

                        <div id="publicLinksList" class="list-group mt-3" style="max-height: 200px; overflow-y: auto;">
                        </div>
                    </div>

                    <div class="mt-4">
                        <hr>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="text-primary mb-0"><i class="fas fa-users-cog me-2"></i>Gestores</h6>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="inviteManagerBtn" data-bs-toggle="modal" data-bs-target="#inviteManagerModal">
                                <i class="fa-solid fa-user-plus"></i> Convidar Gestor
                            </button>
                        </div>

                        <div id="currentManagersList_Gestao" class="list-group">
                        </div>

                        <div id="pendingInvitationsWrapper_Gestao" style="display: none;">
                            <h6 class="mt-4"><i class="fas fa-envelope-open-text me-2"></i>Convites Pendentes</h6>
                            <div id="pendingInvitationsList_Gestao" class="list-group">
                                </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div> 

    <div class="modal fade" id="editPublicLinkModal" tabindex="-1" aria-labelledby="editPublicLinkModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="max-width: 1140px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editPublicLinkModalLabel">Editar Link de Contribuição</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editPublicLinkForm">
                        <input type="hidden" id="editLinkId" value="">

                        <div class="row g-2 mb-3">
                            <div class="col-md-7">
                                <label for="editLinkName" class="form-label small mb-1">Nome do Link</label>
                                <input type="text" class="form-control form-control-sm" id="editLinkName" required>
                            </div>
                            <div class="col-md-5">
                                <label for="editLinkExpiresAt" class="form-label small mb-1">Expiração do Link (Opcional)</label>
                                <input type="date" class="form-control form-control-sm" id="editLinkExpiresAt" min="{{ now()->toDateString() }}">
                            </div>
                        </div>

                        <hr>
                        <h6>Slots Configurados</h6>
                        
                        <div id="editSlotsContainer" class="d-flex flex-column gap-2 mb-3" style="max-height: 300px; overflow-y: auto; padding: 10px; background-color: #3a3a3a; border-radius: 8px;">
                            <div class="text-center p-3" id="editSlotsLoading">
                                <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                            </div>
                        </div>
                        
                        <button type="button" class="btn btn-sm btn-outline-secondary mb-3" id="editAddSlotBtn">
                            <i class="fas fa-plus me-1"></i> Adicionar Slot Vazio
                        </button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveLinkChangesBtn">Salvar Alterações</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @vite(['resources/js/media-play.js', 'resources/js/dashboard-management.js'])
@endpush