@model KernelRecordsMVC.Application.ViewModels.CreateReleaseViewModel

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

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

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

    <div class="admin-header">

        <div>

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

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

            <h1>Create Release</h1>

            <p>
                Add an album or single, assign artists
                and build its track listing.
            </p>

        </div>

    </div>


    <form asp-action="CreateRelease"
          method="post"
          id="createReleaseForm">

        @Html.AntiForgeryToken()


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

        <!-- =================================================
             STEP 1 - RELEASE TYPE
             ================================================= -->

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

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

                <span class="admin-eyebrow">
                    STEP 01
                </span>

                <h2>Release Type</h2>

                <p class="admin-section-description">
                    Choose whether this release is an album
                    or a single.
                </p>

            </div>


            <div class="admin-modification-options">

                <!-- ALBUM -->

                <label class="admin-modification-option">

                    <input asp-for="ReleaseType"
                           type="radio"
                           value="ALBUM"
                           id="releaseTypeAlbum" />

                    <span>

                        <strong>
                            Album
                        </strong>

                        <small>
                            Create a release with multiple tracks.
                        </small>

                    </span>

                </label>


                <!-- SINGLE -->

                <label class="admin-modification-option">

                    <input asp-for="ReleaseType"
                           type="radio"
                           value="SINGLE"
                           id="releaseTypeSingle" />

                    <span>

                        <strong>
                            Single
                        </strong>

                        <small>
                            Create an individual single release.
                        </small>

                    </span>

                </label>

            </div>


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

        </section>


        <!-- =================================================
             STEP 2 - RELEASE INFORMATION
             ================================================= -->

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

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

                <span class="admin-eyebrow">
                    STEP 02
                </span>

                <h2>Release Information</h2>

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

            </div>


            <!-- TITLE -->

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

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

                <input asp-for="Title"
                       placeholder="Enter 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 (optional)" />

                <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>

                <small>
                    Paste a direct image URL for the release artwork.
                </small>

            </div>


            <!-- COVER PREVIEW -->

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

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

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

                    <span>♪</span>

                </div>

            </div>

        </section>


        <!-- =================================================
             STEP 3 - ARTISTS
             ================================================= -->

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

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

                <span class="admin-eyebrow">
                    STEP 03
                </span>

                <h2>Artists</h2>

                <p class="admin-section-description">
                    Select the main artist and any featured artists
                    for 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>
                    The primary artist associated with this 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>

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

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

            </div>

        </section>


        <!-- =================================================
             SINGLE SETTINGS
             ================================================= -->

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

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

                <span class="admin-eyebrow">
                    STEP 04
                </span>

                <h2>Single Information</h2>

                <p class="admin-section-description">
                    Enter the duration of the single.
                </p>

            </div>


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

                <label asp-for="SingleDuration">
                    Duration
                </label>

                <input asp-for="SingleDuration"
                       placeholder="03:45" />

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

                <small>
                    Example: 03:45
                </small>

            </div>

        </section>


        <!-- =================================================
             ALBUM TRACKS
             ================================================= -->

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

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

                <div>

                    <span class="admin-eyebrow">
                        STEP 04
                    </span>

                    <h2>Track List</h2>

                    <p class="admin-section-description">
                        Add tracks in the order they appear
                        on the album.
                    </p>

                </div>


                <button type="button"
                        class="admin-button secondary"
                        id="addTrackButton">

                    ＋ Add Track

                </button>

            </div>


            <div id="tracksContainer">

                @for (var i = 0;
                i < Model.Tracks.Count;
                i++)
                {
                <div class="admin-track-card"
                     data-track-row>

                    <!-- TRACK NUMBER -->

                    <div class="admin-track-number">
                        @(i + 1)
                    </div>


                    <!-- TRACK CONTENT -->

                    <div class="admin-track-content">

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

                            <!-- TRACK NAME -->

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

                                <label>
                                    Track Name
                                </label>

                                <input asp-for="Tracks[i].SongName"
                                       data-field="SongName"
                                       placeholder="Track title" />

                                <span asp-validation-for="Tracks[i].SongName"
                                      class="admin-field-error">
                                    </span>

                            </div>


                            <!-- DURATION -->

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

                                <label>
                                    Duration
                                </label>

                                <input asp-for="Tracks[i].SongDuration"
                                       data-field="SongDuration"
                                       placeholder="03:42"
                                       inputmode="numeric"
                                       maxlength="5" />

                                <span asp-validation-for="Tracks[i].SongDuration"
                                      class="admin-field-error">
                                    </span>

                            </div>

                        </div>


                        <!-- TRACK ARTISTS -->

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

                            <label>
                                Track Artists
                            </label>

                            <select asp-for="Tracks[i].ArtistIds"
                                    multiple
                                    data-field="ArtistIds"
                                    class="admin-multi-select">

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

                            </select>

                            <small>
                                If no artist is selected,
                                the release's main artist will
                                automatically be used.
                            </small>

                        </div>

                    </div>


                    <!-- REMOVE TRACK -->

                    <button type="button"
                            class="admin-track-remove"
                            data-remove-track
                            title="Remove track">

                        ×

                    </button>

                </div>
                }

            </div>

        </section>


        <!-- =================================================
             SUBMIT
             ================================================= -->

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

            <div>

                <span class="admin-eyebrow">
                    READY TO CREATE?
                </span>

                <p>
                    The release, artists and tracks
                    will be created together.
                </p>

            </div>


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

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

                    Cancel

                </a>


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

                    Create Release

                </button>

            </div>

        </div>

    </form>

</div>


<!-- =========================================================
     TRACK TEMPLATE
     ========================================================= -->

<template id="trackTemplate">

    <div class="admin-track-card"
         data-track-row>

        <!-- TRACK NUMBER -->

        <div class="admin-track-number">
            1
        </div>


        <!-- TRACK CONTENT -->

        <div class="admin-track-content">

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

                <!-- NAME -->

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

                    <label>
                        Track Name
                    </label>

                    <input type="text"
                           data-field="SongName"
                           placeholder="Track title" />

                </div>


                <!-- DURATION -->

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

                    <label>
                        Duration
                    </label>

                    <input type="text"
                           data-field="SongDuration"
                           placeholder="03:42"
                           inputmode="numeric"
                           maxlength="5"
                           pattern="\d{1,2}:[0-5]\d"
                           title="Enter a duration like 03:42" />

                </div>

            </div>


            <!-- ARTISTS -->

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

                <label>
                    Track Artists
                </label>

                <select multiple
                        data-field="ArtistIds"
                        class="admin-multi-select">

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

                </select>

                <small>
                    If left empty, the release's main artist
                    will automatically be assigned.
                </small>

            </div>

        </div>


        <!-- REMOVE -->

        <button type="button"
                class="admin-track-remove"
                data-remove-track
                title="Remove track">

            ×

        </button>

    </div>

</template>


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

<script>

    document.addEventListener(
        "DOMContentLoaded",
        function ()
        {
            // ==========================================
            // ELEMENTS
            // ==========================================

            const albumRadio =
                document.getElementById(
                    "releaseTypeAlbum");

            const singleRadio =
                document.getElementById(
                    "releaseTypeSingle");

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

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

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

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

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

            const form =
                document.getElementById(
                    "createReleaseForm");


            // ==========================================
            // RELEASE TYPE
            // ==========================================

            function updateReleaseType()
            {
                const isAlbum =
                    albumRadio.checked;


                // Show / hide sections.
                albumSection.style.display =
                    isAlbum
                        ? "block"
                        : "none";


                singleSection.style.display =
                    isAlbum
                        ? "none"
                        : "block";


                // Disable fields belonging to
                // the hidden release type.
                const albumInputs =
                    albumSection.querySelectorAll(
                        "input, select, textarea");


                const singleInputs =
                    singleSection.querySelectorAll(
                        "input, select, textarea");


                albumInputs.forEach(
                    function (input)
                    {
                        input.disabled =
                            !isAlbum;
                    });


                singleInputs.forEach(
                    function (input)
                    {
                        input.disabled =
                            isAlbum;
                    });
            }


            albumRadio.addEventListener(
                "change",
                updateReleaseType);


            singleRadio.addEventListener(
                "change",
                updateReleaseType);


            // ==========================================
            // TRACK INDEXING
            // ==========================================

            function reindexTracks()
            {
                const rows =
                    tracksContainer.querySelectorAll(
                        "[data-track-row]");


                rows.forEach(
                    function (row, index)
                    {
                        const number =
                            row.querySelector(
                                ".admin-track-number");


                        const songName =
                            row.querySelector(
                                '[data-field="SongName"]');


                        const duration =
                            row.querySelector(
                                '[data-field="SongDuration"]');


                        const artists =
                            row.querySelector(
                                '[data-field="ArtistIds"]');


                        // Display number.
                        number.textContent =
                            index + 1;


                        // Song name.
                        songName.name =
                            `Tracks[${index}].SongName`;

                        songName.id =
                            `Tracks_${index}__SongName`;


                        // Duration.
                        duration.name =
                            `Tracks[${index}].SongDuration`;

                        duration.id =
                            `Tracks_${index}__SongDuration`;


                        // Artists.
                        artists.name =
                            `Tracks[${index}].ArtistIds`;

                        artists.id =
                            `Tracks_${index}__ArtistIds`;
                    });
            }


            // ==========================================
            // ADD TRACK
            // ==========================================

            addTrackButton.addEventListener(
                "click",
                function ()
                {
                    const fragment =
                        trackTemplate
                            .content
                            .cloneNode(true);


                    tracksContainer.appendChild(
                        fragment);


                    reindexTracks();
                });


            // ==========================================
            // REMOVE TRACK
            // ==========================================

            tracksContainer.addEventListener(
                "click",
                function (event)
                {
                    const button =
                        event.target.closest(
                            "[data-remove-track]");


                    if (!button)
                        return;


                    const rows =
                        tracksContainer.querySelectorAll(
                            "[data-track-row]");


                    // Album must always keep
                    // at least one track row.
                    if (rows.length <= 1)
                    {
                        alert(
                            "An album must have at least one track.");

                        return;
                    }


                    const row =
                        button.closest(
                            "[data-track-row]");


                    row.remove();


                    reindexTracks();
                });


            // ==========================================
            // BEFORE SUBMIT
            // ==========================================

            form.addEventListener(
                "submit",
                function ()
                {
                    // Make sure indexes are always
                    // sequential before ASP.NET binding.
                    reindexTracks();
                });


            // ==========================================
            // COVER PREVIEW
            // ==========================================

            const coverInput =
                document.getElementById(
                    "coverPhotoInput");


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


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


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


                if (!url)
                {
                    showCoverPlaceholder();

                    return;
                }


                coverPreview.innerHTML = "";


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


                image.src =
                    url;

                image.alt =
                    "Cover preview";


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


                coverPreview.appendChild(
                    image);
            }


            coverInput.addEventListener(
                "input",
                updateCoverPreview);


            // ==========================================
            // INITIAL STATE
            // ==========================================

            updateReleaseType();

            reindexTracks();

            updateCoverPreview();
        });

</script>
}