<?php
include "pin/header.php";
include "pin/sidenav.php";

$user_id = $_SESSION['user_id'];
$emp_id = $_SESSION['emp_id'];
$user_role = $_SESSION['user_role'];



?>

<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->

<div class="content-page">
    <div class="content">
        <div class="container-fluid">

            <div class="row mt-5">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title mt-0 mb-4">Change Attendance Status (Not A Leave)</h4>
                            <!-- <p class="sub-header">
                                DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.
                            </p> -->

                            <form id="form_submit">
                                <div class="row">

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="employee_id">Select Employee<span class="text-danger">*</span></label>
                                            <select data-plugin="customselect" name="employee_id" class="form-control custom-select-picker-ajax" data-search="employees" data-param="<?php echo htmlspecialchars(json_encode(['default'=>'', 'current_page'=>$currentPageName])); ?>" data-placeholder="Select Employee" id="employee_id" required>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="date_status">Select Date<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="date_status" id="dash-daterange" style="min-width: 210px;" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="attendance_status">Select Attendance Status<span class="text-danger">*</span></label>
                                            <select data-plugin="customselect" name="attendance_status" class="form-control custom-select-picker" data-placeholder="Select Attendance Status" id="attendance_status" required>
                                                <option></option>
                                                <?php
                                                    $att_status = mysqli_query($db, "SELECT * FROM attendance_status");
                                                    while($row = mysqli_fetch_assoc($att_status)){
                                                ?>
                                                <option value="<?php echo $row['status']; ?>"><?php echo $row['status']; ?></option>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="attendance_comment">Reason/Comment<span class="text-danger">*</span></label>
                                            <textarea class="form-control" name="attendance_comment" id="attendance_comment" rows="5" required placeholder="Enter Comment..."></textarea>
                                        </div>
                                    </div>

                                </div>

                                <input type="hidden" name="setAttendanceStatus" class="btn btn-danger px-4">

                                <div class="text-right mt-3">
                                    <button type="submit" name="setAttendanceStatus" class="btn btn-danger px-4">Set Status</button>
                                </div>
                            </form>
                        </div> <!-- end card-body -->
                    </div>
                </div> <!-- end col-->
            </div>
            <!-- end row -->

        </div>
    </div> <!-- content -->




</div>

<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->



<?php
include "pin/footer.php";
?>

<script>
    let dateRangePicker = flatpickr("#dash-daterange", {
        mode: "range",
        dateFormat: "d M Y",
        defaultDate: [
            "<?php echo date('d M Y'); ?>",
            "<?php echo date('d M Y', strtotime('next day')); ?>"
        ]
    });

    $("#employee_id").change(function () {
        if (this.value !== 'all' && this.value !== '') {
            let val = this.value;
            $.ajax({
                url: 'fun/function',
                type: 'post',
                data: { notALeave_employee_id: val },
                dataType: 'json',
                success: function (res) {
                    if (res.min_date && res.max_date) {
                        dateRangePicker.set("minDate", res.min_date);
                        dateRangePicker.set("maxDate", res.max_date);
                        dateRangePicker.setDate(new Date(res.max_date));
                    }
                }
            });
        }
    });


    function hasEmptyFields(form) {
        // Get all input elements within the form
        const inputs = form.querySelectorAll('input, select, textarea');

        // Check if any input is empty or null
        return Array.from(inputs).some(input => {
                // console.log(input.required, input.value.trim(), input.id);
                return input.required && input.value.trim() === ''
            }
        );
    }

    $('#form_submit').submit(function (e) {
        e.preventDefault();
        let form = document.getElementById('form_submit');
        // let form_data = new FormData(form);
        let form_data = $('#form_submit').serialize();
        // console.log(form_data);

        if(hasEmptyFields(form)){
            failedMessage('Please, Fill all the Fields.','<?php echo $_SESSION['user_name']; ?>');
            return false;
        }
        $.ajax({
            url: 'fun/function',
            type: 'POST',
            data: form_data,
            dataType: 'json',
            success: function(res) {
                // console.log(res);
                if (res.status === 200) {
                    successMessage(res.message, '<?php echo $_SESSION['user_name']; ?>');
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                } else {
                    failedMessage(res.message, '<?php echo $_SESSION['user_name']; ?>');
                }
            },
            error: function(xhr, status, error) {
                console.log(`Error: ${JSON.stringify(error)}`);
            }
        });
    });

</script>