@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('child')){
        $is_child = app('request')->input('child');
    }
@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">Send manual invoices</h4>
        <p class="mb-0">Use this section to send manual invoices for parents. Manual invoices are used for once off payments.</p>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ route('billing.invoice.send.manual.save') }}" method="POST" class="billing-send-invoice-form">
            @csrf
            <input type="hidden" name="room" value="{{ isset($roomId) ? $roomId : '' }}">
            <div class="card">
                <div class="card-body">
                    <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"></div>
                    <h5 class="font-size-18 mb-4">Invoice details</h5>
                    <div class="row">
                        <div class="col-xl-11">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-2 col-form-label">Title</label>
                                <div class="col-lg-8 col-xl-10">
                                    <input type="text" class="form-control" name="title" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-11">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-2 col-form-label">Description</label>
                                <div class="col-lg-8 col-xl-10">
                                    <textarea type="text" class="form-control" name="description" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-11">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-2 col-form-label">Enter amount</label>
                                <div class="col-lg-5 col-xl-5">
                                    <input type="text" class="form-control" name="amount" id="amount" value="">
                                </div>
                                @if(isset($init->payeeProfile->tax) && $init->payeeProfile->tax != "" && $init->payeeProfile->tax > 0)
                                <div class="col-lg-auto align-self-center">
                                    Total amount with {{$init->payeeProfile->tax}}% tax: <b>{{config('constant.currency')[$init->payeeProfile->currency]['symbol']}}<span class="tax-amount">0.0</span></b>
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="col-xl-11">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-2 col-form-label">Split payment <span class="" title="Split payments are optional and only used if you’d like to send an invoice to parents but want to give the parent the option to pay in instalments." data-toggle="tooltip"><i class="icon-info"></i></span></label>
                                <div class="col-lg-5 col-xl-5 pt-2">
                                    <div class="custom-control-inline">
                                        <div class="custom-control custom-radio mb-2 mr-3">
                                            <input type="radio" id="customRadio1" name="amountSplitted" class="custom-control-input add-type" data-error="radio-error" value="1">
                                            <label class="custom-control-label" for="customRadio1">Yes</label>
                                        </div>
                                        <div class="custom-control custom-radio mb-2 mr-3">
                                            <input type="radio" id="customRadio2" name="amountSplitted" class="custom-control-input add-type" data-error="radio-error" value="0" checked>
                                            <label class="custom-control-label" for="customRadio2">No</label>
                                        </div>
                                    </div>
                                    <div class="radio-error"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-11 date-section">
                            <div class="form-group row">
                                <label class="col-lg-4 col-xl-2 col-form-label">Due date</label>
                                <div class="col-lg-5 col-xl-5">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input" name="dueDate" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-12 installment-section" style="display: none">
                            <div class="mt-3 section-repeater" data-startingIndex="1">
                                <div class="r-group">
                                    <div class="row mb-2 date-group">
                                        <div class="col-lg-3 order-lg-1 order-2">
                                            <div class="form-group">
                                                <label class="col-form-label"><span class="srno">1st</span> Instalment amount</label>
                                                <input type="text" class="form-control amount" name="installments[0][charge]" data-pattern="installments[++][charge]">
                                            </div>
                                        </div>
                                        <div class="col-lg-3 order-lg-2 order-3">
                                            <div class="form-group">
                                                <label class="col-form-label">Due date</label>
                                                <div class="position-relative">
                                                    <span class="flatpickr-arrow"></span>
                                                    <input type="text" class="form-control flatpickr flatpickr-input dueDate from-date" name="installments[0][dueDate]" data-pattern="installments[++][dueDate]">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 order-lg-3 order-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Send invoice on</label>
                                                <div class="position-relative">
                                                    <span class="flatpickr-arrow"></span>
                                                    <input type="text" class="form-control flatpickr flatpickr-input invoiceDate to-date" name="installments[0][invoiceSendAt]" data-pattern="installments[++][invoiceSendAt]">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto ml-auto order-lg-3 order-1 input-group-append align-items-start justify-content-end" style="visibility:hidden;">
                                            <span class="input-group-btn mt-lg-4">
                                                <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="row border-bottom my-5 mx-n5"></div>
                                </div>
                                <div class="pt-3 btn-div">
                                    <div class="instalment-error mb-4 text-danger" style="display: none">Note: {{config('constant.currency')[$init->payeeProfile->currency]['symbol']}}<span class="instalment-diff">0</span> is remaining! Adjust the instalment amounts or add another instalment option to balance the invoice. The tax amount will be distributed between the instalments.</div>
                                    <button type="button" class="btn btn-success btn-min-width r-btnAdd">Add another</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <button type="submit" class="btn btn-success btn-min-width">Send</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script-bottom')
<script type="text/javascript">
    var taxRate = parseFloat("{{isset($init->payeeProfile->tax) && $init->payeeProfile->tax != "" && $init->payeeProfile->tax > 0 ? $init->payeeProfile->tax : 0}}");
</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-manual.js') }}" type="text/javascript"></script>
@endsection