@extends('admin.layouts.app')

@section('content')
    <div class="conatiner-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="flex-wrap d-flex justify-content-between align-items-center">
                            <div>
                                <div class="header-title">
                                    <h2 class="card-title">Report Recap </h2>
                                    <p></p>
                                </div>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <br>
                        <form method="POST" class="needs-validation" id="form-data" name="form-data" novalidate>
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label class="form-label" for="created_at">Tanggal Awal </label>
                                <input class="form-control" type="date" id="start_date" name="start_date" value="" placeholder="Date" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="created_at">Tanggal Akhir </label>
                                <input class="form-control" type="date" id="end_date" name="end_date" value="" placeholder="Date" required>
                            </div>
                            <br>
                            <button type="submit" class="btn btn-primary">Preview</button>
                            <button type="button" class="btn btn-danger" onclick="actionPrintPDF()">Cetak PDF</button>
                            <button type="button" class="btn btn-success" onclick="actionPrintExcel()">Cetak Excel</button>
                        </form>
                        <br>
                        <div class="table-responsive">
                            <table id="datatable" class="table table-striped" data-toggle="data-table">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Nama</th>
                                        <th>Role</th>
                                        <th>Divisi</th>
                                        <th>Level</th>
                                        <th>Hari Kerja</th>
                                        <th>Jam Kerja</th>
                                        <th>Kerja WFO</th>
                                        <th>Kerja WFH</th>
                                        <th>Kerja Visit</th>
                                        <th>Hari Izin</th>
                                        <th>Hari Cuti</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $('#form-data').submit(false);
        $("#form-data").submit( function () {
            if($(this).valid()) {
                var form = $("#form-data").serializeArray();
                var formdata = {};
                $.map(form, function(n, i){
                    formdata[n['name']] = n['value'];
                });

                $('#datatable').DataTable( {
                    order: [[ 0, 'desc' ]],
                    lengthMenu: [[ 5, 10, 50, 100 ], [ 5, 10, 50, 100 ]],
                    pageLength: 50,
                    processing: true,
                    serverSide: true,
                    autoWidth: false,
                    destroy : true,
                    scrollX: true,
                    ajax: function(data, callback, settings) {
                        var sort_col_id = data.order[0].column;
                        var sort_col_order = data.order[0].dir;
                        var sort_col_name = data.columns[data.order[0].column].data;
                        $.ajaxSetup({
                            headers:{
                                'Authorization': "Bearer {{$session_token}}"
                            }
                        });
                        $.get('/api/report/recap?start_date='+formdata['start_date']+'&end_date='+formdata['end_date'], {
                            per_page: data.length,
                            page: (data.start / data.length) + 1,
                            sort: sort_col_name + ':' + sort_col_order,
                            search: data.search.value
                        },
                        function(json) {
                            callback({
                                recordsTotal: json.metadata.total_data,
                                recordsFiltered: json.metadata.total_data,
                                data: json.data
                            });
                        });
                    },
                    columns: [
                        {
                            data: 'id',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'name',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'role_name',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'division_name',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'level_name',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'attendance_day',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'attendance_hour',
                            render: function (data, type, row, meta) {
                                if (data) {
                                    return '<span style="white-space: normal;">' + data + '</span>';
                                } else {
                                    return '<span style="white-space: normal;">00:00:00</span>';
                                }
                            }
                        },
                        {
                            data: 'attendance_day_wfo',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'attendance_day_wfh',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'attendance_day_visit',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'attendance_permit_izin',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                        {
                            data: 'attendance_permit_cuti',
                            render: function (data, type, row, meta) {
                                return '<span style="white-space: normal;">' + data + '</span>';
                            }
                        },
                    ],
                });
            } else {
                Swal.fire({
                    icon: "error",
                    title: "Oops...",
                    text: "You must complete the entire form.",
                    confirmButtonColor: '#3A57E8',
                });
            }
            return false;
        });

        function actionPrintPDF() {
            var start_date = document.getElementById("start_date").value;
            var end_date = document.getElementById("end_date").value;

            if (start_date != '' && end_date != '') {
                let a= document.createElement('a');
                a.target= '_blank';
                a.href= '/admin/report-recap/pdf/'+start_date+'/'+end_date;
                a.click();
            } else {
                Swal.fire({
                    icon: "error",
                    title: "Oops...",
                    text: "You must complete the entire form.",
                    confirmButtonColor: '#3A57E8',
                });
            }

        }
        function actionPrintExcel() {
            var start_date = document.getElementById("start_date").value;
            var end_date = document.getElementById("end_date").value;

            if (start_date != '' && end_date != '') {
                let a= document.createElement('a');
                a.target= '_blank';
                a.href= '/admin/report-recap/excel/'+start_date+'/'+end_date;
                a.click();
            } else {
                Swal.fire({
                    icon: "error",
                    title: "Oops...",
                    text: "You must complete the entire form.",
                    confirmButtonColor: '#3A57E8',
                });
            }
        }
    </script>
@endsection