@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