<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Munkanap Kalkulátor</title>

        <meta name="description" content="Számolja ki a munkanap szerződések lejárati dátumait egy megadott kezdő dátum alapján.">

        <meta name="keywords" content="munkanap, kalkulátor, szerződés, dátum, ünnepek">



        <!-- Libraries -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">



        <script type="text/javascript">

            try {

                document.addEventListener("DOMContentLoaded", function() {

                    // Ünnepek listája

                    const holidays = [

                        '01-01', // Újév

                        '03-15', // Böjti szünidő kezdete (több eset)

                        '03-16', // Böjti szünidő

                        '04-04', // Húsvét

                        '05-01', // Munka ünnepe

                        '08-20', // Államalapítás ünnepe

                        '10-23', // Forradalom ünnepe

                        '11-01', // Mindenszentek

                        '12-25', // Karácsony

                        '12-26'  // Karácsony másnapja

                    ];



                    function isHoliday(date) {

                        const dateString = `${date.getMonth() + 1}-${date.getDate()}`;

                        return holidays.includes(dateString) || date.getDay() === 0 || date.getDay() === 6; // Vasárnap, Szombat

                    }



                    function calculateWorkingDays(startDate, numDays) {

                        let count = 0;

                        let date = new Date(startDate);

                        while (count < numDays) {

                            date.setDate(date.getDate() + 1);

                            if (!isHoliday(date)) {

                                count++;

                            }

                        }

                        return date;

                    }



                    $('#calculate-btn').on('click', function() {

                        const year = new Date().getFullYear();

                        const startDate = new Date(`${year}-${$("#start-date").val()}`);

                        if (isNaN(startDate.getTime())) {

                            alert('Kérjük, adjon meg egy érvényes dátumot!');

                            return;

                        }



                        const duretion60 = calculateWorkingDays(startDate, 60);

                        const duration70 = calculateWorkingDays(startDate, 70);



                        $('#result-60').text(`60 nap: ${duretion60.toLocaleDateString("hu-HU")}`);

                        $('#result-70').text(`70 nap: ${duration70.toLocaleDateString("hu-HU")}`);

                    });



                    function updateTable() {

                        const tableBody = $('#date-table-body');

                        tableBody.empty();

                        

                        for (let i = 0; i <= 31; i++) { // 1 hónap, folyamatos görgetés

                            const start = new Date(new Date().getFullYear(), new Date().getMonth(), i);

                            const soon60 = calculateWorkingDays(start, 60);

                            const soon70 = calculateWorkingDays(start, 70);



                            if (start.getMonth() === new Date().getMonth()) {

                                tableBody.append(`

                                    <tr>

                                        <td>${start.toLocaleDateString("hu-HU")}</td>

                                        <td>${soon60.toLocaleDateString("hu-HU")}</td>

                                        <td>${soon70.toLocaleDateString("hu-HU")}</td>

                                    </tr>

                                `);

                            }

                        }

                    }

                    updateTable();

                });



            } catch (error) {

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(to right, #74ebd5, #acb6e5);

                color: #333;

            }

            #main-container {

                margin-top: 20px;

                text-align: center;

            }

            h1 {

                color: #333;

            }

            .result {

                margin-top: 20px;

                font-size: 1.5em;

                font-weight: bold;

            }

            .btn-custom {

                background-color: #ff4081;

                color: white;

                transition: background-color 0.3s;

            }

            .btn-custom:hover {

                background-color: #f50057;

            }

            table {

                margin-top: 30px;

                width: 100%;

                overflow-x: auto;

                display: block;

                max-height: 300px; /* max height for scrolling */

                overflow-y: auto; /* enable vertical scroll */

            }

            th, td {

                padding: 15px;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1>Munkanap Kalkulátor</h1>

            <div class="mb-3">

                <label for="start-date" class="form-label">Kezdő dátum (Hónap-Nap):</label>

                <input type="date" id="start-date" class="form-control" required>

            </div>

            <button id="calculate-btn" class="btn btn-custom">Kiszámol</button>

            <div class="result" id="result-60"></div>

            <div class="result" id="result-70"></div>



            <div class="table-responsive">

                <table class="table table-striped">

                    <thead>

                        <tr>

                            <th>Dátum</th>

                            <th>60 nap lejárat</th>

                            <th>70 nap lejárat</th>

                        </tr>

                    </thead>

                    <tbody id="date-table-body"></tbody>

                </table>

            </div>

        </div>

    </body>

</html>