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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>GTS Attendance Tracker</title>
    <style>

        .fa {
            margin-right: 5px;
        }

        .card {
            align-items: center;
        }

        .card-header {
            width: 100%;
            text-align: center;
        }

        .navbar {
            margin-bottom: 30px;
        }

        .upload-button {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }

        #reset-button {
            margin-right: 10px;
        }
        .navbar-brand{
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <nav class="navbar sticky-top navbar-dark bg-dark">
        <a class="navbar-brand" href="#">GTS Attendance Tracker</a>
    </nav>

    <div class="container">
        <div class="card">
            <h5 class="card-header bg-dark text-white"><i class="fa fa-exchange" aria-hidden="true"></i> Convert Teams Attendance into Attendance Report</h5>
            <div class="card-body">
                <form action="/vlookup" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
                    <h5 class="card-title"><label for="file1"><i class="fa fa-files-o" aria-hidden="true"></i></label> Teams Attendance File</h5>
                    <p class="card-text">
                        <!-- <label for="formFileMultiple" class="form-label">Multiple files input example</label> -->
                        <input class="form-control" name="files1" type="file" id="formFileMultiple" multiple onchange="updateFileName('formFileMultiple', 'file1-label')">   
                </p>
                <h5 class="card-title"><label for="file2"><i class="fa fa-file-excel-o" aria-hidden="true"></i></label> Training Nomination List
                </h5>
                <p class="card-text">
                    <!-- <label for="formFile" class="form-label">Default file input example</label> -->
                    <input class="form-control" name="files2" type="file" id="formFile" onchange="updateFileName('formFile', 'file2-label')">
                </p>
                <h5 class="card-title"><i class="fa fa-clock-o" aria-hidden="true"></i> Mininum In Meeting Duration (in
                    minutes)</h5>
                <p class="card-text">
                <!-- <input type="number" id="delay" name="delay" min="0" step="5" value="0"> -->
                <select class="custom-select" name="delay" required>
                    <option value="0">0</option>
                    <option value="15">15 minutes</option>
                    <option value="30">30 minutes</option>
                    <option value="45">45 minutes</option>
                  </select>
                </p>
                <div class="upload-button">
                    <button id="reset-button" type="submit" class="btn btn-danger"><i class="fa fa-repeat" aria-hidden="true"></i> Reset</button>
                    <button id="upload-button" type="submit" class="btn btn-primary" disabled><i class="fa fa-cloud-upload" aria-hidden="true"></i> Upload</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    
      <!-- <form action="/vlookup" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
        <div class="file-upload-container">
            <h4 class="file-name-title">Teams Attendance File</h4>
                <div class="form-group">
                  <label for="file1">Teams Attendance Files</label>
                  <input type="file" class="form-control-file" id="file1" type="file" name="files1" accept=".xlsx, .xls, .csv" multiple onchange="updateFileName('file1', 'file1-label')">
                </div>
         
        </div>
        <div class="file-upload-container">
            <h4 class="file-name-title">Training Nomination List</h4>
            <label class="file-upload-label">
                Choose Another File
                <input id="file2" type="file" name="files2" accept=".xlsx, .xls, .csv" multiple onchange="updateFileName('file2', 'file2-label')">
            </label>
            <div id="file2-label" class="file-upload-label">No file chosen</div>
        </div>
        <div>
            <label for="delay">Mininum In Meeting Duration (in minutes):</label>
            <input type="number" id="delay" name="delay" min="0" step="5" value="0">
        </div>
        <button onclick="openPopup()">Open Popup</button>

<div id="popup" class="popup">
    <div class="popup-content">
        <span class="close" onclick="closePopup()">&times;</span>
        <h2>Table format</h2>
        <table id="nonEditableTable">
         
        </table>
    </div>
</div>
        <button id="upload-button" type="submit" disabled>Upload</button>
    </form> -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script>
        function updateFileName(inputId, labelId) {
            const input = document.getElementById(inputId);
          //  const label = document.getElementById(labelId);
            const files = input.files;

            if (files.length > 0) {
                let fileNameList = '';
                for (let i = 0; i < files.length; i++) {
                    fileNameList += files[i].name;
                    if (i < files.length - 1) {
                        fileNameList += ', ';
                    }
                }
        //        label.textContent = fileNameList;
            } else {
          //      label.textContent = 'No file chosen';
            }
            validateForm();
        }

        function validateForm() {
            console.log("called")
            const file1 = document.getElementById('formFileMultiple').files;
            const file2 = document.getElementById('formFile').files;
            const uploadButton = document.getElementById('upload-button');
            if (file1.length > 0 && file2.length > 0) {
                uploadButton.disabled = false;
                return true;
            } else {
                uploadButton.disabled = true;
                return false;
            }
        }
        function openPopup() {
            document.getElementById('popup').style.display = 'block';
            populateTable(); // Call function to populate the table
        }

        function closePopup() {
            document.getElementById('popup').style.display = 'none';
        }

        function populateTable() {
            const tableData = [
                ['NEW_EMP_ID', 'NAME'],
            ];
            const table = document.getElementById('nonEditableTable');
            // Clear existing table content
            table.innerHTML = '';
            // Populate the table with data
            tableData.forEach(rowData => {
                const row = document.createElement('tr');
                rowData.forEach(cellData => {
                    const cell = document.createElement('td');
                    cell.textContent = cellData;
                    row.appendChild(cell);
                });
                table.appendChild(row);
            });
        }
        document.addEventListener('DOMContentLoaded',()=>{
            validateForm()
        })
    </script>
</body>

</html>