@extends('layouts.app')
@section('content')
@if( $currentUser->hasRole('Admin') )
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="m-2">
    <h1 style="text-align: center;">Reports</h1>
    <div class="d-flex align-items-start">
        <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            {{-- tab buttons --}}
            <button class="nav-link active" id="v-pills-Earnings-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-Earnings" type="button" role="tab" aria-controls="v-pills-Earnings"
                aria-selected="true">
                Earnings
            </button>

            <button class="nav-link" id="v-pills-providers-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-providers" type="button" role="tab" aria-controls="v-pills-providers"
                aria-selected="true">
                Providers
            </button>

            <button class="nav-link" id="v-pills-Document-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-Document" type="button" role="tab" aria-controls="v-pills-Document"
                aria-selected="true">
                Document Transactions
            </button>
      
            <button class="nav-link" id="v-pills-plagiarism-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-plagiarism" type="button" role="tab" aria-controls="v-pills-plagiarism"
                aria-selected="true">
                Plagiarism
            </button>
            
            {{-- <button class="nav-link" id="v-pills-credit-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-credit" type="button" role="tab" aria-controls="v-pills-credit"
                aria-selected="true">
                Credit Transactions
            </button> --}}
            
        </div>
        {{-- tab content --}}
        <div class="tab-content" id="v-pills-tabContent" style="width: 100%;">
            <div class="tab-pane fade show active" id="v-pills-Earnings" role="tabpanel"
                aria-labelledby="v-pills-Earnings-tab">

                <h2>Earnings</h2>
                <hr>
                <div class="row">
                    <div class="col-md-10 table-responsive mt-3" id="EarningsData">
                        <table class="table table-striped dt-responsive table-hover"
                            style="width: 100% !important;" id="earningTable">
                            <thead >
                                <tr>
                                    <th>
                                        Month
                                    </th>
                                    <th>
                                        Username
                                    </th>
                                    <th>
                                        Cumulative Earned
                                    </th>
                                    <th>
                                        Monthly Earned
                                    </th>
                                    <th>
                                        Yearly Earned
                                    </th>
                                  
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-2">
                        <form class="" role="form" name="filterEarnings" id="filterEarnings" method="POST">
                            {{ csrf_field() }}
                            <label>
                                <strong>
                                    From Date:
                                </strong>
                            </label>
                            <p>
                                <input type="text" class="month-date-picker" id="monthPicker" class="form-control">
                            </p>
                            <p>
                                <button type="submit" class="btn knowmad_btn_blue knowmad_btn" style="width:95px" name="search" id="earnings_search_btn">Search</button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="v-pills-providers" role="tabpanel"
                aria-labelledby="v-pills-providers-tab">

                <h2>Providers</h2>
                <hr>
                <div class="row">
                    <div class="col-md-10 table-responsive mt-3" id="providersData">
                        <table class="table table-striped dt-responsive table-hover"
                            style="width: 100% !important;" id="providersTable">
                            <thead >
                                <tr>
                                    <th>
                                        #
                                    </th>
                                    <th>
                                        Username
                                    </th>
                                    <th>
                                        Earnings
                                    </th>
                                    <th>
                                        No. of Words Edited
                                    </th>
                                    <th>
                                        No. of Jobs
                                    </th>
                                    <th>
                                        Approval Date
                                    </th>
                               
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-2">
                        <form class="date-range-filter" name="providersReport" id="providersReport" method="POST">
                            {{ csrf_field() }}
                            <label>
                                <strong>
                                    From Date:
                                </strong>
                            </label>
                            <div class="input-group date" id="datepicker_from">
                                <input type="text" class="form-control" id="date_from" name="date_from" />
                                <span class="input-group-append">
                                   
                                </span>
                            </div>
                            <label>
                                <strong>
                                    To Date:
                                </strong>
                            </label>
                            <div class="input-group date" id="datepicker_to">
                                <input type="text" class="form-control" id="date_to" name="date_to" />
                                <span class="input-group-append">
                                    
                                </span>
                            </div>
                            <p>
                                <button class="btn knowmad_btn_blue knowmad_btn" style="width:95px" name="search" id="providers_search_btn">Search</button>
                            </p>
                            {{-- <p>
                                <button class="btn knowmad_btn_blue knowmad_btn" style="width:95px" type="submit" name="export">Export</button>
                            </p> --}}
                        </form>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="v-pills-Document" role="tabpanel"
                aria-labelledby="v-pills-Document-tab">
                <h2>Document Transactions</h2>
                <hr>
                <div class="row">
                    <div class="col-md-10 table-responsive mt-3" id="doc_transactionsData">
                        <table class="table table-striped dt-responsive table-hover"
                            style="width: 100% !important;" id="doc_transactions">
                            <thead >
                                <tr>
                                    <th>
                                        File Name
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Word Count
                                    </th>
                                    <th>
                                        Service
                                    </th>
                                    <th>
                                        Created At
                                    </th>
                                    <th>
                                        Provider
                                    </th>
                                    <th>
                                        Client
                                    </th>
                                    <th>
                                        Total
                                    </th>
                                    <th>
                                        Provider Earnings
                                    </th>
                                    <th>
                                        Pay Type
                                    </th>
                                    <th>
                                        Coupon
                                    </th>
                                  
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-2">
                        <form class="form-inline text-center" role="form" name="filterTransactions" id="filterTransactions"
                        method="POST">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label>Date Range:</label>
                            <div class="input-group">
                                <input type="text" name="range" class="range-picker" id="range">
                            </div>
                        </div>
                        <button class="btn knowmad_btn_blue knowmad_btn" style="width:95px" id="docs_transaction_btn"
                            name="search">Search</button>
                    </form>
                    </div>
                </div>
            
            </div>
            <div class="tab-pane fade" id="v-pills-plagiarism" role="tabpanel"
                aria-labelledby="v-pills-plagiarism-tab">
                <h2>Plagiarism Results</h2>
                <span>Copyscape Balance: $<span id="copyscape_balance"></span></span>
                <hr>
                <div class="row">
                    <div class="col-md-12 table-responsive mt-3" id="plagiarismData">
                        <table class="table table-striped dt-responsive table-hover"
                            style="width: 100% !important;" id="plagiarism">
                            <thead >
                                <tr>
                                    <th>
                                        File Name
                                    </th>
                                    <th>
                                        No. of Results
                                    </th>
                                    <th>
                                        Word Count
                                    </th>
                                    <th>
                                        Cost
                                    </th>
                                    <th>
                                        Provider                           
                                    </th>
                                    <th>
                                        Created By                              
                                    </th>
                                    <th>
                                        Created At     
                                    </th>
                                    <th>
                                        Options
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                  
                </div>
            
            </div>
            {{-- <div class="tab-pane fade" id="v-pills-credit" role="tabpanel"
                aria-labelledby="v-pills-credit-tab">
                <h2>Credit Transactions</h2>
                <hr>
                <div class="row">
                    <div class="col-md-10 table-responsive mt-3" id="cred_transactionsData">
                        <table class="table table-striped dt-responsive table-hover"
                            style="width: 100% !important;" id="cred_transactions">
                            <thead >
                                <tr>
                                    <th>
                                        ID
                                    </th>
                                    <th>
                                        Created At
                                    </th>
                                    <th>
                                        User ID
                                    </th>
                                    <th>
                                        Amount
                                    </th>
                                    <th>
                                        Pay Type
                                    </th>
                                    <th>
                                        Status
                                    </th>
                                    <th>
                                        Message
                                    </th>
                                  
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-2">
                        <form class="form-inline text-center" role="form" name="filterTransactions" id="filterTransactions"
                        method="POST">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label>Date Range:</label>
                            <div class="input-group">
                                <input type="text" name="range" class="range-picker" id="range">
                            </div>
                        </div>
                        <button type="submit" class="btn knowmad_btn_blue knowmad_btn" style="width:95px"
                            name="search">Search</button>
                    </form>
                    </div>
                </div>
            
            </div> --}}
            
        </div>


    </div>

</div>
@include('partials.modals.plagiarism_modal')
@endsection
@push('footer_js')
    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap.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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    <script type="text/javascript">
        let balance_label = document.getElementById('copyscape_balance');
        fetch('{{ route('ajax.getCopyscapeBalance') }}')
        .then(data => data.json())
        .then(data => {
            
            balance_label.innerText = data.value;
        });
    </script>
    {{--  earnings table  --}}
    <script type="text/javascript">
        $(function() {
            $('#monthPicker').datepicker({
                format: "mm-yyyy",
                startView: "months",
                minViewMode: "months"
            });
        });


        let earningTable = $('#earningTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            aaSorting: [
                [1, "asc"]
            ],
            ajax: {
                url: '{!! route('ajax.reports.monthly_earnings') !!}',
                data: function(d) {
                    d.month = $('.month-date-picker').val();
                }
            },
            columns: [
                {
                    data: 'monthname',
                    name: 'monthname',
                },
                {
                    
                    name: 'user.username',
                    data: 'user.username',
                    title: 'Username'
                },
                {
                    data: 'cumulativeEarned',
                    name: 'cumulativeEarned',
                    searchable: false
                },
                {
                    data: 'monthlyEarned',
                    name: 'monthlyEarned',
                    searchable: false
                },
                {
                    data: 'yearlyEarned',
                    name: 'yearlyEarned',
                    searchable: false
                },
                
            ]
        });

        $('form[name="search"]').on('submit', function(e) {
            earningTable.draw();
            e.preventDefault();
        });
        
        $('#earnings_search_btn').on('click', function(e) {
            earningTable.draw();
            e.preventDefault();
        });

    </script>

{{--  providersTable  --}}
    <script type="text/javascript">
        $(function() {
            $('#datepicker_from').datepicker({
                format: "yyyy-mm-dd"
            });

            $('#datepicker_to').datepicker({
                format: "yyyy-mm-dd"
            });
        });



        let providersTable = $('#providersTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            "aaSorting": [
                [1, "asc"]
            ],
            ajax: {
                url: '{!! route('ajax.reports.providers') !!}',
                data: function(d) {
                    d.date_from = $('#date_from').val();
                    d.date_to = $('#date_to').val();
                }
            },
            columns: [
                {
                    data: 'provider_id',
                    name: 'provider_id',
                    searchable: false
                },
                {
                    data: 'username',
                    name: 'users.username',
                    title: 'Username'
                },
                {
                    data: 'editor_earnings',
                    name: 'editor_earnings',
                    searchable: false
                },
                {
                    data: 'no_of_words',
                    name: 'no_of_words',
                    title: 'No. of Words Edited',
                    searchable: false
                },
                {
                    data: 'jobs',
                    name: 'jobs',
                    title: 'No. of Jobs',
                    searchable: false
                },
                {
                    data: 'approval_date',
                    name: 'users.approval_date',
                    searchable: false
                },
                
            ]
        });

        $('form[name="search"]').on('submit', function(e) {
            providersTable.draw();
            e.preventDefault();
        });
        
        $('#providers_search_btn').on('click', function(e) {
            providersTable.draw();
            e.preventDefault();
        });

    </script>

{{--  doc_transactions table  --}}
    <script type="text/javascript">
       
        $(function() {
            $("#range").daterangepicker({
                startDate: moment().startOf("month"),
                endDate: moment().endOf("month")
            });
        });


        let doc_transactions = $('#doc_transactions').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            // "aaSorting": [
            //     [1, "asc"]
            // ],
            ajax: {
                url: '{!! route('ajax.reports.doc_transactions') !!}',
                data: function(d) {
                    d.range = $('.range-picker').val();
                }
            },
            columns: [
                {
                    data: 'doc_name',
                    name: 'doc_name',
                    title: 'File Name',
                },
                {
                    data: 'category',
                    name: 'category',
                },
                {
                    data: 'no_of_words',
                    name: 'no_of_words',
                    title: 'Word Count'
                },
                {
                    data: 'service_type',
                    name: 'service_type',
                    title: 'Service'
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                },
                {
                    data: 'editor',
                    name: 'editor',
                },
                {
                    data: 'client',
                    name: 'client',
                },
                {
                    data: 'total',
                    name: 'total',
                },
                {
                    data: 'editor_earnings',
                    name: 'editor_earnings',
                },
                {
                    data: 'payment_type',
                    name: 'payment_type',
                    searchable: false,
                },
                {
                    data: 'coupon_code',
                    name: 'coupon_code',
                    title: 'Coupon',
                    searchable: false,
                },
                
            ]
        });

        $('form[name="search"]').on('submit', function(e) {
            doc_transactions.draw();
            e.preventDefault();
        });
      
        $('#docs_transaction_btn').on('click', function(e) {
            doc_transactions.draw();
            e.preventDefault();
        });

    </script>

{{--  plagiarism table  --}}
    <script type="text/javascript">
       
        let plagiarism = $('#plagiarism').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            aaSorting: [
                [1, "desc"]
            ],
            ajax: {
                url: '{!! route('ajax.reports.plagiarism') !!}',
                data: function(d) {
                    // d.range = $('.range-picker').val();
                },
                dataSrc: function (json) {
                    return json.data;
                }
            },
            columns: [
                {
                    data: 'title',
                    name: 'documents.title',
                    title: 'File Name',
                },
                {
                    data: 'results_count',
                    name: 'plagiarism_checks.results_count',
                    title: 'No. of Results'
                },
                {
                    data: 'no_of_words',
                    name: 'plagiarism_checks.no_of_words',
                    title: 'Word Count'
                },
                {
                    data: 'cost',
                    name: 'plagiarism_checks.cost',
                    title: 'Cost'
                },
                {
                    data: 'provider_username',
                    name: 'provider_user_acct.username',
                },
                {
                    data: 'username',
                    name: 'users.username',
                },
                {
                    data: 'created_at',
                    name: 'plagiarism_checks.created_at',
                },
                {
                    data: 'action',
                    name: 'action',
                },
                
              
           
            ]
        });

        // https://datatables.net/reference/api/ajax.json()
        plagiarism.on('xhr', function (params) {
            console.log({params});
            setTimeout(() => {
                        $('.showPlagiarismDetailsBtn').on('click', function () {
                            const viewDetailsBtn = $(this);
                            const actionUrl = viewDetailsBtn.data().action;
                            
                            getPlagiarismDetails(actionUrl);
                        });
                    }, 300);
        })

        $('form[name="search"]').on('submit', function(e) {
            plagiarism.draw();
            e.preventDefault();
        });
      
    </script>
{{--  cred_transactions table  --}}
    {{-- <script type="text/javascript">
       
        $(function() {
            $("#range").daterangepicker({
                startDate: moment().startOf("month"),
                endDate: moment().endOf("month")
            });
        });


        let cred_transactions = $('#cred_transactions').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            // "aaSorting": [
            //     [1, "asc"]
            // ],
            ajax: {
                url: '{!! route('ajax.reports.cred_transactions') !!}',
                data: function(d) {
                    d.range = $('.range-picker').val();
                }
            },
            columns: [
                {
                    data: 'id',
                    name: 'id',
                    title: 'ID',
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                },
                {
                    data: 'user_id',
                    name: 'user_id',
                },

                {
                    data: 'trans_amount',
                    name: 'trans_amount',
                    title: 'Amount'
                },
                {
                    data: 'payment_type',
                    name: 'payment_type',
                    searchable: false,
                },
                {
                    data: 'status',
                    name: 'status',
                },
                {
                    data: 'bank_message',
                    name: 'bank_message',
                },
            ]
        });

        $('form[name="search"]').on('submit', function(e) {
            cred_transactions.draw();
            e.preventDefault();
        });

    </script> --}}
@endpush
@else
<div class="container">
    <div class="flex admin-dashboard">
      

        @if( $currentUser->hasRole('Editor') )
            <div class="well dashboard">
                <a href="{{ URL::route('admin.earnings.monthly') }}">
                    <div >
                        <i class="icon fa fa-usd"></i>
                    </div>
                    <div >
                        <h4>Monthly Earnings</h4>
                    </div>
                </a>
            </div>
            <div class="well dashboard">
                <a href="{{ URL::route('admin.editors.reviews') }}">
                    <div >
                        <i class="icon fa fa-star blue"></i>
                    </div>
                    <div >
                        <h4>Client Reviews</h4>
                    </div>
                </a>
            </div>
         @endif


    </div>
</div>

@endsection
@endif