{% extends 'base.html' %}
{% block content %}



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Include DataTables CSS -->
    <link href="https://cdn.datatables.net/2.1.7/css/jquery.dataTables.min.css" rel="stylesheet">
    
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- Include DataTables JS -->
    <script src="https://cdn.datatables.net/2.1.7/js/jquery.dataTables.min.js"></script>
    
    <!--Datatable-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
    <!--Datatable-->

    <link type="text/css" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <style>
        @import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            font-family: 'Lato', sans-serif;
        }

        .main-container {
            display: flex;
            flex-wrap: wrap;
            max-width: 1600px;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.11);
        }

        .form-column, .table-column {
            flex: 1 1 400px;
            padding: 20px;
        }

        .mwb-form-main-wrapper {
            line-height: 1.5;
        }

        .mwb-form-main-container {
            background-color: #fff;
            color: #7b7878;
        }

        .mwb-form-main-container form {
            padding: 20px;
        }

        .mwb-form-main-container h1 {
            color: #000;
            font-size: 30px;
            font-weight: 500;
            margin: 0 0 10px 0;
            padding: 22px 15px;
            text-align: center;
        }

        .mwb-form-group {
            font-size: 14px;
            margin-bottom: 20px;
            position: relative;
        }

        .mwb-form-text-label {
            left: 10px;
            position: absolute;
            top: 12px;
            transition: 0.2s linear all;
        }

        .mwb-form-group.focus-input .mwb-form-text-label {
            background-color: #ffffff;
            padding: 0 2px;
            top: -11px;
            transition: 0.2s linear all;
        }

        .mwb-form-control {
            background-color: #ffffff;
            border-radius: 5px;
            border: 1px solid #dddddd;
            font-size: 16px;
            padding: 10px;
            width: 100%;
        }

        .mwb-form-submit-btn {
            background-color: darkblue;
            border-radius: 4px;
            border: none;
            color: #ffffff;
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            min-width: 200px;
            padding: 16px 10px;
        }

        .mwb-form-radio {
            display: inline-block;
            margin-right: 15px;
            position: relative;
        }

        .mwb-form-radio input[type="radio"] ~ label {
            padding-left: 10px;
            cursor: pointer;
        }

        .mwb-form-radio input[type="radio"] {
            margin: 0;
            cursor: pointer;
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        .mwb-form-radio input[type="radio"] + label::before {
            background-color: #dddddd;
            border-radius: 50%;
            content: "";
            cursor: pointer;
            height: 20px;
            left: 0;
            position: absolute;
            top: 6px;
            width: 20px;
        }

        .mwb-form-radio input[type="radio"] + label::after {
            background-color: #26A69A;
            border-radius: 50%;
            content: "";
            height: 10px;
            left: 5px;
            opacity: 0;
            position: absolute;
            top: 11px;
            transform: scale(0);
            transition: 0.3s linear all;
            visibility: hidden;
            width: 10px;
        }

        .mwb-form-radio input[type="radio"]:checked + label::after {
            opacity: 1;
            transform: scale(1);
            transition: 0.3s linear all;
            visibility: visible;
        }

        .mwb-form-error {
            color: #f52626;
            display: none;
            font-size: 12px;
            padding-top: 2px;
        }

        /* Responsive styles */
        @media screen and (max-width: 768px) {
            .main-container {
                flex-direction: column;
            }

            .form-column, .table-column {
                flex: 1 1 100%;
            }
        }

        /* DataTables responsive styles */
        @media screen and (max-width: 640px) {
            table.dataTable,
            table.dataTable thead,
            table.dataTable tbody,
            table.dataTable th,
            table.dataTable td,
            table.dataTable tr {
                display: block;
            }

            table.dataTable thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            table.dataTable tr {
                margin-bottom: 15px;
            }

            table.dataTable td {
                border: none;
                position: relative;
                padding-left: 50%;
            }

            table.dataTable td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                content: attr(data-title);
                font-weight: bold;
            }
        }
               input[type="text"], input[type="time"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="form-column">
            <div class="mwb-form-main-wrapper">
                <h1 style="text-align:center;">Check Attendance</h1>
                <div class="mwb-form-main-container">
                    <form id="loginForm" onsubmit="return submitData(event)">
                        <div class="mwb-form-group">
                            <label for="date">From Date</label>
                            <input type="date" class="mwb-form-control" value="" id="date" name="date">
                            <div class="mwb-form-error">This Field Required*</div>
                        </div>
                        <div class="mwb-form-group">
                            <label for="company">Company<span style="color:red;">*</span></label>
                              <select name="company" id="company" class="mwb-form-control">
    <option value="">Select a Company</option>
    {% for i in company_data %}
    <option value="{{i.id}}">{{i.name}}</option>
    {% endfor %}
</select>
                            <div class="mwb-form-error">This Field Required*</div>
                        </div>
                        <div class="mwb-form-group">
                            <label for="branch">Branch<span style="color:red;">*</span></label>
                            <select name="branch" id="branch" class="mwb-form-control">
                                <option value="">Select a Branch</option>
                                <!-- Branch options will be populated here -->
                            </select>
                            <div class="mwb-form-error">This Field Required*</div>
                        </div>
                        <div class="mwb-form-group">
                            <label for="cars">Employee<span style="color:red;">*</span></label>
                            <select name="employeeid" id="cars" class="mwb-form-control">
                                <option value="">Select an Employee</option>
                                <!-- Employee options will be populated here -->
                            </select>
                            <div class="mwb-form-error">This Field Required*</div>
                        </div>
                        <div class="mwb-form-group">
                            <input type="submit" class="mwb-form-submit-btn" value="Submit">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="table-column" style="background-color:#E5E4E2;">
            <table id="example" class="display responsive nowrap" style="width:100%;background-color:#E5E4E2;">
                <thead>
                    <tr>
                        
                        <th style="display:none;">Name</th>
                        <th>Date</th>
                        <th>Name</th>
                        <th>Check In</th>
                        <th>Check Out</th>
                        <th style="display:none;">AID</th>
                        
                        
                   
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>
        </div>
    </div>
    <!--<div class="container1">-->
    <!--    <div class="time-checkin">-->
    <!--        <input type="time" class="time-field" />-->
    <!--        <button class="checkin-button">Check In</button>-->
    <!--    </div>-->
    <!--    <div class="time-checkin">-->
    <!--        <input type="time" class="time-field" />-->
    <!--        <button class="checkin-button">Check Out</button>-->
    <!--    </div>-->
    <!--</div>-->
   

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
document.getElementById('company').addEventListener('change', function() {
    const companyId = this.value;
    alert(companyId);
    // Ensure a company is selected before making the request
    if (companyId) {
        // Make the AJAX request
        fetch('/get_all_branch_details/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}' // CSRF token for security
            },
            body: JSON.stringify({
                companyId: companyId
            })
        })
        .then(response => response.json())
        .then(data => {
            // Clear the existing branch options
            const branchSelect = document.getElementById('branch');
            branchSelect.innerHTML = '<option value="">Select a Branch</option>';

            // Populate branch options with the data from the API
            data.forEach(branch => {
                const option = document.createElement('option');
                option.value = branch.id;
                option.text = branch.name; // Assuming branch.name is available in the response
                branchSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Error fetching branch data:', error);
        });
    }
});
</script>


<!--Employee -->
<script>
document.getElementById('branch').addEventListener('change', function() {
    const branchId = this.value;

    // Ensure a branch is selected before making the request
    if (branchId) {
        // Make the AJAX request to get employees based on the branchId
        fetch('/get_all_employee_details/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'  // Include CSRF token for security
            },
            body: JSON.stringify({
                branchId: branchId  // Pass the selected branchId
            })
        })
        .then(response => response.json())
        .then(data => {
            // Clear the existing employee options
            const employeeSelect = document.getElementById('cars');
            employeeSelect.innerHTML = '<option value="">Select an Employee</option>';

            // Populate employee options from the API response
            data.forEach(employee => {
                const option = document.createElement('option');
                option.value = employee.userdeta_id;  // Assuming the employee has an 'id' field
                option.text = employee.userdeta_firstname; // Assuming the employee has a 'name' field
                employeeSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Error fetching employee data:', error);
        });
    }
});
</script>

<!--Form Submissions -->




     <script>
        async function submitData(event) {
            event.preventDefault(); // Prevent form submission

            // Get input values
            const employeeid = document.getElementById('cars').value;
            const date = document.getElementById('date').value;
            const branch = document.getElementById('branch').value;

            try {
                // Call the API
                const response = await fetch('/EmployeeCheckStatus/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ employeeid, date ,branch }),
                });

                // Check for successful response
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const data = await response.json();
                console.log(data);

                // Update the table with attendance data
                const table = document.getElementById('example').getElementsByTagName('tbody')[0];

                // Clear existing rows
                table.innerHTML = '';

                // Assuming data is an array of attendance records
                data.forEach(record => {
                    const newRow = table.insertRow();
                    const employeeCell = newRow.insertCell(0);
                    const dateCell = newRow.insertCell(1);
                    const statusCell = newRow.insertCell(2);
                    const checkInCell = newRow.insertCell(3);
                    const checkOutCell = newRow.insertCell(4);
                    const attendence_id = newRow.insertCell(5);
                    
                    employeeCell.style.display = 'none';
                    attendence_id.style.display = 'none'

                    employeeCell.textContent = record.attendence_userid; // Adjust based on your API response structure
                    dateCell.textContent = record.date; // Adjust based on your API response structure
                    statusCell.textContent = record.full_name; // Assuming there's a status field
                    checkInCell.textContent = record.intime; // Adjust as per your response
                    checkOutCell.textContent = record.leavetime; // Adjust as per your response
                    attendence_id.textContent = record.statusd; // Adjust as per your response
                });

                // Make table cells editable
                makeCellsEditable(table);

            } catch (error) {
                alert(error);
               
            }
        }

        // Function to make table cells editable and call the API on update
        function makeCellsEditable(table) {
            table.addEventListener('click', function(event) {
                const target = event.target;
                
                // Check if the clicked element is a table cell
                if (target.tagName === 'TD') {
                    const originalContent = target.textContent;
                    const input = document.createElement('input');

                    // Set input value to the original content
                    input.value = originalContent;
                    target.innerHTML = ''; // Clear cell content
                    target.appendChild(input); // Append input to the cell

                    // Focus on the input and select its content
                    input.focus();
                    input.select();

                   
        
                    input.addEventListener('keydown', function(e) {
                        if (e.key === 'Enter') {
                            saveNewValue();
                        }
                    });

                    // Function to save the new value and call the API
                    async function saveNewValue() {
                        const newValue = input.value.trim();
                        target.innerHTML = newValue || originalContent; // Use original content if new value is empty

                        // API Call to update the server with new value
                        try {
                            // Assuming you want to send the updated data along with other info
                            const employeeId = target.parentElement.cells[0].textContent;
                            const date = target.parentElement.cells[1].textContent;
                            const attendence_id = target.parentElement.cells[5].textContent;
                            const status_id = target.parentElement.cells[2].textContent;
                            const column = target.cellIndex; // 2 = Status, 3 = Check-in Time, 4 = Check-out Time

                            const fieldToUpdate = column === 2 ? 'attendance_inout_status' 
                                            : column === 3 ? 'attendence_intime' 
                                            : 'attendence_leavetime';

                            const response = await fetch('/AdminUpdateAttendation/', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                },
                                body: JSON.stringify({
                                    employeeId: employeeId,
                                    date: date,
                                    attendence_id:attendence_id,
                                    status_id:status_id,
                                    [fieldToUpdate]: newValue
                                }),
                            });

                            if (!response.ok) {
                                throw new Error('Failed to update attendance');
                            }

                            const result = await response.json();
                            console.log('Update successful:', result);

                        } catch (error) {
                            console.error('Error updating attendance:', error);
                            alert('Failed to update attendance. Please try again.');
                        }
                    }
                }
            });
        }
    </script>
    
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
 <script type="text/javascript" src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
 <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

</body>
</html>
{% endblock %}