@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/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection


@php
    $sroom = "";
    $is_first_room = false;
    $selected_child = $selected_room = "";
    $is_child_exist = false;
    if(app('request')->input('child')){
        $is_child_exist = true;
        $selected_child = app('request')->input('child');
    }
    if(app('request')->input('room')){
        $selected_room = app('request')->input('room');
    }
@endphp

@section('breadcrumb')
<div class="row bg-light-blue mx-n5">
    <div class="col-md-12">
        <p class="mb-0 p-3 text-center"><a href="{{route('billing')}}" class="text-white font-size-16">Go to billing setup! Set your hourly/daily/session rates <i class="fa fa-angle-right"></i></a></p>
    </div>
</div>
<div class="row page-title align-items-center">
    <div class="col-auto">
        <h4 class="mb-3 mb-sm-0 mt-0 font-weight-medium">Children</h4>
    </div>
    <div class="col-auto ml-auto">
        <div class="form-inline float-md-right">
            <div class="">
                <a href="javascript:;" class="mb-md-0 mb-2 text-pink text-underline font-weight-semibold btn-view-billing-history" style="display: none">View billing history</a>
                <a href="javascript:;" class="mb-md-0 mb-2 text-danger text-underline font-weight-semibold btn-stop-recurring-billing" style="display: none">Stop recurring billing</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                @if(isset($rooms) && !empty($rooms))
                <div class="row px-3">
                    <ul class="nav nav-pills navtab-bg">
                        @php $count=1; @endphp
                        @foreach($rooms->rooms as $room)
                            @php if($selected_room != "" && $count == 1 && $selected_room == $room->_id){$is_first_room = true;} @endphp
                            <li class="nav-item">
                                <a href="{{ '#tab' . $count }}" data-toggle="tab" aria-expanded="true" class="nav-link {{ ($selected_room != "" && $selected_room == $room->_id) || ($selected_room == "" && $count == 1) ? 'active' : '' }}" data-room="{{ $room->_id }}" data-url="{{ route('billing.children', ['room' => $room->_id]) }}">
                                    <span class="d-sm-block">{{$room->name}}</span>
                                </a>
                            </li>
                            @php $count++; @endphp
                        @endforeach
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane show active" id="tab1">
                        <div class="child-loader" style="display:none;">Loading...</div>
                        <div class="children-found">
                            <h5 class="font-size-18 mb-4 pending-setup-billing" style="display: none">Would you like to set up a recurring invoice for <span class="child-name">John Wilson</span>, children in the <span class="room-name"></span> or send a one time invoice?</h5>
                            <h5 class="font-size-18 mb-4 already-setup-billing" style="display: none">Billing details of <span class="child-name">John Wilson</span></h5>
                            <div class="row">
                                <div class="col-lg-6 col-xl-3 mb-3 mb-lg-0">
                                    <select class="form-control wide select2-custom" name="child" id="children" data-placeholder="Select child">
                                        @if(isset($rooms->defaultRoomChildren) && !empty($rooms->defaultRoomChildren))
                                        @foreach($rooms->defaultRoomChildren as $child)
                                            <option value="{{$child->_id}}" {{$selected_child == $child->_id ? "selected" : ""}} data-image="{{$child->profileImage}}">{{$child->name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-auto ml-md-auto">
                                    <a href="javascript:;" data-href="{{route('billing.children.edit.recurring', ['child' => "_child"])}}" class="btn btn-pink btn-min-width mb-md-0 mb-2 mr-2 btn-manage-recurring-billing already-setup-billing" style="display: none">Manage recurring billing</a>
                                    <a href="javascript:;" data-href="{{route('billing.children.setup.recurring', ['room' => "_room", 'child' => "_child"])}}" class="btn btn-pink btn-min-width mb-md-0 mb-2 mr-2 btn-setup-recurring-billing pending-setup-billing" style="display: none">Set up recurring billing</a>
                                    <a href="javascript:;" data-href="{{route('billing.invoice.send.manual', ['room' => "_room", 'child' => "_child"])}}" class="btn btn-success btn-min-width mb-md-0 mb-2 btn-send-manual-invoice" style="display: none">Send manual invoice</a>
                                </div>
                            </div>
                            <div class="row border-bottom my-5 mx-n5 available-balance-section" style="display: none;"></div>
                            <div class="row align-items-center available-balance-section" style="display: none;">
                                <div class="col-md mb-3 mb-lg-0 font-weight-semibold">
                                    Available credit: <span class="available-credit">0.00</span>
                                    <br />
                                    <a href="javascript:;" class="text-pink text-underline btn-view-balance-history">View credit balance history</a>
                                </div>
                                <div class="col-md-auto ml-md-auto">
                                    <a href="javascript:;" class="btn btn-success btn-update-credit-balance">Update credit balance</a>
                                </div>
                            </div>
                        </div>
                        <div class="children-not-found" style="display: none;">
                            Child not found in this room. Please add child in this room.
                        </div>
                        <div class="has-child-data" style="display: none">
                            <div class="row border-bottom my-5 mx-n5"></div>
                            <div class="row mb-3 align-items-center">
                                <div class="col">
                                    <h3 class="mb-3 mb-sm-0 font-size-16 font-size-18 font-weight-medium">Invoices</h3>
                                </div>
                                <div class="col-auto">
                                    <a href="{{ route('billing.transaction.report.view') }}" class="btn btn-pink btn-min-width mb-md-0 mb-2 mr-2">View Bulk Transactions</a>
                                    <span data-toggle="tooltip" data-html="true" title="Download and view bulk transaction or payouts with detailed information like payment date, amount and parental details. This feature is only available if TeachKloud Payments via Stripe is enabled. To learn more about TeachKloud Payments (enabling parents to pay invoices via the TeachKloud App), go to Billing Parents > Billing Set Up > Bank Details (bottom of page on the left hand side) > info icon. TeachKloud payments can be set up in under 5 minutes! All you need are your business and bank details to enable parents to pay you into your bank account."><i class="icon-info"></i></span>
                                    <a href="{{ route('billing.targets.pending.invoices') }}" class="btn btn-success btn-mark-multiple-invoice">Mark Multiple Invoices as Paid</a>
                                </div>
                            </div>
                            <div class="package-add-ons-data"></div>
                            <table id="datatable" class="table table-striped dt-responsive">
                                <thead>
                                    <tr>
                                        <th>Invoice number</th>
                                        <th>Generated on</th>
                                        <th>Billing type</th>
                                        <th>Due date</th>
                                        <th>Status</th>
                                        <th>Amount</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @else
                <div class="">
                    <p class="font-size-16">Please create a room before setup billing for children.</p>
                    <a href="{{ route('room.add') }}" class="btn btn-success btn-min-width">Add room</a>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@include('school.billing.stop-recurring-invoice-modal')

<div class="modal modal-extra-large fade" id="ViewInvoiceModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-2 pb-5">
                <div class="text-center mb-4">
                    <img src="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child medium">
                    <div class="font-size-18 mt-2 font-weight-medium child-name">George Bailey</div>
                </div>
                <div class="">
                    <div class="text-center pb-4 mb-2">
                        <div class="btn-group">
                            <button type="button" class="btn btn-success billing-tab-link" data-target="#current-billing">Current billing details</button>
                            <button type="button" class="btn btn-soft-dark billing-tab-link" data-target="#past-billing">Past billing details</button>
                        </div>
                    </div>
                    <div id="current-billing" class="billing-tab">
                    </div>
                    <div id="past-billing" class="billing-tab" style="display: none">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-medium fade" id="CancelInvoiceModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content text-center">
            <div class="modal-header">
                <img src="" class="img-child medium">
                <div class="font-size-18 mt-2 font-weight-medium child-name"></div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-4 pb-0">
                <div class="px-lg-5 mx-lg-4">
                    <h5 class="font-size-22 font-weight-bold mb-3">Cancel invoice</h5>
                    <p class="mb-3">Are you sure you want to cancel the invoice: <span class="invoice-number"></span> for <span class="child-name"></span>?</p>
                    <p class="mb-2"><b>Total amount: <span class="invoice-charge"></span></b></p>
                    <p class="mb-3 text-danger">Note: once the invoice has been cancelled it cannot be resent. </p>
                </div>
            </div>
            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-danger btn-min-width mx-auto btn-cancel-yes">Yes, cancel this invoice</a>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-very-extra-large fade" id="FeeBreakdownModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header p-0 pb-4">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-4 pb-3">
            </div>
        </div>
    </div>
</div>

<div class="modal modal-medium fade" id="ViewSessionRateModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div class="media">
                    <img src="" class="img-child">
                    <div class="media-body media-right">
                        <h3 class="font-size-22 font-weight-semibold">Sessions for <span class="child-name">John Willson</span></h3>
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-2 pb-0">
            </div>
            <div class="modal-footer">
                <p class="text-danger">Note: If a child attends schedules which doesn’t have a session rate then the hourly rate will be applied.</p>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-very-extra-large fade" id="CreditBalanceHistoryModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center">
            <div class="modal-header">
                <h4>Credit Balance History</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <img src="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child medium">
                    <div class="font-size-18 mt-2 font-weight-medium child-name">George Bailey</div>
                </div>
                <table id="credit-balance-history" class="table table-striped dt-responsive">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Invoice Number</th>
                            <th>Amount</th>
                            <th>Description</th>
                            <th>Updated by</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal modal-medium fade" id="UpdateCreditBalanceModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('billing.update.credit.balance') }}" method="POST" class="credit-balance-form">
        <input type="hidden" name="child" class="child">
        <input type="hidden" class="availableCredits" name="availableCredits" value="">
        <input type="hidden" class="finalCredit" name="finalCredit" value="">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-center">
                <div class="modal-header">
                    <div class="font-size-18 mt-2 font-weight-medium">Update Credit Balance:</div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-4 pb-0">
                    <p>Available Credits: <span class="currency"></span><span class="availableCredits">20</span></p>
                    <p class="note">Note: Credit balances are applied automatically to new invoices upon generation. To ensure the credit balance applies to upcoming invoices, please update it, before the invoice generation date. To increase or add credit, add a positive number like 10, to decrease, add a negative number, for example, -10.</p>
                    <div class="input-charge form-group text-left mt-4">
                        <label class="font-weight-medium">Increase/Decrease Credit Balance by:</label>
                        <div class="mb-6 mb-md-0">
                            <input type="number" class="form-control creditBalance" name="creditBalance" value="" oninput="updateFinalCredit()">
                        </div>
                    </div>
                    <p>Resulting Credit Balance: <span class="currency"></span><span class="finalCredit">20</span></p>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" class="btn btn-success btn-min-width mx-auto btn-save-credit-balance">Update</a>
                </div>
            </div>
        </div>
    </form>
</div>

<form id="download-form" action="{{ route('billing.invoice.report.download') }}" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="id" class="id" value="">
    <input type="hidden" name="utcOffset" class="utcOffset" value="">
</form>
@endsection

@section('script-bottom')
<script type="text/javascript">
    var changeRoomUrl = "{{ route('billing.room.children') }}";
    var childID = "{{ $selected_child ?? "" }}";
    var getBillingHistoryUrl = "{{ route('billing.children.history') }}";
    var getChildPendingInfoUrl = "{{ route('billing.children.pending.bill.info') }}";
    var getChildBillingUrl = "{{ route('billing.children.info') }}";
    var cancelUrl = "{{ route('billing.invoice.cancel') }}";
    var invoiceUrl = "{{ route('billing.invoice', ['id' => '_id', 'child' => '_child']) }}";
    var creditBalanceHistoryUrl = "{{ route('billing.credit.balance.history') }}";
    var overlappingScheduleUrl = "{{ route('billing.overlapping.schedules', ['room' => '_room', 'child' => '_child']) }}";
    var billingCycle =