@extends('admin.layout')
@section('main')
    <div class="content-header row">

    </div>
    <div class="content-body">
        <section id="dashboard-ecommerce">
            <div class="row match-height justify-content-end">
            </div>
    </div>
    </div>
    <div class="row match-height justify-content-end">
        <div class="col-lg-12 mr-auto">
            <h2>Other Activities</h2>
        </div>

        <div class="col-lg-auto col-md-6 my-1">
            <div class="form-group">
                <div id="reportrange" class="daterange">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down"></i>
                    <input type="hidden" name="dtFrom" id="dtFrom">
                    <input type="hidden" name="dtTo" id="dtTo">
                </div>
            </div>
        </div>

        <div class="col-lg-auto col-md-6 my-1">
            <div class="form-group">
                <select class="select2 select-label form-control w-100" id="iActivityTypeIDFilter"
                    name="iActivityTypeIDFilter">
                    <option value="">Activity Type</option>
                    @foreach (otherServiceActivityType() as $key => $value)
                        <option value="{{ $value->iActivityTypeID }}"> {{ $value->vActivityType }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="col-lg-auto col-md-6 my-1">
            <div class="d-lg-flex">
                <a href="#" id="otherApplyFilter" onclick="filterData()" class="btn btn-primary">Apply</a>
                <a href="#" id="otherClearFilter" class="btn btn-light ml-1">Clear</a>
            </div>
        </div>
    </div>
    <div class="card card-statistics">
        <div class="card-body statistics-body">
            <div class="row">
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-info mr-2">
                            <div class="avatar-content">
                                <i data-feather="server" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherActivitiesCount"></h2>
                            <p class="card-text font-small-3 mb-0">All Activity Enrolled
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="user-check" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherHOReviewPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0 ">HO Review Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="user-check" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherComplianceReviewPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0 ">Compliance Review Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="check-circle" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherHOFinalApprovalCount"></h2>
                            <p class="card-text font-small-3 mb-0">HO Final Approval</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="clock" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherActivityClosurePendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Activity Closure Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="eye" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherActivityClosureReviewPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Activity Closure Review Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="file-text" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherActivityExpenseReviewPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Activity Expense Review Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="thumbs-up" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherActivityClosureApprovalCount"></h2>
                            <p class="card-text font-small-3 mb-0">Activity Closure Approval</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="check-square" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherActivityCompletedCount"></h2>
                            <p class="card-text font-small-3 mb-0">Activity Completed</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="slash" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtheCancelledActivityCount"></h2>
                            <p class="card-text font-small-3 mb-0">Cancelled Activity</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row match-height justify-content-end">
        <div class="col-lg-12 mr-auto">
            <h2>Other Activity Contracts</h2>
        </div>
    </div>
    <div class="card card-statistics">
        <div class="card-body statistics-body">
            <div class="row">
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-info mr-2">
                            <div class="avatar-content">
                                <i data-feather="server" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="TotalOtherGeneratedContract"></h2>
                            <p class="card-text font-small-3 mb-0">Total Generated Contract
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-primary mr-2">
                            <div class="avatar-content">
                                <i data-feather="shield" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractComplianceReviewPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Compliance Review Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-danger mr-2">
                            <div class="avatar-content">
                                <i data-feather="x-circle" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractComplianceRejectedCount"></h2>
                            <p class="card-text font-small-3 mb-0">Compliance Rejected</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-warning mr-2">
                            <div class="avatar-content">
                                <i data-feather="file-text" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractApprovalPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Contract Approval Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-secondary mr-2">
                            <div class="avatar-content">
                                <i data-feather="upload-cloud" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractDocumentSubmissionPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Document Submission Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-warning mr-2">
                            <div class="avatar-content">
                                <i data-feather="check-square" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractDocumentVerificationPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Document Verification Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-success mr-2">
                            <div class="avatar-content">
                                <i data-feather="thumbs-up" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractFinalHOApprovalCount"></h2>
                            <p class="card-text font-small-3 mb-0">Final HO Approval</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-warning mr-2">
                            <div class="avatar-content">
                                <i data-feather="dollar-sign" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractPaymentApprovalPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Payment Approval Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-warning mr-2">
                            <div class="avatar-content">
                                <i data-feather="credit-card" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractPaymentPendingCount"></h2>
                            <p class="card-text font-small-3 mb-0">Payment Pending</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-warning mr-2">
                            <div class="avatar-content">
                                <i data-feather="pause-circle" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractPaymentOnHoldCount"></h2>
                            <p class="card-text font-small-3 mb-0">Payment On Hold</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-info mr-2">
                            <div class="avatar-content">
                                <i data-feather="send" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractPaymentInitiatedCount"></h2>
                            <p class="card-text font-small-3 mb-0">Payment Initiated</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-info mr-2">
                            <div class="avatar-content">
                                <i data-feather="trending-up" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractPaymentProceedCount"></h2>
                            <p class="card-text font-small-3 mb-0">Payment Proceed</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media" style="border-right: 1px solid #eee;">
                        <div class="avatar bg-light-success mr-2">
                            <div class="avatar-content">
                                <i data-feather="check-circle" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractChequeClearedCount"></h2>
                            <p class="card-text font-small-3 mb-0">Cheque Cleared</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media">
                        <div class="avatar bg-light-secondary mr-2">
                            <div class="avatar-content">
                                <i data-feather="archive" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractArchiveCount"></h2>
                            <p class="card-text font-small-3 mb-0">Archive Contract</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media">
                        <div class="avatar bg-light-dark mr-2">
                            <div class="avatar-content">
                                <i data-feather="corner-up-left" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractWithdrawCount"></h2>
                            <p class="card-text font-small-3 mb-0">Withdraw Contract</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 my-1">
                    <div class="media">
                        <div class="avatar bg-light-danger mr-2">
                            <div class="avatar-content">
                                <i data-feather="slash" class="avatar-icon"></i>
                            </div>
                        </div>
                        <div class="media-body my-auto">
                            <h2 class="font-weight-bolder mb-0" id="OtherContractTerminatedCount"></h2>
                            <p class="card-text font-small-3 mb-0">Terminated Contract</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </section>
    </div>
@endsection
@section('scripts')
    @include('scripts.otherServices.dashboard-scripts')
    <script>
        var start = moment().month(3).startOf('month');
        var end = moment().add(1, 'year').month(2).endOf('month');

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
                'MMMM D, YYYY'));
            $("#dtFrom").val(start.format('YYYY-MM-DD'));
            $("#dtTo").val(end.format('YYYY-MM-DD'));
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            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')
                ],
                'Last 3 Months': [moment().subtract(2, 'months').startOf('month'), moment()
                    .endOf('month')
                ],
                'Last FY': [moment().subtract(1, 'year').month(3).startOf('month'),
                    moment().month(2).endOf('month')
                ],
                'Current FY': [moment().month(3).startOf('month'),
                    moment().add(1, 'year').month(2).endOf('month')
                ]


            }
        }, cb);

        cb(start, end);


        $('#otherApplyFilter').click(function() {
            filterOtherActivityData();
            filterOtherActivityContractData();
        });
        $('#otherClearFilter').click(function() {
            $("#iActivityTypeIDFilter").val('').select2();
            var start = moment().month(3).startOf('month');
            var end = moment().add(1, 'year').month(2).endOf('month');
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
                'MMMM D, YYYY'));
            $("#dtFrom").val(start.format('YYYY-MM-DD'));
            $("#dtTo").val(end.format('YYYY-MM-DD'));
            filterOtherActivityData();
            filterOtherActivityContractData();
        });



        filterOtherActivityData();
        filterOtherActivityContractData();
    </script>
@endsection