{{-- Video Edit Component --}}
@php
    $field = $header->field;
    $maxSize = 10; // Max video size in MB
@endphp
<div class="video-edit-container">
    @php
        $existingVideo = $list->{$field} ?? '';
        $isEmbed = $existingVideo && (strpos($existingVideo, 'youtube.com') !== false || strpos($existingVideo, 'vimeo.com') !== false);
        $isFile = $existingVideo && !$isEmbed;
    @endphp

    {{-- Existing Video Display --}}
    @if ($existingVideo)
        <div class="existing-video mb-3" id="existing-video-{{ $field }}">
            <label class="form-control-label">Video Saat Ini</label>
            @if ($isEmbed)
                <iframe src="{{ $existingVideo }}" style="width: 100%; height: 400px; border-radius: 8px;" frameborder="0" allowfullscreen></iframe>
            @else
                <video src="{{ asset('storage/' . $existingVideo) }}" controls style="width: 100%; max-height: 400px; border-radius: 8px;"></video>
            @endif
            <button type="button" class="btn btn-sm btn-warning mt-2" onclick="showVideoReplace{{ $field }}()">
                <i class="fas fa-edit me-1"></i>Ganti Video
            </button>
        </div>
    @endif

    {{-- Replace Video Section --}}
    <div id="replace-video-{{ $field }}" style="display: {{ $existingVideo ? 'none' : 'block' }};">
        <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 Baru
                    </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="removeNewVideo{{ $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/..."
                           value="{{ $isEmbed ? $existingVideo : '' }}">
                    <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: {{ $isEmbed ? 'block' : 'none' }}; margin-top: 1rem;">
                    <iframe id="embed-player-{{ $field }}" src="{{ $isEmbed ? $existingVideo : '' }}" 
                            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>

        @if ($existingVideo)
            <button type="button" class="btn btn-sm btn-secondary mt-3" onclick="cancelVideoReplace{{ $field }}()">
                <i class="fas fa-times me-1"></i>Batal Ganti
            </button>
        @endif
    </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 }}');
    const existingVideo = document.getElementById('existing-video-{{ $field }}');
    const replaceVideo = document.getElementById('replace-video-{{ $field }}');

    // Show Replace Section
    window.showVideoReplace{{ $field }} = function() {
        if (existingVideo) existingVideo.style.display = 'none';
        replaceVideo.style.display = 'block';
    };

    // Cancel Replace
    window.cancelVideoReplace{{ $field }} = function() {
        if (existingVideo) existingVideo.style.display = 'block';
        replaceVideo.style.display = 'none';
        fileInput.value = '';
        videoPlayer.src = '';
        uploadArea.style.display = 'block';
        videoPreview.style.display = 'none';
    };

    // 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 New Video
    window.removeNewVideo{{ $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>