@extends('theme.layouts.freelancer')
@section('content')

<main id="site-main" ng-cloak ng-app="freelancerBilling" ng-controller="billingController">
    @include('theme.layouts.partials.loading')
    <div class="wrap">
        <div class="content-container">
            <section class="data-table invoice all-lists">
                <header class="data-table__header">
                    <h2 class="page-heading">
                        <svg width="40" height="40" viewBox="0 0 40 40">
                            <path d="M8.683 6.042h12.782a.797.797 0 0 0 .794-.799.797.797 0 0 0-.794-.799H8.683a.797.797 0 0 0-.794.8c0 .44.356.798.794.798M22.26 10.243a.797.797 0 0 0-.795-.799H8.683a.797.797 0 0 0-.794.8c0 .44.355.798.794.798h12.782a.797.797 0 0 0 .794-.799"/>
                            <path d="M28.571 37.997c-5.32 0-9.647-4.175-9.647-9.306 0-5.132 4.328-9.307 9.647-9.307 5.32 0 9.648 4.175 9.648 9.307 0 5.131-4.328 9.306-9.648 9.306zM3.123 32.221c-.35 0-.646-.272-.646-.595V13.633c0-.322.296-.595.646-.595h9.389c.35 0 .646.273.646.595v.4c0 1.21 1.002 2.194 2.234 2.194h12.462c.35 0 .646.272.646.594v.967c-6.162.037-11.164 4.913-11.164 10.903 0 1.235.215 2.422.607 3.53H3.123zM5.778 2.042H25.2V14.63h-9.808c-.35 0-.646-.273-.646-.595v-.4c0-1.21-1.002-2.194-2.234-2.194H5.778V2.042zm24.31 15.846v-1.067c0-1.209-1.002-2.192-2.234-2.192h-1.066V1.243a.797.797 0 0 0-.794-.799H4.984a.797.797 0 0 0-.795.8V11.44H3.123c-1.232 0-2.234.984-2.234 2.193v17.993c0 1.21 1.002 2.193 2.234 2.193H18.66c1.894 3.434 5.626 5.776 9.912 5.776 6.196 0 11.236-4.891 11.236-10.904 0-5.514-4.238-10.081-9.718-10.803z"/>
                            <path d="M28.94 27.963c-1.608-.643-2.293-1.109-2.293-2.041 0-.717.536-1.54 1.96-1.54 1.185 0 1.944.393 2.333.609l.463-1.182c-.538-.305-1.295-.59-2.406-.626v-1.739H27.85v1.81c-1.701.269-2.794 1.397-2.794 2.883 0 1.558 1.166 2.382 3.054 3.098 1.37.537 2.09 1.146 2.09 2.131 0 1.022-.887 1.755-2.202 1.755a5.052 5.052 0 0 1-2.664-.77l-.444 1.2c.647.448 1.758.77 2.83.788v1.81h1.167v-1.865c1.906-.302 2.923-1.629 2.923-3.043 0-1.594-.962-2.525-2.868-3.278"/>
                        </svg>
                        {{ trans('invoices.invoices') }}
                    </h2><!-- data-table__heading -->
                    <div class="payment-info">
                        <div class="payment-item">
                            @{{ totalCost | currency : currencySymbol }}
                            <small>{!! trans('invoices.all_invoices') !!}</small>  
                        </div>

                        <div class="payment-item">
                            @{{ totalPaid | currency : currencySymbol }}
                            <small>{!! trans('invoices.closed_invoices') !!}</small>  
                        </div>

                        <div class="payment-item">
                            @{{ totalCost - totalPaid | currency : currencySymbol }}
                            <small>{!! trans('invoices.pending_invoices') !!}</small>
                        </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('invoices.all_invoices') !!} (@{{ totalInvoice[0].total }})
                            </option>
                            <option value="1">
                                {{ trans('invoices.received_payments') }} (@{{ totalPayments[0].total }})
                            </option>
                            <option value="2">
                                {{ trans('invoices.drafts') }} (@{{ totalDrafts.total }})
                            </option>
                        </select>
                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-all-pill" data-toggle="tab" href="#pills-view" role="tab" aria-controls="pills-home" aria-selected="true">{!! trans('invoices.all_invoices') !!} (@{{ totalInvoice[0].total }})</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-received-pill" data-toggle="tab" href="#pills-received" role="tab" aria-controls="pills-profile" aria-selected="false">{{ trans('invoices.received_payments') }} (@{{ totalPayments[0].total }})</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-draft-pill" data-toggle="tab" href="#pills-draft" role="tab" aria-controls="pills-contact" aria-selected="false">{{ trans('invoices.drafts') }} (@{{ totalDrafts.total }})</a>
                            </li>
                        </ul>

                        <div class="data-table__btn-wrap new-inv-record" ng-show="draftDetails == ''">
                            <div class="data-table__mobileMenu"></div>
                            <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 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"/>
                                    </g>
                                </svg>
                                <span>download .xls</span>
                            </a>

                            <!-- <a href="javascript:;" id="update-payment" class="tu-btn-circular pink updatePayment" ng-click="updatePayment()">
                                <svg width="16" height="12" viewBox="0 0 16 12">
                                    <path stroke-width="2" d="M1 5.667l4.667 4.666L15 1"/>
                                </svg>
                            </a> -->
                            <div class="btn-row">
                                <form class="data-table__search" ng-submit="getInvoices(); getDrafts(); getReceivedPayments()">
                                    <input type="text" name="data-table__search--input" placeholder="{{ trans('invoices.type_search_here') }}" ng-model="searchTerm" ng-keyup="getInvoices(); getDrafts(); getReceivedPayments()"/>
                                    <a href="javascript:;" id="search-open" ng-click="getInvoices(); getDrafts(); getReceivedPayments()">
                                        <svg width="20" height="19" viewBox="0 0 20 19">
                                            <g class="svg-stroke" fill="none" fill-rule="evenodd" stroke-width="1.5" transform="translate(1 1)">
                                                <circle cx="7" cy="7" r="7"/>
                                                <path stroke-linecap="square" d="M13.5 12.5L18 17"/>
                                            </g>
                                        </svg>
                                    </a>
                                    <svg id="search-close" width="15" height="15" class="close-icon" version="1.1" x="0px" y="0px" viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
                                        <path class="svg-stroke" fill="none" stroke-width="2" stroke-linecap="square" d="M2.8,11.2l8.5-8.5 M2.8,2.8l8.5,8.5"/>
                                    </svg>
                                </form>

                                <a href="javascript:;" id="create-new-invoice-trigger" data-text="X" class="tu-btn-circular pink add-button" ng-click="toggleForm()">
                                    <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="record-payment-trigger" data-toggle="modal" data-target="#recordpayment" class="tu-btn-circular pink add-button" style="display:none;" ng-click="resetForm()">
                                    <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>
                            <!-- <a href="javascript:;" id="create-new-invoice-trigger" data-text="X" class="tu-btn-circular pink" ng-click="toggleForm()">
                                <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="create-new-invoice-trigger" data-text="X" class="tu-btn pink" ng-click="toggleForm()">
                                <span></span>
                            </a>
                            <a href="javascript:;" id="record-payment-trigger" data-toggle="modal" data-target="#recordpayment" class="tu-btn pink" style="display:none;" ng-click="resetForm();" >
                                <span>Record Payment</span>
                            </a> -->
                        </div>
                        <div class="data-table__btn-wrap" ng-show="draftDetails != ''">
                            <div class="data-table__mobileMenu"></div>
                            <div class="btn-row">
                                <a href="javascript:;" id="create-new-invoice-trigger" ng-click="closeDraft()" data-text="X" class="tu-btn-circular pink clicked">
                                    <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>
                        </div>
                        
                    </header><!-- end header -->
                    @include('theme.freelancer.billing.record-payment')
                    @include('theme.freelancer.billing.create-new-invoice')
                    <div class="tab-content data-table__tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-view" role="tabpanel" aria-labelledby="pills-view-tab">
                            @include('theme.freelancer.billing.all-invoices')
                        </div>
                        <div class="tab-pane fade" id="pills-received" role="tabpanel" aria-labelledby="pills-received-tab">
                            @include('theme.freelancer.billing.received-invoices')
                        </div>
                        <div class="tab-pane fade" id="pills-draft" role="tabpanel" aria-labelledby="pills-draft-tab">
                            @include('theme.freelancer.billing.billing-draft')
                        </div>
                    </div>
                    {{---@include('theme.freelancer.billing.billing-draft-detail')--}}
                    @include('theme.freelancer.billing.new-invoice-view')
                </div><!-- end data-table__wrap -->
            </section><!-- end data-table -->
        </div><!-- end content-container -->
    </div>
</main>

@endsection

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