@extends('frontend.layouts.app')

@push('after-styles')
    {{ style('assets/plugins/select2/css/select2.min.css') }}
    {{ style('assets/plugins/select2/css/select2-bootstrap.min.css') }}
    {{ style('assets/plugins/sweetalert2/sweetalert2.min.css') }}
    {{ style('assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}
    {{ style('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css') }}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jszip-2.5.0/dt-1.10.18/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/datatables.min.css"/>
    <style>
        .card-body {
            padding: 0.75rem;
        }
        .dataTables_length {
            float: left;
        }
        div.dt-buttons {
            float: right;
        }

        .total_point {
            text-align: right;
        }
    </style>
@endpush

@section('content')
    <div class="row mb-4">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <strong>
                        <i class="fas fa-tachometer-alt"></i> {{ __('navs.frontend.dashboard') }}
                    </strong>
                </div><!--card-header-->

                <div class="card-body">
                    <div class="row">

                        <div class="col col-sm-12 col-md-2 mb-4">
                            <div class="card mb-4 bg-light">
                                <img class="card-img-top" src="{{ $logged_in_user->picture }}" alt="Profile Picture">

                                <div class="card-body">
                                    <h4 class="card-title">
                                        {{ $logged_in_user->name }}<br/>
                                    </h4>

                                    <p class="card-text">
                                        <small>
                                            <i class="fas fa-envelope"></i> {{ $logged_in_user->email }}<br/>
                                            <i class="fas fa-calendar-check"></i> {{ __('strings.frontend.general.joined') }} {{ $logged_in_user->created_at->timezone(get_user_timezone())->format('F jS, Y') }}
                                        </small>
                                    </p>

                                    <p class="card-text">

                                        <a href="{{ route('frontend.user.account')}}" class="btn btn-info btn-sm mb-1">
                                            <i class="fas fa-user-circle"></i> {{ __('navs.frontend.user.account') }}
                                        </a>

                                        @can('view backend')
                                            &nbsp;<a href="{{ route ('admin.dashboard')}}" class="btn btn-danger btn-sm mb-1">
                                                <i class="fas fa-user-secret"></i> {{ __('navs.frontend.user.administration') }}
                                            </a>
                                        @endcan
                                    </p>
                                </div>
                            </div>

                            <div class="list-group" id="list-tab" role="tablist">

                                <a class="list-group-item list-group-item-action  active show" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home" aria-selected="true">Point</a>
                                <a class="list-group-item list-group-item-action" id="list-clear-list" data-toggle="tab" href="#list_reward" role="tab" aria-controls="list-clear" aria-selected="false">Reward</a>
                                <a class="list-group-item list-group-item-action" id="list-clear-list" data-toggle="tab" href="#list_coupon" role="tab" aria-controls="list-clear" aria-selected="false">Coupon</a>
                                <a class="list-group-item list-group-item-action" id="list-daily-used-coupon" data-toggle="tab" href="#list_used_coupon" role="tab" aria-controls="list-clear" aria-selected="false">Daily Used Coupon</a>
                                <a class="list-group-item list-group-item-action" id="list-daily-income-point" data-toggle="tab" href="#list_income_point" role="tab" aria-controls="list-clear" aria-selected="false">Daily Income Point</a>
                                <a class="list-group-item list-group-item-action" id="list-daily-used-point" data-toggle="tab" href="#list_used_point" role="tab" aria-controls="list-clear" aria-selected="false">Daily Used Point</a>
                                <a class="list-group-item list-group-item-action" id="list-child-account" data-toggle="tab" href="#list_child_account" role="tab" aria-controls="list-clear" aria-selected="false">Child Account</a>
                            </div>
                        </div><!--col-md-2-->

                        <div class="col-md-10 col-sm-12">
                            <div class="row">
                                <div class="col">


                                    <div class="tab-content" id="nav-tabContent">
                                        @include('frontend.user.dashboardTables.point_table')

                                        @include('frontend.user.dashboardTables.reward_table')

                                        @include('frontend.user.dashboardTables.coupon_table')

                                        @include('frontend.user.dashboardTables.daily_used_coupon_table')

                                        @include('frontend.user.dashboardTables.daily_income_point_table')

                                        @include('frontend.user.dashboardTables.daily_used_point_table')

                                        @include('frontend.user.dashboardTables.child_account_table')

                                    </div>
                                </div><!--col-md-6-->
                            </div><!--row-->
                        </div><!--col-md-8-->
                    </div><!-- row -->
                </div> <!-- card-body -->
            </div><!-- card -->
        </div><!-- row -->
    </div><!-- row -->
@endsection

@push('after-scripts')
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
    {{ script("js/plugin/jquery.isloading.js") }}
    {{ script('assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js')}}
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    {{ script('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js')}}

    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js ") }}
    {{ script("https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js") }}
    {{ script('assets/plugins/sweetalert2/sweetalert2.all.min.js')}}

    {{ script('assets/plugins/select2/js/select2.full.min.js')}}
    {{ script("assets/plugins/select2/component/components-select2.js") }}
    {{ script("https://cdn.datatables.net/plug-ins/1.12.1/api/sum().js") }}
    @stack('dash-scripts')

    <script>
        $(function() {

            $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
                // var target = $(e.target).attr("href"); // activated tab
                // alert (target);
                $($.fn.dataTable.tables( true ) ).css('width', '100%');
                $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
            } );

            $('.reward_date_time').datetimepicker({
                endDate: new Date(),
                autoclose: true
            });

            $('.payment_expired_date_time').datetimepicker({
                startDate: new Date(),
                autoclose: true
            });

            $('.transaction_date_time').datetimepicker({
                endDate: new Date(),
                autoclose: true
            });

            $('.date_range').daterangepicker({
                "showDropdowns": true,
                "timePicker": true,
                "timePicker24Hour": true,
                locale: {
                      format: 'YYYY-MM-DD HH:mm:ss'
                    },
                ranges: {
                    'Today': [moment().startOf('days'), moment()],
                    'Yesterday': [moment().subtract(1, 'days').startOf('days'), moment().subtract(1, 'days').endOf('days')],
                    'Last 7 Days': [moment().subtract(6, 'days').startOf('days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days').startOf('days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
            }, function(start, end, label) {
              console.log('New date range selected: ' + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss') + ' (predefined range: ' + label + ')');
            }).attr('readOnly','true').css('cursor','pointer');

            $('.coupon_date_range').daterangepicker({
                "showDropdowns": true,
                "timePicker": true,
                "timePicker24Hour": true,
                locale: {
                      format: 'YYYY-MM-DD HH:mm:ss'
                    },
                ranges: {
                    'Today': [moment().startOf('days'), moment()],
                    'Yesterday': [moment().subtract(1, 'days').startOf('days'), moment().subtract(1, 'days').endOf('days')],
                    'Last 7 Days': [moment().subtract(6, 'days').startOf('days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days').startOf('days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
            }, function(start, end, label) {
              console.log('New date range selected: ' + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss') + ' (predefined range: ' + label + ')');
            }).attr('readOnly','true').css('cursor','pointer');

            $('.transaction_date_range').daterangepicker({
                "showDropdowns": true,
                "timePicker": true,
                "timePicker24Hour": true,
                locale: {
                      format: 'YYYY-MM-DD HH:mm:ss'
                    },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
            }, function(start, end, label) {
              console.log('New date range selected: ' + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss') + ' (predefined range: ' + label + ')');
            }).attr('readOnly','true').css('cursor','pointer');

            $('.change_payment').on('click', function() {
                if($(this).prop('checked')) {
                    var mode = $(this).val();
                    $("#mode").val(mode);
                    $(this).closest('.tab-pane').find('input[type=text]').removeAttr('disabled');
                    $(this).closest('.tab-pane').siblings('.tab-pane').find('input[type=text]').attr('disabled', 'disabled');
                    $(this).closest('.tab-pane').siblings('.tab-pane').find('.change_payment').prop('checked', false);
                }
                else {
                    $("#mode").val('');
                    $(this).closest('.tab-pane').find('input[type=text]').attr('disabled', 'disabled');
                }
            });


            var Isummary = $('#totaldataTable > tbody');
            var TransactionIsummary = $('#totalTransactiondataTable > tbody');
            var colArray = [ 0, 1, 2, 3, 4];
            LoadDailyData($('#used-coupon-table'),'{!! route("frontend.user.used_coupon.get_data") !!}'); // used coupon
            LoadDailyData($('#incomingpoint-table'),'{!! route("frontend.user.income_point.get_data") !!}'); // income point
            LoadDailyData($('#outgoingpoint-table'),'{!! route("frontend.user.used_point.get_data") !!}'); // used/outgoinh point

            $(document).on('click','#back_clear_transcation', function(){
                // $('#transaction_clear').show();
                // $('#transaction_clear_detail').hide();
                location.reload();

            })

            $(document).on('click','#searchUnsavedTransaction', function(){
                if(!$('.transaction_date_time').val()=='')
                {
                    $('#transaction_clear').hide();
                    $('#transaction_clear_detail').show();
                    $('.show_des').append('<h4> Unsaved Clear Transaction Detail at <input type="text" class="clear_end_date" disabled="disabled" style="border:0;width: 30%;"></h4>');


                    $('.clear_end_date').val($('.transaction_date_time').val());

                    var client_id = '{{Auth::user()->client->id}}';

                    var unsaved_detail_table = $('#clear-transaction-detail-table').DataTable({
                        language:
                            {
                                processing: "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
                            },
                        dom: 'lBfrtip',
                        buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                        ],
                        processing: true,
                        searching: false,
                        serverSide: true,
                        retrieve:true,
                        // paging: false,
                        // destroy: true,
                        ajax: {
                            url: '{!! route("frontend.user.clear_transaction.unsaved") !!}',
                            data: { 'client_id':client_id,'end_date': $('.transaction_date_time').val() },
                            type: 'post',
                            error: function (xhr, err) {
                                if (err === 'parsererror')
                                    location.reload();
                                else swal(xhr.responseJSON.message);
                            }
                        },
                        columns: [
                            { data: "project_name", searchable: false, sortable: false },
                            { data: "customer_name", searchable: false, sortable: false },
                            { data: "order_no" , name: "order_no"},
                            { data: "invoice_no" , name: "invoice_no"},
                            { data: "amount", name: "amount"},
                            { data: "service_fee", name: "service_fee"},
                            { data: "item_name", name: "item_name"},
                            { data: "item_description", name: "item_description"},
                            { data: "status", name: "status"},
                            { data: "created_at", name: "created_at"}
                        ],
                        order: [],
                        searchDelay: 500,
                        fnDrawCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

                            // load_plugins();
                        }
                    });

                    unsaved_detail_table.on( 'xhr', function () {
                        var json = unsaved_detail_table.ajax.json();
                        $('.total_amount').val(json.total);

                    });
                }

            });

            function LoadDailyData(table, route) {
                table.DataTable({
                language:
                    {
                        processing: "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
                    },
                dom: 'lBfrtip',
                buttons: [
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: colArray
                        }
                    }
                ],
                processing: true,
                searching: false,
                serverSide: true,
                ajax: {
                    url: route,
                    // type: 'post',
                    contentType: "application/json",
                    type: "GET",
                    dataType: "JSON",
                    error: function (xhr, err) {
                        if (err === 'parsererror')
                            // location.reload();
                            console.log(err);
                        else swal(xhr.responseJSON.message);
                    }
                },
                columns: [
                    { data: "id", name: "id" },
                    { data: "client_name", name: "client_name" },
                    { data: "total_points", name: "total_points"},
                    { data: "total_amount", name: "total_amount"},
                    { data: "generated_date", name: "generated_date"},
                    {data: "created_by", name: "created_by"},
                    { data: "created_at", name: "created_at"},
                    {data: 'actions', name: 'actions', searchable: false, sortable: false}
                ],
                order: [[0, "asc"]],
                searchDelay: 500,
                fnDrawCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    // load_plugins();
                }
                });
            }

            $('a.back').on('click', function () {
                var parent = $(this).parents('.tab-pane');
                parent.children('.card:nth-child(2)').addClass('d-none');
                $.isLoading({ text: "Loading...", class: "fa fa-cog fa-spin"});
                setTimeout( function(){
                    $.isLoading( "hide" );
                    parent.children('.card:first-child').removeClass('d-none');
                }, 500 );
            })
        });
    </script>
@endpush