<!DOCTYPE html>
<html lang="lv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lietotāja interfeiss</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
     html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Lai fons atrastos zemāk par citiem elementiem */
    background-color: #f2f2f2;
}

.container {
    width: 100%;
    max-width: 800px;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    position: relative;
    max-length: 1000px;
}

.top-right {
    position: absolute;
    top: 20px;
    right: 20px;
}

.top-right button {
    background-color: #dc3545;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px; /* Pievienots, lai paceltu pogu augšup */
}


        .search-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .search-container label {
            font-size: 18px;
            margin-right: 10px;
        }

        .search-container input[type="text"] {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .search-container button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        .entries {
            margin-top: 20px;
        }

        .entry-row {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

        .entry-row button {
            background-color: #28a745;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 5px;
        }

        #datepicker {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="top-right">
        <button onclick="logoutAndRedirect()">Beigt darbu</button>
    </div>

    <div class="search-container">
        <label for="datepicker">Izvēlies datumu:</label>
        <input type="text" id="datepicker" name="date">
        <button onclick="searchByDate()">Meklēt</button>
    </div>

    <div class="entries">
        <div class="entry-row">
            <button onclick="createNewEntry()">Izveidot jaunu ierakstu</button>
            <button onclick="loadPastEntry(1)">Iepriekšējais ieraksts</button>
            <button onclick="loadPastEntry(2)">Iepriekšējais ieraksts</button>
            <button onclick="loadPastEntry(3)">Iepriekšējais ieraksts</button>
        </div>
        <div class="entry-row">
            <button onclick="loadPastEntry(4)">Iepriekšējais ieraksts</button>
            <button onclick="loadPastEntry(5)">Iepriekšējais ieraksts</button>
            <button onclick="loadPastEntry(6)">Iepriekšējais ieraksts</button>
            <button onclick="loadPastEntry(7)">Iepriekšējais ieraksts</button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
    const routeUrls = {
        lietotaja_interfeiss_buttons: "{{ route('lietotaja_interfeiss_buttons') }}",
        entry_creation_page: "{{ route('entry_creation_page') }}",
        welcome: "{{ route('welcome') }}",
        logout: "{{ route('logout') }}",
    };

    $(function() {
        $("#datepicker").datepicker({
            dateFormat: "yy-mm-dd"
        });
    });

    function finishWork() {
        console.log("Beidzam darbu");
        window.location.href = routeUrls.lietotaja_interfeiss_buttons;
    }

    function createNewEntry() {
        console.log("Izveidojam jaunu ierakstu");
        window.location.href = routeUrls.entry_creation_page;
    }


    function loadPastEntry(entryNumber) {
        console.log("Atveram iepriekšējo ierakstu Nr. " + entryNumber);
    }

    function searchByDate() {
        const date = $('#datepicker').val();
        if (date) {
            window.location.href = `./../search_entries?date=${date}`;
        } else {
            alert('Lūdzu, izvēlies datumu!');
        }
    }
    
    function logoutAndRedirect() {
        console.log("Logging out and redirecting to welcome page...");
        fetch("{{ route('logout') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            console.log("Logout successful.");
            window.location.href = "{{ route('welcome') }}";
        })
        .catch(error => {
            console.error("Logout failed:", error);
        });
    }
</script>

</body>
</html>

