<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BagsForYou - Review Bag</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/default-styling.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="/css/form-styling.css">
</head>

<body style="overflow-y:auto;">
    <!-- COMPONENT HEADER UTAMA -->
    <%switch(status){ case 'admin' :%>
        <%- include('../navigation/header-admin') %>
            <% break; case 'user' :%>
                <%- include('../navigation/header-user') %>
                    <% break; case 'anon' :%>
                        <%- include('../navigation/header') %>
                            <% break; }%>
                                <!-- END OF HEADER -->
                                <div id="addBagReview" class="centered-container">
                                    <a href="/" id="close-window-link">Back</a>

                                    <div class="main-display-container">
                                        <h2>Search your desired bag to review :</h2>
                                        <div id="addBagSearch">
                                            <div class="searchbar-container">
                                                <input type="text" name="search" id="search-main" value="">
                                                <button type="submit" class="boxicon-submit" id="seachForReviewButton">
                                                    <span class="material-symbols-rounded">
                                                        search
                                                    </span>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="results-container-review hidden" id="searchForReviewResults">
                                            <div class="result-item-forReview">
                                                <img src="https://via.placeholder.com/100">
                                                <h4>Bag1</h4>
                                                <a href="#" data-review-link="true">Review This Bag</a>
                                            </div>
                                        </div>


                                        <form action="/addReview" method="POST" class="" id="formAddBagReview">
                                            <label for="bag-name">Bag Name :</label>
                                            <input type="text" id="bag-name" name="bagname" readOnly value="Pilih Tas">
                                            <input type="text" id="usernameReview" hidden name="username"
                                                value="<%- username %>">
                                            <label for="stars">Stars :</label>
                                            <div class="rate">
                                                <input type="radio" id="star5" name="rate" value="5" />
                                                <label for="star5" title="text">5 stars</label>
                                                <input type="radio" id="star4" name="rate" value="4" />
                                                <label for="star4" title="text">4 stars</label>
                                                <input type="radio" id="star3" name="rate" value="3" />
                                                <label for="star3" title="text">3 stars</label>
                                                <input type="radio" id="star2" name="rate" value="2" />
                                                <label for="star2" title="text">2 stars</label>
                                                <input type="radio" id="star1" name="rate" value="1" checked />
                                                <label for="star1" title="text">1 star</label>
                                            </div>

                                            <label for="review-description">Review Description:</label>
                                            <textarea id="review-description" name="reviewdescription"></textarea>

                                            <div class="button-container">
                                                <input type="submit" value="Submit" id="submitReview">
                                                <input type="button" value="Cancel" id="cancelReview">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <script>
                                    const searchButton = document.querySelector('#seachForReviewButton');
                                    const resultContainer = document.querySelector('#searchForReviewResults');
                                    const formReviewContainer = document.querySelector('#formAddBagReview');
                                    const searchText = document.querySelector('#search-main');
                                    const subButt = formReviewContainer.querySelector('input[type=submit]');
                                    subButt.addEventListener('click', (e) => {
                                        e.preventDefault();
                                        console.log(formReviewContainer.querySelector("#bag-name").value === 'Pilih Tas');
                                        if (formReviewContainer.querySelector("#bag-name").value === 'Pilih Tas') {
                                            alert("Pilih tas belum terisi");
                                        }
                                        else if (formReviewContainer.querySelector("textarea").value.length === 0) {
                                            alert("Review belum terisi");
                                        }
                                        else {
                                            document.querySelector('form').submit();
                                            // alert("Review sudah berhasil ditambahkan");
                                        }
                                    })
                                    searchButton.addEventListener('click', async () => {
                                        resultContainer.classList.remove('hidden');
                                        formReviewContainer.classList.add('hidden');

                                        try {
                                            const searchParam = !searchText.value ? 'none' : searchText.value
                                            console.log(searchParam);
                                            const response = await fetch('reviewSearch/' + searchParam);
                                            const bags = await response.json();
                                            console.log(bags);
                                            console.log(bags[0]);
                                            console.log(bags[0].namaTas);
                                            const results = [];
                                            let bagElement, image, name, reviewLink;
                                            for (const bag of bags) {
                                                //container
                                                bagElement = document.createElement('div');
                                                bagElement.setAttribute('class', 'result-item-forReview');
                                                // gambar
                                                image = document.createElement('img');
                                                image.src = bag.Foto;
                                                // nama tas
                                                name = document.createElement('h4');
                                                name.textContent = bag.namaTas;
                                                // review link
                                                reviewLink = document.createElement('a');
                                                reviewLink.setAttribute('href', '#');
                                                reviewLink.setAttribute('data-review-link', 'true');
                                                reviewLink.setAttribute('data-bag-name', bag.namaTas);
                                                reviewLink.textContent = 'Review This Bag';
                                                bagElement.appendChild(image);
                                                bagElement.appendChild(name);
                                                bagElement.appendChild(reviewLink);
                                                results.push(bagElement);
                                            }
                                            resultContainer.replaceChildren(...results);
                                            const reviewLinks = document.querySelectorAll('[data-review-link="true"]');
                                            reviewLinks.forEach((link) => {
                                                link.addEventListener('click', (e) => {
                                                    e.preventDefault();
                                                    searchForReviewResults.classList.add('hidden');
                                                    formReviewContainer.classList.remove('hidden');
                                                    formReviewContainer.querySelector('#bag-name').value = link.getAttribute('data-bag-name');
                                                });
                                            });
                                        } catch { // catch nothing..
                                        }
                                    })
                                    const cancelReviewButton = document.querySelector('#cancelReview');
                                    cancelReviewButton.addEventListener('click', () => {
                                        searchForReviewResults.classList.remove('hidden');
                                        formReviewContainer.classList.add('hidden');
                                    });
                                </script>
</body>

</html>