@extends('Admin.Layout.master')
@section('content')
    <div class="walletWrapper">
        <div class="row topRow">
            <div class="balance col-md-4">
                <div class="moneyBox">
                    <div class="walletIco col-md-3">
                        <i class="fa fa-google-wallet"></i>
                    </div>
                    <span class="balanceAmount col-md-9">
                        <h4>{{ _mt($moduleId,'BusinessWallet.current_balance') }}</h4>
                        <p id="balanceAmount" data-amount="{{ $balance }}">{{ _currency($balance, true) }}</p>
                    </span>
{{--                    <div class="settingWallet" data-unit="settings"><i class="fa fa-gear"></i></div>--}}
                </div>
                <div class="navigator">
                    <div class="col-md-6 eachNav overview active" data-unit="overView">
                        <div class="innerWrap">
                            <i class="icon-bar-chart"></i>
                            <i class="fa fa-spin icon-refresh"></i>
                            <span>{{ _mt($moduleId,'BusinessWallet.overview') }}</span>
                        </div>
                    </div>
                    <div class="col-md-6 eachNav send" data-unit="transfer">
                        <div class="innerWrap">
                            <i class="icon-paper-plane"></i>
                            <i class="fa fa-spin icon-refresh"></i>
                            <span>{{ _mt($moduleId,'BusinessWallet.send') }}</span>
                        </div>
                    </div>
                    <div class="col-md-6 eachNav deposit" data-unit="deposit">
                        <div class="innerWrap">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><path fill="currentColor" fill-rule="evenodd" d="M7.945 4.25h5.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.554.555.817 1.242.95 2.05c.809.132 1.495.396 2.05.95c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v.11c0 1.367 0 2.47-.116 3.337c-.121.9-.38 1.658-.982 2.26s-1.36.86-2.26.982c-.867.116-1.97.116-3.337.116h-5.11c-1.367 0-2.47 0-3.336-.116c-.9-.122-1.658-.38-2.26-.982c-.555-.555-.818-1.242-.95-2.05c-.81-.133-1.496-.396-2.05-.95c-.603-.602-.861-1.36-.982-2.26c-.117-.867-.117-1.97-.117-3.337v-.11c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117m-1.99 13.482c.106.402.255.66.454.859c.277.277.666.457 1.4.556c.755.102 1.756.103 3.191.103h5c1.436 0 2.437-.002 3.192-.103c.734-.099 1.122-.28 1.4-.556c.276-.277.457-.665.555-1.4c.102-.754.103-1.755.103-3.19s-.001-2.437-.103-3.193c-.098-.734-.279-1.122-.556-1.399c-.2-.2-.456-.349-.86-.454c.019.59.019 1.251.019 1.99v.11c0 1.367 0 2.47-.116 3.337c-.122.9-.38 1.658-.982 2.26s-1.36.86-2.26.982c-.867.116-1.97.116-3.337.116h-5.11c-.739 0-1.4 0-1.99-.018M4.809 5.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4c-.101.754-.103 1.756-.103 3.191s.002 2.437.103 3.192c.099.734.28 1.122.556 1.399c.277.277.665.457 1.4.556c.754.101 1.756.103 3.191.103h5c1.435 0 2.437-.002 3.192-.103c.734-.099 1.122-.28 1.399-.556c.277-.277.457-.665.556-1.4c.101-.755.103-1.756.103-3.191s-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.754-.101-1.756-.103-3.191-.103H8c-1.435 0-2.437.002-3.192.103M10.5 9.25a1.75 1.75 0 1 0 0 3.5a1.75 1.75 0 0 0 0-3.5M7.25 11a3.25 3.25 0 1 1 6.5 0a3.25 3.25 0 0 1-6.5 0M5 8.25a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V9A.75.75 0 0 1 5 8.25m11 0a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75" clip-rule="evenodd"/></svg>
                           {{-- <i class="icon-login"></i>--}}
                            <i class="fa fa-spin icon-refresh"></i>
                            <span>{{ _mt($moduleId,'BusinessWallet.deposit') }}</span>
                        </div>
                    </div>

                    <div class="col-md-6 eachNav deduct" data-unit="deduct">
                        <div class="innerWrap">
                            {{--<i class="icon-credit-card"></i>--}}
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><path fill="currentColor" fill-rule="evenodd" d="M9.944 3.25h4.112c1.838 0 3.294 0 4.433.153c1.172.158 2.121.49 2.87 1.238c.748.749 1.08 1.698 1.238 2.87c.09.673.127 1.456.142 2.363a.8.8 0 0 1 .004.23q.009.848.007 1.84V12a.75.75 0 0 1-1.5 0q0-.668-.002-1.25H2.752q-.003.582-.002 1.25c0 1.907.002 3.262.14 4.29c.135 1.005.389 1.585.812 2.008s1.003.677 2.009.812c1.028.138 2.382.14 4.289.14h4a.75.75 0 0 1 0 1.5H9.944c-1.838 0-3.294 0-4.433-.153c-1.172-.158-2.121-.49-2.87-1.238c-.748-.749-1.08-1.698-1.238-2.87c-.153-1.14-.153-2.595-.153-4.433v-.112q-.002-.992.007-1.84a.8.8 0 0 1 .003-.23c.016-.907.053-1.69.143-2.363c.158-1.172.49-2.121 1.238-2.87c.749-.748 1.698-1.08 2.87-1.238c1.14-.153 2.595-.153 4.433-.153m-7.168 6h18.448a16 16 0 0 0-.114-1.54c-.135-1.005-.389-1.585-.812-2.008s-1.003-.677-2.009-.812c-1.027-.138-2.382-.14-4.289-.14h-4c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S3.025 6.705 2.89 7.71c-.06.445-.094.952-.114 1.539m16.224 4a.75.75 0 0 1 .75.75v4.19l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l.72.72V14a.75.75 0 0 1 .75-.75M5.25 16a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75m6.5 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>
                            <i class="fa fa-spin icon-refresh"></i>
                            <span>{{ _mt($moduleId,'BusinessWallet.deduct') }}</span>
                        </div>
                    </div>
                    <div class="col-md-6 eachNav transaction" data-unit="transactionList">
                        <div class="innerWrap">
                            <i class="fa fa-exchange"></i>
                            <i class="fa fa-spin icon-refresh"></i>
                            <span>{{ _mt($moduleId,'BusinessWallet.transactions') }}</span>
                        </div>
                    </div>
                    <div class="col-md-6 eachNav settings extraSettings" data-unit="settings">
                        <div class="innerWrap">
                            <i class="fa fa-gear"></i>
                            <i class="fa fa-spin icon-refresh"></i>
                            <span>{{_mt($moduleId,'BusinessWallet.settings') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="walletAjaxPartials row" data-unit="overView"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //Document ready functions
        $(function () {
            //Refresh ajax details
            $('.walletAjaxPartials').each(function () {
                refreshAjaxData($(this));
            });
        });

        //Ajax info retrieval
        function refreshAjaxData(elem, route, args, postParams) {
            simulateLoading(elem);
            route = route ? route : '{{ scopeRoute("businessWallet.unit") }}';
            var options = {unit: elem.attr('data-unit'), args: args};

            if (postParams) $.extend(options, postParams);

            return $.post(route, options, function (response) {
                elem.html(response);
            });
        }

        function resizePartial(action) {
            switch (action) {
                case 'contract':
                    $('body').addClass('page-sidebar-closed');
                    $('.page-sidebar-menu').addClass('page-sidebar-menu-closed');
                    $('.walletWrapper .topRow > div').first()
                        .removeClass('col-md-4').addClass('col-md-3');
                    $('.walletWrapper .topRow > div').last()
                        .removeClass('col-md-8').addClass('col-md-9');
                    break;
                default:
                    $('body').removeClass('page-sidebar-closed');
                    $('.page-sidebar-menu').removeClass('page-sidebar-menu-closed');
                    $('.walletWrapper .topRow > div').first()
                        .addClass('col-md-4').removeClass('col-md-3');
                    $('.walletWrapper .topRow > div').last()
                        .addClass('col-md-8').removeClass('col-md-9');
                    break;
            }
        }

        $('.settingWallet').click(function () {
            resizePartial();
            $(this).addClass('loading').siblings().removeClass('loading');
            var me = $(this);
            $('.walletAjaxPartials').attr('data-unit', $(this).attr('data-unit'));
            refreshAjaxData($('.walletAjaxPartials')).done(function () {
                me.addClass('active').removeClass('loading').siblings().removeClass('active');
            });
        });

        //Navigation
        $('.eachNav').click(function () {
            resizePartial();
            $(this).addClass('loading').siblings().removeClass('loading');
            var me = $(this);
            $('.walletAjaxPartials').attr('data-unit', $(this).attr('data-unit'));
            refreshAjaxData($('.walletAjaxPartials')).done(function () {
                me.addClass('active').removeClass('loading').siblings().removeClass('active');
            });
        });

        //Switch tabs
        $('.walletOverview.walletSettings .navUl li').hover(function () {
            $(this).addClass('active').siblings().removeClass('active');
        }, function () {
            $(this).removeClass('active').siblings().removeClass('active');
        });

        //Load partials
        $('.walletOverview.walletSettings .navUl li').click(function () {
            var me = $(this);
            $('.subPartials').attr('data-unit', $(this).attr('data-unit'));
            refreshAjaxData($('.subPartials'));
        });
    </script>
@endsection