@extends('layouts.app')
@section('title','Youtubers / Lives - GIGAX ARENA')
@section('page_title','Youtubers / Lives')

@push('styles')
<style>
.gx-yt{display:grid;gap:10px}.gx-yt-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.gx-yt-head h2{margin:0;font-size:17px;text-transform:uppercase}.gx-yt-head p{margin:3px 0 0;color:var(--mut);font-size:9px}.gx-yt-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:10px}.gx-yt-card{border:1px solid rgba(166,202,234,.13);border-radius:10px;background:linear-gradient(180deg,rgba(15,30,44,.96),rgba(7,15,24,.98));padding:12px}.gx-yt-card h3{margin:0 0 10px;font-size:11px;text-transform:uppercase}.gx-yt-form{display:grid;gap:7px}.gx-yt-form label{font-size:7px;color:#7f9bac;text-transform:uppercase;font-weight:900}.gx-yt-form input{width:100%;height:34px;border:1px solid rgba(166,202,234,.16);border-radius:7px;background:#071522;color:#fff;padding:0 9px;font-size:9px;box-sizing:border-box}.gx-yt-checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gx-yt-check{display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.06);padding:8px;border-radius:7px;font-size:8px}.gx-yt-check input{width:auto;height:auto}.gx-yt-btn{height:34px;border-radius:7px;border:1px solid rgba(36,245,111,.25);background:rgba(36,245,111,.10);color:#24f56f;font-size:8px;font-weight:1000;cursor:pointer;text-transform:uppercase}.gx-yt-table{width:100%;border-collapse:collapse}.gx-yt-table th,.gx-yt-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.055);font-size:8px;text-align:left}.gx-yt-table th{font-size:7px;color:#79b8ee;text-transform:uppercase}.gx-yt-user{display:flex;align-items:center;gap:7px}.gx-yt-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#102334}.gx-yt-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#566}.gx-yt-dot.live{background:#24f56f;box-shadow:0 0 8px rgba(36,245,111,.5)}.gx-yt-actions{display:flex;gap:5px;flex-wrap:wrap}.gx-yt-actions form{margin:0}.gx-yt-mini{height:27px;padding:0 8px;border-radius:6px;border:1px solid rgba(255,255,255,.10);background:#0a1b29;color:#fff;font-size:7px;font-weight:900;cursor:pointer}.gx-yt-mini.live{color:#24f56f}.gx-yt-mini.del{color:#ff6575}.gx-yt-flash{padding:8px 10px;border-radius:7px;border:1px solid rgba(36,245,111,.25);color:#24f56f;font-size:9px}.gx-yt-empty{padding:30px;text-align:center;color:var(--mut);font-size:9px}@media(max-width:1000px){.gx-yt-grid{grid-template-columns:1fr}}
</style>
@endpush

@section('content')
<div class="gx-yt">
 <div class="gx-yt-head"><div><h2>Youtubers / Lives</h2><p>Cadastre os canais que podem aparecer no grid YOUTUBERS ONLINE do Dashboard.</p></div></div>
 @if(session('success'))<div class="gx-yt-flash">{{ session('success') }}</div>@endif
 <div class="gx-yt-grid">
  <section class="gx-yt-card">
   <h3>+ Adicionar youtuber</h3>
   <form class="gx-yt-form" method="POST" action="{{ route('admin.youtubers.store') }}">@csrf
    <div><label>Nome do canal</label><input name="channel_name" required maxlength="120" placeholder="Ex.: x0r1n"></div>
    <div><label>URL do YouTube / Live</label><input name="youtube_url" required maxlength="500" placeholder="https://www.youtube.com/@canal"></div>
    <div><label>Foto / Avatar (URL)</label><input name="avatar_url" maxlength="500" placeholder="https://..."></div>
    <div><label>Título da transmissão</label><input name="stream_title" maxlength="180" placeholder="Jogando Crossfire ao vivo"></div>
    <div><label>Ordem</label><input type="number" name="sort_order" value="0" min="0" max="999"></div>
    <div class="gx-yt-checks"><label class="gx-yt-check"><input type="checkbox" name="active" value="1" checked> ATIVO</label><label class="gx-yt-check"><input type="checkbox" name="is_live" value="1"> AO VIVO</label></div>
    <button class="gx-yt-btn" type="submit">SALVAR YOUTUBER</button>
   </form>
  </section>
  <section class="gx-yt-card">
   <h3>Canais cadastrados</h3>
   @if($youtubers->count())
   <div style="overflow:auto"><table class="gx-yt-table"><thead><tr><th>Canal</th><th>Status</th><th>Exibição</th><th>Ordem</th><th>Ações</th></tr></thead><tbody>
   @foreach($youtubers as $yt)<tr>
    <td><div class="gx-yt-user">@if($yt->avatar_url)<img class="gx-yt-avatar" src="{{ $yt->avatar_url }}" alt="">@else<div class="gx-yt-avatar"></div>@endif<div><b>{{ $yt->channel_name }}</b><br><small>{{ $yt->stream_title ?: 'Sem título' }}</small></div></div></td>
    <td><span class="gx-yt-dot {{ $yt->is_live ? 'live':'' }}"></span> {{ $yt->is_live ? 'AO VIVO':'OFFLINE' }}</td><td>{{ $yt->active ? 'ATIVO':'OCULTO' }}</td><td>{{ $yt->sort_order }}</td>
    <td><div class="gx-yt-actions"><a class="gx-yt-mini" href="{{ $yt->youtube_url }}" target="_blank">ABRIR</a><form method="POST" action="{{ route('admin.youtubers.live',$yt->id) }}">@csrf<button class="gx-yt-mini live">{{ $yt->is_live?'FICAR OFF':'MARCAR LIVE' }}</button></form><form method="POST" action="{{ route('admin.youtubers.active',$yt->id) }}">@csrf<button class="gx-yt-mini">{{ $yt->active?'OCULTAR':'ATIVAR' }}</button></form><form method="POST" action="{{ route('admin.youtubers.destroy',$yt->id) }}" onsubmit="return confirm('Remover este youtuber?')">@csrf @method('DELETE')<button class="gx-yt-mini del">EXCLUIR</button></form></div></td>
   </tr>@endforeach
   </tbody></table></div>
   @else<div class="gx-yt-empty">Nenhum youtuber cadastrado.</div>@endif
  </section>
 </div>
</div>
@endsection