@extends('backend.app')
@section('title')
    {{ __('messages.dashboard') }}
@endsection
@section('styles')

@endsection
@section('content')

    <div class="d-flex justify-content-between">
        <h3 class="dashboard">
            {{ __('messages.dashboard') }}
            <button class="btn btn-light text-center" style="color: #ccc;" onclick="attendDemo()" title="For Attendance Report Testing">Attendance Data Entry (Demo Data)</button>
        </h3>
        <button class="btn btn-light text-center" style="background-color: #009A75; color: #FFF;" onclick="sendNotification()">Send Notification</button>
        <input type="hidden" id="id_device_token" value="{{auth()->user()->device_token}}">
    </div>
    <div class="row mt-4">
        {{-- Example div tag to follow --}}

        {{-- <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="top-title">{{ __('messages.total_organizations') }}</h6>
                    <h1 class="total_number">{{ count($data) }}</h1>
                </div>
            </div>
        </div> --}}

        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="top-title">{{ __('messages.total_employees') }}</h6>
                    <h1 class="total_number">{{ $total_employees }}</h1>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="top-title">{{ __('messages.total_holidays') }}</h6>
                    <h1 class="total_number">{{ $total_holidays }}</h1>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="top-title">{{ __('messages.total_leaves') }}</h6>
                    <h1 class="total_number">{{ $total_leaves }}</h1>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="top-title">{{ __('messages.today_present') }}</h6>
                    <h1 class="total_number">{{ COUNT($todays_attendance_status) }}</h1>
                </div>
            </div>
        </div>
    </div>





    <div class="row mt-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h6 class="top-title">{{ __('messages.active_employees') }}</h6>
                    <h1 class="total_number">{{ $active_employees }}</h1>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <caption>
                                Today's Attendance Status
                            </caption>
                            <thead>
                                <tr>
                                    <th colspan="8" class="text-center">Today's Attendance Status</th>
                                </tr>
                                <tr>
                                    <th>#</th><th>{{ __('messages.employee_name') }}</th><th>{{ __('messages.employee_no') }}</th>
                                    <th>{{ __('messages.designation') }}</th><th>{{ __('messages.duty_shift') }}</th>
                                    <th>{{ __('messages.in_time') }}</th><th>{{ __('messages.out_time') }}</th><th>{{ __('messages.late') }}</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($todays_attendance_status as $key=>$item)
                                {{-- @forelse ($todays_attendance_status as $key=>$item) --}}
                                <tr>
                                    <td>{{ ++$key }}</td>
                                    <td>{{ $item->employee_name }}</td>
                                    <td>{{ $item->employee_no }}</td>
                                    <td>{{ $item->designation_name }}</td>
                                    <td>{{ $item->duty_shift ?: 'N/A' }}</td>
                                    <td>{{ $item->in_time ?: '' }}</td>
                                    <td>{{ $item->out_time ?: '' }}</td>
                                    <td>{{ $item->is_delay ? 'Yes' : '' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- donut chart start -->
@endsection

@push('scripts')
    {{--    <script src="{{ asset('backend/assets/js/fileinput.js') }}"></script>--}}
    {{--    <!-- init js -->--}}
    {{--    <script src="{{ asset('backend/assets/libs/select2/select2.min.js') }}"></script>--}}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        $(document).ready(function ($) {
            $('.select2-multiple').select2();
            $('#get-data-btn').prop("disabled", true);
            $('#organization').change(function () {
                var organization_id = $(this).val();
                if (organization_id) {
                    $.ajax({
                        type: "GET",
                        url: "{{ url('system/statistics/get-herd-list') }}?organization_id=" + organization_id,
                        success: function (res) {
                            if (res) {
                                $('#get-data-btn').prop("disabled", false);
                                $("#herd").empty().append('<option>Select Herd</option>');
                                $.each(res, function (key) {
                                    $("#herd").append('<option value="' + res[key].id +
                                        '">' + res[key].name + '</option>');
                                });
                            } else {
                                $("#herd").empty();
                            }
                        }
                    });
                } else {
                    $("#herd").empty();
                    $("#lot").empty();
                }
            });
            $('#herd').on('change', function () {
                var lot_id = $(this).val();
                if (lot_id) {
                    $.ajax({
                        type: "GET",
                        url: "{{ url('system/statistics/get-lot-list') }}?lot_id=" + lot_id,
                        success: function (res) {
                            if (res) {
                                $("#lot").empty().append('<option>Select Lot</option>');
                                $.each(res, function (key, value) {
                                    $("#lot").append('<option value="' + res[key].id +
                                        '">' + res[key].name + '</option>');
                                });

                            } else {
                                $("#lot").empty();
                            }
                        }
                    });
                } else {
                    $("#lot").empty();
                }

            });
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script type="text/javascript">
        var labels = 11;
        var users = 100;

        const data = {
            labels: labels,
            datasets: [{
                label: 'Top 10 Milking Employee',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: users,
            }]
        };

        const config = {
            type: 'line',
            data: data,
            options: {}
        };

        const topTenMilkingEmployee = new Chart(
            document.getElementById('topTenMilkingEmployee'),
            config
        );

    </script>
    <script>

    </script>
    <!-- Send Notification Start-->
    <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase.js"></script>
    <script>
        var firebaseConfig = {
            apiKey: "{{ env('APIKEY') }}",
            authDomain: "{{ env('AUTH_DOMAIN') }}",
            projectId: "{{ env('PROJECTID') }}",
            storageBucket: "{{ env('STORAGE_BUCKET') }}",
            messagingSenderId: "{{ env('MESSAGING_SENDERID') }}",
            appId: "{{ env('APPID') }}",
            measurementId: "{{ env('MEASUREMENTID') }}"
        };

        firebase.initializeApp(firebaseConfig);
        const messaging = firebase.messaging();

        function initFirebaseMessagingRegistration() {
                messaging
                .requestPermission()
                .then(function () {
                    return messaging.getToken()
                })
                .then(function(token) {
                    if($('#id_device_token').val() !== token){
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        $.ajax({
                            url: '{{ route("save-token") }}',
                            type: 'POST',
                            data: {
                                token: token
                            },
                            dataType: 'JSON',
                            success: function (response) {
                                toastr.success("Successfully saved token!");
                            },
                            error: function (err) {
                                toastr.warning("Error! " + err);
                            },
                        });
                    }
                }).catch(function (err) {
                    toastr.warning("Error! " + err);
                });
        }

        messaging.onMessage(function(payload) {
            const noteTitle = payload.notification.title;
            const noteOptions = {
                body: payload.notification.body,
                icon: payload.notification.icon,
            };
            new Notification(noteTitle, noteOptions);
        });

    </script>
    <script>
        $(document).ready(function() {
            // initFirebaseMessagingRegistration();
        });
        function sendNotification(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: '{{ route("send-notification") }}',
                type: 'POST',
                success: function (response) {
                    toastr.success("Successfully send notification!");
                },
                error: function (err) {
                    toastr.warning("Error! " + err);
                },
            });
        }

        function attendDemo(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: '{{ route("auto_attend") }}',
                type: 'POST',
                success: function (response) {
                    toastr.success("Successfully the demo data entry done !");
                    setTimeout( function() {
                        location.reload();
                    }, 1000);
                },
                error: function (err) {
                    toastr.warning("Error! " + err);
                },
            });
        }
    </script>
    <!-- Send Notification End-->
@endpush
