<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guest Book MVC Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Guest Book Web Application</h1>
    <p>Current Time: <span id="time"></span></p>

    <h2>Add Guest</h2>
    Name: <input type="text" id="name">
    <br><br>
    Email: <input type="email" id="email">
    <br><br>
    Message: <textarea id="message"></textarea>
    <br><br>
    <button type="button" onclick="submitGuest()">Submit</button>

    <hr>

    <h2>Search Guest</h2>
    <input type="text" id="search">
    <button type="button" onclick="searchGuest()">Search</button>

    <hr>

    <h2>Guest Entries</h2>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Message</th>
            <th>Date</th>
            <th>Action</th>
        </tr>
        <tbody id="guestTable"></tbody>
    </table>

    <script src="model.js"></script>
    <script src="controller.js"></script>
    <script src="utils.js"></script>

</body>
</html>













body {
    font-family: Arial;
    margin: 40px;
    background-color: #f4f4f4;
}

h1 {
    color: darkblue;
}

table {
    width: 100%;
    background-color: white;
    border-collapse: collapse;
}

th {
    background-color: lightblue;
}

td, th {
    padding: 10px;
    border: 1px solid gray;
}

button {
    padding: 8px;
}









function showTime() {
    let now = new Date();
    document.getElementById("time").innerText = now.toLocaleTimeString();
}

setInterval(showTime, 1000);










class Guest {
    constructor(id, name, email, message, date) {
        this.id = id;
        this.name = name;
        this.email = email;
        this.message = message;
        this.date = date;
    }
}

let guestDatabase = [];

function addGuest(name, email, message) {
    let id = guestDatabase.length + 1;
    let date = new Date().toLocaleString();
    let guest = new Guest(id, name, email, message, date);
    guestDatabase.push(guest);
}

function getAllGuests() {
    return guestDatabase;
}

function deleteGuest(id) {
    guestDatabase = guestDatabase.filter((g) => g.id !== id);
}

function findGuestByName(name) {
    return guestDatabase.filter((g) =>
        g.name.toLowerCase().includes(name.toLowerCase())
    );
}







function submitGuest() {
    let name = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let message = document.getElementById("message").value;

    if (name == "" || email == "" || message == "") {
        alert("All fields are required");
        return;
    }

    addGuest(name, email, message);
    clearForm();
    displayGuests();
}

function displayGuests() {
    let guests = getAllGuests();
    let table = "";

    for (let i = 0; i < guests.length; i++) {
        table += `
            <tr>
                <td>${guests[i].id}</td>
                <td>${guests[i].name}</td>
                <td>${guests[i].email}</td>
                <td>${guests[i].message}</td>
                <td>${guests[i].date}</td>
                <td>
                    <button onclick="removeGuest(${guests[i].id})">Delete</button>
                </td>
            </tr>
        `;
    }

    document.getElementById("guestTable").innerHTML = table;
}

function removeGuest(id) {
    deleteGuest(id);
    displayGuests();
}

function searchGuest() {
    let name = document.getElementById("search").value;
    let results = findGuestByName(name);
    let table = "";

    for (let i = 0; i < results.length; i++) {
        table += `
            <tr>
                <td>${results[i].id}</td>
                <td>${results[i].name}</td>
                <td>${results[i].email}</td>
                <td>${results[i].message}</td>
                <td>${results[i].date}</td>
                <td>-</td>
            </tr>
        `;
    }

    document.getElementById("guestTable").innerHTML = table;
}

function clearForm() {
    document.getElementById("name").value = "";
    document.getElementById("email").value = "";
    document.getElementById("message").value = "";
}