@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/multiselect/bootstrap.multiselect.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-auto">
        <h4 class="mb-3 mb-sm-0 mt-0 font-weight-medium">All pending invoices</h4>
    </div>
    <div class="col-auto ml-auto">
        <div class="form-inline float-md-right">
            <div class=""></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">
                        <li class="nav-item">
                            <a href="#tab1" data-toggle="tab" data-tab="1" aria-expanded="true" class="nav-link active">Invoices</a>
                        </li>
                        <li class="nav-item">
                            <a href="#tab2" data-toggle="tab" data-tab="2" aria-expanded="false" class="nav-link">Payment summary</a>
                        </li>
                    </ul>
                    <div class="ml-sm-auto mt-3 mt-sm-0">
                        <a href="javascript:;" class="btn btn-success btn-mark-multiple-invoice">Mark Multiple Invoices as Paid</a>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane show active" id="tab1">
                        <form action="{{ route('billing.pending.invoices') }}" method="" class="invoice">
                            @csrf
                            <input type="hidden" name="group" value="0">
                            <div class="row">
                                <div class="col-xl-7">
                                    <div class="row">
                                        <label class="col-xl-auto col-form-label font-weight-medium">Select room</label>
                                        <div class="col-lg-6 col-xl mb-3 mb-xl-0">
                                            <select class="form-control wide room" data-plugin="customselect" name="rooms[]" id="room" data-placeholder="Select room">
                                                {{-- <option value="">All rooms</option> --}}
                                                @if(isset($rooms->rooms) && !empty($rooms->rooms))
                                                @foreach($rooms->rooms as $room)
                                                    <option value="{{$room->_id}}">{{$room->name}}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="col-lg-6 col-xl mb-3 mb-xl-0">
                                            <select class="form-control wide multiselect children" name="childs[]" id="children" multiple data-placeholder="All children">
                                                @if(isset($rooms->defaultRoomChildren) && !empty($rooms->defaultRoomChildren))
                                                @foreach($rooms->defaultRoomChildren as $child)
                                                    <option value="{{$child->_id}}" data-image="{{$child->profileImage}}">{{$child->name}}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-xl-auto ml-xl-auto align-self-center">
                                    <div class="row">
                                        <div class="col-auto mb-3 mb-sm-0">
                                            <div class="checkbox medium checkbox-pink">
                                                <input type="checkbox" class="checkbox-type" name="pending" id="pending1" value="1" checked>
                                                <label for="pending1" class="pt-1">
                                                    Pending invoices
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-auto mb-3 mb-sm-0">
                                            <div class="checkbox medium checkbox-pink">
                                                <input type="checkbox" class="checkbox-type" name="overdue" id="overdue1" value="1" checked>
                                                <label for="overdue1" class="pt-1">
                                                    Overdue invoices
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="row border-bottom mb-5 mt-4 mx-n5"></div>
                        <div class="">
                            <div class="font-size-16 pb-3 d-none table-title">Invoices</div>
                            <table id="datatable" class="table table-striped dt-responsive">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" class="select-all" id="selectAll" value="1" style="height: 20px;width: 20px;"></th>
                                        <th>Invoice no.</th>
                                        <th>Children name</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 class="tab-pane" id="tab2">
                        <form action="{{ route('billing.pending.invoices') }}" method="" class="children">
                            @csrf
                            <input type="hidden" name="group" value="1">
                            <input type="hidden" name="pending" value="1">
                            <input type="hidden" name="overdue" value="1">
                            <div class="row">
                                <div class="col-xl-7">
                                    <div class="row">
                                        <label class="col-xl-auto col-form-label font-weight-medium">Select room</label>
                                        <div class="col-lg-6 col-xl mb-3 mb-xl-0">
                                            <select class="form-control wide room" data-plugin="customselect" name="rooms[]" id="room1" data-placeholder="All rooms">
                                                {{-- <option value="">All rooms</option> --}}
                                                @if(isset($rooms->rooms) && !empty($rooms->rooms))
                                                @foreach($rooms->rooms as $room)
                                                    <option value="{{$room->_id}}">{{$room->name}}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="col-lg-6 col-xl mb-3 mb-xl-0">
                                            <select class="form-control wide multiselect children" name="childs[]" id="children1" multiple data-placeholder="All children">
                                                @if(isset($rooms->defaultRoomChildren) && !empty($rooms->defaultRoomChildren))
                                                @foreach($rooms->defaultRoomChildren as $child)
                                                    <option value="{{$child->_id}}" data-image="{{$child->profileImage}}">{{$child->name}}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="row border-bottom mb-5 mt-4 mx-n5"></div>
                        <div class="row view-children">
                        </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>

<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="MarkMultipleInvoicePaidModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('billing.invoice.mark-paid') }}" method="POST" class="mark-paid-form">
        <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">Mark Multiple Invoices as Paid</div>
                    <p>Please review the invoices below and update their payment status.</p>
                    <small class="text-grey"><b>Note:</b> For mobile users, please scroll down or swipe to the right, to view all content.</small>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0 pb-0">
                    <div class="table-responsive">
                        <table class="table border">
                            <thead>
                                <tr>
                                    <th class="text-nowrap">Child Name</th>
                                    <th class="text-nowrap">Invoice Details</th>
                                    <th class="text-nowrap">Total & Remaining Amounts</th>
                                    <th  class="text-nowrap text-left" width="35%">Payment Status & Method</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" class="btn btn-success btn-min-width mx-auto btn-mark-paid-yes">Mark as Paid</a>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('script-bottom')
<script type="text/javascript">
    var changeRoomUrl = "{{ route('billing.targets.room.children') }}";
    var getInvoiceUrl = "{{ route('billing.pending.invoices') }}";
    var cancelUrl = "{{ route('billing.invoice.cancel') }}";
    var markMultiplePaidUrl = "{{ route('billing.invoice.mark-multiple-paid') }}";
    var invoiceUrl = "{{ route('billing.invoice', ['id' => '_id', 'child' => '_child']) }}";
    var defaultRoom = "{{ $rooms->defaultRoom }}";
    var invoiceType = @json(config('constant.invoiceType'));
    var invoiceStatus = @json(config('constant.invoiceStatus'));
    var invoicePaidStatus = @json(config('constant.invoicePaidStatus'));
</script>
<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/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/multiselect/bootstrap.multiselect.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/billing-pending-invoice.js') }}?{{time()}}" type="text/javascript"></script>
@endsection