@extends('layouts.app')
@section('title', __('goals::goals.goals_report'))

@section('content')

    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('goals::goals.goals_report')

        </h1>
        <!-- <ol class="breadcrumb">
                                    <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                                    <li class="active">Here</li>
                                </ol> -->
    </section>
    <section class="content">
        @component('components.filters', ['title' => __('report.filters')])
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('group_id', __('goals::goals.group') . ':') !!}
                    {!! Form::select('group_id', $groups ?? [], null, [
                        'class' => 'form-control select2',
                        'style' => 'width:100%',
                        'placeholder' => __('lang_v1.select_all'),
                    ]) !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('user_id', __('lang_v1.username') . ':') !!}
                    {!! Form::select('user_id', $users ?? [], null, [
                        'class' => 'form-control select2',
                        'style' => 'width:100%',
                        'placeholder' => __('lang_v1.select_all'),
                    ]) !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('created_by', __('lang_v1.added_by') . ':') !!}
                    {!! Form::select('created_by', $users ?? [], null, [
                        'class' => 'form-control select2',
                        'style' => 'width:100%',
                        'placeholder' => __('lang_v1.select_all'),
                    ]) !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('supervisor_id', __('goals::goals.supervisor') . ':') !!}
                    {!! Form::select('supervisor_id', $users ?? [], null, [
                        'class' => 'form-control select2',
                        'style' => 'width:100%',
                        'placeholder' => __('lang_v1.select_all'),
                    ]) !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('goal_on', __('goals::goals.goal_on') . ':') !!}
                    {!! Form::select('goal_on', $goalOnTranslations ?? [], null, [
                        'class' => 'form-control select2',
                        'style' => 'width:100%',
                        'placeholder' => __('lang_v1.select_all'),
                    ]) !!}
                </div>
            </div>
        @endcomponent
        @component('components.widget', ['class' => 'box-primary', 'title' => __('goals::goals.goals_report')])
            @can('goals.view')
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="groups_table">
                        <thead>
                            <tr>
                                <th>@lang('user.name')</th>
                                <th>@lang('goals::goals.group')</th>
                                <th>@lang('goals::goals.goal_on')</th>
                                <th>@lang('goals::goals.item.name')</th>
                                <th>@lang('goals::goals.goal_type')</th>
                                <th>@lang('goals::goals.start_date')</th>
                                <th>@lang('goals::goals.end_date')</th>
                                <th>@lang('goals::goals.percentage_done')</th>

                                <th>@lang('goals::goals.amount_type')</th>
                                <th>@lang('goals::goals.amount_or_qty')</th>
                                <th>@lang('goals::goals.supervisor')</th>
                                <th>@lang('lang_v1.added_by')</th>

                            </tr>
                        </thead>
                    </table>.
                </div>
            @endcan
        @endcomponent

        <div class="modal fade" id="goal_create_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" id="goal_create_modal_body">
                    <!-- Content will be loaded here dynamically -->
                </div>
            </div>
        </div>

        <!-- /.content -->
    @stop
    @section('javascript')

        

        <script type="text/javascript">
            $(document).ready(function() {
                $(document).on('change',
                    '#goal_on',
                    function() {
                        groups_table.ajax.reload();
                    });
                $(document).on('change',
                    '#group_id',
                    function() {
                        groups_table.ajax.reload();
                    });
                $(document).on('change',
                    '#user_id',
                    function() {
                        groups_table.ajax.reload();
                    });
                $(document).on('change',
                    '#supervisor_id',
                    function() {
                        groups_table.ajax.reload();
                    });
                $(document).on('change',
                    '#created_by',
                    function() {
                        groups_table.ajax.reload();
                    });
                var groups_table = $('#groups_table').DataTable({
                    processing: true,
                    serverSide: true,
                    fixedHeader: false,
                    ajax: {
                        url: '/goals/report',
                        data: function(d) {

                            if ($('#goal_on').length) {
                                d.goal_on = $('#goal_on').val();
                            }
                            if ($('#group_id').length) {
                                d.group_id = $('#group_id').val();
                            }
                            if ($('#user_id').length) {
                                d.user_id = $('#user_id').val();
                            }
                            if ($('#supervisor_id').length) {
                                d.supervisor_id = $('#supervisor_id').val();
                            }
                            if ($('#created_by').length) {
                                d.created_by = $('#created_by').val();
                            }
                            d = __datatable_ajax_callback(d);
                        },
                    },
                    columns: [{
                            data: 'user_name',
                            name: 'user.first_name'
                        },
                        {
                            data: 'group_name',
                            name: 'goal_groups.name'
                        },
                        {
                            data: 'goal_on',
                            name: 'goal_on',
                            searchable: false
                        },
                        {
                            data: 'item_name',
                            name: 'item_name',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'goal_type',
                            name: 'goals.goal_type',
                            searchable: false
                        },
                        {
                            data: 'start_date',
                            name: 'goal_groups.start_date'
                        },
                        {
                            data: 'end_date',
                            name: 'goal_groups.end_date'
                        },
                        {
                            data: 'percentage_done',
                            name: 'percentage_done',
                            searchable: false
                        },

                        {
                            data: 'amount_type',
                            name: 'amount_type',
                            searchable: false
                        },
                        {
                            data: 'amount_or_qty',
                            name: 'amount_or_qty',
                            searchable: false
                        },
                        {
                            data: 'supervisor_name',
                            name: 'supervisor.first_name'
                        },
                        {
                            data: 'added_by_name',
                            name: 'added_by_user.first_name'
                        },

                    ]

                });

                $(document).on('click', 'a.delete_group', function() {
                    swal({
                        title: LANG.sure,
                        icon: 'warning',
                        buttons: true,
                        dangerMode: true,
                    }).then(willDelete => {
                        if (willDelete) {
                            var href = $(this).data('href');
                            $.ajax({
                                method: 'DELETE',
                                url: href,
                                dataType: 'json',
                                success: function(result) {
                                    if (result.success) {


                                        toastr.success(result.msg);
                                        groups_table.ajax.reload();

                                    } else {
                                        toastr.error(result.msg);
                                    }
                                },
                            });
                        }
                    });
                });


            });
        </script>

    @endsection