@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    <div class="epinOuterWrapper epinSectionOuter">
        <div class="row">
            <div class="col-sm-4">
                <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 bordered">
                    <h4 class="widget-thumb-heading">{{ _mt($moduleId,'Epin.Total') }}</h4>
                    <div class="widget-thumb-wrap">
                        <i class="widget-thumb-icon bg-blue fa fa-google-wallet"></i>
                        <div class="widget-thumb-body">
                            <span class="widget-thumb-subtitle">{{ $epinTotalNumber }} {{ _mt($moduleId,'Epin.Nos') }}</span>
                            <span class="widget-thumb-body-stat" data-counter="counterup"
                                  data-value="">{{ currency($epinTotalAmount) }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 bordered">
                    <h4 class="widget-thumb-heading">{{ _mt($moduleId,'Epin.Available') }}</h4>
                    <div class="widget-thumb-wrap">
                        <i class="widget-thumb-icon bg-green fa fa-check-circle-o"></i>
                        <div class="widget-thumb-body">
                            <span class="widget-thumb-subtitle">{{ $activeEpinNumber }} {{ _mt($moduleId,'Epin.Nos') }}</span>
                            <span class="widget-thumb-body-stat" data-counter="counterup"
                                  data-value="">{{ currency($activeEpinAmount) }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 bordered">
                    <h4 class="widget-thumb-heading">{{ _mt($moduleId,'Epin.Inactive') }}</h4>
                    <div class="widget-thumb-wrap">
                        <i class="widget-thumb-icon bg-red fa fa-close"></i>
                        <div class="widget-thumb-body">
                            <span class="widget-thumb-subtitle">{{ $inActiveEpinNumber }} {{ _mt($moduleId,'Epin.Nos') }}</span>
                            <span class="widget-thumb-body-stat" data-counter="counterup"
                                  data-value="">{{ currency($inActiveEpinAmount) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row topRow" style="margin: 0px;">
            <div class="navigatorContainer col-md-2">
                <div class="navigator" style="margin: 0px;">
                    <div class="navRow">
                        <div class="eachNavWrap active" data-unit="manage">
                            <div class="innerWrap eachEpinNav">
                            <span class="eachNavIco">
                                <i class="fa fa-tags"></i>
                            </span>
                                <p>
                                    @if(strtolower(getScope())  == 'user')
                                        {{ _mt($moduleId,'Epin.Epin_List') }}
                                    @else
                                        {{ _mt($moduleId,'Epin.Manage_Epin') }}
                                    @endif
                                </p>
                            </div>
                            <span class="pointer"></span>
                        </div>
                    </div>
                    @if(getScope() != 'user')
                        <div class="navRow">
                            <div class="eachNavWrap" data-unit="form">
                                <div class="innerWrap eachEpinNav">
                                <span class="eachNavIco">
                                    <i class="fa fa-edit"></i>
                                </span>
                                    <p>{{ _mt($moduleId,'Epin.Create_Epin') }}</p>
                                </div>
                                <span class="pointer"></span>
                            </div>
                        </div>

                        <div class="navRow">
                            <div class="eachNavWrap" data-unit="purchaseDetails">
                                <div class="innerWrap eachEpinNav">
                                <span class="eachNavIco">
                                    <i class="fa fa-list"></i>
                                </span>
                                    <p>{{ _mt($moduleId,'Epin.Epin_Purchase_Details') }}</p>
                                </div>
                                <span class="pointer"></span>
                            </div>
                        </div>
                    @else
                       {{-- <div class="navRow">
                            <div class="eachNavWrap" data-unit="purchase">
                                <div class="innerWrap eachEpinNav">
                                <span class="eachNavIco">
                                    <i class="fa fa-cart-plus"></i>
                                </span>
                                    <p>{{ _mt($moduleId,'Epin.Purchase_Epin') }}</p>
                                </div>
                                <span class="pointer"></span>
                            </div>
                        </div>--}}
                    @endif
                    <div class="navRow">
                        <div class="eachNavWrap" data-unit="transactionDetails">
                            <div class="innerWrap eachEpinNav">
                                <span class="eachNavIco">
                                    <i class="fa fa-exchange"></i>
                                </span>
                                <p>{{ _mt($moduleId,'Epin.transactions') }}</p>
                            </div>
                            <span class="pointer"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-10 epinRight">
                <div class="epinResponseWrap">
                    <div class="epinLeaf" id="requests">
                        <div class="leafInner">
                            <div class="leafHead">
                                <h2>{{ _mt($moduleId,'Epin.epin_requests') }}</h2>
                            </div>
                            <div class="leafBody"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        //Document ready functions
        $(function () {
            refreshEpinLeaf($('.eachNavWrap[data-unit="manage"]'));
        });

        //Ajax info retrieval
        function refreshEpinLeaf(nav, options, route) {
            nav.addClass('active');
            $('.leafHead h2').text(nav.text());
            $('.eachNavWrap').not(nav).removeClass('active');
            simulateLoading($('.leafBody'));
            var option = $.extend({}, options, {unit: nav.attr('data-unit')},{
                _token: $('meta[name="csrf-token"]').attr('content'),});
            var url = '{{ strtolower(getScope()) }}';
            var route = route ? route : '{{ route(strtolower(getScope()).".epin.unit") }}';
            $.post(route, option, function (response) {
                $('.leafBody').html(response);
            }).fail(function (response) {
                simulateLoading('.leafBody', true);
                toastr.error('validation errors');
            });
        }

        //Show deduction rate

        $('body').on('click', 'span.modifyDeduction', function () {
            $(this).slideUp().next('.epinDeduction').slideDown();
        });

        //Hide/Confirm deduction rate

        $('body').on('click', '.confirmDeduction', function () {
            $(this).closest('.epinDeduction').slideUp().prev('.modifyDeduction').slideDown();
        });

        //Navigation

        $('body').on('click', '.eachNavWrap', function () {
            refreshEpinLeaf($(this));
        });

        //Fire Epin action
        function fireEpinAction(options, successCallback, failCallback) {
            var endPoint = '{{ route(strtolower(getScope()).".epin.action") }}';

            return $.post(endPoint, options, function (response) {
                Ladda.stopAll();
                if (successCallback) successCallback(response);
                //reloadEpinResponse();
            }).fail(function (response) {
                Ladda.stopAll();
                if (failCallback) failCallback(response);
            });
        }

        //Epin-action
        $('body').on('click', 'button.epinAction, .epinActions button', function () {
            var options = {action: $(this).attr('data-action'), id: $(this).attr('data-id')}, form;
            switch ($(this).attr('data-action')) {
                case 'approve':
                    if ((form = $(this).closest('form')) && form.length) {
                        //console.log(form.serializeArray());
                        form.serializeArray().forEach(function (value, key) {
                            options[value.name] = value.value;
                        });
                    }
                    fireEpinAction(options);
                    break;
                default:
                    fireEpinAction({id: $(this).attr('data-id')});
                    break;
            }
        });

        //Show epin meta info
        $('body')
            .off('click', '.epinButtons .metaInfo')
            .on('click', '.epinButtons .metaInfo', function () {
                $(this).closest('.epinInner').find('.epinMeta').slideToggle();
            });

        //Ajax user fetch function
        function setupAjaxFill(element) {
            var selectedCallback = function (target, id, name) {
                target.val(name).siblings('input.userId').val(id);
            };
            var clearCallback = function (target) {
                target.siblings('input.userId').val('');
            };
            var options = {
                route: '{{ route("user.api") }}',
                action: 'getUsers',
                name: 'username',
                dropDownTopOffset: 5,
                selectedCallback: selectedCallback,
                clearCallback: clearCallback,
            };
            element.ajaxFetch(options);
        }

        //Ajax reload E-pin partial including filters
        function reloadEpinResponse(route) {
            var options = {
                viewType: $('.switchView span.active').attr('data-type'),
            };
            var formAttrs = $('form.filters').serializeArray();
            formAttrs.forEach(function (value, key) {
                options[value.name] = value.value;
            });
            var unit = $('.eachNavWrap.active').attr('data-unit');

            refreshEpinLeaf($('.eachNavWrap[data-unit="' + unit + '"]'), options, route);
        }

        //Filter
        $('body').on('click', '.filterMe', function () {
            reloadEpinResponse();
        });

        //Pagination
        $('body').on('click', '.epinLeaf .pagination li a', function (e) {
            e.preventDefault();
            var route = $(this).attr('href');
            reloadEpinResponse(route);
        });

        //Switch view
        $('body').on('click', '.switchView span', function () {
            var options = {};
            switch ($(this).attr('data-type')) {
                case 'grid':
                    options.viewType = 'grid';
                    break;
                case 'list':
                    options.viewType = 'list';
                    break;
            }
            var formAttrs = $('form.filters').serializeArray();
            formAttrs.forEach(function (value, key) {
                options[value.name] = value.value;
            });
            var unit = $('.eachNavWrap.active').attr('data-unit');
            refreshEpinLeaf($('.eachNavWrap[data-unit="' + unit + '"]'), options);
        });

        //Reset
        $('body').on('click', '.resetMe', function () {
            refreshEpinLeaf($('.eachNavWrap[data-unit="manage"]'));
        });

        //Reset
        $('body').on('click', '.resetPurchase', function () {
            refreshEpinLeaf($('.eachNavWrap[data-unit="purchaseDetails"]'));
        });
    </script>
@endsection