@extends('layouts.app')

@section('content')
<div class="page-wrapper">
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{trans('lang.reports_transaction')}}</h3>
        </div>

        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">{{trans('lang.dashboard')}}</a></li>
                <li class="breadcrumb-item active">{{trans('lang.reports_transaction')}}</li>
            </ol>
        </div>
    </div>
    <div class="container-fluid">
        <div class="card  pb-4">

            <div class="card-body">
                <div id="data-table_processing" class="dataTables_processing panel panel-default"
                    style="display: none;">{{trans('lang.processing')}}</div>
                <div class="error_top"></div>

                <div class="row restaurant_payout_create">
                    <div class="restaurant_payout_create-inner">
                        <fieldset>
                            <legend>{{trans('lang.reports_transaction')}}</legend>

                            <div class="form-group row width-50">
                                <label class="col-3 control-label">{{trans('lang.select_user')}}<span
                                        class="required-field"></span>
                                </label>
                                <div class="col-7">
                                    <select class="form-control user" id="user">
                                        <option selected value="">{{trans('lang.select_user')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row width-50">
                                <label class="col-3 control-label">{{trans('lang.select_payment_method')}}</label>
                                <div class="col-7">
                                    <select class="form-control payment_method">
                                        <option value="all" selected>{{trans('lang.all')}}</option>

                                    </select>
                                </div>
                            </div>
                            <div class="form-group row width-50">
                                <label class="col-3 control-label">{{trans('lang.select_date')}}</label>
                                <div class="col-7">
                                    <div id="reportrange"
                                        style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                        <i class="fa fa-calendar"></i>&nbsp;
                                        <span></span> <i class="fa fa-caret-down"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row width-100">
                                <label class="col-3 control-label">{{trans('lang.file_format')}}<span
                                        class="required-field"></span></label>
                                <div class="col-7">
                                    <select class="form-control file_format">
                                        <option value="">{{trans('lang.file_format')}}</option>
                                        <option value="csv">{{trans('lang.csv')}}</option>
                                        <option value="pdf">{{trans('lang.pdf')}}</option>
                                    </select>
                                </div>
                            </div>

                        </fieldset>
                    </div>
                </div>

                <div class="form-group col-12 text-center btm-btn">
                    <button type="button" onclick="generateReport()" class="btn btn-primary download-user-report"><i
                            class="fa fa-save"></i> {{ trans('lang.download')}}</button>
                </div>

            </div>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('js/objectexporter.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>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>
    var database = firebase.firestore();
    var userRef = database.collection('wallet_transaction');
    var customerRef = database.collection('users');
    var refCurrency = database.collection('currency').where('enable', '==', true).limit('1');
    var paymentMethodRef = database.collection('settings').doc('payment');

    var symbolAtRight = false;
    var decimal_degits = 0;
    var currentCurrency = '';

    refCurrency.get().then(async function (snapshots) {
        var currencyData = snapshots.docs[0].data();
        currentCurrency = currencyData.symbol;
        decimal_degits = currencyData.decimalDigits;

        if (currencyData.symbolAtRight) {
            symbolAtRight = true;
        }
    });
    paymentMethodRef.get().then(function (snapShots) {

        var data = snapShots.data();
        Object.keys(data).forEach((listval) => {
            $('.payment_method').append($("<option value='" + data[listval].name + "'>" + data[listval].name + "</option>"));
        });
    });
    $(function () {

        var start = moment().subtract(29, 'days');
        var end = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }

        $('#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')]
            }
        }, cb);

        cb(start, end);

    });


    $('#user').html('');
    customerRef.get().then(function (snapShots) {

        if (snapShots.docs.length > 0) {
            $('#user').append('<option value="all" selected>{{trans("lang.all_user")}}</option>');
            snapShots.docs.forEach((listval) => {
                var data = listval.data();

                $('#user').append('<option value="' + data.id + '">' + data.firstName + ' ' + data.lastName + '</option>');
            });

        }
    });

    async function generateReport() {
        var userRef = database.collection('wallet_transaction');
        var user = $('#user :selected').val();
        var paymentType = $('.payment_method :selected').val();
        let start_date = moment($('#reportrange').data('daterangepicker').startDate).toDate();
        let end_date = moment($('#reportrange').data('daterangepicker').endDate).toDate();

        if (user != "all") {
            userRef = userRef.where('userId', '==', user);
        }
        if (paymentType != "all") {

            userRef = userRef.where('paymentType', '==', paymentType);
        }
        if (start_date != '') {
            userRef = userRef.where('createdDate', '>=', start_date);
        }
        if (end_date != '') {
            userRef = userRef.where('createdDate', '<=', end_date);
        }
        var fileFormat = $(".file_format :selected").val();
        var headerArray = ['TxnId', 'Name', 'PaymentType', 'Amount', 'Date', 'Note'];
        var headers = [];
        var transactionData = [];
        if (fileFormat == 'xls' || fileFormat == 'csv') {
            headers = headerArray
            var script = document.createElement("script");
            script.setAttribute("src", "https://unpkg.com/object-exporter@3.2.1/dist/objectexporter.min.js");
            script.setAttribute("async", "false");
            var head = document.head;
            head.insertBefore(script, head.firstChild);
        } else {
            for (var k = 0; k < headerArray.length; k++) {
                headers.push({
                    alias: headerArray[k],
                    name: headerArray[k],
                    flex: 1,
                });
            }
            var script = document.createElement("script");
            script.setAttribute("src", "{{ asset('js/objectexporter.min.js') }}");
            script.setAttribute("async", "false");
            var head = document.head;
            head.insertBefore(script, head.firstChild);
        }

        $(".error_top").html("");

        if (fileFormat == '') {
            $(".error_top").show();
            $(".error_top").html("");
            $(".error_top").append("<p>{{trans('lang.file_format_error')}}</p>");
            window.scrollTo(0, 0);
        } else if (user == '') {
            $(".error_top").show();
            $(".error_top").html("");
            $(".error_top").append("<p>{{trans('lang.select_user')}}</p>");
            window.scrollTo(0, 0);
        } else {
            jQuery("#overlay").show();

            userRef.get().then(async function (userSnapshots) {

                if (userSnapshots.docs.length > 0) {
                    var transactionData = await getData(userSnapshots);

                    ((fileFormat == "pdf") ? document.title = "transaction-report" : "");

                    objectExporter({
                        type: fileFormat,
                        exportable: transactionData,
                        headers: headers,
                        columnSeparator: ',',
                        fileName: 'transaction-report',
                        headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
                        cellStyle: 'border: 1px solid lightgray; margin-bottom: -1px;',
                        documentTitle: '',
                        sheetName: 'transaction-report'
                    })
                    jQuery("#overlay").hide();


                    $('.file_format option[value=""]').attr('selected', 'selected');
                } else {
                    jQuery("#overlay").hide();
                    $(".error_top").show();
                    $(".error_top").html("");
                    $(".error_top").append("<p>{{trans('lang.not_found_data_error')}}</p>");
                    window.scrollTo(0, 0);
                }
            });
        }
    }

    async function getData(querySnapshot) {
        var transactionData = [];
        await Promise.all(querySnapshot.docs.map(async (doc) => {
            var userObj = doc.data();
            var newUserObj = {};
            var userName = await getUserData(userObj.userId);

            if (userObj.amount.charAt(0) == "-") {
                var amount = Math.abs(userObj.amount);
                if (symbolAtRight) {
                    amount = "-" + parseFloat(amount).toFixed(decimal_degits) + currentCurrency;

                } else {
                    amount = "-" + currentCurrency + parseFloat(amount).toFixed(decimal_degits);

                }

            } else {
                if (symbolAtRight) {
                    amount = parseFloat(userObj.amount).toFixed(decimal_degits) + currentCurrency;

                } else {
                    amount = currentCurrency + parseFloat(userObj.amount).toFixed(decimal_degits);

                }

            }


            var date = userObj.createdDate.toDate().toDateString();
            var time = userObj.createdDate.toDate().toLocaleTimeString('en-US');
            var dateTime = date + " " + time;
            newUserObj['TxnId'] = userObj.transactionId;
            newUserObj['Name'] = userName ? userName : '';
            newUserObj['PaymentType'] = userObj.paymentType;
            newUserObj['Amount'] = amount;
            newUserObj['Date'] = dateTime;
            newUserObj['Note'] = userObj.note;
            transactionData.push(newUserObj);
        }));
        return transactionData;
    }

    async function getUserData(id) {

        var userName = '';

        await database.collection('users').where("id", "==", id).get().then(async function (snapshotss) {

            if (snapshotss.docs[0]) {
                var user_data = snapshotss.docs[0].data();
                userName = user_data.firstName + ' ' + user_data.lastName;

            }
        });
        return userName;

    }
</script>
@endsection