@extends('admin.layout')
@section('title', 'Import from Storage')

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

<div style="background:#1a2a3a; border:1px solid #2a3a4a; border-radius:6px; padding:12px 16px; margin-bottom:20px; font-size:13px; color:#6fafdf;">
    <strong>Import ≠ Upload.</strong> Fitur ini mendaftarkan file yang <u>sudah ada</u> di cloud storage. Laravel TIDAK mendownload atau memindahkan file apapun — hanya membuat pointer di database.
</div>

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

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

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

    {{-- Slug --}}
    <div class="form-group">
        <label for="slug">Slug</label>
        <input type="text" id="slug" name="slug" class="form-control" value="{{ old('slug') }}" style="max-width:300px">
        <div class="form-hint">Opsional. Jika kosong, slug 8 karakter akan digenerate otomatis.</div>
    </div>

    {{-- Storage Driver --}}
    <div class="form-group">
        <label for="storage_driver">Storage Driver *</label>
        <select id="storage_driver" name="storage_driver" class="form-control" style="max-width:200px" required>
            @foreach($drivers as $driver => $label)
                <option value="{{ $driver }}" {{ old('storage_driver', config('video_storage.default_driver')) === $driver ? 'selected' : '' }}>
                    {{ $label }}
                </option>
            @endforeach
        </select>
        <div class="form-hint">Pilih cloud storage provider tempat file berada.</div>
    </div>

    {{-- Asset Type --}}
    <div class="form-group">
        <label for="asset_type">Tipe Asset *</label>
        <select id="asset_type" name="asset_type" class="form-control" style="max-width:200px" required onchange="toggleEncodeOption()">
            <option value="mp4" {{ old('asset_type') === 'mp4' ? 'selected' : '' }}>MP4 (Single file)</option>
            <option value="hls" {{ old('asset_type') === 'hls' ? 'selected' : '' }}>HLS (Playlist .m3u8)</option>
        </select>
    </div>

    {{-- Asset Path --}}
    <div class="form-group">
        <label for="asset_path">Asset Path *</label>
        <div style="display:flex; gap:8px; align-items:center; margin-bottom:6px;">
            <select id="prefix_select" class="form-control" style="max-width:200px; font-size:13px;"
                    onchange="applyPrefixToPath()">
                <option value="">— Pilih Prefix —</option>
            </select>
            <button type="button" class="btn btn-sm btn-secondary" onclick="loadStoragePrefixes()" style="font-size:12px;">🔄 Load Prefixes</button>
        </div>
        <input type="text" id="asset_path" name="asset_path" class="form-control" value="{{ old('asset_path') }}" required placeholder="videos/movie123/master.m3u8">
        <div class="form-hint">
            Path relatif di dalam bucket storage.<br>
            Contoh MP4: <code style="color:#6fafdf; font-size:11px;">videos/abc12345/source.mp4</code><br>
            Contoh HLS: <code style="color:#6fafdf; font-size:11px;">videos/abc12345/master.m3u8</code>
        </div>
    </div>

    {{-- Encode to HLS (only for MP4) --}}
    <div class="form-group" id="encode-option" style="{{ old('asset_type') === 'hls' ? 'display:none' : '' }}">
        <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
            <input type="hidden" name="encode_to_hls" value="0">
            <input type="checkbox" name="encode_to_hls" value="1" {{ old('encode_to_hls') ? 'checked' : '' }}
                   style="width:auto; accent-color:#e50914;">
            <span>Encode ke HLS setelah import</span>
        </label>
        <div class="form-hint">Jika dicentang, file MP4 akan di-encode menjadi HLS ABR (adaptive bitrate). Status akan menjadi "encoding" sampai proses selesai.</div>
    </div>

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

<script>
function toggleEncodeOption() {
    var type = document.getElementById('asset_type').value;
    var encodeOption = document.getElementById('encode-option');
    if (type === 'hls') {
        encodeOption.style.display = 'none';
    } else {
        encodeOption.style.display = '';
    }
}

function loadStoragePrefixes() {
    var driver = document.getElementById('storage_driver').value;
    var select = document.getElementById('prefix_select');
    select.innerHTML = '<option value="">Loading...</option>';

    fetch('{{ route("admin.videos.upload.prefixes") }}?storage_driver=' + encodeURIComponent(driver))
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var prefixes = data.prefixes || [];
            select.innerHTML = '<option value="">— Pilih Prefix —</option>';
            prefixes.forEach(function(p) {
                select.innerHTML += '<option value="' + p + '/">' + p + '</option>';
            });
        })
        .catch(function() {
            select.innerHTML = '<option value="">Gagal load</option>';
        });
}

function applyPrefixToPath() {
    var prefix = document.getElementById('prefix_select').value;
    var pathInput = document.getElementById('asset_path');
    if (prefix) {
        // If path is empty or starts with a different prefix, replace
        var currentPath = pathInput.value;
        if (!currentPath || currentPath.indexOf('/') === -1) {
            pathInput.value = prefix;
        } else {
            // Replace everything before the first slash
            pathInput.value = prefix + currentPath.substring(currentPath.indexOf('/') + 1);
        }
        pathInput.focus();
    }
}

// Load prefixes on page load
document.getElementById('storage_driver').addEventListener('change', loadStoragePrefixes);
loadStoragePrefixes();
</script>
@endsection