335 lines
15 KiB
PHP
335 lines
15 KiB
PHP
@extends('admin.layouts.app')
|
||
@section('title', 'Anime Ekle')
|
||
@section('page-title', 'Anime Ekle')
|
||
|
||
@push('styles')
|
||
<style>
|
||
.cover-preview {
|
||
width:100%; aspect-ratio:2/3; object-fit:cover;
|
||
border-radius:var(--radius-sm); display:block;
|
||
}
|
||
.cover-placeholder {
|
||
width:100%; aspect-ratio:2/3;
|
||
background:var(--surface);
|
||
border:2px dashed var(--border2);
|
||
border-radius:var(--radius-sm);
|
||
display:flex; flex-direction:column;
|
||
align-items:center; justify-content:center;
|
||
gap:8px; color:var(--text3); font-size:13px;
|
||
cursor:pointer; transition:border-color .15s, background .15s;
|
||
}
|
||
.cover-placeholder:hover { border-color:var(--accent); background:var(--accent-dim); color:var(--accent-lt); }
|
||
.banner-placeholder {
|
||
width:100%; aspect-ratio:16/5;
|
||
background:var(--surface);
|
||
border:2px dashed var(--border2);
|
||
border-radius:var(--radius-sm);
|
||
display:flex; align-items:center; justify-content:center;
|
||
gap:8px; color:var(--text3); font-size:13px;
|
||
cursor:pointer; transition:border-color .15s, background .15s;
|
||
}
|
||
.banner-placeholder:hover { border-color:var(--accent); background:var(--accent-dim); color:var(--accent-lt); }
|
||
.section-card {
|
||
background:var(--bg2);
|
||
border:1px solid var(--border);
|
||
border-radius:var(--radius);
|
||
margin-bottom:16px;
|
||
overflow:hidden;
|
||
}
|
||
.section-header {
|
||
display:flex; align-items:center; gap:10px;
|
||
padding:14px 20px;
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
.section-header h6 {
|
||
font-size:13.5px; font-weight:700;
|
||
color:var(--text); margin:0;
|
||
}
|
||
.section-body { padding:20px; }
|
||
.genre-chip {
|
||
display:inline-flex; align-items:center; gap:6px;
|
||
padding:5px 12px; border-radius:99px;
|
||
border:1px solid var(--border2);
|
||
background:transparent;
|
||
color:var(--text2); font-size:12.5px; font-weight:600;
|
||
cursor:pointer; transition:all .15s; user-select:none;
|
||
}
|
||
.genre-chip input { display:none; }
|
||
.genre-chip:has(input:checked) {
|
||
background:var(--accent-dim);
|
||
border-color:var(--accent);
|
||
color:var(--accent-lt);
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
|
||
{{-- Breadcrumb --}}
|
||
<nav class="mb-4">
|
||
<a href="{{ route('admin.animes.index') }}" class="btn btn-secondary btn-sm">
|
||
<i class="bi bi-arrow-left"></i> Animelere Dön
|
||
</a>
|
||
</nav>
|
||
|
||
<form method="POST" action="{{ route('admin.animes.store') }}" enctype="multipart/form-data" id="anime-form">
|
||
@csrf
|
||
|
||
<div class="row g-4">
|
||
|
||
{{-- ── Sol: Form Alanları ── --}}
|
||
<div class="col-xl-8 col-lg-7">
|
||
|
||
{{-- Temel Bilgiler --}}
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<i class="bi bi-info-circle" style="color:var(--accent-lt)"></i>
|
||
<h6>Temel Bilgiler</h6>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="mb-4">
|
||
<label class="form-label">Türkçe Başlık <span style="color:var(--danger)">*</span></label>
|
||
<input type="text" name="title" class="form-control form-control-lg" value="{{ old('title') }}" placeholder="Anime adını girin..." required style="font-size:15px;font-weight:600">
|
||
</div>
|
||
<div class="row g-3 mb-4">
|
||
<div class="col-md-6">
|
||
<label class="form-label">İngilizce Başlık</label>
|
||
<input type="text" name="title_en" class="form-control" value="{{ old('title_en') }}" placeholder="English title...">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">Japonca Başlık</label>
|
||
<input type="text" name="title_jp" class="form-control" value="{{ old('title_jp') }}" placeholder="日本語タイトル...">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="form-label">Açıklama</label>
|
||
<textarea name="description" class="form-control" rows="5" placeholder="Anime hakkında kısa açıklama...">{{ old('description') }}</textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Detaylar --}}
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<i class="bi bi-sliders" style="color:var(--info)"></i>
|
||
<h6>Detaylar</h6>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<label class="form-label">Tip <span style="color:var(--danger)">*</span></label>
|
||
<select name="type" class="form-select" required>
|
||
<option value="series" {{ old('type')=='series' ?'selected':'' }}>Dizi (Series)</option>
|
||
<option value="movie" {{ old('type')=='movie' ?'selected':'' }}>Film (Movie)</option>
|
||
<option value="ova" {{ old('type')=='ova' ?'selected':'' }}>OVA</option>
|
||
<option value="ona" {{ old('type')=='ona' ?'selected':'' }}>ONA</option>
|
||
<option value="special" {{ old('type')=='special' ?'selected':'' }}>Special</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label class="form-label">Durum <span style="color:var(--danger)">*</span></label>
|
||
<select name="status" class="form-select" required>
|
||
<option value="ongoing" {{ old('status','ongoing')=='ongoing' ?'selected':'' }}>Devam Ediyor</option>
|
||
<option value="completed" {{ old('status')=='completed' ?'selected':'' }}>Tamamlandı</option>
|
||
<option value="upcoming" {{ old('status')=='upcoming' ?'selected':'' }}>Yakında</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label class="form-label">Yayın Yılı</label>
|
||
<input type="number" name="release_year" class="form-control" value="{{ old('release_year', date('Y')) }}" min="1900" max="2099">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">Stüdyo</label>
|
||
<input type="text" name="studio" class="form-control" value="{{ old('studio') }}" placeholder="Örn: MAPPA, WIT Studio...">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">MyAnimeList ID</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
|
||
<input type="number" name="mal_id" class="form-control" value="{{ old('mal_id') }}" placeholder="Örn: 16498">
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label">Fragman URL</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text"><i class="bi bi-youtube" style="color:#ff0000"></i></span>
|
||
<input type="url" name="trailer_url" class="form-control" value="{{ old('trailer_url') }}" placeholder="https://youtube.com/watch?v=...">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Türler --}}
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<i class="bi bi-tags" style="color:var(--warning)"></i>
|
||
<h6>Türler</h6>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="d-flex flex-wrap gap-2">
|
||
@foreach($genres as $genre)
|
||
<label class="genre-chip">
|
||
<input type="checkbox" name="genres[]" value="{{ $genre->id }}"
|
||
{{ in_array($genre->id, old('genres', [])) ? 'checked' : '' }}>
|
||
{{ $genre->name }}
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- İzin Ayarları --}}
|
||
@if(isset($permissions) && count($permissions))
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<i class="bi bi-shield-lock" style="color:var(--success)"></i>
|
||
<h6>İzin Ayarları</h6>
|
||
<span style="font-size:12px;color:var(--text2);margin-left:4px">— Bu anime için özel izinler</span>
|
||
</div>
|
||
<div class="section-body p-0">
|
||
@foreach($permissions as $perm)
|
||
<div class="perm-row">
|
||
<div>
|
||
<div class="perm-name">{{ $perm->label }}</div>
|
||
@if($perm->description)
|
||
<div class="perm-desc">{{ $perm->description }}</div>
|
||
@endif
|
||
</div>
|
||
<div class="perm-toggle">
|
||
<input type="radio" name="permissions[{{ $perm->key }}]"
|
||
id="perm_{{ $perm->key }}_free" value="free" checked>
|
||
<label for="perm_{{ $perm->key }}_free" class="free">Ücretsiz</label>
|
||
<input type="radio" name="permissions[{{ $perm->key }}]"
|
||
id="perm_{{ $perm->key }}_prem" value="premium">
|
||
<label for="perm_{{ $perm->key }}_prem" class="premium">Premium</label>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
|
||
{{-- ── Sağ: Görsel & Ayarlar ── --}}
|
||
<div class="col-xl-4 col-lg-5">
|
||
|
||
{{-- Kapak Görseli --}}
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<i class="bi bi-image" style="color:var(--info)"></i>
|
||
<h6>Kapak Görseli</h6>
|
||
</div>
|
||
<div class="section-body">
|
||
<input type="file" name="cover_image" id="cover-input" accept="image/*"
|
||
style="display:none" onchange="previewCover(this)">
|
||
<div onclick="document.getElementById('cover-input').click()" style="cursor:pointer">
|
||
<img id="cover-preview" class="cover-preview" src="" alt="" style="display:none">
|
||
<div class="cover-placeholder" id="cover-ph">
|
||
<i class="bi bi-cloud-upload" style="font-size:26px"></i>
|
||
<span>Kapak yükle</span>
|
||
<span style="font-size:11px;color:var(--text3)">Önerilen: 300×450px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Banner Görseli --}}
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<i class="bi bi-panorama" style="color:var(--info)"></i>
|
||
<h6>Banner Görseli</h6>
|
||
</div>
|
||
<div class="section-body">
|
||
<input type="file" name="banner_image" id="banner-input" accept="image/*"
|
||
style="display:none" onchange="previewBanner(this)">
|
||
<div onclick="document.getElementById('banner-input').click()" style="cursor:pointer">
|
||
<img id="banner-preview" style="width:100%;aspect-ratio:16/5;object-fit:cover;border-radius:var(--radius-sm);display:none" alt="">
|
||
<div class="banner-placeholder" id="banner-ph">
|
||
<i class="bi bi-cloud-upload" style="font-size:22px"></i>
|
||
<span>Banner yükle</span>
|
||
<span style="font-size:11px;color:var(--text3)">Önerilen: 1280×720px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Yayın Ayarları --}}
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<i class="bi bi-toggle-on" style="color:var(--success)"></i>
|
||
<h6>Yayın Ayarları</h6>
|
||
</div>
|
||
<div class="section-body d-flex flex-column gap-3">
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div>
|
||
<div style="font-size:13.5px;font-weight:600;color:var(--text)">Yayınla</div>
|
||
<div style="font-size:12px;color:var(--text2)">Kullanıcılara görünür yap</div>
|
||
</div>
|
||
<div class="form-check form-switch mb-0">
|
||
<input class="form-check-input" type="checkbox" name="is_published" value="1"
|
||
id="is_published" role="switch">
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div>
|
||
<div style="font-size:13.5px;font-weight:600;color:var(--text)">Öne Çıkar</div>
|
||
<div style="font-size:12px;color:var(--text2)">Ana sayfada öne çıkar</div>
|
||
</div>
|
||
<div class="form-check form-switch mb-0">
|
||
<input class="form-check-input" type="checkbox" name="is_featured" value="1"
|
||
id="is_featured" role="switch">
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div>
|
||
<div style="font-size:13.5px;font-weight:600;color:var(--text)">Türkçe Dublaj</div>
|
||
<div style="font-size:12px;color:var(--text2)">Ana sayfada Dublaj bölümünde göster</div>
|
||
</div>
|
||
<div class="form-check form-switch mb-0">
|
||
<input class="form-check-input" type="checkbox" name="is_dubbed" value="1"
|
||
id="is_dubbed" role="switch">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Kaydet --}}
|
||
<button type="submit" class="btn btn-primary w-100 btn-lg">
|
||
<i class="bi bi-plus-circle"></i> Anime Ekle
|
||
</button>
|
||
<a href="{{ route('admin.animes.index') }}" class="btn btn-secondary w-100 mt-2">
|
||
İptal
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</form>
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script>
|
||
function previewCover(input) {
|
||
if (!input.files[0]) return;
|
||
const reader = new FileReader();
|
||
reader.onload = e => {
|
||
document.getElementById('cover-preview').src = e.target.result;
|
||
document.getElementById('cover-preview').style.display = 'block';
|
||
document.getElementById('cover-ph').style.display = 'none';
|
||
};
|
||
reader.readAsDataURL(input.files[0]);
|
||
}
|
||
function previewBanner(input) {
|
||
if (!input.files[0]) return;
|
||
const reader = new FileReader();
|
||
reader.onload = e => {
|
||
document.getElementById('banner-preview').src = e.target.result;
|
||
document.getElementById('banner-preview').style.display = 'block';
|
||
document.getElementById('banner-ph').style.display = 'none';
|
||
};
|
||
reader.readAsDataURL(input.files[0]);
|
||
}
|
||
</script>
|
||
@endpush
|