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

<main id="site-main" ng-app="freelancerSubscription" ng-controller="subscriptionController" ng-cloak>
    @include('theme.layouts.partials.loading')
    <div class="wrap">
        <div class="content-container billing">
            <section class="data-table">
                <header class="data-table__header">
                    <h2 class="page-heading">
                        <svg width="37" height="37" viewBox="0 0 37 37">
                            <path class="svg-stroke" stroke-linecap="round" d="M20.758 17.371h2.258M20.758 12.855h2.258M20.758 8.339h2.258M6.08 17.371h10.162M6.08 12.855h10.162M6.08 8.339h10.162"/>
                            <path class="svg-stroke" stroke-linecap="square" d="M31.484 1H4.952A3.952 3.952 0 0 0 1 4.952V36l3.387-2.258L7.774 36l3.387-2.258L14.548 36l3.387-2.258L21.323 36l3.387-2.258L28.097 36V4.952A3.963 3.963 0 0 1 32.048 1 3.963 3.963 0 0 1 36 4.952h-3.387"/>
                            <path class="svg-stroke" stroke-linecap="round" d="M6.08 26.403h10.162M20.194 28.097a2.005 2.005 0 0 0 1.693 1.129h1.13c.93 0 1.693-.762 1.693-1.694 0-.931-.762-1.693-1.694-1.693h-1.129a1.699 1.699 0 0 1-1.693-1.694c0-.931.762-1.693 1.693-1.693h1.13s1.128 0 1.693 1.129M22.452 21.323v1.129M22.452 29.226v1.129"/>
                        </svg>
                        {{ trans('billing_subscription.billing') }}
                    </h2><!-- data-table__heading -->
                </header><!-- end billing-header -->
                <div class="data-table__wrap">
                    <header class="data-table__controls">
                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-subscription-pill" data-toggle="pill" href="#pills-subscription" role="tab" aria-controls="pills-subscription" aria-selected="true">{{ trans('billing_subscription.subscription') }}</a>
                            </li>
                            <li class="nav-item active">
                                <a class="nav-link" id="pills-billing-history-pill" data-toggle="pill" href="#pills-billing-history" role="tab" aria-controls="pills-billing-history" aria-selected="false">{{ trans('billing_subscription.billing_history') }}</a>
                            </li>
                        </ul>
                        <div class="data-table__btn-wrap">
                            {{ trans('billing_subscription.invoice_date') }}
                            <div class="date-input-wrap">
                                <input type="text" data-large-default="true" class="date-input" data-theme="teamup"  />
                            </div>
                        </div>
                    </header><!-- end header -->
                    <div class="tab-content data-table__tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-subscription" role="tabpanel" aria-labelledby="pills-subscription-tab">
                            @include('theme.freelancer.billing_subscription.subscription')
                        </div>
                        <div class="tab-pane fade" id="pills-billing-history" role="tabpanel" aria-labelledby="pills-billing-history-tab">
                            @include('theme.freelancer.billing_subscription.history')
                        </div>
                    </div>
                    @include('theme.freelancer.billing_subscription.modal-add-card-info')
                </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.freelancer = {
            id: {{ $freelancer->id }}
        };
    </script>
    <script src="/theme/js/lib/moment.js"></script>
    <script src="/theme/js/freelancer/js/billing-subscription/billing-subscription.js"></script>
    
    <script src="/theme/js/lib/bluebird.min.js"></script>
    <script src="/theme/js/lib/tap.min.js"></script>
    <script src="/theme/js/functions/tap.js"></script>
@endsection