@extends('theme.layouts.freelancer')
@section('content')
<main id="site-main" ng-app="freelancerExpenses" ng-controller="expensesController" ng-cloak>
    @include('theme.layouts.partials.loading')
    <div class="wrap">
        <div class="content-container expenses">
            <section class="data-table">
                <header class="data-table__header">
                    <h2 class="page-heading">
                        <svg width="40" height="40" viewBox="0 0 40 40">
                            <g fill-rule="evenodd">
                                <path d="M25.245 13.141c-8.487 0-12.926-2.08-12.926-3.194V7.36c2.556 1.631 7.763 2.474 12.926 2.474S35.615 8.99 38.17 7.36v2.587c0 1.115-4.44 3.194-12.926 3.194zm0 4.831c-.491 0-.974-.01-1.452-.024a13.514 13.514 0 0 0-4.805-3.624c1.965.287 4.114.433 6.257.433 5.163 0 10.37-.843 12.926-2.474v2.495c0 1.115-4.44 3.194-12.926 3.194zm1.141 4.817a13.204 13.204 0 0 0-1.412-3.204l.27.003c5.164 0 10.37-.843 12.927-2.474v2.495c0 1.064-4.044 3.003-11.785 3.18zm.474 4.815c.032-.374.052-.752.052-1.135 0-.706-.057-1.399-.164-2.075 4.647-.147 9.115-.977 11.423-2.45v2.496c0 1.014-3.881 2.913-11.311 3.164zM13.456 38.181c-6.524 0-11.832-5.254-11.832-11.712 0-6.459 5.308-11.712 11.832-11.712 6.524 0 11.832 5.253 11.832 11.712 0 6.458-5.308 11.712-11.832 11.712zm-1.137-25.898c.506.323 1.117.615 1.81.875a13.622 13.622 0 0 0-.673-.017c-.383 0-.762.02-1.137.051v-.91zM25.245 1.832c8.487 0 12.926 2.078 12.926 3.193 0 1.115-4.44 3.193-12.926 3.193-8.487 0-12.926-2.078-12.926-3.193 0-1.115 4.44-3.193 12.926-3.193zm14.55 3.193c0-3.157-7.32-4.809-14.55-4.809-7.231 0-14.55 1.652-14.55 4.809 0 .143.02.281.049.417h-.05v7.983C4.595 14.69 0 20.057 0 26.469c0 7.348 6.037 13.328 13.456 13.328 6.465 0 11.877-4.54 13.164-10.569 6.49-.187 13.176-1.727 13.176-4.788V5.442h-.05c.03-.136.05-.274.05-.417z"/>
                                <path d="M14.124 25.504c-1.815-.747-2.587-1.287-2.587-2.367 0-.83.604-1.784 2.211-1.784 1.336 0 2.192.456 2.63.705l.522-1.37c-.606-.353-1.461-.685-2.713-.726v-2.014h-1.294v2.097c-1.92.312-3.152 1.619-3.152 3.342 0 1.805 1.315 2.76 3.444 3.59 1.545.623 2.359 1.329 2.359 2.47 0 1.183-1.003 2.034-2.484 2.034a5.58 5.58 0 0 1-3.005-.892l-.5 1.391c.729.518 1.982.892 3.192.913v2.097h1.315v-2.16c2.15-.352 3.296-1.888 3.296-3.528 0-1.847-1.085-2.926-3.234-3.798"/>
                            </g>
                        </svg>
                        {{ trans('expenses.expenses') }}
                    </h2><!-- data-table__heading -->
                    <div class="payment-info payment-info--expenses">
                        
                        <div class="payment-item">
                            <span class="label">{{ trans('expenses.total_expenses') }}</span>
                            @{{ total_expenses ? total_expenses : 0  | currency : currencySymbol }}
                        </div>
                    </div><!-- end payment-info -->
                </header><!-- end billing-header -->
                <div class="data-table__wrap">
                    <header class="data-table__controls">
                        <select class="select-link" id="tab-links-select">
                            <option value="0" >
                                {{ trans('expenses.project_expenses') }}
                            </option>
                            <option value="1" >
                                {{ trans('expenses.other_expenses') }}
                            </option>
                        </select>
                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            <li class="nav-item" ng-click="changeTab('expense')">
                                <a class="nav-link active" id="pills-projectExpenses-pill" data-toggle="pill" href="#pills-projectExpenses" role="tab" aria-controls="pills-projectExpenses" aria-selected="true">{{ trans('expenses.project_expenses') }} </a>
                            </li>
                            <li class="nav-item" ng-click="changeTab('other')">
                                <a class="nav-link" id="pills-otherExpenses-pill" data-toggle="pill" href="#pills-otherExpenses" role="tab" aria-controls="pills-otherExpenses" aria-selected="false">{{ trans('expenses.other_expenses') }} </a>
                            </li>
                        </ul>
                        <div class="data-table__btn-wrap">
                            <a href="javascript:;" class="xl-download" ng-click="downloadExcel()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25">
                                    <g fill="#0CC5D1" fill-rule="evenodd">
                                        <path d="M24.375 19.458h-9.75v-1.621h2.438a.812.812 0 1 0 0-1.622h-2.438v-1.621h2.438a.812.812 0 1 0 0-1.622h-2.438v-1.621h2.438a.812.812 0 1 0 0-1.622h-2.438V8.108h2.438a.812.812 0 1 0 0-1.622h-2.438V4.864h9.75v14.594zM13 22.534L1.625 20.407V3.916L13 1.789v20.745zM25.188 3.243H14.624V.811a.808.808 0 0 0-.962-.796l-13 2.432A.809.809 0 0 0 0 3.243V21.08c0 .389.278.724.663.796l13 2.432a.813.813 0 0 0 .962-.796V21.08h10.563a.812.812 0 0 0 .812-.811V4.054a.812.812 0 0 0-.813-.811z"></path>
                                        <path d="M20.129 8.387h1.677a.839.839 0 0 0 0-1.677H20.13a.839.839 0 0 0 0 1.677M20.129 11.892h1.677a.839.839 0 0 0 0-1.678H20.13a.839.839 0 0 0 0 1.678M20.129 14.677h1.677a.839.839 0 0 0 0-1.677H20.13a.839.839 0 0 0 0 1.677M20.129 17.463h1.677a.839.839 0 0 0 0-1.677H20.13a.839.839 0 0 0 0 1.677M7.953 12.351l2.681-3.447a.838.838 0 1 0-1.323-1.032l-2.483 3.193-2.092-2.391a.838.838 0 1 0-1.263 1.104l2.306 2.636-2.338 3.007a.84.84 0 0 0 .663 1.353c.248 0 .496-.11.66-.322l2.14-2.752 2.439 2.787a.836.836 0 0 0 1.184.08.837.837 0 0 0 .079-1.183L7.953 12.35z"></path>
                                    </g>
                                </svg>
                                <span>download .xls</span>
                            </a>
                            <div class="expenses-type">
                                <select class="expense-type" ng-model="expenseType" name="expense-type" ng-change="filterExpense()">
                                    <option value="">{{ trans('expenses.select') }}</option>
                                    <option value="monthly" selected="">{{ trans('expenses.monthly') }}</option>
                                    <option value="quarterly">{{ trans('expenses.quarterly') }}</option>
                                    <option value="yearly">{{ trans('expenses.yearly') }}</option>
                                </select>
                            </div>
                            <!-- <ul class="expenses-type">
                                <li><a href="javascript:;" ng-class="{'active' : expenseType == 'monthly'}" ng-click="filterExpense('monthly')">{{ trans('expenses.monthly') }}</a></li>
                                <li><a href="javascript:;" ng-class="{'active' : expenseType == 'quarterly'}" ng-click="filterExpense('quarterly')">{{ trans('expenses.quarterly') }}</a></li>
                                <li><a href="javascript:;" ng-class="{'active' : expenseType == 'yearly'}" ng-click="filterExpense('yearly')">{{ trans('expenses.yearly') }}</a></li>
                            </ul> -->
                            
                            <!-- <a href="javascript:;" id="createNewExpense" data-text="X" class="tu-btn-circular pink addNewItem save-item active" ng-if="exp_tab" ng-click="addExpense(expensed)">
                                <svg width="14" height="14" viewBox="0 0 14 14">
                                    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="square" stroke-width="2">
                                        <path d="M1 7h12M7 1v12"/>
                                    </g>
                                </svg>
                            </a>

                            <a href="javascript:;" id="createNewExpense" data-text="X" class="tu-btn-circular pink addNewItem save-item active" ng-if="other_tab" ng-click="addOtherExpense(otherexpensed)">
                                <svg width="14" height="14" viewBox="0 0 14 14">
                                    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="square" stroke-width="2">
                                        <path d="M1 7h12M7 1v12"/>
                                    </g>
                                </svg>
                            </a> -->
                        </div>
                    </header><!-- end header -->
                    <div class="tab-content data-table__tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-projectExpenses" role="tabpanel" aria-labelledby="pills-projectExpenses-tab">
                            @include('theme.freelancer.expenses.billing-expenses')
                        </div>
                        <div class="tab-pane fade" id="pills-otherExpenses" role="tabpanel" aria-labelledby="pills-otherExpenses-tab">
                            @include('theme.freelancer.expenses.billing-other-expenses')
                        </div>
                    </div>
                </div><!-- end data-table__wrap -->
            </section><!-- end data-table -->
        </div>
        <!-- end content-container -->
    </div>
</main>
@endsection

@section('scripts')
    <script>
        window.baseUrl = "{{ URL::to('/') }}";
        window.currency = "@php echo $freelancer->user->currency @endphp";
        window.freelancer = {
            id: {{ $freelancer->id }}
        };
    </script>
    <script src="/theme/js/lib/moment.js"></script>
    <script src="/theme/js/freelancer/js/finance/expenses.js"></script>
@endsection