@model DetailsViewModel

@using (Html.BeginForm("Details", "Home", FormMethod.Post )) {
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.VideoId)

    <div class="mb-3">
        @Html.LabelFor(m => m.Title)
        @Html.TextBoxFor(m => m.Title, new { @class = "form-control", @required = "required" })
        @Html.ValidationMessageFor(m => m.Title)
    </div>
    
    <div class="mb-3">
        @Html.LabelFor(m => m.Tags)
        @foreach (var tag in Model.Tags)
        {
            <span class="badge rounded-pill text-bg-secondary" data-tag-name="@tag">
                @Html.DisplayFor(m => tag)
                <button type="button" class="btn-close btn-sm" aria-label="Close" onclick="removeTag('@tag')"></button>
            </span>
        }
        <input type="text" id="newTag" class="form-control mt-2" placeholder="Add new tag" />
        @for (int i = 0; i < Model.Tags.Count; i++)
        {
            <input type="hidden" class="hiddenTag" name="Tags[@i]" value="@Model.Tags.ElementAt(i)" />
        }
    </div>
    
    <button type="submit" class="btn btn-primary">Update Video</button>
}

@section Scripts {
    <script>
        $(document).ready(function() {
            $('#newTag').on('keypress', function(e) {
                if (e.which === 13) { // Enter key
                    e.preventDefault();
                    var tagName = $(this).val().trim();
                    if (tagName) {
                        $(this).val(''); // Clear input
                        // check if a hidden input for this tag already exists
                        var existingTag = $(`input[value='${tagName}']`);
                        if (existingTag.length > 0) {
                            return;
                        }
                        var tagCount = $('.hiddenTag').length;
                        // Add the tag to a new hidden input
                        var hiddenInput = `<input type="hidden" class="hiddenTag" name="Tags[${tagCount}]" value="${tagName}" />`;


                        var tagHtml = `<span class="badge rounded-pill text-bg-secondary" data-tag-name="${tagName}">
                                           ${tagName}
                                           <button type="button" class="btn-close btn-sm" aria-label="Close" onclick="removeTag('${tagName}')"></button>
                                       </span>`;
                        $(this).after(hiddenInput);
                        $(this).before(tagHtml);
                        
                    }
                }
            });

            window.removeTag = function(tagName) {
                // Remove the hidden input for the tag
                $(`input[value='${tagName}']`).remove();
                // Remove the badge from the UI
                $(`span[data-tag-name='${tagName}']`).remove();
            };
        });       
    </script>
}