{{-- Video Upload Component --}}
@php
    $maxSize = 10; // Max video size in MB
@endphp
<div class="video-upload-container">
    <div class="mb-3">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#upload-tab-{{ $field }}" role="tab">
                    <i class="fas fa-upload me-1"></i>Upload Video
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#embed-tab-{{ $field }}" role="tab">
                    <i class="fab fa-youtube me-1"></i>Embed URL
                </a>
            </li>
        </ul>
    </div>

    <div class="tab-content">
        {{-- Upload Tab --}}
        <div class="tab-pane fade show active" id="upload-tab-{{ $field }}" role="tabpanel">
            <div class="upload-area" id="upload-area-{{ $field }}" 
                 style="border: 2px dashed #cbd5e0; border-radius: 8px; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.3s;">
                <i class="fas fa-cloud-upload-alt" style="font-size: 3rem; color: #cbd5e0; margin-bottom: 1rem;"></i>
                <p class="mb-2"><strong>Klik untuk upload video atau drag & drop</strong></p>
                <p class="text-muted text-sm mb-0">Format: MP4, MOV, AVI, WMV (Max: {{ $maxSize }}MB)</p>
            </div>
            <input type="file" id="{{ $field }}" name="{{ $field }}" 
                   accept="video/mp4,video/quicktime,video/x-msvideo,video/x-ms-wmv" 
                   style="display: none;">
            
            {{-- Video Preview --}}
            <div id="video-preview-{{ $field }}" style="display: none; margin-top: 1rem;">
                <video id="video-player-{{ $field }}" controls style="width: 100%; max-height: 400px; border-radius: 8px;"></video>
                <button type="button" class="btn btn-sm btn-danger mt-2" onclick="removeVideo{{ $field }}()">
                    <i class="fas fa-trash me-1"></i>Hapus Video
                </button>
            </div>
        </div>

        {{-- Embed Tab --}}
        <div class="tab-pane fade" id="embed-tab-{{ $field }}" role="tabpanel">
            <div class="form-group">
                <label class="form-control-label">URL Embed YouTube atau Vimeo</label>
                <input type="text" class="form-control" id="{{ $field }}_embed" name="{{ $field }}_embed" 
                       placeholder="https://www.youtube.com/embed/... atau https://player.vimeo.com/video/...">
                <p class="text-muted text-xs mt-2">
                    <strong>Contoh URL:</strong><br>
                    YouTube: https://www.youtube.com/embed/VIDEO_ID<br>
                    Vimeo: https://player.vimeo.com/video/VIDEO_ID
                </p>
            </div>
            
            {{-- Embed Preview --}}
            <div id="embed-preview-{{ $field }}" style="display: none; margin-top: 1rem;">
                <iframe id="embed-player-{{ $field }}" style="width: 100%; height: 400px; border-radius: 8px;" frameborder="0" allowfullscreen></iframe>
                <button type="button" class="btn btn-sm btn-danger mt-2" onclick="removeEmbed{{ $field }}()">
                    <i class="fas fa-trash me-1"></i>Hapus Embed
                </button>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    const uploadArea = document.getElementById('upload-area-{{ $field }}');
    const fileInput = document.getElementById('{{ $field }}');
    const videoPreview = document.getElementById('video-preview-{{ $field }}');
    const videoPlayer = document.getElementById('video-player-{{ $field }}');
    const embedInput = document.getElementById('{{ $field }}_embed');
    const embedPreview = document.getElementById('embed-preview-{{ $field }}');
    const embedPlayer = document.getElementById('embed-player-{{ $field }}');

    // Upload Area Click
    uploadArea.addEventListener('click', () => fileInput.click());

    // Drag & Drop
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = '#4299e1';
        uploadArea.style.backgroundColor = '#ebf8ff';
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.style.borderColor = '#cbd5e0';
        uploadArea.style.backgroundColor = 'transparent';
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = '#cbd5e0';
        uploadArea.style.backgroundColor = 'transparent';
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleVideoUpload(files[0]);
        }
    });

    // File Input Change
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleVideoUpload(e.target.files[0]);
        }
    });

    // Handle Video Upload
    function handleVideoUpload(file) {
        const maxSize = {{ $maxSize }} * 1024 * 1024; // Convert MB to bytes
        
        if (file.size > maxSize) {
            alert('Ukuran file terlalu besar! Maksimal ' + {{ $maxSize }} + 'MB');
            fileInput.value = '';
            return;
        }

        const videoURL = URL.createObjectURL(file);
        videoPlayer.src = videoURL;
        uploadArea.style.display = 'none';
        videoPreview.style.display = 'block';
    }

    // Remove Video
    window.removeVideo{{ $field }} = function() {
        fileInput.value = '';
        videoPlayer.src = '';
        uploadArea.style.display = 'block';
        videoPreview.style.display = 'none';
    };

    // Embed Input Change
    embedInput.addEventListener('input', (e) => {
        const url = e.target.value.trim();
        if (url) {
            embedPlayer.src = url;
            embedPreview.style.display = 'block';
        } else {
            embedPreview.style.display = 'none';
        }
    });

    // Remove Embed
    window.removeEmbed{{ $field }} = function() {
        embedInput.value = '';
        embedPlayer.src = '';
        embedPreview.style.display = 'none';
    };
})();
</script>