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

    a.disable {
        pointer-events: none;
    }
</style>
<!-- BEGIN: Content-->
<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.attendance-summary') }}">Audit Trail
                                    </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="">
                                    <button onclick="more_filter()"
                                        class="btn btn-primary waves-effect waves-float waves-light"
                                        style="">Filter</button>


                                </div>
                                <div class="d-flex align-items-right">
                                    <div class="btn-group btn-align-right MiniRightnav">
                                        <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>

                                        &nbsp;&nbsp;
                                        {{-- hide and show --}}
                                        <div class="dropdown">
                                            <button class="dropbtn fa fa-gear"></button>
                                            <div id="myDropdown" class="dropdown-content">

                                            </div>
                                        </div>
                                    </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>Audit Trail</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 style="text-transform: capitalize;">Admin</th>
                                                <th style="text-transform: capitalize;">Emp No</th>
                                                <th width="24%"
                                                    style="text-transform: capitalize; text-align:center;">Employee
                                                </th>
                                                <th style="text-align: center">
                                                    <table style="text-align: center; width:100%;">
                                                        <tr>
                                                            Edited
                                                        </tr>
                                                        <tr>
                                                            <th class="text-left" style="text-transform: capitalize; width:50%;">Date</th>
                                                            <th style="text-transform: capitalize; text-align:end; width:50%;">
                                                                Time</th>
                                                        </tr>
                                                    </table>
                                                </th>

                                                <th style="text-align: center">
                                                    <table style="text-align: center; width:100%;">
                                                        <tr>
                                                            Records
                                                        </tr>
                                                        <tr>
                                                            <th class="text-left"  style="text-transform: capitalize; width:33%;">Date</th>
                                                            <th class="" style="text-transform: capitalize;width:33%;">
                                                                From</th>
                                                            <th class="text-center" style="text-transform: capitalize;width:33%;">To
                                                            </th>
                                                        </tr>
                                                    </table>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- 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' : '' }}";
        var table = $('#reporttable').DataTable({
            "lengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]
            ],
            "order": [],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": {
                "url": "{!! route('reports.audit-trial-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: 'admin',
                    name: 'Admin'
                }, {
                    data: 'employee_no',
                    name: 'Employee no'
                }, {
                    data: 'name',
                    name: 'Employee'
                },

                {
                    name: 'Edited',
                    data: 'edited',
                    "render": function(data, type, row, meta) {
                        var text =
                            `<table style="width: 100%; border: none; text-align:left;"><tr><td>${row.updated_date}</td><td>${row.updated_time}</td></tr></table>`;
                        return text;
                    }
                },

                {
                    name: 'Records',
                    data: 'records',
                    "render": function(data, type, row, meta) {

                        if (row.time_from != row.time_to) {
                            var redTime = 'color:red';
                        } else {
                            var redTime = '';
                        }
                  
                        var text =
                            `<table style="width: 100%; border: none;"><tr><td class="text-left" style="width: 33%;">${row.date}</td><td style="width: 33%;" class="text-center">${row.time_from}</td><td style="width: 33%;  ${redTime}" class="text-center">${row.time_to}</td></tr></table>`;
                        return text;
                    }
                },

            ],
            'rowCallback': function(row, data, index) {
                $('td:eq(2)', row).css('width', '120');
                $('table', row).css('border', 'hidden');
            },

            "language": {
                "paginate": {
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },



        });

        var columns = table.settings().init().columns;
        for (let i = 0; i < columns.length; i++) {
            //
            var dCol =
                `<div class="toggle-vis custom-control mt-1 ml-1 custom-control-success custom-checkbox"><input class='inp custom-control-input' data-column="${i}" key="{!! $c_key !!}" id="{!! $c_key !!}_${i}"  type="checkbox" checked><label for="{!! $c_key !!}_${i}" class="custom-control-label" style="cursor: pointer">${columns[i].name}</label></div>`;
            $("#myDropdown").append(dCol);
        }

        // show hide and show data
        var daraArr = {!! json_encode($columnHideShowData) !!}
        hidefun(table, '{!! $c_key !!}', daraArr);

    }

    // excel download option

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

        var branch = $("#branch").val();
        var department = $("#department").val();
        var category = $("#category").val();
        var random = Math.random();
        let url = "audit-trial-excel?branch=" + branch + "&department=" + department + "&category=" + category +
            "&exportdata=" + exportdata + "&random="+random;

        window.location.href = url;

    }

    // excel download option

    function exportpdf() {
        var exportdata = [];
        $('.singleSelectBox').each(function() {
            if ($(this).is(":checked")) {
                exportdata.push($(this).val());
            }
        });
        exportdata = exportdata.toString();
        var branch = $("#branch").val();
        var department = $("#department").val();
        var category = $("#category").val();
        var random = Math.random();
        let url = "audit-trial-pdf?branch=" + branch + "&department=" + department + "&category=" + category +
            "&exportdata=" + exportdata + "&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>