214 lines
10 KiB
PHP
214 lines
10 KiB
PHP
@extends('frontend.layouts.app')
|
||
@section('title', 'Anime İsteği — Animexe')
|
||
|
||
@push('styles')
|
||
<style>
|
||
.req-hero{padding:60px 24px 32px;text-align:center;max-width:700px;margin:0 auto}
|
||
.req-hero h1{font-size:2rem;font-weight:800;color:var(--text);margin-bottom:8px}
|
||
.req-hero p{color:var(--text2);font-size:.95rem}
|
||
|
||
.req-wrap{max-width:900px;margin:0 auto;padding:0 20px 60px}
|
||
|
||
.req-form-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:32px}
|
||
.req-form-card h2{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:18px;display:flex;align-items:center;gap:8px}
|
||
|
||
.rf-field{margin-bottom:16px}
|
||
.rf-label{display:block;font-size:.8rem;color:var(--text2);margin-bottom:6px;font-weight:500}
|
||
.rf-input{width:100%;background:#0a0a14;border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-size:.9rem;transition:border-color .2s}
|
||
.rf-input:focus{outline:none;border-color:var(--accent)}
|
||
.rf-textarea{resize:vertical;min-height:80px}
|
||
.rf-submit{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 24px;background:var(--accent);border:none;border-radius:20px;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .2s}
|
||
.rf-submit:hover{opacity:.85}
|
||
|
||
.req-list-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
|
||
.req-list-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||
.req-list-head h2{font-size:.95rem;font-weight:700;color:var(--text);margin:0}
|
||
|
||
.req-item{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:flex-start;gap:16px;transition:background .15s}
|
||
.req-item:last-child{border-bottom:none}
|
||
.req-item:hover{background:rgba(255,255,255,.02)}
|
||
|
||
.req-vote{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px}
|
||
.req-vote-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:.95rem}
|
||
.req-vote-btn:hover,.req-vote-btn.voted{border-color:var(--accent);background:rgba(255,45,125,.12);color:var(--accent)}
|
||
.req-vote-cnt{font-size:.82rem;font-weight:700;color:var(--text2)}
|
||
|
||
.req-body{flex:1;min-width:0}
|
||
.req-title{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:3px}
|
||
.req-ori{font-size:.78rem;color:var(--text3);margin-bottom:6px}
|
||
.req-note{font-size:.78rem;color:var(--text2);margin-bottom:8px;line-height:1.5}
|
||
.req-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
|
||
.req-status{font-size:.7rem;padding:2px 10px;border-radius:20px;font-weight:600}
|
||
.req-by{font-size:.72rem;color:var(--text3)}
|
||
.req-admin-note{font-size:.75rem;color:#f0883e;margin-top:6px;display:flex;align-items:center;gap:5px}
|
||
|
||
.toast-msg{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#161b22;border:1px solid #30363d;border-radius:10px;padding:12px 20px;color:var(--text);font-size:.85rem;z-index:9999;animation:fadeInUp .3s ease;box-shadow:0 8px 24px rgba(0,0,0,.5)}
|
||
@keyframes fadeInUp{from{transform:translateX(-50%) translateY(10px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
<div style="padding-top:var(--nav-h)">
|
||
|
||
<div class="req-hero">
|
||
<h1><i class="bi bi-plus-circle" style="color:var(--accent)"></i> Anime İsteği</h1>
|
||
<p>İzlemek istediğin ama sitede olmayan bir anime var mı? Buradan bildir, en çok istenen animeleri ekliyoruz.</p>
|
||
</div>
|
||
|
||
<div class="req-wrap">
|
||
|
||
{{-- İstek formu (sadece üyeler) --}}
|
||
@auth
|
||
<div class="req-form-card" id="req-form-card">
|
||
<h2><i class="bi bi-send" style="color:var(--accent)"></i> Yeni İstek Gönder</h2>
|
||
<div id="req-success" style="display:none;background:rgba(63,185,80,.1);border:1px solid #3fb95040;border-radius:8px;padding:12px 16px;color:#3fb950;font-size:.88rem;margin-bottom:16px"></div>
|
||
<div class="rf-field">
|
||
<label class="rf-label">Anime Adı (Türkçe veya bilinen ismi) *</label>
|
||
<input id="rf-title" type="text" class="rf-input" placeholder="örn: Demon Slayer" maxlength="200">
|
||
</div>
|
||
<div class="rf-field">
|
||
<label class="rf-label">Orijinal / İngilizce Adı</label>
|
||
<input id="rf-ori" type="text" class="rf-input" placeholder="örn: Kimetsu no Yaiba" maxlength="200">
|
||
</div>
|
||
<div class="rf-field">
|
||
<label class="rf-label">Not / Açıklama</label>
|
||
<textarea id="rf-note" class="rf-input rf-textarea" placeholder="Hangi sezon, neden istiyorsun? vs."></textarea>
|
||
</div>
|
||
<button class="rf-submit" id="rf-btn" onclick="submitRequest()">
|
||
<i class="bi bi-send-fill"></i> İstek Gönder
|
||
</button>
|
||
</div>
|
||
@else
|
||
<div style="background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;text-align:center;margin-bottom:32px">
|
||
<i class="bi bi-lock" style="font-size:2rem;color:var(--text3);margin-bottom:12px;display:block"></i>
|
||
<p style="color:var(--text2);margin-bottom:16px">Anime isteği göndermek için giriş yapman gerekiyor.</p>
|
||
<a href="{{ route('frontend.login') }}" style="padding:10px 24px;background:var(--accent);border-radius:20px;color:#fff;font-weight:600;text-decoration:none;font-size:.88rem">Giriş Yap</a>
|
||
<a href="{{ route('frontend.register') }}" style="padding:10px 24px;background:#21262d;border-radius:20px;color:var(--text2);font-weight:600;text-decoration:none;font-size:.88rem;margin-left:8px">Kayıt Ol</a>
|
||
</div>
|
||
@endauth
|
||
|
||
{{-- İstekler listesi --}}
|
||
<div class="req-list-card">
|
||
<div class="req-list-head">
|
||
<h2><i class="bi bi-list-ul" style="color:var(--accent);margin-right:6px"></i>Tüm İstekler</h2>
|
||
<span style="font-size:.78rem;color:var(--text3)">{{ $requests->total() }} istek</span>
|
||
</div>
|
||
|
||
@forelse($requests as $req)
|
||
@php
|
||
$st = \App\Models\AnimeRequest::STATUSES[$req->status] ?? ['label'=>$req->status,'color'=>'#8b949e'];
|
||
$hasVoted = in_array($req->id, $votedIds);
|
||
@endphp
|
||
<div class="req-item">
|
||
<div class="req-vote">
|
||
@auth
|
||
<button class="req-vote-btn {{ $hasVoted?'voted':'' }}" id="vote-btn-{{ $req->id }}" onclick="voteRequest({{ $req->id }})">
|
||
<i class="bi bi-heart{{ $hasVoted?'-fill':'' }}" id="vote-icon-{{ $req->id }}"></i>
|
||
</button>
|
||
@else
|
||
<a href="{{ route('frontend.login') }}" class="req-vote-btn"><i class="bi bi-heart"></i></a>
|
||
@endauth
|
||
<span class="req-vote-cnt" id="vote-cnt-{{ $req->id }}">{{ $req->vote_count }}</span>
|
||
</div>
|
||
<div class="req-body">
|
||
<div class="req-title">{{ $req->title }}</div>
|
||
@if($req->original_title)<div class="req-ori">{{ $req->original_title }}</div>@endif
|
||
@if($req->note)<div class="req-note">{{ Str::limit($req->note, 150) }}</div>@endif
|
||
<div class="req-meta">
|
||
<span class="req-status" style="background:{{ $st['color'] }}22;color:{{ $st['color'] }};border:1px solid {{ $st['color'] }}44">{{ $st['label'] }}</span>
|
||
@if($req->user)<span class="req-by">{{ $req->user->name }} tarafından istendi</span>@endif
|
||
<span class="req-by">· {{ $req->created_at->diffForHumans() }}</span>
|
||
</div>
|
||
@if($req->admin_note)
|
||
<div class="req-admin-note"><i class="bi bi-shield-check"></i> {{ $req->admin_note }}</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
@empty
|
||
<div style="padding:40px;text-align:center;color:var(--text3)">Henüz istek yok. İlk isteği sen gönder!</div>
|
||
@endforelse
|
||
</div>
|
||
|
||
<div class="mt-4">{{ $requests->links() }}</div>
|
||
</div>
|
||
|
||
</div>
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script>
|
||
const CSRF = document.querySelector('meta[name=csrf-token]')?.content||'';
|
||
|
||
async function submitRequest() {
|
||
const title = document.getElementById('rf-title').value.trim();
|
||
if (!title) { showToast('Anime adı zorunlu!'); return; }
|
||
|
||
const btn = document.getElementById('rf-btn');
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Gönderiliyor...';
|
||
|
||
try {
|
||
const res = await fetch('{{ route("anime.request.store") }}', {
|
||
method:'POST',
|
||
headers:{'Content-Type':'application/json','X-CSRF-TOKEN':CSRF},
|
||
body: JSON.stringify({
|
||
title,
|
||
original_title: document.getElementById('rf-ori').value.trim(),
|
||
note: document.getElementById('rf-note').value.trim(),
|
||
})
|
||
});
|
||
const d = await res.json();
|
||
const msg = d.merged
|
||
? `Bu anime zaten istekler listesinde! Oyun eklendi (toplam: ${d.vote_count} oy).`
|
||
: `İsteğin gönderildi! Teşekkürler 🎉`;
|
||
document.getElementById('req-success').style.display = 'block';
|
||
document.getElementById('req-success').textContent = msg;
|
||
document.getElementById('rf-title').value = '';
|
||
document.getElementById('rf-ori').value = '';
|
||
document.getElementById('rf-note').value = '';
|
||
setTimeout(()=>location.reload(), 2000);
|
||
} catch(e) {
|
||
showToast('Bir hata oluştu, tekrar dene.');
|
||
}
|
||
|
||
btn.disabled = false;
|
||
btn.innerHTML = '<i class="bi bi-send-fill"></i> İstek Gönder';
|
||
}
|
||
|
||
async function voteRequest(id) {
|
||
const btn = document.getElementById(`vote-btn-${id}`);
|
||
const ico = document.getElementById(`vote-icon-${id}`);
|
||
if (btn) btn.disabled = true;
|
||
try {
|
||
const res = await fetch(`/anime-request/${id}/vote`, {
|
||
method:'POST',
|
||
headers:{'Content-Type':'application/json','X-CSRF-TOKEN':CSRF},
|
||
body:'{}'
|
||
});
|
||
if (res.status === 401) { window.location = '{{ route("frontend.login") }}'; return; }
|
||
if (!res.ok) { showToast('Bir hata oluştu.'); return; }
|
||
const d = await res.json();
|
||
document.getElementById(`vote-cnt-${id}`).textContent = d.vote_count;
|
||
if (d.voted) {
|
||
btn.classList.add('voted');
|
||
ico.className = 'bi bi-heart-fill';
|
||
} else {
|
||
btn.classList.remove('voted');
|
||
ico.className = 'bi bi-heart';
|
||
}
|
||
} catch(e) {
|
||
showToast('Bağlantı hatası, tekrar dene.');
|
||
}
|
||
if (btn) btn.disabled = false;
|
||
}
|
||
|
||
function showToast(msg) {
|
||
const t = document.createElement('div');
|
||
t.className='toast-msg';
|
||
t.textContent=msg;
|
||
document.body.appendChild(t);
|
||
setTimeout(()=>t.remove(), 3000);
|
||
}
|
||
</script>
|
||
@endpush
|