<?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="mt-5"></div>

            <div class="row mb-3" id="filter_block">
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="employee_id">User (Name, E-mail, Phone)</label>
                        <select required id="employee_id" name="employee_id" data-plugin="customselect" class="form-control custom-select-picker-ajax" data-search="employees" data-param="<?php echo htmlspecialchars(json_encode(['default'=>'', 'current_page'=>$currentPageName])); ?>" data-placeholder="Select user">
                            <option></option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="department">Department</label>
                        <select required id="department" name="department" data-plugin="customselect" class="form-control custom-select-picker-ajax" data-search="departments" data-param="<?php echo htmlspecialchars(json_encode(['default'=>'', 'current_page'=>$currentPageName])); ?>" data-placeholder="Select Department">
                            <option></option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="which_date">Which Month</label>
                        <input type="text" name="which_date" id="which_date" class="form-control flatpickr_date" data-isDate="true" required>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="attendance_status">Attendance Status</label>
                        <select required id="attendance_status" name="attendance_status" data-plugin="customselect" class="form-control custom-select-picker" data-placeholder="Select Attendance Status">
                            <option></option>
                            <?php
                                $att_status = mysqli_query($db,"SELECT attendance_status FROM attendance GROUP BY attendance_status ORDER BY attendance_status ASC");
                                while($as = mysqli_fetch_assoc($att_status)){
                            ?>
                            <option value="<?php echo $as['attendance_status']; ?>"><?php echo $as['attendance_status']; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="punch_in_time">Punch In (In 24 Hours Like 10:00)</label>
                        <div class="input-group">
                            <span class="">
                                <select required id="punch_in_time_operator" name="punch_in_time_operator" class="form-control" data-isLGOperator="true" style="width:fit-content; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; -moz-appearance: none; -webkit-appearance: none;">
                                    <option value="<" selected><</option>
                                    <option value=">">></option>
                                    <option value="<="><=</option>
                                    <option value=">=">>=</option>
                                </select>
                            </span>
                            <input type="text" class="form-control" style="border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;" data-isLG="true" required name="punch_in_time" id="punch_in_time" placeholder="Punch In (In 24 Hours Like 10:00)">
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="punch_out_time">Punch Out (In 24 Hours Like 19:00)</label>
                        <div class="input-group">
                            <span class="">
                                <select required id="punch_out_time_operator" name="punch_out_time_operator" class="form-control" data-isLGOperator="true" style="width:fit-content; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; -moz-appearance: none; -webkit-appearance: none;">
                                    <option value="<" selected><</option>
                                    <option value=">">></option>
                                    <option value="<="><=</option>
                                    <option value=">=">>=</option>
                                </select>
                            </span>
                            <input type="text" class="form-control" style="border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;" data-isLG="true" required name="punch_out_time" id="punch_out_time" placeholder="Punch Out (In 24 Hours Like 19:00)">
                        </div>
                    </div>
                </div>
              
                <div class="col-md-2">
                    <div class="d-flex flex-column mb-3">
                        <button type="button" class="btn btn-danger btn-padding mb-1" name="clear_filter" id="clear_filter">Clear</button>
                        <button class="btn btn-success btn-padding" type="button" name="search_filter" id="search_filter">Search</button>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div id="filter_options" class="d-flex align-items-center flex-wrap" style="gap:0.25rem"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="attendance_action">Action</label>
                        <select required id="attendance_action" name="attendance_action" data-plugin="customselect" class="form-control custom-select-picker" data-placeholder="Select Action">
                            <option></option>
                            <option value="Update">Update</option>
                            <option value="Delete">Delete</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3" id="attendance_status_update" style="display:none;">
                    <div class="form-group">
                        <label class="form-label" for="u_attendance_status">Attendance Status</label>
                        <select required id="u_attendance_status" name="u_attendance_status" data-plugin="customselect" class="form-control custom-select-picker" data-placeholder="Select Attendance Status">
                            <option></option>
                            <?php
                                $att_status = mysqli_query($db,"SELECT attendance_status FROM attendance GROUP BY attendance_status ORDER BY attendance_status ASC");
                                while($as = mysqli_fetch_assoc($att_status)){
                            ?>
                            <option value="<?php echo $as['attendance_status']; ?>"><?php echo $as['attendance_status']; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="col-md-3" id="attendance_comment_update" style="display:none;">
                    <div class="form-group">
                        <label class="form-label" for="u_attendance_comment">Attendance Comment</label>
                        <textarea name="u_attendance_comment" id="u_attendance_comment"rows="1" class="form-control" placeholder="Attendance Comment..."></textarea>
                    </div>
                </div>
                <div class="col-md-2" id="action_perform_button" style="display:none;">
                    <div class="d-flex flex-column mb-3">
                        <button type="button" class="btn btn-danger btn-padding mb-1" onclick="location.reload();">Cancel</button>
                        <button class="btn btn-success btn-padding" type="button" name="perform_action" id="perform_action"></button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body p-4">
                            <h4 class="header-title mt-0 mb-1 mb-4">
                                Raw Attendance
                            </h4>

                            <table id="basic-datatable" class="table dt-responsive nowrap">
                                <thead>
                                    <tr>
                                        <th><input id="checkAll" type="checkbox"></th>
                                        <th>Employee Id</th>
                                        <th>Name</th>
                                        <th>Department</th>
                                        <th>Attendance Status</th>
                                        <th>Punch In</th>
                                        <th>Punch Out</th>
                                        <th>Hours Worked</th>
                                        <th>Which Month</th>
                                        <th>Change</th>
                                        <th>Change Reason</th>
                                        <th>Comment</th>
                                    </tr>
                                </thead>

                            </table>
                            <!-- </div> -->

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->

        </div>
    </div> 

</div>



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

<script>

    $("#attendance_action").change(function(e){
        if(this.value=='Update'){
            $("#attendance_status_update").show();
            $("#attendance_comment_update").show();
        }else{
            $("#attendance_status_update").hide();
            $("#attendance_comment_update").hide();
        }
        $('#action_perform_button').show();
        $('#perform_action').text(`${this.value} Attendance`)
    });




    $(document).ready(function() {

        $('#perform_action').click(function(e){
            let attendance_action = $('#attendance_action').val();
            let u_attendance_status = $('#u_attendance_status').val();
            let u_attendance_comment = $('#u_attendance_comment').val();

            if(attendance_action=='Update' && u_attendance_status==''){
                failedMessage('Please, Select Attendance Status.', '<?php echo $_SESSION['user_name']; ?>');
                return false;
            }

            if(all_checkboxes_val.length>0){

                $.ajax({
                    url:'fun/function',
                    type:'post',
                    data:{
                        attendance_action,
                        u_attendance_status,
                        u_attendance_comment,
                        all_checkboxes_val: all_checkboxes_val.join(',')
                    },
                    success:function(res){
                        console.log(res);
                        if(res==1){
                            show_hierarchy_data();
                            successMessage('Attendance Updated Successfully!', '<?php echo $_SESSION['user_name']; ?>');
                            $("#attendance_status_update").hide();
                            $("#attendance_comment_update").hide();
                            $('#action_perform_button').hide();

                            $('#attendance_action option').first().prop('selected',true).trigger('change');
                            $('#u_attendance_status option').first().prop('selected',true).trigger('change');
                            $('#u_attendance_comment').val('');
                        }else{
                            failedMessage('Some Error Occurred.', '<?php echo $_SESSION['user_name']; ?>');
                        }
                    }
                })

            }else{
                failedMessage('Please, Check Atleast one attendance.','<?php echo $_SESSION['user_name']; ?>');
            }
        });
    
        
        // ############################### columns
        let columns = [{data: 'id'}, {data: 'employee_id'}, {data: 'name'}, {data: 'department_name'}, {data: 'attendance_status'}, {data: 'punch_in'}, {data: 'punch_out'}, {data: 'hours_worked'}, {data: 'which_month'}, {data: 'attendance_change'}, {data: 'attendance_change_reason'}, {data: 'attendance_comment'} ];

        // ############################### columns
        function show_hierarchy_data() {

            $("#filter_options").html('');
            form_fields.each(function() {
                search_filter(this);
            });
            if (setArray.length > 0) {
                loadTable('#basic-datatable', 'get_from_server/raw_attendance_get', columns, [0, 'asc'], setArray);
            } else {
                loadTable('#basic-datatable', 'get_from_server/raw_attendance_get', columns, [0, 'asc']);
            }
            console.log(setArray);
            setArray = [];
            console.log(setArray);
        }

        // show_hierarchy_data();
        $("#search_filter").click(show_hierarchy_data);
    });
   
</script>