@extends('dashboard.layouts.index')
@section('page_title')
@lang('global.attendance')
@stop
@section('breadcrumb')

<div class="breadcrumb-item">
    @lang('global.attendance')
</div>
@stop


@section('content')
<div class="row">
    <div class="col-12">

        <div class="card">
            <div class="col-sm-4">
                <form method="get" action="{{ route('dashboard.attendance.filter') }}">
                    @csrf
                    <div class="form-group  mb-4 d-flex">
                        <div class="form-group col-md-10">
                        <input type="text" class="form-control" name="daterange" value="" />
                        </div>
                        <span></span>
                            <br>
                            <div class="form-group col-md-10">
                                <select name="status" class="form-control"  aria-label=".form-select-sm example">
                                    <option value="">@lang('global.select_status')</option>
                                    <option value="early">Early</option>
                                    <option value="late">Late</option>
                                    <option value="ontime">OnTime</option>
                                </select>
                            </div>

                        <button type="submit" class="btn btn-primary btn-md ml"
                            style="margin: 10px;">Filter</button>
                    </div>
                </form>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-striped" id="table-user">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    <i class="fas fa-th"></i>
                                </th>
                                <th>@lang("global.employee")</th>
                                <th>@lang("global.workplace")</th>
                                <th>@lang("global.user")</th>
                                <th>@lang("global.check_in")</th>
                                <th>@lang("global.check_out")</th>
                                <th>@lang("global.status")</th>
                                <th>@lang("global.note")</th>
                                <th>@lang("global.created_at")</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@stop
@push('js')
{{-- <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> --}}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

{{-- <script type="text/javascript" src="{{ asset('assets/js/datepicker.js') }}"></script> --}}

<script type="text/javascript">
    $(function() {

      $('input[name="daterange"]').daterangepicker({
          autoUpdateInput: false,
          locale: {
              cancelLabel: 'Clear'
          }
      });

      $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val('');
      });

    });
    </script>

<script>
    $(function () {
            var table = $("#table-user").DataTable({
                oLanguage: {
                    "sSearch": "@lang('global.search')",
                    "sLengthMenu": "@lang('global.show') _MENU_ @lang('global.record')",
                    "sZeroRecords": "@lang('global.zero_records')",
                    "sInfo": "@lang('global.showing')  _START_ @lang('global.to') _END_ @lang('global.of') _TOTAL_ @lang('global.entries')",
                    'sInfoEmpty': "@lang('global.zero_pages')",
                    "sProcessing": "@lang('global.processing')",
                    oPaginate: {
                        "sFirst": "@lang('global.first')",
                        "sLast": "@lang('global.last')",
                        "sNext": "@lang('global.next')",
                        "sPrevious": "@lang('global.previous')"
                    },
                },
                dom: 'Bfrtip',
                 buttons: [
                 'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: true,
               serverSide: false,
                autoWidth: false,
                ordering: false,
                ajax: '{{route("dashboard.attendance.datatable")}}',
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'employee', name: 'employee'},
                    {data: 'workplace', name: 'workplace'},
                    {data: 'user', name: 'user'},
                    {data: 'check_in', name: 'check_in'},
                    {data: 'check_out', name: 'check_out'},
                    {data: 'status', name: 'status'},
                    {data: 'note', name: 'note'},
                    {data: 'created_at', name: 'created_at'},
                    // {data: 'actions', name: 'actions'},
                ],
                initComplete: function () {
                    // Button bloacked
                    $("table").on("click", "#dt-btn-action", function () {
                        var action_id = $(this).attr("data-actionId");
                        let url = $(this).data("url");
                        $.ajax({
                            url: url,
                            method: "POST",
                            success: function () {
                                table.ajax.reload(null, false);
                            }
                        })
                    });
                    //End Button bloacked
                    // Button bloacked
                    $("table").on("click", "#actionDelete", function () {
                        let url = $(this).data("url");
                        console.log(url);
                        swal(
                            {
                                title: "{{trans('global.delete_confirm')}}",
                                type: "warning",
                                showLoaderOnConfirm: true,
                                showCancelButton: true,
                                confirmButtonColor: "#ee0707",
                                confirmButtonText: "{{trans('global.yes')}}",
                                cancelButtonText: "{{trans('global.cancel')}}",
                                closeOnConfirm: false,
                            },
                            function (isConfirm) {
                                if (isConfirm) {
                                    $.ajax({
                                        url: url,
                                        method: "get",
                                        success: function () {
                                            table.ajax.reload(null, false);
                                        }
                                    });
                                    swal.close();
                                }
                            });
                    });
                    //End Button bloacked
                }
            });
            App.reloadTable = function () {
                table.ajax.reload();
            }
        });
</script>

@endpush