@extends('layouts.app')

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Add Videos</h4>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('videos.store') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="album_id" class="form-label">Select Album</label>
                                    <select class="form-control" id="album_id" name="album_id" required>
                                        <option value="">Select an Album</option>
                                        @foreach($albums as $album)
                                            <option value="{{ $album->id }}">Bible Study</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- URL Inputs Container -->
                                <div id="url-inputs">
                                    <div class="input-group mb-3">
                                        <input type="url" class="form-control" name="youtube_urls[]" placeholder="Enter YouTube URL" required>
                                        <button type="button" class="btn btn-danger" onclick="removeUrlInput(this)">×</button>
                                        <button type="button" class="btn btn-success" onclick="addUrlInput()">+</button>
                                    </div>
                                </div>

                                <!-- Video Previews Container -->
                                <div id="video-previews" class="d-flex flex-wrap gap-2"></div>

                                <button type="submit" class="btn btn-primary">Upload Videos</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Add new URL input field
    function addUrlInput() {
        const inputGroup = document.createElement('div');
        inputGroup.classList.add('input-group', 'mb-3');

        const input = document.createElement('input');
        input.type = 'url';
        input.classList.add('form-control');
        input.name = 'youtube_urls[]';
        input.placeholder = 'Enter YouTube URL';
        input.required = true;

        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.classList.add('btn', 'btn-danger');
        removeBtn.textContent = '×';
        removeBtn.onclick = function() {
            removeUrlInput(this);
        };

        const addBtn = document.createElement('button');
        addBtn.type = 'button';
        addBtn.classList.add('btn', 'btn-success');
        addBtn.textContent = '+';
        addBtn.onclick = function() {
            addUrlInput();
        };

        inputGroup.appendChild(input);
        inputGroup.appendChild(removeBtn);
        inputGroup.appendChild(addBtn);

        document.getElementById('url-inputs').appendChild(inputGroup);
    }

    // Remove URL input field
    function removeUrlInput(button) {
        button.parentElement.remove();
    }

    // Show video preview
    document.addEventListener('input', function(e) {
        if (e.target.name === 'youtube_urls[]') {
            const url = e.target.value;
            const videoId = getYouTubeId(url);

            if (videoId) {
                const preview = document.createElement('div');
                preview.classList.add('position-relative');

                const iframe = document.createElement('iframe');
                iframe.width = '200';
                iframe.height = '150';
                iframe.src = `https://www.youtube.com/embed/${videoId}`;
                iframe.frameborder = '0';
                iframe.allowfullscreen = true;

                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.classList.add('btn', 'btn-danger', 'position-absolute', 'top-0', 'end-0');
                removeBtn.textContent = '×';
                removeBtn.onclick = function() {
                    this.parentElement.remove();
                    e.target.value = ''; // Clear the URL input
                };

                preview.appendChild(iframe);
                preview.appendChild(removeBtn);

                document.getElementById('video-previews').appendChild(preview);
            }
        }
    });

    // Extract YouTube video ID from URL
    function getYouTubeId(url) {
    const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|(?:youtu\.be\/))([a-zA-Z0-9_-]{11})/;
    const match = url.match(regex);
    return match ? match[1] : null;
}
</script>
@endsection