@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 User </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>
                            <div class="form-group">
                                <label class="form-label" for="user_id">User </label>
                                <select class="form-select" id="user_id" name="user_id" value="" placeholder="User" required>
                                    @foreach ($user as $row)
                                        <option value="{{$row['id']}}">{{$row['name']}} ({{$row['division_name']}} - {{$row['role_name']}})</option>
                                    @endforeach
                                </select>
                            </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>Tanggal</th>
                                        <th>Hadir</th>
                                        <th>Lembur</th>
                                        <th>Izin/Cuti</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#user_id').select2({
                theme: "bootstrap-5",
            });
        });

        $('#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'];
                });

                $.ajax({
                    type: "GET",
                    url: '/api/report/user?user_id='+formdata['user_id']+'&start_date='+formdata['start_date']+'&end_date='+formdata['end_date'],
                    headers: {'Authorization': "Bearer {{$session_token}}"},
                    cache: false,
                    success: function(response){
                        console.log(response);
                        $('#datatable tr:not(:first)').remove();
                        $.each(response['data'], function (key, value) {
                            if (value.dates.includes('Sabtu') || value.dates.includes('Minggu') || value.dates.includes('Saturday') || value.dates.includes('Sunday')) {

                                $('#datatable').append("<tr class='table-danger'>\
                                    <td>"+value.dates+"</td>\
                                    <td>"+value.attendance+"</td>\
                                    <td>"+value.overtime+"</td>\
                                    <td>"+value.permit+"</td>\
                                </tr>");
                            } else {
                                $('#datatable').append("<tr>\
                                    <td>"+value.dates+"</td>\
                                    <td>"+value.attendance+"</td>\
                                    <td>"+value.overtime+"</td>\
                                    <td>"+value.permit+"</td>\
                                </tr>");
                            }
						})
                    }
                });

            } else {
                Swal.fire({
                    icon: "error",
                    title: "Oops...",
                    text: "You must complete the entire form.",
                    confirmButtonColor: '#3A57E8',
                });
            }
            return false;
        });

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

            var sel = document.getElementById("user_id");
            var user_name = sel.options[sel.selectedIndex].text;

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

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

            var sel = document.getElementById("user_id");
            var user_name = sel.options[sel.selectedIndex].text;

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