@model KernelRecordsMVC.Application.ViewModels.EditReleaseViewModel

@{
    ViewData["Title"] = "Edit Release";
}

<div class="admin-page admin-form-page">

    <!-- =====================================================
         HEADER
         ===================================================== -->

    <div class="admin-header">

        <div>

            <a asp-action="Releases"
               class="admin-back-link">
                ← Releases
            </a>

            <span class="admin-eyebrow">
                CATALOG MANAGEMENT
            </span>

            <h1>Edit Release</h1>

            <p>
                Update release information and artist assignments.
            </p>

        </div>

    </div>


    <form asp-action="EditRelease"
          method="post">

        @Html.AntiForgeryToken()

        <input asp-for="ReleaseId"
               type="hidden" />


        <div asp-validation-summary="ModelOnly"
             class="admin-validation">
        </div>


        <!-- =================================================
             RELEASE INFORMATION
             ================================================= -->

        <section class="admin-form-card release-create-section">

            <div class="admin-form-card-header">

                <span class="admin-eyebrow">
                    RELEASE
                </span>

                <h2>Release Information</h2>

                <p class="admin-section-description">
                    Update the catalog information for this release.
                </p>

            </div>


            <!-- TITLE -->

            <div class="admin-form-field">

                <label asp-for="Title">
                    Title
                </label>

                <input asp-for="Title"
                       placeholder="Release title" />

                <span asp-validation-for="Title"
                      class="admin-field-error">
                </span>

            </div>


            <!-- GENRE + DATE -->

            <div class="admin-form-row">

                <div class="admin-form-field">

                    <label asp-for="Genre">
                        Genre
                    </label>

                    <input asp-for="Genre"
                           placeholder="Rock, Pop, Jazz..." />

                    <span asp-validation-for="Genre"
                          class="admin-field-error">
                    </span>

                </div>


                <div class="admin-form-field">

                    <label asp-for="ReleaseDate">
                        Release Date
                    </label>

                    <input asp-for="ReleaseDate"
                           type="date" />

                    <span asp-validation-for="ReleaseDate"
                          class="admin-field-error">
                    </span>

                </div>

            </div>


            <!-- RECORD LABEL -->

            <div class="admin-form-field">

                <label asp-for="RecordLabel">
                    Record Label
                </label>

                <input asp-for="RecordLabel"
                       placeholder="Record label" />

                <span asp-validation-for="RecordLabel"
                      class="admin-field-error">
                </span>

            </div>


            <!-- COVER PHOTO -->

            <div class="admin-form-field">

                <label asp-for="CoverPhoto">
                    Cover Photo URL
                </label>

                <input asp-for="CoverPhoto"
                       id="coverPhotoInput"
                       placeholder="https://..." />

                <span asp-validation-for="CoverPhoto"
                      class="admin-field-error">
                </span>

            </div>


            <!-- COVER PREVIEW -->

            <div class="admin-cover-preview">

                <span class="admin-eyebrow">
                    COVER PREVIEW
                </span>

                <div class="admin-cover-preview-image"
                     id="coverPreview">

                    @if (!string.IsNullOrWhiteSpace(
                        Model.CoverPhoto))
                    {
                        <img src="@Model.CoverPhoto"
                             alt="@Model.Title" />
                    }
                    else
                    {
                        <span>♪</span>
                    }

                </div>

            </div>

        </section>


        <!-- =================================================
             ARTISTS
             ================================================= -->

        <section class="admin-form-card release-create-section">

            <div class="admin-form-card-header">

                <span class="admin-eyebrow">
                    ARTISTS
                </span>

                <h2>Release Artists</h2>

                <p class="admin-section-description">
                    Change the main artist or featured artists
                    associated with this release.
                </p>

            </div>


            <!-- MAIN ARTIST -->

            <div class="admin-form-field">

                <label asp-for="MainArtistId">
                    Main Artist
                </label>

                <select asp-for="MainArtistId">

                    <option value="">
                        Select main artist
                    </option>

                    @foreach (var artist in ViewBag.Artists)
                    {
                        <option value="@artist.ArtistId">
                            @artist.ArtistName
                        </option>
                    }

                </select>

                <span asp-validation-for="MainArtistId"
                      class="admin-field-error">
                </span>

                <small>
                    This artist will be stored as the MAIN
                    artist for the release.
                </small>

            </div>


            <!-- FEATURED ARTISTS -->

            <div class="admin-form-field">

                <label asp-for="FeaturedArtistIds">
                    Featured Artists
                </label>

                <select asp-for="FeaturedArtistIds"
                        multiple
                        class="admin-multi-select">

                    @foreach (var artist in ViewBag.Artists)
                    {
                        <option value="@artist.ArtistId">
                            @artist.ArtistName
                        </option>
                    }

                </select>

                <span asp-validation-for="FeaturedArtistIds"
                      class="admin-field-error">
                </span>

                <small>
                    Hold Ctrl on Windows or Cmd on macOS
                    to select multiple featured artists.
                </small>

            </div>

        </section>


        <!-- =================================================
             SAVE
             ================================================= -->

        <div class="admin-release-submit">

            <div>

                <span class="admin-eyebrow">
                    SAVE CHANGES
                </span>

                <p>
                    Release information and artist relationships
                    will be updated together.
                </p>

            </div>


            <div class="admin-form-actions release-actions">

                <a asp-action="Releases"
                   class="admin-button secondary">

                    Cancel

                </a>


                <button type="submit"
                        class="admin-button primary">

                    Save Changes

                </button>

            </div>

        </div>

    </form>

</div>


@section Scripts
{
    <partial name="_ValidationScriptsPartial" />

    <script>

        document.addEventListener(
            "DOMContentLoaded",
            function ()
            {
                const coverInput =
                    document.getElementById(
                        "coverPhotoInput");

                const coverPreview =
                    document.getElementById(
                        "coverPreview");


                function showPlaceholder()
                {
                    coverPreview.innerHTML =
                        "<span>♪</span>";
                }


                function updateCover()
                {
                    const url =
                        coverInput.value.trim();


                    if (!url)
                    {
                        showPlaceholder();

                        return;
                    }


                    coverPreview.innerHTML = "";


                    const image =
                        document.createElement(
                            "img");


                    image.src =
                        url;

                    image.alt =
                        "Release cover preview";


                    image.addEventListener(
                        "error",
                        function ()
                        {
                            showPlaceholder();
                        });


                    coverPreview.appendChild(
                        image);
                }


                coverInput.addEventListener(
                    "input",
                    updateCover);
            });

    </script>
}