<!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">
    <link rel="icon" type="image/x-icon" href="/img/favicon.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/style.css">
    <title>Smartphome</title>
</head>

<body>
    <div class="content d-flex flex-column">
        <div class="top sticky-top ">
            <nav class="navbar bg-dark ">
                <div class="container-fluid d-flex flex-row justify-content-between align-items-center">


                    <div class="logo ms-2 " role="button">
                        <a class="navbar-brand white_text d-block" href="/">Smartphome</a>
                    </div>
                    <div class="search_form w-50">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" oninput="searchProduct(this.value)">
                    </div>
                    <div class="icons d-flex flex-row me-3">

                        <% if(!user) { %>
                            <div class="options me-2" id="clickable-div-cart" type="button">
                                <img src="./img/cart_pic_light.png" alt="cart.png" class="cart_img" width="32px">
                            </div>
                            <div class="options me-2" id="clickable-div-account" type="button">
                                <img src="./img/profile_pic_light.png" alt="profile.png" class="cart_img" width="32px">
                            </div>
                        <%} else {%>
                                <%if(user.isAdmin === true){%>
                                    <div class="options me-2" id="clickable-div-create" type="button">
                                        <img src="./img/create_light.png" alt="cart.png" class="cart_img" width="32px">
                                    </div>

                                    <div class="options me-2" id="clickable-div-settings" type="button">
                                        <a href="/adminpanel">
                                            <img src="./img/settings_light.png" alt="settings.png" class="cart_img" width="32px"> 
                                        </a>
                                    </div>
                                <%}else {%>
                                    <div class="options me-2" id="clickable-div-cart" type="button">
                                        <img src="./img/cart_pic_light.png" alt="cart.png" class="cart_img" width="32px">
                                    </div>
                                <%}%>
                                <div class="options me-2" id="clickable-div-logout" type="button">
                                    <img src="./img/logout_light.png" alt="settings.png" class="cart_img" width="32px">
                                </div>
                        <%}%>

                    </div>
                </div>
            </nav>

        </div>
        <div class="main">
            <div class="mainwrapper d-flex flex-row pt-4 mb-3">
                <aside class="catalog-sidebar me-4 ms-3">
                    <div class="sidebar-title">
                        <b>Критерії вибору товару</b>
                        <hr>
                        <table class="price sidebar-text">
                            <thead>
                                <span class="sidebar-parag-title">Ціна</span>
                            </thead>
                            <tr>
                                <td>від</td>
                                <td>
                                    <input type="text" id="minPrice" name="minPrice" value="" class="rm-price-input">
                                </td>
                                <td>до</td>
                                <td>
                                    <input type="text" id="maxPrice" name="maxPrice" value="" class="rm-price-input">
                                </td>
                                <td>грн.</td>
                            </tr>
                        </table>
                        <hr>
                        <b class="sidebar-parag-title">Сортувати за:</b>
                        <select class="form-select" id="sortby" aria-label="Default select example" onchange="sortPhones()">
                            <option value="0">Часом добавлення</option>
                            <option value="1">Зростанням</option>
                            <option value="2">Спаданням</option>
                          </select>
                    </div>
                </aside>

                <div class="maincontent  me-3 d-flex flex-column">
                    <div>
                        <div id="carouselExampleInterval" class="carousel slide " data-bs-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active" data-bs-interval="3000">
                                    <img src="https://res.cloudinary.com/dxsbqj6z1/image/upload/v1687947864/smartphome/assets/carousel-1.png" class="d-block carousel-photo" alt="...">
                                </div>
                                <div class="carousel-item" data-bs-interval="3000">
                                    <img src="https://res.cloudinary.com/dxsbqj6z1/image/upload/v1687947864/smartphome/assets/carousel-2.png" class="d-block carousel-photo" alt="...">
                                </div>
                                <div class="carousel-item" data-bs-interval="3000">
                                    <img src="https://res.cloudinary.com/dxsbqj6z1/image/upload/v1687947864/smartphome/assets/carousel-3.png" class="d-block carousel-photo" alt="...">
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>
                    <div class="cards-container d-flex flex-wrap mt-1" id="cards_container"></div>
                </div>
            </div>
        </div>


        <div class="footer container-fluid bg-dark white_text d-flex flex-row justify-content-around pt-3 pb-3 mt-3">
            <div class="footer-aboutus w-25">
                <div class="footer-caption mb-2">
                    Про нас
                </div>
                <div class="sidebar-text">Сайт створено з метою здачі курсової роботи 2023 року (2-й семестер 3-ого
                    курсу) Михайлом Капусняком</div>
            </div>
            <div class="footer-contact-info  w-25">
                <div class="footer-caption mb-2">
                    Контактна інформація
                </div>
                <div class="sidebar-text">
                    bokuwaikitei@gmail.com
                    <br>
                    +38(080)-000-00-00
                </div>
            </div>
            <div class="footer-found-bug  w-25">
                <div class="footer-caption mb-2">
                    Знайшли помилку?
                </div>
                <div class="sidebar-text">
                    Будь ласка, повідомне про неї повідомити за адресою bokuwaikitei@gmail.com
                </div>
            </div>
        </div>
    </div>

    <div class="modal-local  modal-account" id="account-modal">

        <div class="modal-content">

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active yellow" id="login-tab" data-bs-toggle="tab"
                        data-bs-target="#login-tab-pane" type="button" role="tab" aria-controls="login-tab-pane"
                        aria-selected="true">Log in</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane"
                        type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Sign up</button>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="login-tab-pane" role="tabpanel" aria-labelledby="login-tab"
                    tabindex="0">

                    <div class="modal-body-login d-flex flex-column align-items-center w-100">
                        <div class="account-login-form d-flex flex-column w-100">
                            <label for="user_email_login" class="sidebar-text mt-3"><b>Email</b></label>
                            <input class="user_data_input" type="text" placeholder="Enter Email" id="user_email_login"
                                required>
                            <label for="user_pass_login" class="sidebar-text mt-3"><b>Password</b></label>
                            <input type="password" class="user_data_input" placeholder="Enter Password"
                                id="user_pass_login" required>
                            <p id="error-text-log" class="text-danger">Error message here.</p>
                        </div>
                    </div>

                    <div class="modal-footer d-flex flex-row justify-content-around ">
                        <button type="button" class="btn btn-secondary modal-button-close w-25">Close</button>
                        <button type="button" class="btn btn-primary w-25 bg-success" id="submit_login">Log in</button>
                    </div>
                </div>
                <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab"
                    tabindex="0">

                    <div class="modal-body-signup d-flex flex-column align-items-center">
                        <div class="account-signup-form  d-flex flex-column w-100">

                            <label for="user_email_signup" class="sidebar-text mt-3"><b>Email</b></label>
                            <input type="text" class="user_data_input" placeholder="Enter Email" id="user_email_signup"
                                required>

                            <label for="user_pass_signup" class="sidebar-text mt-3"><b>Password</b></label>
                            <input type="password" class="user_data_input" placeholder="Enter Password"
                                id="user_pass_signup" required>

                            <label for="user_pass_rep_signup" class="sidebar-text mt-3"><b>Repeat Password</b></label>
                            <input type="password" class="user_data_input" placeholder="Repeat Password"
                                id="user_pass_rep_signup" required>
                            <p id="error-text-reg" class="text-danger">Error message here.</p>
                        </div>
                    </div>
                    <div class="modal-footer d-flex flex-row justify-content-around">
                        <button type="button" class="btn btn-secondary modal-button-close w-25">Close</button>
                        <button type="button" class="btn btn-primary w-25 bg-success" id="submit_signup">Sign
                            up</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="modal-local  modal-cart" id="cart-modal">
        <div class="modal-content">
            <div class="modal-header mb-2">
                <h1 class="modal-title fs-5">Cart</h1>
                <button type="button" class="btn-close"></button>
            </div>

            <div class="modal-body-cart d-flex flex-column align-items-center">
                <% if(!user) { %>
                    You have to log in to have access to the cart!
                <%} else {%>
                        <%if(!user.isAdmin){%>

                <%}}%>
                <table id="table-cart"></table>
            </div>

            <div class="modal-footer d-flex flex-row justify-content-center ">
                <% if(user) { %>
                    <button type="button" class="btn btn-primary w-25" id="button-order">Order</button>
                <%}%>
            </div>
        </div>
    </div>

    <div class="modal-local" id="modal-product-info">
        <div class="modal-content center">
            <div class="modal-header mb-2">
                <h1 class="modal-title fs-5" id="modal-product-info-header"></h1>
                <button type="button" class="btn-close" id="modal-product-info-close-cross"></button>
            </div>
            <div>

                <form name="productForm" id="idProductForm" action="/products/add_new" enctype="multipart/form-data"
                    method="post">
                        <div class="modal-body d-flex flex-column align-items-center">
                            <table id="product-info-table">
                                <tr>
                                    <td>
                                        <label for="product-info-manufacturer" class=""><b>Manufacturer</b></label>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" placeholder="Company"
                                            name="manufacturer" id="product-info-manufacturer"
                                            aria-describedby="addon-wrapping">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="product-info-model" class=""><b>Model</b></label>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" placeholder="Model" name="model"
                                            id="product-info-model" aria-describedby="addon-wrapping">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="product-info-diagonal" class=""><b>Diagonal, inches</b></label>
                                    </td>
                                    <td>
                                        <select class="form-select" id="product-info-diagonal" name="diagonal">
                                            <option value="" selected="selected">Select value</option>
                                            <option value="4.7">4.7"</option>
                                            <option value="6">6"</option>
                                            <option value="6.1">6.1"</option>
                                            <option value="6.3">6.3"</option>
                                            <option value="6.5">6.5"</option>
                                            <option value="6.6">6.6"</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="product-info-processor" class=""><b>Processor</b></label>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" placeholder="Processor" name="cpu"
                                            id="product-info-processor" aria-describedby="addon-wrapping">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="product-info-ram" class=""><b>RAM</b></label>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" placeholder="RAM"
                                            id="product-info-ram" name="ram" aria-describedby="addon-wrapping">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="product-info-rom" class=""><b>ROM</b></label>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" placeholder="Embedded memory"
                                            name="rom" id="product-info-rom" aria-describedby="addon-wrapping">
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="text-align: center">
                                        <img id="product-info-picture-preview" src="#" height="256px" max-width="400px"
                                            alt="preview" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="product-info-picture" class=""><b>Phone image</b></label>
                                    </td>
                                    <td>
                                        <input type="file" class="form-control" id="product-info-picture"
                                            aria-describedby="addon-wrapping" name="image" accept="image/*">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="product-info-price" class=""><b>Price</b></label>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" placeholder="Price in UAH"
                                            name="price" id="product-info-price" aria-describedby="addon-wrapping">
                                    </td>
                                </tr>
                            </table>
                            <div class="" id="emptyfield" style="color:red; display:none">Fields cannot be empty!</div>
                        </div>
                        <div class="modal-footer d-flex flex-row justify-content-center"
                            id="product-info-button-container">
                        </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal-local" id="modal-product-view">
        <div class="modal-content center flex-row justify-content-around"
            style="width:600px; height: 400px; padding: 10px 5px;">
            <div class="modal-header">
                <img id="product-view-picture-preview" src="#" style="max-width: 400px; max-height: 380px;"
                    alt="preview" />
            </div>
            <div>
                <div class="modal-body d-flex flex-column align-items-center">
                    <table id="product-view-table">
                        <tr>
                            <td>
                                <b>Manufacturer</b>
                            </td>
                            <td style="padding: 0 10px">
                                <span id="product-view-manufacturer"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Model</b>
                            </td>
                            <td style="padding: 0 10px">
                                <span id="product-view-model"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Diagonal, inches</b>
                            </td>
                            <td style="padding: 0 10px">
                                <span id="product-view-diagonal"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Processor</b>
                            </td>
                            <td style="padding: 0 10px">
                                <span id="product-view-cpu"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>RAM</b>
                            </td>
                            <td style="padding: 0 10px">
                                <span id="product-view-ram"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>ROM</b>
                            </td>
                            <td style="padding: 0 10px">
                                <span id="product-view-rom"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Price</b>
                            </td>
                            <td style="padding: 0 10px">
                                <span id="product-view-price"></span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="modal-footer d-flex flex-row justify-content-around">
                                    <% if(user) { %>
                                            <%if(user.isAdmin === true){%>
                                                <button type="button" class="btn btn-warning" id="product-view-edit">Edit</button>
                                                <button type="button" class="btn btn-danger" id="product-view-delete">Delete</button>
                                                
                                            <%}else{%>
                                                <button type="button" class="btn btn-success" id="product-view-buy">Add to cart</button>
                                            <%}%>
                                    <%}else{%>
                                        <p class="text-primary-emphasis" style="font-size: 14px;">To buy product you need to log in.</p>
                                    <%}%>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <span hidden id="product-view-id"></span>
                </div>
            </div>
        </div>
    </div>

    <% if(!user) { %>
        <script src="/js/frontend/guest.js"></script>
        <script src="/js/frontend/login_modal.js"></script>
    <%} else {%>
        <script src="/js/frontend/logout.js"></script>
        <%if(user.isAdmin === true){%>
            <script src="/js/frontend/admin.js"></script>
        <%}else{%>
                <script src="/js/frontend/user.js"></script>
    <%}}%>
    <script src="/js/frontend/script.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>

</html>