<?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-4"></div>

            <div class="row mb-3" id="filter_block">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="request_id">Request By</label>
                        <select data-plugin="customselect" name="request_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 Request By" id="request_id" required>
                            <option></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="slip_id">Request For Slip</label>
                        <select data-plugin="customselect" name="slip_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 request For" id="slip_id" required>
                            <option></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select data-plugin="customselect" name="status" class="form-control custom-select-picker" data-placeholder="Select Assigned To" id="status" required>
                            <option></option>
                            <option value="0">Pending</option>
                            <option value="1">Approved</option>
                            <option value="2">Rejected</option>
                        </select>
                    </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-12">
                    <div class="card">
                        <div class="card-body p-4">
                            <h4 class="header-title mt-0 mb-1 mb-4">
                                All Pay Slip Request
                            </h4>

                            <table id="basic-datatable" class="table dt-responsive nowrap">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Request By</th>
                                        <th>Request Slip</th>
                                        <th>Month</th>
                                        <th>Request Time</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

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

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

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

</div>

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



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

<script>

    function changeStatus(id, status) {

        $.ajax({
            url: "fun/function",
            type: "GET",
            data: {
                paySlipRequestStatus: status,
                paySlipRequestId: id,
            },
            success: function(res) {
                // console.log(res);
                if (res == 1 && status==1) {
                    $("#requestButton" + id).html('<button type="button" class="btn btn-sm btn-soft-success" title="Approved"><i class="uil uil-check-circle mb-0" style="font-size:20px;"></i></button>');
                    $("#requestStatus" + id).html('<span class="text-success">Approved</span>')
                    successMessage('Request Approved Successfully !');
                }else if (res == 1 && status==2){
                    $("#requestButton" + id).html('<button type="button" class="btn btn-sm btn-soft-danger" title="Rejected"><i class="uil uil-times-circle mb-0" style="font-size:20px;"></i></button>');
                    $("#requestStatus" + id).html('<span class="text-danger">Rejected</span>')
                    successMessage('Request Rejected Successfully !');
                } else {
                    failedMessage('Some Error Occured !');
                }

            }
        });
    }

    $(document).ready(function() {

        // ############################### columns
            let columns = [{data: 'row_num'}, {data: 'request_by'}, {data: 'slip_name'}, {data: 'month'}, {data: 'request_time'}, {data: 'status'}, {data: 'id'}];
        // ############################### 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/paySlipRequest_get', columns, [0, 'asc'], setArray);
            } else {
                loadTable('#basic-datatable', 'get_from_server/paySlipRequest_get', columns, [0, 'asc']);
            }
            // console.log(setArray);
            setArray = [];
            // console.log(setArray);
        }

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