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

@section('content')
<div class="toolbar">
    <h2 style="font-size:18px; color:#fff;">📁 Folder Video</h2>
    <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">← Kembali ke Video</a>
</div>

@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

<div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:16px; margin-bottom:16px;">
    <h3 style="font-size:14px; margin-bottom:12px; color:#bbb;">Tambah Folder</h3>
    <form method="POST" action="{{ route('admin.video-folders.store') }}" style="display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;">
        @csrf
        <div class="form-group" style="margin-bottom:0;">
            <label for="name">Nama Folder</label>
            <input type="text" id="name" name="name" class="form-control" required maxlength="150" style="max-width:320px;" placeholder="Contoh: xvid premium">
        </div>
        <div class="form-group" style="margin-bottom:0;">
            <label for="description">Deskripsi</label>
            <input type="text" id="description" name="description" class="form-control" maxlength="1000" style="max-width:420px;" placeholder="Opsional">
        </div>
        <button type="submit" class="btn btn-primary">Tambah</button>
    </form>
</div>

@if($folders->count())
    <table>
        <thead>
            <tr>
                <th>Nama</th>
                <th>Slug</th>
                <th>Video</th>
                <th>Deskripsi</th>
                <th style="width:320px">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach($folders as $folder)
                <tr>
                    <td>{{ $folder->name }}</td>
                    <td><span class="text-muted">{{ $folder->slug }}</span></td>
                    <td>{{ $folder->videos_count }}</td>
                    <td>{{ $folder->description ?: '—' }}</td>
                    <td>
                        <div style="display:flex; gap:6px; flex-wrap:wrap;">
                            <button type="button" class="btn btn-sm btn-share" onclick='openFolderShare(@json($folder->slug), @json($folder->name))'>Share</button>
                            <a href="{{ route('folders.show', $folder) }}" target="_blank" class="btn btn-sm btn-secondary">Public</a>
                            <a href="{{ route('admin.video-folders.show', $folder) }}" class="btn btn-sm btn-secondary">Detail</a>
                            <a href="{{ route('admin.video-folders.edit', $folder) }}" class="btn btn-sm btn-secondary">Edit</a>
                            <form method="POST" action="{{ route('admin.video-folders.destroy', $folder) }}" onsubmit="return confirm('Hapus folder ini? Video di dalamnya tetap aman.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@else
    <div class="empty-state">
        <p>Belum ada folder.</p>
    </div>
@endif

<div id="shareFolderModal" class="share-folder-overlay" onclick="if(event.target===this)closeFolderShare()">
    <div class="share-folder-modal">
        <div class="share-folder-header">
            <h3 id="shareFolderTitle">📤 Share Folder</h3>
            <button onclick="closeFolderShare()" class="share-close" style="background:none;border:none;color:#666;font-size:24px;cursor:pointer;padding:0 4px;line-height:1;">&times;</button>
        </div>
        <div class="share-folder-body">
            <div class="share-folder-field">
                <label>🌐 Domain</label>
                <select id="folderDomainSelector" class="share-folder-select" onchange="updateFolderShareUrls()">
                    @if($domains->count())
                        @foreach($domains as $domain)
                            <option value="{{ $domain->domain_name }}">{{ $domain->display_name ?: $domain->domain_name }} ({{ $domain->domain_name }})</option>
                        @endforeach
                    @else
                        <option value="default">Default Domain</option>
                    @endif
                </select>
                <small style="color:#666; margin-top:4px; display:block;">Choose a domain for the folder URL and embed code</small>
            </div>

            <div class="share-folder-field">
                <label>📋 Folder URL</label>
                <div class="share-folder-input-row">
                    <input id="folderShareUrl" type="text" class="share-folder-input" readonly>
                    <button onclick="copyFolderField('folderShareUrl')" class="btn-copy" title="Copy">📋</button>
                </div>
            </div>

            <div class="share-folder-field">
                <label>📋 Embed Code</label>
                <div class="share-folder-input-row">
                    <textarea id="folderShareEmbed" class="share-folder-input" rows="3" readonly></textarea>
                    <button onclick="copyFolderField('folderShareEmbed')" class="btn-copy" title="Copy">📋</button>
                </div>
            </div>

            <div style="margin-top:16px; padding-top:12px; border-top:1px solid #2a2a2a; display:flex; gap:8px; flex-wrap:wrap;">
                <button onclick="copyFolderAll()" class="btn btn-primary" style="flex:1;">📋 Copy All Info</button>
            </div>
        </div>
    </div>
</div>

<div id="folderShareToast" class="share-toast">✅ Copied!</div>

<style>
    .share-folder-overlay {
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.7);
        z-index:1000;
        align-items:center;
        justify-content:center;
    }
    .share-folder-overlay.active { display:flex; }
    .share-folder-modal {
        background:#1a1a1a;
        border:1px solid #333;
        border-radius:10px;
        width:580px;
        max-width:95vw;
        max-height:90vh;
        overflow-y:auto;
        box-shadow:0 20px 60px rgba(0,0,0,0.5);
    }
    .share-folder-header {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:16px 20px;
        border-bottom:1px solid #2a2a2a;
    }
    .share-folder-header h3 { margin:0; font-size:15px; color:#fff; }
    .share-folder-body { padding:20px; }
    .share-folder-field { margin-bottom:14px; }
    .share-folder-field label {
        display:block;
        font-size:12px;
        color:#888;
        margin-bottom:5px;
        font-weight:600;
    }
    .share-folder-input-row { display:flex; gap:6px; align-items:stretch; }
    .share-folder-input {
        flex:1;
        background:#111;
        border:1px solid #333;
        border-radius:4px;
        color:#ddd;
        font-size:12px;
        padding:8px 10px;
        font-family:'SF Mono', Monaco, Consolas, monospace;
        resize:none;
        outline:none;
    }
    .share-folder-input:focus { border-color:#e50914; }
    .share-folder-select {
        width:100%;
        background:#111;
        border:1px solid #333;
        border-radius:4px;
        color:#ddd;
        font-size:13px;
        padding:8px 10px;
        outline:none;
        cursor:pointer;
    }
    .share-folder-select:focus { border-color:#e50914; }
    .btn-copy {
        background:#333;
        border:1px solid #444;
        border-radius:4px;
        color:#ccc;
        cursor:pointer;
        padding:0 12px;
        font-size:14px;
        transition:all 0.15s;
        min-width:40px;
    }
    .btn-copy:hover { background:#444; color:#fff; }
    .btn-copy.copied { background:#1a3a1a; border-color:#2d5a2d; color:#6fbf6f; }
    .share-toast {
        position:fixed;
        bottom:24px;
        right:24px;
        background:#1a3a1a;
        border:1px solid #2d5a2d;
        color:#6fbf6f;
        padding:10px 20px;
        border-radius:6px;
        font-size:13px;
        z-index:2000;
        opacity:0;
        transform:translateY(10px);
        transition:all 0.3s ease;
        pointer-events:none;
    }
    .share-toast.show { opacity:1; transform:translateY(0); }
</style>

<script>
    var folderShareData = { slug: null, name: null };

    function openFolderShare(slug, name) {
        folderShareData.slug = slug;
        folderShareData.name = name;
        document.getElementById('shareFolderTitle').textContent = '📤 Share Folder — ' + name;
        document.getElementById('shareFolderModal').classList.add('active');
        updateFolderShareUrls();
    }

    function closeFolderShare() {
        document.getElementById('shareFolderModal').classList.remove('active');
    }

    function updateFolderShareUrls() {
        var domainSelector = document.getElementById('folderDomainSelector');
        var domain = domainSelector ? domainSelector.value : 'default';
        var path = '/f/' + folderShareData.slug;
        var folderUrl = (domain === 'default' || !domain)
            ? window.location.origin + path
            : window.location.protocol + '//' + domain + path;
        var embedCode = '<iframe src="' + folderUrl + '" width="640" height="360" frameborder="0" allowfullscreen scrolling="no"></iframe>';

        document.getElementById('folderShareUrl').value = folderUrl;
        document.getElementById('folderShareEmbed').value = embedCode;
    }

    function copyFolderField(fieldId) {
        var el = document.getElementById(fieldId);
        var text = el.value;
        if (!text) return;

        navigator.clipboard.writeText(text).then(function() {
            var btn = el.closest('.share-folder-input-row').querySelector('.btn-copy');
            btn.classList.add('copied');
            btn.textContent = '✅';
            setTimeout(function() {
                btn.classList.remove('copied');
                btn.textContent = '📋';
            }, 1500);
            showFolderToast('✅ Copied!');
        });
    }

    function copyFolderAll() {
        var lines = [
            'Folder: ' + folderShareData.name,
            'Folder URL: ' + document.getElementById('folderShareUrl').value,
            'Embed Code: ' + document.getElementById('folderShareEmbed').value,
        ];

        navigator.clipboard.writeText(lines.join('\n')).then(function() {
            showFolderToast('✅ All info copied!');
        });
    }

    function showFolderToast(msg) {
        var toast = document.getElementById('folderShareToast');
        toast.textContent = msg;
        toast.classList.add('show');
        setTimeout(function() { toast.classList.remove('show'); }, 2000);
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeFolderShare();
    });
</script>
@endsection