@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<style>
    .overview-cards {
        border: 1px solid !important;
        border-color: #d4d4d4 !important;
    }
    .swal-text {
        white-space: pre-line;
    }
    #nav-how-to-work-tab.active {
        color: #fff;
        background-color: #0fa05b;
    }
</style>
@endsection

@php
$maincurrentTab = 2;
$currentTab = 1;
if(app('request')->input('t')){
    $currentTab = app('request')->input('t');
}
if(app('request')->input('m')){
    $maincurrentTab = app('request')->input('m');
}
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">Billing</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row px-3">
                    <ul class="nav nav-pills navtab-bg" id="nav-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link {{ $maincurrentTab == 2 ? 'active' : '' }}" data-url="{{ route('billing.trial', ['t' => 1, 'm' => 2]) }}" id="nav-overview-tab" data-toggle="tab" href="#nav-overview" role="tab" aria-controls="nav-overview" aria-selected="{{ $maincurrentTab == 2 ? true : false }}">Purchase or Manage Subscription</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ $maincurrentTab == 1 ? 'active' : '' }}" data-url="{{ route('billing.trial', ['t' => 1, 'm' => 1]) }}" id="nav-how-to-work-tab" data-toggle="tab" href="#nav-how-to-work" role="tab" aria-controls="nav-how-to-work" aria-selected="{{ $maincurrentTab == 1 ? true : false }}">How Subscriptions work</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ $maincurrentTab == 3 ? 'active' : '' }}" data-url="{{ route('billing.trial', ['t' => 1, 'm' => 1]) }}" id="nav-invoices-tab" data-toggle="tab" href="#nav-invoices" role="tab" aria-controls="nav-invoices" aria-selected="{{ $maincurrentTab == 3 ? true : false }}">Invoices</a>
                        </li>
                    </ul>
                    @if (isset($isSubscription) && $isSubscription && $subscriptionStatus == 'active')
                        @if(!$isScheduledCancel)
                            <a class="ml-auto my-md-auto mt-md-0 mt-3 text-danger cancel-subscription" href="#"><b>Pause or Cancel subscription</b></a>
                        @else
                            <a class="ml-auto my-md-auto mt-md-0 mt-3 text-success resubscribe" data-toggle="modal" data-target="#resubscribeModal" href="#"><b>Resubscribe for yearly/monthly payment</b></a>
                        @endif
                    @endif
                </div>
                <div class="tab-content">
                    <div class="tab-pane {{ $maincurrentTab == 2 ? 'show active' : '' }}" id="nav-overview">
                        <div class="row">
                            <div class="col-12 mb-4 {{($cardIsSet) ? 'col-md-6' : ''}}">
                                <div class="card overview-cards h-100 mb-0">
                                    <div class="card-body pb-4">
                                        @if(isset($subscriptionStatus) && in_array($subscriptionStatus, ['canceled', 'unpaid']))
                                            <h5 class="font-size-18">Plan: No Plan <span class="text-danger">({{$subscriptionStatus}})</span></h5>
                                        @elseif(isset($subscriptionStatus))
                                            <h5 class="font-size-18">Plan: {{$plan}} {{(isset($childrenNum)) ? 'for '.$childrenNum.' children' :'' }} {{(isset($expiresIn)) ? '('.$expiresIn.' left)' : ''}}</h5>
                                        @elseif(isset($isTrial) && $isTrial)
                                            <h5 class="font-size-18">Plan: Trial {{(isset($expiresIn)) ? '('.$expiresIn.' left)' : ''}}</h5>
                                        @endif
                                        @if(isset($currentPeriod) && $currentPeriod)
                                            <p class="font-size-16">{{(isset($isSubscription) && $isSubscription && !in_array($subscriptionStatus, ['canceled', 'unpaid'])) ? 'Current period:' : 'Last period:'}} {{$currentPeriod}}</p>
                                        @endif
                                        <!-- <p class="font-size-16">Children added: 10</p> -->
                                        @if(isset($isTrial) && $isTrial)
                                            @if(isset($expiresIn))
                                            <p class="font-size-16 text-danger">Expires in {{$expiresIn}}</p>
                                            @elseif(isset($expiredAt))
                                            <p class="font-size-16 text-danger">Expired at {{$expiredAt}}</p>
                                            @endif
                                        @elseif(isset($childrenNum))
                                            <p class="font-size-16">Children added: {{$childrenNum}} @if($currentChildrenNum < $childrenNum) <span class="text-success">({{($childrenNum-$currentChildrenNum)}} remaining)</span> @endif</p>
                                        @endif
                                    </div>
                                    @if((isset($isTrial) && $isTrial) || (isset($isSubscription) && $isSubscription && (!$isScheduledCancel || in_array($subscriptionStatus, ['canceled', 'unpaid']))))
                                    <div class="card-footer">
                                        @if(isset($isTrial) && $isTrial || (isset($isSubscription) && in_array($subscriptionStatus, ['canceled', 'unpaid'])))
                                        <a href="{{route('billing.purchase-plan')}}" class=" btn btn-success btn-min-width btn-add-child">Purchase plan</a>
                                        @elseif(isset($isSubscription) && $isSubscription && !$isScheduledCancel && !in_array($subscriptionStatus, ['canceled', 'unpaid']))
                                            <a href="{{route('billing.add-children')}}" class=" btn btn-success btn-min-width btn-add-child">Add child</a>
                                            @if (isset($interval))
                                                @if ($interval == 'yearly' && (!isset($isPendingDowngrade) || !$isPendingDowngrade))
                                                    <a href="#" class=" ml-2 btn btn-pink btn-min-width downgrade before-cancel" data-toggle="modal" data-target="#downgradeModal">Downgrade to monthly</a>
                                                @endif
                                                @if ($interval == 'monthly')
                                                    <a href="{{route('billing.upgrade-plan')}}" class=" ml-2 btn btn-pink btn-min-width before-cancel">Upgrade to yearly</a>
                                                @endif
                                            @endif
                                        @endif
                                    </div>
                                    @endif
                                    <!-- </div> -->
                                </div>
                            </div>
                            @if ($cardIsSet && (isset($isSubscription) && $isSubscription && !in_array($subscriptionStatus, ['canceled', 'unpaid'])))
                            <div class="col-12 mb-4 col-md-6">
                                <div class="card overview-cards h-100 mb-0">
                                    <div class="card-body pb-4">
                                        <h5 class="font-size-18">Payment details</h5>
                                        @if(isset($nextPayment))
                                            <p class="font-size-16">Next payment: {{$nextPayment}} {{(isset($childrenNum)) ? 'for '.$childrenNum.' children' :''}}</p>
                                        @endif
                                        @if(isset($cardLast4))
                                            <p class="font-size-16">Card information: XXXX XXXX XXXX {{$cardLast4}}</p>
                                        @endif
                                    </div>
                                    <div class="card-footer">
                                        <form action="{{ route('billing.create-card-update-session') }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-success btn-min-width">Update card</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if (isset($isPendingDowngrade) && $isPendingDowngrade)
                            <div class="col-12 mb-4 col-md-6">
                                <div class="card overview-cards h-100 mb-0">
                                    <div class="card-body pb-4">
                                        <h5 class="font-size-18">Scheduled plan update</h5>
                                        @if (isset($downgradePlan))
                                        <p class="font-size-16">Plan: {{$downgradePlan}}</p>
                                        @endif
                                        @if (isset($downgradeDate))
                                        <p class="font-size-16">Date: {{$downgradeDate}}</p>
                                        @endif
                                        @if (isset($downgradePrice))
                                        <p class="font-size-16">Price: {{$downgradePrice}}</p>
                                        @endif
                                    </div>
                                    <div class="card-footer">
                                        <a href="#" id="cancelDowngrade" class=" btn btn-pink btn-min-width">Cancel</a>
                                    </div>
                                    <!-- </div> -->
                                </div>
                            </div>
                            @endif
                        </div>

                        <div>
                            <div class="row px-3 mt-3 align-items-center">
                                <ul class="nav nav-pills navtab-bg" id="nav-tab-subscription" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link {{ $currentTab == 1 ? 'active' : '' }}" data-url="{{ route('billing.trial', ['t' => 1, 'm' => 2]) }}" id="nav-parent-pay-tab" data-toggle="tab" href="#nav-parent-pay" role="tab" aria-controls="nav-parent-pay" aria-selected="{{ $currentTab == 1 ? true : false }}">Parent Pays <span class="parent-pay-child-count"></span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link {{ $currentTab == 2 ? 'active' : '' }}" data-url="{{ route('billing.trial', ['t' => 2, 'm'=> 2]) }}" id="nav-childcare-service-tab" data-toggle="tab" href="#nav-childcare-service" role="tab" aria-controls="nav-childcare-service" aria-selected="{{ $currentTab == 2 ? true : false }}">Childcare Pays <span class="childcare-service-child-count"></span></a>
                                    </li>
                                </ul>
                                <div class="ml-md-auto mt-md-3 mt-md-0">
                                    <div class="nav-sub-button nav-childcare-service-tab" style="display: {{ $currentTab == 2 ? '' : 'none' }}"><a href="javascript:;" class="text-success font-weight-semibold text-underline btn-move-all-sub-to-parent" style="display: none;">Move multiple children TK Subscription to Parents</a></div>
                                    <div class="nav-sub-button nav-parent-pay-tab" style="display: {{ $currentTab == 1 ? '' : 'none' }}"><a href="javascript:;" class="text-success font-weight-semibold text-underline btn-send-all-payment-reminder" style="display: none;">Send Payment Reminders for Multiple Children</a></div>
                                </div>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane {{ $currentTab == 1 ? 'show active' : '' }}" id="nav-parent-pay">
                                    <div class="font-size-18 pb-3 d-none custom-table-title">List of Children</div>
                                    <table id="parent-payment-datatable" class="table table-striped dt-responsive">
                                        <thead>
                                            <tr>
                                                <th><input type="checkbox" class="select-all" id="masterCheckbox2"/></th>
                                                <th>Children Name</th>
                                                <th>Subscription renewal/end date</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="tab-pane {{ $currentTab == 2 ? 'show active' : '' }}" id="nav-childcare-service">
                                <p style="font-size: 10px" class="text-danger">Many TeachKloud customers are already saving up to 100% on their subscription! Would you like to get TeachKloud for free or save on the number of child profiles you pay for? You can move some or all your children to Parent Pays. <a href="https://intercom.help/teachkloud/en/articles/9921364-i-want-to-switch-over-to-parent-pays-how-do-i-do-it" target="_blank">Click here</a> to learn more. </p>
                                    <div class="font-size-18 pb-3 d-none custom-table-title">List of Children</div>
                                    <table id="childcare-service-datatable" class="table table-striped dt-responsive">
                                        <thead>
                                            <tr>
                                                <th><input type="checkbox" class="select-all" id="masterCheckbox1"/></th>
                                                <th>Children Name</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane {{ $maincurrentTab == 1 ? 'show active' : '' }}" id="nav-how-to-work">
                        <p>Please read this important information on how TeachKloud subscriptions work <a href="https://teachkloud.com/how-do-teachkloud-subscriptions-work/" target="_blank">here</a></p>
                    </div>
                    <div class="tab-pane {{ $maincurrentTab == 3 ? 'show active' : '' }}" id="nav-invoices">
                        <div class="font-size-18 pb-3 d-none custom-table-title">Invoices</div>
                        @if (isset($invoices) && count($invoices) > 0)
                        <table id="datatable" class="table table-striped dt-responsive">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <!-- <th>Description</th> -->
                                    <th>Price</th>
                                    <th>Status</th>
                                    <th>Invoices</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($invoices as $invoice)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($invoice->date)->format('d/m/Y')}}</td>
                                    <!-- <td>{{ $invoice->description }}</td> -->
                                    <td>{{ $invoice->total }}</td>
                                    <td>{{ $invoice->status }}</td>
                                    <td><a href="{{$invoice->invoice_url}}" target="_blank" class="text-succeess">Payment Details</a></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @else
                           Invoices not found
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if (isset($isSubscription) && $isSubscription && !in_array($subscriptionStatus, ['canceled', 'unpaid']))
<div class="modal modal-medium fade" id="resubscribeModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <form action="{{route('billing.resubscribe')}}" method="POST">
            @csrf
            <input type="hidden" name="schoolId" id="schoolId" value="{{$schoolId}}">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1">Resubscribe for {{$plan}} payment</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to resubscribe for {{$plan}} payment? <br> Current period {{$currentPeriod}}.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" type="submit">Yes</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif
@if (isset($interval) && $interval == 'yearly' && (!isset($isPendingDowngrade) || !$isPendingDowngrade) && !in_array($subscriptionStatus, ['canceled', 'unpaid']) )
<div class="modal modal-medium fade" id="downgradeModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <form action="{{route('billing.downgrade')}}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1">Downgrade to monthly plan</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>When your current billing period ends on the {{$nextPayment}}, your plan will be downgraded to a monthly subscription. <br> Are you sure you want to downgrade to monthly payment?</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" type="submit">Yes</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    var downgradeUrl="{{route('billing.downgrade')}}";
    var cancelDowngradeUrl="{{route('billing.cancel-downgrade')}}";
    var cancelSubscriptionUrl="{{route('billing.cancel-subscription')}}";
    var endSubscriptionDate="{{isset($endSubscriptionDate) ? $endSubscriptionDate : ''}}";
    var archiveChildUrl = "{{ route('children.archive') }}";
    var unarchiveChildUrl = "{{ route('children.unarchive') }}";
    var viewChildProfileUrl="{{route('children.edit', ['id' => 'childID', 't' => 2])}}";
    var getChildrenSubscriptionUrl="{{route('billing.get-children')}}";
    var subscriptionStatusChangeUrl="{{route('billing.subscription-status-change')}}";
    var moveChildrenBillingUrl="{{route('billing.move-children-billing')}}";
    var sendChildrenBillingReminderUrl="{{route('billing.send-billing-reminder')}}";
    var isSchoolSubscriptionActive="{{ isset($isSubscription) && isset($subscriptionStatus) && $isSubscription && $subscriptionStatus == 'active' ? 'true' : 'false' }}"
    var childrenNum=parseInt("{{isset($childrenNum) ? $childrenNum : 0}}");
</script>
<script defer src="{{ Helper::assets('assets/js/pages/school-billing.js') }}?v={{time()}}" type="text/javascript"></script>
@endsection