254 lines
13 KiB
PHP
254 lines
13 KiB
PHP
@extends('frontend.layouts.app')
|
||
@section('title', 'Mahkeme: ' . Str::limit($tribunal->question, 60) . ' | Animexe')
|
||
@php
|
||
// Sabit renk paleti — a,b,c,d,e,f
|
||
$palette = [
|
||
'a' => ['bg'=>'rgba(0,200,100,.08)', 'bg2'=>'rgba(0,200,100,.22)', 'border'=>'rgba(0,200,100,.25)', 'border2'=>'#00c864', 'text'=>'#00c864', 'bar'=>'#00c864'],
|
||
'b' => ['bg'=>'rgba(255,60,60,.08)', 'bg2'=>'rgba(255,60,60,.22)', 'border'=>'rgba(255,60,60,.25)', 'border2'=>'#ff3c3c', 'text'=>'#ff3c3c', 'bar'=>'#ff3c3c'],
|
||
'c' => ['bg'=>'rgba(59,130,246,.08)', 'bg2'=>'rgba(59,130,246,.22)', 'border'=>'rgba(59,130,246,.25)', 'border2'=>'#3b82f6', 'text'=>'#3b82f6', 'bar'=>'#3b82f6'],
|
||
'd' => ['bg'=>'rgba(245,158,11,.08)', 'bg2'=>'rgba(245,158,11,.22)', 'border'=>'rgba(245,158,11,.25)', 'border2'=>'#f59e0b', 'text'=>'#f59e0b', 'bar'=>'#f59e0b'],
|
||
'e' => ['bg'=>'rgba(167,139,250,.08)','bg2'=>'rgba(167,139,250,.22)','border'=>'rgba(167,139,250,.25)','border2'=>'#a78bfa','text'=>'#a78bfa','bar'=>'#a78bfa'],
|
||
'f' => ['bg'=>'rgba(236,72,153,.08)', 'bg2'=>'rgba(236,72,153,.22)', 'border'=>'rgba(236,72,153,.25)', 'border2'=>'#ec4899','text'=>'#ec4899','bar'=>'#ec4899'],
|
||
];
|
||
$cols = count($allSides) <= 2 ? '1fr 1fr' : (count($allSides) <= 3 ? '1fr 1fr 1fr' : 'repeat(auto-fit,minmax(140px,1fr))');
|
||
@endphp
|
||
@push('styles')
|
||
<style>
|
||
.tb-wrap{max-width:900px;margin:0 auto;padding:calc(var(--nav-h) + 32px) 20px 60px}
|
||
.tb-anime-link{font-size:.75rem;color:rgba(255,45,125,.8);font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;display:inline-block;margin-bottom:12px}
|
||
.tb-question{font-size:1.5rem;font-weight:900;line-height:1.35;margin-bottom:14px}
|
||
.tb-status{display:inline-block;padding:3px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:20px}
|
||
.tb-status.open{background:rgba(0,200,100,.15);color:#00c864;border:1px solid rgba(0,200,100,.25)}
|
||
.tb-status.closed{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.1)}
|
||
|
||
/* Vote Card */
|
||
.tb-votebar{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;margin-bottom:24px}
|
||
.tb-sides{display:grid;gap:10px;margin-bottom:20px;grid-template-columns:{{ $cols }}}
|
||
.tb-vote-btn{padding:13px 10px;border-radius:12px;border:2px solid transparent;cursor:pointer;font-weight:800;font-size:.88rem;font-family:inherit;transition:all .2s;text-align:center;line-height:1.3}
|
||
|
||
/* Multi-bar */
|
||
.tb-multibar{display:flex;flex-direction:column;gap:8px}
|
||
.tb-bar-row{display:flex;align-items:center;gap:10px}
|
||
.tb-bar-label{font-size:.72rem;font-weight:700;white-space:nowrap;min-width:80px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
|
||
.tb-bar-track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
|
||
.tb-bar-fill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(.22,1,.36,1)}
|
||
.tb-bar-pct{font-size:.72rem;color:rgba(255,255,255,.4);min-width:40px;text-align:right}
|
||
|
||
/* Arguments */
|
||
.tb-args{margin-top:28px}
|
||
.tb-args-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:16px}
|
||
.tb-arg-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px;margin-bottom:10px}
|
||
.tb-arg-side-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.68rem;font-weight:800;margin-bottom:8px}
|
||
.tb-arg-body{font-size:.9rem;line-height:1.5;margin-bottom:10px}
|
||
.tb-arg-meta{display:flex;align-items:center;gap:12px;font-size:.72rem;color:rgba(255,255,255,.3)}
|
||
.tb-arg-vote-btn{background:none;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:3px 12px;color:rgba(255,255,255,.4);cursor:pointer;font-size:.72rem;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
|
||
.tb-arg-vote-btn:hover,.tb-arg-vote-btn.on{background:rgba(255,215,0,.12);border-color:rgba(255,215,0,.3);color:#ffd700}
|
||
|
||
/* Argue form */
|
||
.tb-argue-form{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;margin-top:24px}
|
||
.tb-argue-title{font-size:.88rem;font-weight:700;margin-bottom:12px}
|
||
.tb-argue-sides{display:grid;gap:8px;margin-bottom:12px;grid-template-columns:{{ $cols }}}
|
||
.tb-argue-side-btn{padding:9px 8px;border-radius:10px;cursor:pointer;font-weight:700;font-size:.8rem;font-family:inherit;border:2px solid transparent;transition:all .15s;text-align:center}
|
||
textarea.tb-inp{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;color:#fff;font-size:.88rem;font-family:inherit;resize:none;outline:none;margin-bottom:10px;box-sizing:border-box}
|
||
.tb-submit-btn{padding:10px 24px;border-radius:10px;border:none;background:rgba(255,45,125,.2);color:#ff2d7d;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;transition:background .15s}
|
||
.tb-submit-btn:hover{background:rgba(255,45,125,.35)}
|
||
</style>
|
||
@endpush
|
||
@section('content')
|
||
<div class="tb-wrap">
|
||
|
||
<a class="tb-anime-link" href="{{ $tribunal->anime?->detailUrl ?? '#' }}">
|
||
<i class="bi bi-arrow-left"></i> {{ $tribunal->anime->title }}
|
||
</a>
|
||
|
||
<div class="tb-status {{ $tribunal->status }}">
|
||
{{ $tribunal->status === 'open' ? '🟢 Dava Açık' : '🔴 Dava Kapalı' }}
|
||
@if($tribunal->closes_at && $tribunal->status === 'open')
|
||
· {{ $tribunal->closes_at->diffForHumans() }} kapanıyor
|
||
@endif
|
||
</div>
|
||
|
||
<div class="tb-question">{{ $tribunal->question }}</div>
|
||
|
||
{{-- Oy sistemi --}}
|
||
<div class="tb-votebar">
|
||
<div class="tb-sides">
|
||
@foreach($allSides as $key => $label)
|
||
@php $c = $palette[$key] ?? $palette['a']; @endphp
|
||
<button id="vote-{{ $key }}" class="tb-vote-btn"
|
||
style="background:{{ $c['bg'] }};color:{{ $c['text'] }};border-color:{{ $c['border'] }}"
|
||
data-bg="{{ $c['bg'] }}" data-bg2="{{ $c['bg2'] }}" data-border="{{ $c['border'] }}" data-border2="{{ $c['border2'] }}"
|
||
onclick="castVote('{{ $key }}')">
|
||
{{ $label }}
|
||
<div style="font-size:.7rem;font-weight:400;opacity:.7;margin-top:3px">
|
||
<span id="vcnt-{{ $key }}">{{ $voteCounts[$key] ?? 0 }}</span> oy
|
||
· <span id="vpct-{{ $key }}">{{ $total > 0 ? round(($voteCounts[$key]??0)/$total*100) : 0 }}%</span>
|
||
</div>
|
||
</button>
|
||
@endforeach
|
||
</div>
|
||
|
||
{{-- Çok taraflı bar --}}
|
||
<div class="tb-multibar">
|
||
@foreach($allSides as $key => $label)
|
||
@php $c = $palette[$key] ?? $palette['a']; $pct = $total > 0 ? round(($voteCounts[$key]??0)/$total*100) : 0; @endphp
|
||
<div class="tb-bar-row">
|
||
<div class="tb-bar-label" style="color:{{ $c['text'] }}">{{ $label }}</div>
|
||
<div class="tb-bar-track">
|
||
<div class="tb-bar-fill" id="bar-{{ $key }}" style="width:{{ $pct }}%;background:{{ $c['bar'] }}"></div>
|
||
</div>
|
||
<div class="tb-bar-pct" id="bpct-{{ $key }}">{{ $pct }}%</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
<div style="margin-top:10px;font-size:.72rem;color:rgba(255,255,255,.25)">
|
||
Toplam <span id="total-votes">{{ $total }}</span> oy
|
||
@auth @if($myVote) · <span style="color:rgba(255,255,255,.5)">Oyunuz: <strong>{{ $allSides[$myVote] ?? $myVote }}</strong></span> @endif @endauth
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Argümanlar --}}
|
||
<div class="tb-args">
|
||
<div class="tb-args-title"><i class="bi bi-chat-quote"></i> Argümanlar</div>
|
||
<div id="arg-list">
|
||
@forelse($arguments as $arg)
|
||
@php $c2 = $palette[$arg['side']] ?? $palette['a']; @endphp
|
||
<div class="tb-arg-card" id="arg-{{ $arg['id'] }}">
|
||
<span class="tb-arg-side-badge"
|
||
style="background:{{ $c2['bg'] }};color:{{ $c2['text'] }}">{{ $allSides[$arg['side']] ?? $arg['side'] }}</span>
|
||
<div class="tb-arg-body">{{ $arg['body'] }}</div>
|
||
<div class="tb-arg-meta">
|
||
<span>{{ $arg['name'] ?? $arg['username'] }}</span>
|
||
<span>{{ $arg['created_at'] }}</span>
|
||
<button class="tb-arg-vote-btn {{ $arg['voted'] ? 'on' : '' }}" id="avgbtn-{{ $arg['id'] }}"
|
||
onclick="argVote({{ $arg['id'] }})">
|
||
<i class="bi bi-hand-thumbs-up"></i>
|
||
<span id="avgcnt-{{ $arg['id'] }}">{{ $arg['vote_count'] }}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
@empty
|
||
<div id="no-args" style="text-align:center;padding:30px;color:rgba(255,255,255,.25);font-size:.85rem">
|
||
Henüz argüman girilmemiş. İlk sen gir!
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Argüman formu --}}
|
||
@auth
|
||
@if(!$myArgument && $tribunal->status === 'open')
|
||
<div class="tb-argue-form">
|
||
<div class="tb-argue-title">⚔️ Senin Argümanın — Hangi taraftasın?</div>
|
||
<div class="tb-argue-sides">
|
||
@foreach($allSides as $key => $label)
|
||
@php $c3 = $palette[$key] ?? $palette['a']; @endphp
|
||
<button id="arg-side-{{ $key }}" class="tb-argue-side-btn"
|
||
style="background:{{ $c3['bg'] }};color:{{ $c3['text'] }};border-color:{{ $c3['border'] }}"
|
||
data-bg="{{ $c3['bg'] }}" data-bg2="{{ $c3['bg2'] }}" data-border="{{ $c3['border'] }}" data-border2="{{ $c3['border2'] }}"
|
||
onclick="selectArgSide('{{ $key }}')">{{ $label }}</button>
|
||
@endforeach
|
||
</div>
|
||
<textarea class="tb-inp" id="arg-body" rows="3" maxlength="500" placeholder="Argümanını yaz (min 10, max 500 karakter)..."></textarea>
|
||
<div id="arg-err" style="color:#ff4444;font-size:.78rem;margin-bottom:8px;display:none"></div>
|
||
<button class="tb-submit-btn" onclick="submitArg()">Argümanı Gönder</button>
|
||
</div>
|
||
@elseif($myArgument)
|
||
<div style="padding:14px;background:rgba(0,200,100,.06);border:1px solid rgba(0,200,100,.2);border-radius:12px;font-size:.85rem;color:rgba(255,255,255,.5);margin-top:24px">
|
||
✅ Argümanınızı gönderdiniz.
|
||
</div>
|
||
@endif
|
||
@else
|
||
<div style="margin-top:20px;text-align:center;font-size:.85rem;color:rgba(255,255,255,.3)">
|
||
<a href="{{ route('frontend.login') }}" style="color:#ff2d7d">Giriş yap</a> — argüman girmek için
|
||
</div>
|
||
@endauth
|
||
|
||
</div>
|
||
@endsection
|
||
@push('scripts')
|
||
<script>
|
||
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
|
||
const IS_AUTH = {{ auth()->check() ? 'true' : 'false' }};
|
||
const MY_VOTE = {{ $myVote ? json_encode($myVote) : 'null' }};
|
||
let selectedArgSide = null;
|
||
|
||
// İlk yüklemede aktif oyu vurgula
|
||
if (MY_VOTE) activateVoteBtn(MY_VOTE);
|
||
|
||
function activateVoteBtn(side) {
|
||
document.querySelectorAll('.tb-vote-btn').forEach(b => {
|
||
const isMe = b.id === 'vote-' + side;
|
||
b.style.background = isMe ? b.dataset.bg2 : b.dataset.bg;
|
||
b.style.borderColor = isMe ? b.dataset.border2 : b.dataset.border;
|
||
});
|
||
}
|
||
|
||
function selectArgSide(s) {
|
||
selectedArgSide = s;
|
||
document.querySelectorAll('.tb-argue-side-btn').forEach(b => {
|
||
const isMe = b.id === 'arg-side-' + s;
|
||
b.style.background = isMe ? b.dataset.bg2 : b.dataset.bg;
|
||
b.style.borderColor = isMe ? b.dataset.border2 : b.dataset.border;
|
||
});
|
||
}
|
||
|
||
async function castVote(side) {
|
||
if (!IS_AUTH) { window.location.href = '{{ route('frontend.login') }}'; return; }
|
||
const r = await fetch('{{ route('tribunal.vote', $tribunal) }}', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
|
||
body: JSON.stringify({ side }),
|
||
});
|
||
const d = await r.json();
|
||
updateVoteBar(d.voted, d.counts, d.total);
|
||
}
|
||
|
||
function updateVoteBar(voted, counts, total) {
|
||
activateVoteBtn(voted);
|
||
document.getElementById('total-votes').textContent = total;
|
||
for (const [key, cnt] of Object.entries(counts)) {
|
||
const pct = total > 0 ? Math.round(cnt / total * 100) : 0;
|
||
const fill = document.getElementById('bar-' + key);
|
||
const pctEl = document.getElementById('bpct-' + key);
|
||
const vcnt = document.getElementById('vcnt-' + key);
|
||
const vpct = document.getElementById('vpct-' + key);
|
||
if (fill) fill.style.width = pct + '%';
|
||
if (pctEl) pctEl.textContent = pct + '%';
|
||
if (vcnt) vcnt.textContent = cnt;
|
||
if (vpct) vpct.textContent = pct + '%';
|
||
}
|
||
}
|
||
|
||
async function argVote(id) {
|
||
if (!IS_AUTH) { window.location.href = '{{ route('frontend.login') }}'; return; }
|
||
const r = await fetch(`/arguman/${id}/oy`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
|
||
body: JSON.stringify({}),
|
||
});
|
||
const d = await r.json();
|
||
document.getElementById('avgcnt-' + id).textContent = d.vote_count;
|
||
document.getElementById('avgbtn-' + id).classList.toggle('on', d.voted);
|
||
}
|
||
|
||
async function submitArg() {
|
||
const err = document.getElementById('arg-err');
|
||
const body = document.getElementById('arg-body').value.trim();
|
||
err.style.display = 'none';
|
||
if (!selectedArgSide) { err.textContent = 'Taraf seçin.'; err.style.display = 'block'; return; }
|
||
if (body.length < 10) { err.textContent = 'Argüman en az 10 karakter olmalı.'; err.style.display = 'block'; return; }
|
||
|
||
const r = await fetch('{{ route('tribunal.argue', $tribunal) }}', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
|
||
body: JSON.stringify({ side: selectedArgSide, body }),
|
||
});
|
||
const d = await r.json();
|
||
if (d.ok) window.location.reload();
|
||
else { err.textContent = d.error || 'Hata.'; err.style.display = 'block'; }
|
||
}
|
||
</script>
|
||
@endpush
|