@extends('admin.layout')
@section('title', 'Tambah Video')

@section('content')
<h2 style="font-size:18px; color:#fff; margin-bottom:20px;">➕ Tambah Video</h2>

@if($errors->any())
    <div class="alert alert-error">
        <ul style="margin-left:16px">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.videos.store') }}">
    @csrf

    <div class="form-group">
        <label for="title">Title *</label>
        <input type="text" id="title" name="title" class="form-control" value="{{ old('title') }}" required>
    </div>

    <div class="form-group">
        <label for="description">Description (opsional)</label>
        <textarea id="description" name="description" class="form-control" rows="3" placeholder="Kosongkan untuk otomatis isi sama dengan title">{{ old('description') }}</textarea>
        <div class="form-hint">Jika kosong, description otomatis menggunakan title.</div>
    </div>

    <div class="form-group">
        <label for="embed_url">Embed URL *</label>
        <input type="url" id="embed_url" name="embed_url" class="form-control" value="{{ old('embed_url') }}" placeholder="https://provider.com/embed/xxx" required>
        <div class="form-hint">URL embed/player dari provider video (Dood, Filemoon, Strmup, dll)</div>
    </div>

    <div class="form-group">
        <label for="provider">Provider *</label>
        <select id="provider" name="provider" class="form-control" style="max-width:300px">
            <option value="">-- Pilih Provider --</option>
            @foreach($providers as $provider)
                <option value="{{ $provider }}" {{ old('provider') === $provider ? 'selected' : '' }}>{{ $provider }}</option>
            @endforeach
        </select>
        <div class="form-hint">
            Pilih dari provider yang tersedia.
            <a href="{{ route('admin.videos.providers') }}" style="color:#6fafdf;">Lihat daftar provider</a>
        </div>
    </div>

    <div class="form-group">
        <label for="provider_custom">Provider custom (opsional)</label>
        <input type="text" id="provider_custom" name="provider_custom" class="form-control" value="{{ old('provider_custom') }}" placeholder="Masukkan provider custom jika tidak ada di daftar">
        <div class="form-hint">Isi jika provider tidak ada di daftar. Jika diisi, nilai ini akan digunakan sebagai `provider`.</div>
    </div>

    <div class="form-group">
        <label for="play_mode">Play Mode *</label>
        <select id="play_mode" name="play_mode" class="form-control" style="max-width:200px">
            <option value="auto" {{ old('play_mode', 'auto') === 'auto' ? 'selected' : '' }}>Auto (extract + fallback)</option>
            <option value="hls" {{ old('play_mode') === 'hls' ? 'selected' : '' }}>HLS (paksa extract)</option>
            <option value="iframe" {{ old('play_mode') === 'iframe' ? 'selected' : '' }}>Iframe (langsung embed)</option>
        </select>
        <div class="form-hint">Auto = coba extract HLS, fallback ke iframe jika gagal</div>
    </div>

    <div class="form-group">
        <label for="thumbnail_url">Thumbnail URL (opsional)</label>
        <input type="url" id="thumbnail_url" name="thumbnail_url" class="form-control" value="{{ old('thumbnail_url') }}" placeholder="https://example.com/thumb.jpg">
        <div class="form-hint">URL gambar thumbnail. Akan didownload & disimpan ke local storage. Kosongkan jika tidak ada.</div>
    </div>

    <div class="form-group">
        <label>Kategori</label>
        @if($categories->count() > 0)
            <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; max-width:700px;">
                @foreach($categories as $category)
                    <label style="display:flex; align-items:center; gap:6px; font-size:13px; color:#ccc;">
                        <input type="checkbox" name="category_ids[]" value="{{ $category->id }}" {{ in_array($category->id, old('category_ids', [])) ? 'checked' : '' }}>
                        <span>{{ $category->name }}</span>
                    </label>
                @endforeach
            </div>
        @else
            <div class="form-hint">Belum ada kategori. Tambah dulu di halaman Setting Kategori.</div>
        @endif
    </div>

    <div class="form-group">
        <label>Tags</label>
        @if($tags->count() > 0)
            <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; max-width:700px;">
                @foreach($tags as $tag)
                    <label style="display:flex; align-items:center; gap:6px; font-size:13px; color:#ccc;">
                        <input type="checkbox" name="tag_ids[]" value="{{ $tag->id }}" {{ in_array($tag->id, old('tag_ids', [])) ? 'checked' : '' }}>
                        <span>{{ $tag->name }}</span>
                    </label>
                @endforeach
            </div>
        @else
            <div class="form-hint">Belum ada tag. Tambah dulu di halaman Setting Tags.</div>
        @endif
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Simpan Video</button>
        <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">Batal</a>
    </div>
</form>

<script>
// Auto-detect provider from URL
document.getElementById('embed_url').addEventListener('blur', function() {
    const providerField = document.getElementById('provider');
    if (providerField.value) return; // don't overwrite manual input

    try {
        const url = new URL(this.value);
        const host = url.hostname.toLowerCase();
        const map = {
            'dood': 'dood', 'd0o0d': 'dood', 'dooood': 'dood',
            'filemoon': 'filemoon', 'streamwish': 'streamwish',
            'vidhide': 'vidhide', 'vidguard': 'vidguard',
            'mp4upload': 'mp4upload', 'streamtape': 'streamtape',
            'mixdrop': 'mixdrop', 'voe': 'voe',
            'upstream': 'upstream', 'strmup': 'strmup', 'cdnup': 'strmup',
            'xhamster': 'xhamster', 'xvideos': 'xvideos',
        };
        for (const [key, val] of Object.entries(map)) {
            if (host.includes(key)) { providerField.value = val; return; }
        }
        providerField.value = 'generic';
    } catch(e) {}
});

// If user starts typing custom provider, clear the select to avoid confusion
// When user types a custom provider, disable the select to avoid confusion
const providerSelect = document.getElementById('provider');
const providerCustom = document.getElementById('provider_custom');
providerCustom.addEventListener('input', function() {
    if (this.value && !providerSelect.disabled) {
        providerSelect.value = '';
        providerSelect.disabled = true;
    } else if (!this.value && providerSelect.disabled) {
        providerSelect.disabled = false;
    }
});

// Prevent auto-detect from overwriting when custom provider is present
document.getElementById('embed_url').addEventListener('blur', function() {
    if (providerCustom.value) return;
    const providerField = providerSelect;
    if (providerField.value) return; // don't overwrite manual input

    try {
        const url = new URL(this.value);
        const host = url.hostname.toLowerCase();
        const map = {
            'dood': 'dood', 'd0o0d': 'dood', 'dooood': 'dood',
            'filemoon': 'filemoon', 'streamwish': 'streamwish',
            'vidhide': 'vidhide', 'vidguard': 'vidguard',
            'mp4upload': 'mp4upload', 'streamtape': 'streamtape',
            'mixdrop': 'mixdrop', 'voe': 'voe',
            'upstream': 'upstream', 'strmup': 'strmup', 'cdnup': 'strmup',
            'xhamster': 'xhamster', 'xvideos': 'xvideos',
        };
        for (const [key, val] of Object.entries(map)) {
            if (host.includes(key)) { providerField.value = val; return; }
        }
        providerField.value = 'generic';
    } catch(e) {}
});
</script>
@endsection