@extends('adminlte::page')

@section('title', 'Dail Reports')

@section('content')
<style>
    .dataTables_length{
        display: inline-flex;
        width:55%;
    }

    .dataTables_filter{
        display: inline-flex;
        width:25%;
    }
    .dt-buttons {
        display: inline-flex;
        width:20%;
    }
</style>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Commission Subscription Report</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Commission Subscription Report</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header row">
                        <div class="col-6">
                            <h3 class="card-title">Comission Subscription Report</h3>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="form-group mb-2 row p-2">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                    </span>
                                </div>
                                <input type="text" class="form-control float-right" name="datetimes" id="datetimes">
                            </div>
                        </div>
                        <table id="example2" class="table table-bordered table-hover" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Listing Title</th>
                                    <th>User Name</th>
                                    <th>Employee ID</th>
                                    <th>Employee Name</th>
                                    <th>Amount</th>
                                    <th>Total Comission %</th>
                                    <th>Total Comission Amount</th>
                                    <th>Total Revenue</th>
                                    <th>Created At</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div style="margin-left: 28px">
                        <p><b>Total Amount : </b> <span id="totalAmount">{{ countTotalCommissionAmount() }}</span> </p>
                        <p><b>Total Commission Amount :</b> <span id="totalCommissionAmt">{{ countTotalComissionAmountManagers() }}</span> </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')

    <script>
        $('input[name="datetimes"]').daterangepicker({
            startDate: moment().startOf('day').subtract(360, 'day'),
            endDate: moment().startOf('day'),
            locale: {
                format: 'Y/M/DD hh:mm A'
            },
            maxDate: moment(),
            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')],
                'Quarterly': [moment().subtract(3, 'month').startOf('month'),moment().endOf('month')],
            },
        });
        $(document).on('click', 'td.details-control', function() {
            let tr = $(this).parent('tr');
            let row = DTable.row(tr);
            let id = tr.attr("data-id");
            let url = "{{ route('admin.comission.ajax.users', ':id' )}}"
            url = url.replace(':id', id);
            if(row.child() && row.child.isShown()) {
                row.child.hide();
            } else if(!row.child()) {

            let Html = ` <table id="analytics-sub-${id}" class="table table-bordered table-hover" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>Listing Title</th>
                                            <th>Amount</th>
                                            <th>User Name</th>
                                            <th>Employee ID</th>
                                            <th>Employee Name</th>
                                            <th>Commission(%)</th>
                                            <th>Total Comission Amount</th>
                                            <th>Created At</th>
                                        </tr>
                                    </thead>
                                </table>`;

                                row.child($(Html)).show();
                                table2 =  $('#analytics-sub-'+id+'').DataTable({
                                        processing: true,
                                        serverSide: true,
                                        bDestroy: true,
                                        ajax: {
                                            url : url,
                                            type: 'POST',
                                            data : function(d) {
                                                return $.extend( {}, d, {
                                                    "_token": '{{ csrf_token() }}'
                                                });
                                            }
                                        },
                                        columns: [
                                            {data: 'listing_url', name: 'listing_url'},
                                            {data: 'amount', name: 'amount'},
                                            {data: 'username', name: 'username'},
                                            {data: 'emp_id', name: 'emp_id'},
                                            {data: 'emp_name', name: 'emp_name'},
                                            {data: 'commission_per_man'},
                                            {data: 'comission', name: 'comission'},
                                            {data: 'created_at', name: 'created_at'},

                                        ]

                                    });
            } else {
                row.child.show();
            }

        });

        DTable = $('#example2').DataTable({
            ajax: {
                        url : "{{ route('admin.comission.list') }}",
                        data: function (d) {
                            return $.extend( {}, d, {
                                "date_range" : $("#datetimes").val(),
                            });
                        }
                    },
            dom :"lfBtipr",
            processing: true,
            serverSide: true,
            bDestroy: true,
            buttons: [
                {
                    extend: 'pdf',
                    title: 'Commission List',
                    customize : function(doc){
                        doc.content[1].table.widths = '10%',
                        doc.styles.tableBodyEven.alignment = 'center',
                        doc.styles.tableBodyOdd.alignment = 'center'
                    },
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
                    },
                    orientation: 'landscape',
                    pageSize: 'LEGAL'
                },
                {
                    extend: 'excel',
                    title: 'Commission List',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
                    }

                }
            ],
            drawCallback: function(settings) {
                // console.log(settings.json.sum_of_total_amt);
                $('#totalAmount').html(settings.json.sum_of_total_amt);
                $('#totalCommissionAmt').html(settings.json.sum_of_comission_amt);
            },
            createdRow: function( row, data, dataIndex ) {
                        $(row).attr( 'data-id', data['id'] );
                        $(row).css('cursor','pointer');
                        $(row).find("td").each(function() {
                            $(this).addClass('details-control')
                        });
                    },
            columns: [
                
                { "data": "listing_url" },
                { "data": "username"},
                { "data": "emp_id"},
                { "data": "emp_name"},
                { "data": "amount"},
                { "data": "totalCom_Percentage"},
                { "data": "comission" },
                { "data": "total_revenue" },
                { "data": "created_at"}
            ],
        });

        $('input[name="datetimes"]').on('apply.daterangepicker', function(ev, picker) {
            DTable.draw();
        });
    </script>
@endsection