@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />

@endsection

@php
    $is_child = "";
    $is_child_exist = false;
    if(app('request')->input('c')){
        $is_child = app('request')->input('c');
    }
    if(app('request')->input('child')){
        $is_child = app('request')->input('child');
    }

    $currency = config('constant.currency');
    $scurrency = "€";
    if(isset($init->schoolBillingSetup->payee->currency) && $init->schoolBillingSetup->payee->currency != "" && isset($currency[$init->schoolBillingSetup->payee->currency])) {
        $scurrency = $currency[$init->schoolBillingSetup->payee->currency]['symbol'];
    }
    $addOnsType = config('constant.addOnsType');
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-xl-8">
        <h4 class="mb-1 mt-0 font-weight-medium">Set up recurring billing</h4>
        <p class="mb-0">Recurring billing has three options. Children can be on a subscription package, hourly or daily rate. Select the type of billing package you’d like to apply and any relevant children. </p>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ route('billing.children.setup.recurring.save') }}" method="POST" class="billing-setup-recurring-form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="room" value="{{ isset($roomId) ? $roomId : '' }}">
            <div class="card">
                <div class="card-body">
                    <h5 class="text-success font-size-18 mb-3">What type of billing would you like to setup?</h3>
                    <div class="">
                        <div class="custom-control-inline">
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" id="customRadio1" name="subscriptionType" class="custom-control-input add-type" checked data-error="radio-error" value="1">
                                <label class="custom-control-label" for="customRadio1">Subscription package</label>
                            </div>
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" id="customRadio2" name="subscriptionType" class="custom-control-input add-type" data-error="radio-error" value="2">
                                <label class="custom-control-label" for="customRadio2">Attendance hours</label>
                            </div>
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" id="customRadio3" name="subscriptionType" class="custom-control-input add-type" data-error="radio-error" value="3">
                                <label class="custom-control-label" for="customRadio3">Daily</label>
                            </div>
                            <div class="custom-control custom-radio mb-2">
                                <input type="radio" id="customRadio4" name="subscriptionType" class="custom-control-input add-type" data-error="radio-error" value="4">
                                <label class="custom-control-label" for="customRadio4">Session rates</label>
                            </div>
                        </div>
                        <div class="radio-error"></div>
                    </div>
                    <div class="row border-bottom my-5 mx-n5"></div>
                    <div class="row align-items-center mb-3">
                        <div class="col-auto"><h5 class="font-size-18">Children of {{isset($room) && !empty($room) ? $room->name : ""}}</h5><p class="mb-sm-0 mb-3">Tap to select the children.</p></div>
                        <div class="col-auto ml-sm-auto">
                            <div class="checkbox big checkbox-pink">
                                <input type="checkbox" name="selectAll" id="selectAll" value="0">
                                <label for="selectAll" class="pt-2">
                                    Select all children
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="childs row">
                        @if(isset($init->children) && !empty($init->children))
                            @foreach($init->children as $child)
                                <div class="col text-center child-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-child" name="childs[]" value="{{$child->_id}}" {{ $is_child == $child->_id ? 'checked' : '' }} data-error="child-error">
                                        <div class="child-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ $child->profileImage }}" class="img-child medium" alt="Child" />
                                            <h5 class="mt-2 mb-0 font-size-18">{{$child->name}}</h5>
                                        </div>
                                    </label>
                                </div>
                            @endforeach
                            @php $is_child_exist = true; @endphp
                        @else
                        <div class="text-left col-md">
                            <p>No children found</p>
                        </div>
                        @endif
                        <div class="child-error col-12"></div>
                    </div>
                    <div class="row border-bottom my-5 mx-n5 subscription-package"></div>
                    <h5 class="font-size-18 mb-4 subscription-package">Select a subscription package</h5>
                    <div class="row added-package subscription-package">
                        @if(isset($init->schoolBillingSetup->subscriptions) && !empty($init->schoolBillingSetup->subscriptions))
                        @foreach($init->schoolBillingSetup->subscriptions as $subscription)
                        <div class="col-xl-6 mb-3 package-item">
                            <div class="border p-4 rounded">
                                <div class="row align-items-center px-3">
                                    <div class="col-md p-0">
                                        <h5 class="font-size-20 font-weight-medium mb-0 sub-package-name">{{$subscription->name}}</h5>
                                        <p class="mb-0">{{$subscription->days}} {{$subscription->days > 1 ? 'days' : 'day' }} per week</p>
                                    </div>
                                    <div class="mt-2 mt-md-0 col-md-auto p-0">
                                        <span class="package-price">{{$scurrency}}{{$subscription->amount}}/month</span>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <div class="">
                                        <input type="hidden" value="{{json_encode(["_id" => $subscription->_id, "name" => $subscription->name, "amount" => $scurrency . $subscription->amount, "days" => $subscription->days, "description" => $subscription->description ])}}" class="packege-info">
                                        <input type="radio" name="subscriptionId" class="package" value="{{$subscription->_id}}" data-days="{{$subscription->days}}" data-error="subscription-error">
                                        <a href="javascript:;" class="btn btn-soft-success btn-sm btn-select-package">Select</a>
                                    </div>
                                    <div class="col-12 px-0 package-days">
                                        <div class="week-days week-success">
                                            <div class="checkbox-tag checkbox-success d-inline-block">
                                                <input type="checkbox" class="checkbox sub-pack-days" name="days[{{$subscription->_id}}][]" id="day-{{$subscription->_id}}-1" value="1" data-error="days-{{$subscription->_id}}-error">
                                                <label for="day-{{$subscription->_id}}-1">M</label>
                                            </div>
                                            <div class="checkbox-tag checkbox-success d-inline-block">
                                                <input type="checkbox" class="checkbox sub-pack-days" name="days[{{$subscription->_id}}][]" id="day-{{$subscription->_id}}-2" value="2" data-error="days-{{$subscription->_id}}-error">
                                                <label for="day-{{$subscription->_id}}-2">T</label>
                                            </div>
                                            <div class="checkbox-tag checkbox-success d-inline-block">
                                                <input type="checkbox" class="checkbox sub-pack-days" name="days[{{$subscription->_id}}][]" id="day-{{$subscription->_id}}-3" value="3" data-error="days-{{$subscription->_id}}-error">
                                                <label for="day-{{$subscription->_id}}-3">W</label>
                                            </div>
                                            <div class="checkbox-tag checkbox-success d-inline-block">
                                                <input type="checkbox" class="checkbox sub-pack-days" name="days[{{$subscription->_id}}][]" id="day-{{$subscription->_id}}-4" value="4" data-error="days-{{$subscription->_id}}-error">
                                                <label for="day-{{$subscription->_id}}-4">T</label>
                                            </div>
                                            <div class="checkbox-tag checkbox-success d-inline-block">
                                                <input type="checkbox" class="checkbox sub-pack-days" name="days[{{$subscription->_id}}][]" id="day-{{$subscription->_id}}-5" value="5" data-error="days-{{$subscription->_id}}-error">
                                                <label for="day-{{$subscription->_id}}-5">F</label>
                                            </div>
                                            <div class="checkbox-tag checkbox-success d-inline-block">
                                                <input type="checkbox" class="checkbox sub-pack-days" name="days[{{$subscription->_id}}][]" id="day-{{$subscription->_id}}-6" value="6" data-error="days-{{$subscription->_id}}-error">
                                                <label for="day-{{$subscription->_id}}-6">S</label>
                                            </div>
                                            <div class="checkbox-tag checkbox-success d-inline-block">
                                                <input type="checkbox" class="checkbox sub-pack-days" name="days[{{$subscription->_id}}][]" id="day-{{$subscription->_id}}-7" value="0" data-error="days-{{$subscription->_id}}-error">
                                                <label for="day-{{$subscription->_id}}-7">S</label>
                                            </div>
                                        </div>
                                        <div class="days-{{$subscription->_id}}-error"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <div class="col-12"><p>You haven’t added any subscription packages.</p></div>
                        @endif
                        <div class="col-12 subscription-error"></div>
                    </div>
                    <div class="row border-bottom my-5 mx-n5 session-rate" style="display: none"></div>
                    <div class="row session-rate mb-4" style="display: none">
                        <div class="col-md">
                            <h5 class="font-size-18 text-success mb-0">How session rates work?</h5>
                        </div>
                        <div class="col-md-auto ml-md-auto">
                            <a class="font-size-18 text-pink" href="" target="_blank">Watch how it works!</a>
                        </div>
                    </div>
                    <div class="row session-rate mb-4" style="display: none">
                        <div class="col-md-12">
                            <h5 class="font-size-16 mb-2">We will apply the session rates you defined in billing setup to children’s billing, if they match their attendance schedule. If a child has schedules applied that do not have a session rate, your hourly rate will be used for any schedules that do not have a session rate applied.</h5>
                            {{-- <h5 class="font-size-16">Example: If there’s a session rate like €10 for Toddler room 9am to 11am, <br/>And a child also has this scheduled defined in their attendance, <br/>Then we’ll consider €10 instead of the hourly rate!</h5> --}}
                        </div>
                    </div>
                    @if(isset($init->schoolBillingSetup->addOns) && !empty($init->schoolBillingSetup->addOns))
                    <div class="row border-bottom my-5 mx-n5"></div>
                    <h5 class="font-size-18 mb-4">Select Add-ons, Discounts & Subsidy</h5>
                    <div class="row added-package">
                        @foreach($init->schoolBillingSetup->addOns as $addOn)
                        <div class="col-md-6 col-xl-4 mb-3 package-item">
                            <div class="border p-3 rounded">
                                <div class="row align-items-center px-3">
                                    <div class="col-md p-0">
                                        <h5 class="font-size-20 font-weight-medium mb-0">{{$addOn->name}}</h5>
                                        <p class="mb-0">{{isset($addOnsType[$addOn->amountType]) ? $addOnsType[$addOn->amountType] . ':' : ''}} {{$addOn->amountType == 2 ? $addOn->amount.'% total of the invoice' : $scurrency.$addOn->amount.'/month' }}</p>
                                        @if($addOn->amountType != 2)
                                        <p class="mb-0 amount-diff">Weekly = {{$scurrency}}{{$addOn->amount/4}} | biweekly = {{$scurrency}}{{$addOn->amount/2}}</p>
                                        @endif
                                    </div>
                                    <div class="mt-2 mt-md-0 col-md-auto p-0">
                                        <div class="package-control package-success package-radio">
                                            <input type="checkbox" class="package-control-input" name="addOns[]" value="{{$addOn->_id}}" id="addons-{{$addOn->_id}}" data-error="add-ons-error">
                                            <label for="addons-{{$addOn->_id}}"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        <div class="col-12 add-ons-error"></div>
                    </div>
                    @endif
                    <div class="row border-bottom my-5 mx-n5"></div>
                    <h5 class="font-size-18 mb-4">Billing period</h5>
                    <div class="row date-group">
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-3 col-form-label">Start date</label>
                                <div class="col-lg-8 col-xl-9">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input from-date" name="billStartDate" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-3 col-form-label">End date</label>
                                <div class="col-lg-8 col-xl-9">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input to-date" name="billEndDate" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-3 col-form-label">Billing cycle <span class="ml-1" title="Billing cycles and invoices are sent on a fixed rolling basis, dependent on the start date chosen. Start dates cannot be backdated. You can use manual invoicing for any previous or outstanding invoices/amount. Weekly: invoices are sent every 7 days, Bi-Weekly: every 14 days and Monthly invoices are sent every 30 days from the start date chosen above." data-toggle="tooltip"><i class="icon-info"></i></span></label>
                                <div class="col-lg-8 col-xl-9">
                                    <select class="form-control cycle" data-plugin="customselect" name="billCycle" data-placeholder="Select">
                                        <option value="">Select</option>
                                        @foreach (config('constant.billingCycle') as $k => $v)
                                        <option value="{{$k}}">{{$v}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-3 col-form-label">Billing type</label>
                                <div class="col-lg-8 col-xl-9">
                                    <select class="form-control invoice-method" data-plugin="customselect" name="invoiceMethod" data-placeholder="Select">
                                        <option value="">Select</option>
                                        @foreach (config('constant.invoiceMethod') as $k => $v)
                                        <option value="{{$k}}">{{$v}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="invoice-date" style="dispaly:none"><p class="mb-0">The first invoice will be sent on the <span class="first-invoice-date">{invoice date}</span> on a <span class="invoice-cycle">{weekly}</span> basis.</p></div>
                    
                    <div class="row border-bottom my-5 mx-n5 funded-hour" style="display: none"></div>
                    <div class="row funded-hour mb-4" style="display: none">
                        <div class="col-md">
                            <h5 class="font-size-18 text-success mb-0">Funded hours</h5>
                        </div>
                        <div class="col-md-auto ml-md-auto">
                            <a class="font-size-18 text-pink" href="{{route('billing.manage.funded.hours')}}" target="_blank">Manage funded hours</a>
                        </div>
                    </div>
                    <div class="row funded-hour mb-4" style="display: none">
                        <div class="col-md-12">
                            <h5 class="font-size-16">You can add funded hours to be automatically deducted from children’s scheduled attended hours on a weekly, bi-weekly or monthly basis. This billing cycle is dependent on the billing cycle chosen. TeachKloud will automatically deduct any funded hours from the scheduled attended hours to calculate the final amount payable by the parent. The final payable amount is determined by your hourly rate which can be edited in the billing set-up.</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <button type="submit" class="btn btn-success btn-min-width">Save</button>
            </div>
        </form>
    </div>
</div>

<div class="modal modal-medium fade" id="subPackageInfoModal" 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">
                <h3 class="modal-title mb-1 package-name"></h3>
                <p class="mb-0"><span class="package-days"></span> (per week)</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-2 pb-4">
                <div class=""><b>Package price: </b><span class="package-amount"></span></div>
                <div class=""><b>Description: </b><span class="package-description"></span></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/billing-recurring.js') }}?v=1" type="text/javascript"></script>
@endsection