@include('admin.crud.form', [
    'action' => route('admin.videos.update', $material->id),
    'formId' => 'edit-video-form',
    'submitText' => 'Update Video',
    'class'      => 'ajax-crud-form',
    'redirect' => route('admin.course-content.index', $material->course_id),
    'method'     => 'PUT',
    'fields' => [
        [
            'type' => 'info',
            'content' => 'Editing video for material: <strong>' . $material->title . '</strong>',
            'col' => 12
        ],
        [
            'type' => 'hidden',
            'name' => 'course_id',
            'id' => 'course_id',
            'value' => $material->course_id,
            'label' => null,
        ],
        [   
            'type' => 'hidden',
            'name' => 'unit_id',
            'id' => 'unit_id',
            'value' => $material->unit_id ?? null,
            'label' => ($material->course ? $material->course->title . ' > ' : '') . ($material->unit ? ($material->unit->parent ? $material->unit->parent->title. ' > ' : '') : '') . ($material->unit->title ?? 'None'),
            'enabled' => $material->unit ? true : false,
        ],
        [
            'type' => 'text',
            'name' => 'title',
            'id' => 'title',
            'label' => 'Video Title',
            'placeholder' => 'Enter Video Title',
            'required' => true,
            'value' => $material->title,
            'col' => 12
        ],
        [
            'type' => 'textarea',
            'name' => 'description',
            'id' => 'description',
            'label' => 'Video Description',
            'placeholder' => 'Enter Video Description',
            'required' => false,
            'value' => $material->description,
            'col' => 12
        ],
        [
            'type' => 'select',
            'name' => 'provider',
            'id' => 'provider',
            'label' => 'Video Provider',
            'required' => true,
            'value' => $video->provider,
            'options' => get_feature('video_options'),
            'col' => 3
        ],
        [
            'type' => 'text',
            'name' => 'provider_id',
            'id' => 'provider_id',
            'label' => 'Video URL/ ID',
            'placeholder' => 'Enter video URL/ID',
            'required' => true,
            'value' => $video->provider_id,
            'col' => 9,
            'data-provider-dependent' => true
        ],
        [
            'type' => 'seperator',
            'col' => 12
        ],
        [
            'type' => 'number',
            'name' => 'duration',
            'id' => 'duration',
            'label' => 'Duration (minutes)',
            'placeholder' => 'Enter duration in minutes',
            'min' => '0',
            'value' => $video->duration,
            'col' => 4
        ],
        [
            'type' => 'select',
            'name' => 'status',
            'id' => 'status',
            'label' => 'Status',
            'required' => true,
            'value' => $material->status,
            'options' => [
                'published' => 'Published',
                'draft' => 'Draft',
                'archived' => 'Archived'
            ],
            'col' => 4
        ],
        [
            'type' => 'select',
            'name' => 'access_type',
            'id' => 'access_type',
            'label' => 'Access Type',
            'required' => true,
            'options' => [
                'paid' => 'Paid',
                'free' => [
                    'label' => $isParentPaid == true ? 'Free (Lession as paid)' : 'Free',
                    'readonly' => $isParentPaid
                ],
            ],
            'value' => $material->access_type,
            'col' => 4
        ],
        [
            'type' => 'image',
            'name' => 'thumbnail',
            'id' => 'thumbnail',
            'label' => 'Thumbnail',
            'presetKey' => 'course_materials_thumbnail',
            'value' => $material->thumbnail,
            'col' => 8
        ]
    ]
])

<script>
document.addEventListener('DOMContentLoaded', function() {
    const providerSelect = document.getElementById('provider');
    const urlField = document.getElementById('provider_id');
    const urlLabel = document.querySelector('label[for="provider_id"]');
    
    // Provider-specific configurations
    const providerConfigs = {
        'youtube': {
            label: 'YouTube Video ID',
            placeholder: 'Enter YouTube Video ID (e.g., dQw4w9WgXcQ)',
            help: 'Enter just the video ID, not the full URL'
        },
        'vimeo': {
            label: 'Vimeo Video ID',
            placeholder: 'Enter Vimeo Video ID (e.g., 123456789)',
            help: 'Enter just the video ID, not the full URL'
        }
    };
    
    function updateUrlField() {
        const selectedProvider = providerSelect.value;
        const config = providerConfigs[selectedProvider];
        
        if (config) {
            urlLabel.textContent = config.label;
            urlField.placeholder = config.placeholder;
            
            // Update or create help text
            let helpElement = document.getElementById('provider_id-help');
            if (!helpElement) {
                helpElement = document.createElement('small');
                helpElement.id = 'provider_id-help';
                helpElement.className = 'form-text text-muted';
                urlField.parentNode.appendChild(helpElement);
            }
            helpElement.textContent = config.help;
        }
    }
    
    // Initialize on page load
    updateUrlField();
    
    // Update when provider changes
    providerSelect.addEventListener('change', updateUrlField);
});
</script>