@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    <div class="row invoceTile-Wrapper">
        <div class="col-sm-3 tileGrid">
            <h3 class="title"><strong>{{ _t('invoice.total_invoices')}}</strong></h3>
            <h2 class="invoiceCount">{{ $totalInvoice }}</h2>
            <div class="amount">
                <label>{{ _t('invoice.Amount')}}</label>
                <span class="price"> {{ currency($totalAmount) }} </span>
            </div>
        </div>
        <div class="col-sm-3 tileGrid">
            <h3 class="title"><strong>{{_t('invoice.paid')}}</strong></h3>
            <div class="easy chartGreen"
                 data-percent="{{ $totalPaidAmount ? round(($totalPaidAmount/$totalAmount)*100) : 0 }}">
                {{ $totalPaidAmount ? round(($totalPaidAmount/$totalAmount)*100) : 0 }}%
            </div>
            <div class="amount">
                <label>{{_t('invoice.Amount')}}</label>
                <span class="price"> {{ currency($totalPaidAmount) }} </span> <span
                        class="per"><strong>{{ $totalPaid }}</strong></span>
            </div>
        </div>
        <div class="col-sm-3 tileGrid">
            <h3 class="title"><strong>{{_t('invoice.unpaid')}}</strong></h3>
            <div class="easy chartBlue"
                 data-percent="{{ $totalUnpaidAmount ? round(($totalUnpaidAmount/$totalAmount)*100) : 0 }}">
                {{ $totalUnpaidAmount ? round(($totalUnpaidAmount/$totalAmount)*100) : 0 }}%
            </div>
            <div class="amount">
                <label>{{_t('invoice.Amount')}}</label>
                <span class="price"> {{ currency($totalUnpaidAmount) }} </span> <span
                        class="per"><strong>{{ $totalUnpaid }}</strong></span>
            </div>
        </div>
        <div class="col-sm-3 tileGrid">
            <h3 class="title"><strong>{{_t('invoice.over_due')}}</strong></h3>
            <div class="easy chartYellow"
                 data-percent="{{ $overDue ? round(($overDue/$totalAmount)*100) : 0 }}">{{ $overDue ? round(($overDue/$totalAmount)*100) : 0 }}
                %
            </div>
            <div class="amount">
                <label>{{_t('invoice.Amount')}}</label>
                <span class="price"> {{ currency($overDue) }} </span> <span
                        class="per"><strong>{{ $totalOverDue }}</strong></span>
            </div>
        </div>
    </div>
    <div class="invoiceTableWrapper"></div>
    <div class="detailedInvoiceWrapper"></div>
    <style>
        .page-content {
            background-color: #eee;
            overflow: auto;
        }

        .detailedInvoiceWrapper {
            width: 100%;
            float: left;
            margin-bottom: 15px;
        }

        .row.invoceTile-Wrapper {
            background-color: #fff;
            margin: 0px;
        }

        .row.invoceTile-Wrapper .col-sm-3.tileGrid {
            border-right: solid 1px #efefef;
            padding: 15px 10px;
        }

        .row.invoceTile-Wrapper .tileGrid h3.title {
            font-size: 14px;
            text-align: center;
            font-weight: 500;
            margin: 0px;
        }

        .row.invoceTile-Wrapper .col-sm-3.tileGrid:last-child {
            border: 0px !important;
        }

        .row.invoceTile-Wrapper .tileGrid h2.invoiceCount {
            height: 125px;
            line-height: 120px;
            color: #049DFF;
            font-weight: 500;
            font-size: 60px;
            text-align: center;
            margin: 20px auto;
        }

        .row.invoceTile-Wrapper .tileGrid .amount label {
            display: block;
            font-size: 12px;
        }

        .row.invoceTile-Wrapper .tileGrid .amount span.price {
            font-size: 14px;
            float: left;
            font-weight: 600;
        }

        .row.invoceTile-Wrapper .tileGrid .amount span.per {
            float: right;
            font-size: 12px;
        }

        .row.invoiceTable {
            background-color: #fff;
            margin: 8px 0px;
            /* border: solid 1px #ddd; */
            padding: 10px 0px;
            border-radius: 5px !important;
        }

        .row.invoiceTable label {
            display: block;
            font-size: 12px;
            text-align: center;
            color: #6d6969;
        }

        .row.invoiceTable span {
            text-align: center;
            display: block;
            font-size: 12px;
            font-weight: 600;
        }

        .row.invoiceTable span button.viewInvoice.btn {
            background-color: #fff;
            padding: 4px 8px;
            vertical-align: middle;
            margin: 5px;
            border-color: #fff;
            color: #656161;
            font-size: 15px;
        }

        .row.invoiceTable span button.viewInvoice.btn i {
            font-weight: 600;
            font-size: 18px;
        }

        .row.invoceTableHead {
            margin: 0px;
            background-color: #fff;
            border-top: solid 1px #eee;
            padding: 10px 5px;
        }

        .row.invoceTableHead .heading h3 {
            font-size: 20px;
            margin: 0px;
            font-weight: 500;
        }

        .row.invoceTableHead .heading label {
            font-size: 12px;
        }

        .row.invoceTableHead .filters.row .eachFilter input {
            height: 34px;
            border: solid 1px #eee;
            display: inline-block;
            width: 65%;
            padding: 5px;
        }

        .row.invoceTableHead .filters.row .eachFilter button.btn.dark.filterRequest.ladda-button {
            display: inline-block;
            float: right;
        }

        .row.invoceTableHead .filters.row .eachFilter.operation {
            float: right;
        }

        .row.invoiceTable span.invNo {
            /*padding-top: 10px;*/
            font-size: 14px;
            text-align: left;
        }

        .row.invoiceTable span.invNo i {
            font-size: 20px;
            color: #888;
            vertical-align: middle;
        }

        .row.invoiceTable span.billDate {
            border: solid 1px #d9d9d9;
            max-width: 95px;
            margin: auto;
            border-radius: 5px !important;
        }

        span.paid {
            color: #0bbf0b;
        }

        span.unpaid {
            color: #e03810;
        }

        .row.invoiceHeader button.btn.btn-outline {
            float: right;
            margin: 0px 2px;
            background-color: #fff;
            border-color: #ddd;
            color: #656161;
            font-size: 14px;
        }

        /* circle graph  easy pie chart*/
        .row.invoceTile-Wrapper .easy {
            width: 125px;
            height: 125px;
            line-height: 125px;
            background: none;
            margin: 20px auto;
            box-shadow: none;
            position: relative;
            border-radius: 50% !important;
        }

        @media only screen and (max-width: 990px) {
            .progress {
                margin-bottom: 20px;
            }
        }


        /* payment invoice */

        .row.invoicePaymentWrapper {
            margin: 0px;
            width: 100%;
            float: left;
        }

        .row.invoicePaymentWrapper .invoice-paymentSection {
            background-color: #fff;
            margin: 15px 0px;
        }

        .row.invoicePaymentWrapper .invoice-paymentSection .row.paymentHead {
            margin: 0px;
            background-color: #fbfbfb;
            padding: 10px 0px;
            border-bottom: solid 1px #ddd;
        }

        .row.invoicePaymentWrapper .invoice-paymentSection .row.paymentHead h3 {
            margin: 6px 0px;
            font-size: 16px;
            font-weight: bold;
            color: #61605f;
        }

        .row.paymentHead button.backToInvoiceTable.btn.btn-primary {
            float: right;
            background-color: #fff;
            border-color: #ddd;
            color: #656161;
        }

        .row.paymentBody {
            margin: 0px;
        }

        .row.paymentBody .paymentIcon {
            float: left;
            width: 100%;
        }

        .row.paymentBody .paymentTo {
            width: 100%;
            float: left;
            padding: 25px 0px;
            text-align: center;
        }

        .row.paymentBody .paymentTo label {
            display: block;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
        }

        .row.paymentBody .paymentTo span {
            display: block;
            font-size: 29px;
            border: solid 1px #eee;
            border-radius: 15px !important;
            margin: 10px 85px;
            padding: 0px;
            background-color: #fbf8f8;
            color: #2196f3;
        }

        .row.paymentBody .paymentIcon i {
            font-size: 54px;
            padding-top: 34px;
            text-align: center;
            margin: auto;
            display: block;
            color: #2196f3;
        }

        .row.paymentBody .paymentTo button.btn.btn-blue {
            background-color: #2196f3;
            color: #fff;
            margin: 10px 0px;
            border: solid 1px #1580d6;
            border-radius: 5px !important;
        }

        .row.paymentBody .paymentTo button.btn.btn-blue i {
            padding: 0px 6px 0px 0px;
            font-size: 18px;
        }

        /* custom payment */
        .row.paymentBody .paymentGatewaysWrapper {
            max-width: 700px;
            margin: 20px auto;
        }

        .row.paymentBody .paymentGatewaysWrapper:after, .row.paymentBody .paymentGatewaysWrapper:before {
            height: 3px;
            position: absolute;
            content: '';
            background: #3cc7d3;
            z-index: 99;
            width: 64%;
        }

        .row.paymentBody .paymentGatewaysWrapper:after {
            right: 0;
            background: #2b8d96;
            width: 37%;
        }

        .row.paymentBody .paymentContainer .toPay:before, .row.paymentBody .paymentContainer .toPay:after {
            content: '';
            height: 7px;
            position: absolute;
            transform: skewX(32deg);
            left: 0;
            bottom: 0;
            width: 53%;
            background: #00adff;
        }

        .row.paymentBody .paymentContainer .toPay:before {
            width: 50%;
            right: 0 !important;
            left: auto !important;
            background: #4747a0;
        }

        .row.paymentBody .paymentContainer {
            border-left: none !important;
            /* border: 1px solid #ddd; */
            background: white;
            padding: 10px;
            min-height: 200px;
            /* box-shadow: 3px 3px 0px #ddd; */
        }

        .row.paymentBody .paymentContainer .toPay {
            font-size: 15px;
            padding: 9px;
            padding-bottom: 13px;
            position: relative;
            max-width: 180px;
            margin: auto;
            margin-bottom: 10px;
            /* border-bottom: 1px solid #efefef; */
            /* max-width: 250px; */
            text-align: center;
            /* background: #eee; */
        }

        .row.paymentBody .paymentGatewaysWrapper .gatewayNavWrap {
            background: #fbfbfb;
            padding: 1px 0px 14px 8px;
            border-radius: 4px !important;
            border-bottom-left-radius: 5px !important;
            border: 1px solid #ddd;
            min-height: 250px;
        }

        .row.paymentBody .paymentGatewaysWrapper .paymentContainer.active {
            display: block;
            padding-top: 10px;
            border: 1px solid #ddd;
        }

        .row.invoiceTable label.invUser {
            margin-left: 24px;
        }

        @media (max-width: 767px) {
            .reportFilters .eachFilter.operation.col-md-3.col-sm-3 {
                width: 50%;
                float: left;
            }

            .row.invoceTableHead .filters.row .eachFilter input {
                width: auto !important;
            }

            .row.invoceTile-Wrapper .col-sm-3.tileGrid {
                border-right: 0px;
                padding: 15px 10px;
                border-bottom: solid 1px #efefef;
                overflow: hidden;
            }

            .row.invoceTableHead .filters.row .eachFilter.operation {
                float: left;
            }
        }

        @media (max-width: 480px) {
            .reportFilters .eachFilter.operation.col-md-3.col-sm-3 {
                width: 100%;
                float: none;
            }

            .reportFilters .filters .eachFilter button {
                margin: 10px 0px;
            }
        }
    </style>
    <script>
        "use strict";
        $(function () {
            fetchInvoice();
            Ladda.bind('.ladda-button');

            //fetch report table while filter is clicked
            $('.filterRequest').click(function () {
                fetchInvoice();
            });


            //User fetcher
            var selectedCallback = function (target, id, name) {

                $('.userFiller').val(name);
                $('#user_id').val(id);

            };
            var options = {
                target: '.userFiller',
                route: '{{ route("user.api") }}',
                action: 'getUsers',
                name: 'username',
                selectedCallback: selectedCallback,
                clearCallback: function (element) {
                    element.siblings('input[name="filters[user_id]"]').val('')
                }
            };
            $('.userFiller').ajaxFetch(options);

        });

        function fetchInvoice(route) {
            simulateLoading('.invoiceTableWrapper');
            route = route ? route : '{{ scopeRoute('invoice.fetch') }}';
            $.post(route, $('.filterForm').serialize(), function (response) {
                $('.invoiceTableWrapper').html(response);
                Ladda.stopAll();
            });
        }

        function viewInvoice(id) {
            $.post("{{ scopeRoute('invoice.view') }}", {id: id}, function (response) {
                $('.invoiceTableWrapper').slideUp();
                $('.detailedInvoiceWrapper').slideDown();
                $('.detailedInvoiceWrapper').html(response);
            });
        }
    </script>
    <script>
        $(function () {
            $('.chartGreen').easyPieChart({
                //your options goes here
                animate: 2000,
                barColor: '#1abc9c'
            });
            $('.chartBlue').easyPieChart({
                //your options goes here
                animate: 2000,
                barColor: '#049dff'
            });
            $('.chartYellow').easyPieChart({
                //your options goes here
                animate: 2000,
                barColor: '#fdba04'
            });
        });
    </script>
@endsection