<!DOCTYPE html>
<html>

<head>
    <title>
        <%= movie.movie[0].title %>
    </title>
    <link rel="stylesheet" href="/styles.css">
</head>

<body>
    <h1>
        <%= movie.movie[0].title %>
    </h1>
    <a id="add" href=""></a>
    <h3>Fecha: <%= movie.movie[0].release_date %>
    </h3>
    <h3>Dirigida por: </h3>
    <% if (movie.director.length == 0) { %>
        <p>No hay información de el o los directores.</p>
        <% } else { %>
    <ul>
        <% movie.director.forEach(director=> { %>
            <li>
                <a href="/director/<%= director.person_id %>">
                    <%= director.person_name %>
                </a>
            </li>
            <% }); %>
    </ul>
    <% } %>
    <h3>Escrita por: </h3>
    <% if (movie.writer.length == 0) { %>
        <p>No hay información de el o los escritores.</p>
        <% } else { %>
    <ul>
        <% movie.writer.forEach(writer=> { %>
            <li>
                <%= writer.person_name %>
            </li>
            <% }); %>
    </ul>
    <% } %>
    <h3>Idioma:</h3>
    <div id="language">
        <p>
            <%= movie.movie[0].language_name %>
        </p>
    </div>
    <h3>Producida por:</h3>
    <div>
        <% if (movie.company.length == 0) { %>
            <p>No hay información de el o los productores.</p>
            <% } else { %>
        <ul>
            <% movie.company.forEach(company=> { %>
                <li>
                    <%= company.company_name %>
                </li>
                <% }); %>
        </ul>
        <% } %>
    </div>
    <h3>País de producción:</h3>
    <div>
        <p>
            <%= movie.movie[0].country_name %>
        </p>
    </div>
    <h3>Géneros: </h3>
    <% if (movie.genre.length == 0) { %>
        <p>No hay información de el o los géneros.</p>
        <% } else { %>
    <ul>
        <% movie.genre.forEach(genre=> { %>
            <li>
                <%= genre.genre_name %>
            </li>
            <% }); %>
    </ul>
    <% } %>
    <h3>Argumento:</h3>
    <div id="overview">
        <p>
            <%= movie.movie[0].overview %>
        </p>
    </div>
    <h3>Palabras clave asociadas:</h3>
    <% if (movie.keyword.length == 0) { %>
        <p>No hay información de las palabras clave asociadas.</p>
        <% } else { %>
    <ul>
        <% movie.keyword.forEach(keyword=>{ %>
            <li>
                <a href="/keyword/<%= keyword.keyword_name %>">
                    <%= keyword.keyword_name %>
                </a>
            </li>
            <% }); %>
    </ul>
    <% } %>
    <h3>Elenco:</h3>
    <ul>
        <% movie.cast.forEach(actor=> { %>
            <li><a href="/actor/<%= actor.person_id %>">
                    <%= actor.person_name %>
                </a> - <%= actor.character_name %>
            </li>
            <% }); %>
    </ul>
    <h3>Equipo:</h3>
    <ul>
        <% movie.crew.forEach(crewMember=> { %>
            <li>
                <%= crewMember.person_name %> - <%= crewMember.department_name %>
                        (<%= crewMember.job %>)
            </li>
            <% }); %>
    </ul>
    <p></p>
    <div id="inicio"><a href="/home">Inicio</a></div>
    <script>
        const add = document.getElementById("add");
        fetch(`/api/isinwatchlist?userId=${localStorage.getItem("userId")}&movieId=${location.href.split("/")[4]}`).then(response => !response.ok ? response.text().then(result => alert(result)) : response.text().then(result => {
            if (result == "false") {
                add.textContent = "Agregar a mi lista";
                add.addEventListener("click", ev => {
                    ev.preventDefault();
                    fetch("/api/watchlist", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ userId: localStorage.getItem("userId"), movieId: location.href.split("/")[4] })
                    }).then(response2 => response2.text().then(result2 => {
                        alert(result2);
                        location.reload();
                    }));
                });
                return;
            } else if (result == "true") {
                add.textContent = "Eliminar de mi lista";
                add.addEventListener("click", ev => {
                    ev.preventDefault();
                    fetch("/api/watchlist", {
                        method: "DELETE",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ userId: localStorage.getItem("userId"), movieId: location.href.split("/")[4] })
                    }).then(response2 => response2.text().then(result2 => {
                        alert(result2);
                        location.reload();
                    }));
                });
            }
        }));
    </script>
</body>

</html>