@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    @foreach($styles as $style)
        <link href="{{ $style }}" rel="stylesheet" type="text/css"/>
    @endforeach
    <div class="payoutWrapper">
        <div class="innerColumn row" style="margin: 0px;">
            <div class="firstSection col-md-3">
                <div class="payoutNav row">
                    <div data-unit="payoutReleaseHistory"
                         class="singleNav">
                        <h3>
                            <i class="fa fa-file-pdf-o"></i>{{ _mt($moduleId,'ManualPayout.payout_history') }}
                        </h3>
                        <div class="payoutAmount">
                            <div class="processed">
                                <i class="icon-energy"></i>
                                <span>
                                <p>{{ _mt($moduleId,'ManualPayout.Processed') }}</p>{{currency($totalProcessedPayout)}}
                            </span>
                            </div>
                            <div class="pending">
                                <i class="icon-envelope"></i>
                                <span>
                                <p>{{ _mt($moduleId,'ManualPayout.Pending') }}</p>{{currency($totalProcessingPayout)}}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div data-unit="manualPayout"
                         class="singleNav">
                        <h3>
                            <i class="fa fa-exchange"></i>{{ _mt($moduleId,'ManualPayout.release_Payout') }}
                        </h3>
                    </div>
                </div>
            </div>
            <div class="secondSection col-md-9">
                <div class="payoutPanel row">
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript">
        //Document ready scripts
        $(function () {
            $('.payoutNav .singleNav').first().trigger('click');

            //Select2
            $('.select2').select2({
                width: '100%'
            });
            //Load unit
            loadUnit($('.singleNav.active').attr('data-unit'));
        });

        //nav functionality
        $('.singleNav').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            loadUnit($(this).attr('data-unit'))
        });

        //Ajax info retrieval
        function loadUnit(unit, elem, route, args, postParams) {
            var options = {unit: unit, args: args};
            elem = elem ? jQuerize(elem) : $('.payoutPanel');
            simulateLoading(elem);
            route = route ? route : '{{ route(strtolower(getScope()).".manualPayout.unit") }}';
            if (postParams) $.extend(options, postParams);

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


    </script>
@endsection