{{ View::make('layout.header') }}
<style>
    .table thead th {
        /*padding: 8px 10px !important;*/
    }

    a.disable {
        pointer-events: none;
    }
</style>
<!-- BEGIN: Content-->
<form action="{{ route('reports.view-time-card') }}">
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb mt-3">
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item ">Reports
                                    </li>
                                    <li class="breadcrumb-item active"><a
                                            href="{{ route('reports.time-card') }}">Electronic
                                            Time Card</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <section id="dashboard-ecommerce">
                    <div class="row match-height">
                        <div class="col-md-12">
                            <div class="card">

                                <div class="card-header" style="">
                                    <div class="">
                                        <a onclick="more_filter()"
                                            class="btn btn-primary waves-effect waves-float waves-light"
                                            style="">Filter</a>

                                    </div>
                                    <div class="d-flex align-items-right">
                                        <div class="btn-group btn-align-right MiniRightnav">
                                            <button style="border: none !important; background: inherit !important;" type="submit" class="text-danger"><i
                                                    class="fa fa-eye report-download-btn"
                                                    style="font-size:25px;"></i><span>View</span></button>
                                            &nbsp;&nbsp;
                                            <a onclick="exportpdf()" class="text-danger"><i
                                                    class="fa fa-file-pdf-o report-download-btn"
                                                    style="font-size:25px;"></i><span>Download PDF</span></a>
                                            &nbsp;&nbsp;
                                            <a onclick="exportexcel()" class="text-success"><i
                                                    class="fa fa-file-excel-o report-download-btn"
                                                    style="font-size:25px;"></i><span>Download Excel</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="card activity filter-container"
                                    style="margin: 0px 15px; background-color:#e6e5e5; padding:10px 20px 20px 20px; display:none !important;"
                                    id="empleavetoday">
                                    <div class="row">
                                        <div class="col-md-12" style="padding:0px;">
                                            <button id="spanclose" onclick="more_filter()"
                                                style="float:right;border:0px;background-color:transparent;color:white;padding: 3px 8px 5px;">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="feather feather-x cursor-pointer font-large-1"
                                                    data-repeater-delete="">
                                                    <line x1="18" y1="6" x2="6" y2="18">
                                                    </line>
                                                    <line x1="6" y1="6" x2="18" y2="18">
                                                    </line>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Department &nbsp;:&nbsp;
                                            <select name="department" id="department" class="form-control">
                                                <option value="">Department</option>
                                                @foreach ($departments as $department)
                                                    <option value="{{ $department->id }}">{{ $department->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Branch &nbsp;:&nbsp;
                                            <select name="branch" id="branch" class="form-control">
                                                <option value="">Branch</option>
                                                @foreach ($branches as $branch)
                                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Category &nbsp;:&nbsp;
                                            <select name="category" id="category" class="form-control">
                                                <option value="">Category</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Date From &nbsp;:
                                            <input type="date" name="sdatefrom" id="sdatefrom"
                                                class="tcal form-control flatpickr-basic" placeholder="DD-MM-YYYY"
                                                data-dateformat="dd-mm-yy">
                                        </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Date To &nbsp;:<span class="red">*</span>&nbsp;
                                            <input type="date" name="sdateto" id="sdateto"
                                                class="tcal form-control flatpickr-basic" placeholder="DD-MM-YYYY"
                                                data-dateformat="dd-mm-yy">
                                        </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Schedule &nbsp;:&nbsp;
                                            <select name="schedule" id="schedule" class="form-control">
                                                <option value="">Schedule</option>
                                                @foreach ($schedules as $schedule)
                                                    <option value="{{ $schedule->id }}">{{ $schedule->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Day Type &nbsp;:&nbsp;
                                            <select name="day_type" id="day_type" class="form-control">
                                                <option value="">Day Type</option>
                                                <option value="Work">Work</option>
                                                <option value="Rest">Rest</option>
                                                <option value="Flexi">Flexi</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-6 filter-form-group" style="margin-top:19px;">
                                            <input type="button" value="Apply" onclick="getfilterdata();"
                                                class="filter-apply btn btn-info" />
                                        </div>
                                    </div>
                                </div>


                                <div class="p-2">
                                    <h1>Electronic Time Card</h1>
                                </div>


                                <div class="card-body" style="padding-top:0px !important; ">
                                    <div class="table-responsive " style="overflow-x: scroll !important;">
                                        <table class="table" id="reporttable" style=" font-size:12px;">
                                            <thead>
                                                <tr>
                                                    <th width="10%">View</th>
                                                    <th width="15%">User</th>
                                                    <th width="30%">Name</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</form>
<!-- END: Content-->
{{ View::make('layout.footer') }}
@include('E-Attendance.edit_attendance')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
    var base_url = $('body').attr('data-baseurl') + '/e-attendance';
    $(document).ready(function() {
        getfilterdata();
    });



    function getfilterdata() {

        var sdatefrom = $("#sdatefrom").val();
        var sdateto = $("#sdateto").val();
        var schedule = $("#schedule").val();
        var day_type = $("#day_type").val();
        var category = $("#category").val();
        var branch = $("#branch").val();
        var department = $("#department").val();
        var in_out_filter = $("#in_out_filter").val();
        var apploginmodel = "{{ hasEattendanceEditAccess() ? '#inlineForm' : '' }}";
        $('#reporttable').DataTable({
            "lengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]
            ],
            "order": [],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": {
                "url": "{!! route('reports.time-card-data') !!}",
                "type": 'GET',
                "data": {
                    "user_type": "hr",
                    "sdatefrom": sdatefrom,
                    "sdateto": sdateto,
                    "schedule": schedule,
                    "day_type": day_type,
                    "category": category,
                    "branch": branch,
                    "department": department,
                    "in_out_filter": in_out_filter
                }
            },
            "deferRender": true,
            "columns": [{
                    data: 'view',
                    "render": function(data, type, row, meta) {

                        var text =
                            `<input type="checkbox" name="user_list[]" value="${row.employee_no}">`;
                        return text;

                    }
                },
                {
                    data: 'employee_no',
                    name: 'employee_no'
                },
                {
                    data: 'personname',
                    name: 'personname'
                },

            ],
            'rowCallback': function(row, data, index) {
                $('td:eq(2)', row).css('width', '120');
            },
            'columnDefs': [{
                "targets": [0],
                "orderable": false
            }],
            "language": {
                "paginate": {
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },



        });
    }

    // excel download option

    function exportexcel() {
        var exportdata = [];
        $('.singleSelectBox').each(function() {
            if ($(this).is(":checked")) {
                exportdata.push($(this).val());
            }
        });

        var user_list = $("input[name='user_list[]']:checked").map(function() {
            return "&user_list%5B%5D=" + this.value;
        }).get().join("");


        exportdata = exportdata.toString();

        var branch = $("#branch").val();
        var department = $("#department").val();
        var category = $("#category").val();
        var random = Math.random();
        let url = "time-card-excel?name=abc" + user_list + '&sdatefrom=' + $("#sdatefrom").val() + '&sdateto=' + $("#sdateto").val() + "&random="+random;

        window.location.href = url;

    }

    // excel download option

    function exportpdf() {
        var exportdata = [];
        $('.singleSelectBox').each(function() {
            if ($(this).is(":checked")) {
                exportdata.push($(this).val());
            }
        });

        var user_list = $("input[name='user_list[]']:checked").map(function() {
            return "&user_list%5B%5D=" + this.value;
        }).get().join("");

        exportdata = exportdata.toString();
        var branch = $("#branch").val();
        var department = $("#department").val();
        var category = $("#category").val();
        var random = Math.random();
        let url = "time-card-pdf?name=abc" + user_list + '&sdatefrom=' + $("#sdatefrom").val() + '&sdateto=' + $("#sdateto").val() + "&random="+random;

        window.location.href = url;

    }

    // pdf download option



    var x = document.getElementById("empleavetoday");
    x.style.display = "none";

    function more_filter() {
        var x = document.getElementById("empleavetoday");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
</script>