@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" />
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .under-attended-table.table td{vertical-align: top !important}
    .under-attended-table.table thead th {white-space: nowrap;}
</style>
@endsection

@php
    $stype = 2;
    if(app('request')->input('type')){
        $stype = app('request')->input('type');
    }
    $weekly_scheme_count = 0; $daily_scheme_count = 0;
    if(isset($init->schemes) && !empty($init->schemes)) {
        $weekly_scheme_count = collect($init->schemes)->filter(function($item) {
            return (isset($item->version) && $item->version == 2);
        })->count();
        $daily_scheme_count = count($init->schemes) - $weekly_scheme_count;
    }
@endphp


@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-xl">
        <h4 class="mb-1 mt-0 font-weight-medium">Schemes</h4>
        <p>Use schemes to add governmental schemes or subsidies to child profiles and attendance inspection reports. Children’s schemes are visible via the School Interface and in the attendance section of the TeachKloud: Childcare App. Watch our tutorial video on <a href="https://intercom.help/teachkloud/en/articles/6771848-attendance-schemes" target="_blank">Schemes</a>.</p>
        <ul class="pl-3 mb-1">
            @if($daily_scheme_count > 0)
            <li class="mb-0"><b>Daily Schemes (for any users prior to November 2022):</b> are added via the app. Every time a child is checked in, TeachKloud will auto-add the scheme hours. However, if a child is not checked in, the scheme hours are not added. If a child needs to be marked as absent, the scheme hours must be removed first before the absence button becomes usable. You can convert to our more flexible option of weekly schemes, by selecting convert to weekly scheme (green button, in the top right-hand corner). Reverting to daily schemes after conversion is not possible.</li>
            @endif
            <li class="mb-0"><b>Weekly Schemes (RECOMMENDED):</b> are the most flexible option and added via the school interface but can also be viewed via the app. They are specified once as a weekly . For example, if the child is funded for 15 hours a week, the admin input 15 hours next to the child's name, under the relevant scheme and TeachKloud will replicate each week. This does not affect absence usage.</li>
        </ul>
        <p class="text-danger font-weight-bold mb-0">Please ensure scheme hours are updated from the date you would like the change to take place. Scheme hours cannot be backdated.</p>
    </div>
    @if(isset($init->schemes) && !empty($init->schemes))
    <div class="col-xl-auto">
        <div class="form-inline float-xl-right mt-3 mt-xl-0">
            <div class="">
                <button type="button" class="btn btn-success btn-min-width mr-2 mb-xl-0 mb-2" data-toggle="modal" data-target="#viewUnderAttendedChilds">View under attended children</button>
                <button type="button" class="btn btn-success btn-min-width add-scheme">Add new scheme</button>
            </div>
        </div>
    </div>
    @endif
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body py-4">
                <p class="font-size-16 mb-0">Please use this button to disable email notification of under attendance:
                    <span class="d-inline-block custom-control custom-switch ml-2">
                        <input type="checkbox" class="custom-control-input" name="visibility" id="visibilitySwitch" {{isset($init) && !empty($init) && isset($init->disableEmail) && ($init->disableEmail == true || $init->disableEmail == "true") ? "checked" : ""}}>
                        <label class="custom-control-label" for="visibilitySwitch"></label>
                    </span>
                </p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
@if(isset($init->schemes) && !empty($init->schemes))
    @if($daily_scheme_count > 0)
    <div class="row">
        <div class="col-md-12">
            <div class="card" style="margin-bottom: 0px;box-sizing: unset;border-bottom-left-radius: 0;border-bottom-right-radius: 0;">
                <div class="card-body py-4">
                    <div class="row">
                        <div class="col-auto">
                            <ul class="nav nav-pills navtab-bg">
                                <li class="nav-item">
                                    <a href="#tab2" data-url="{{ route('scheme', ['type' => 2]) }}" data-toggle="tab" aria-expanded="true" data-type="2" class="nav-link {{ ($stype != "" && $stype == 2) ? 'active' : '' }}">
                                        <span class="d-sm-block">Weekly schemes</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#tab1" data-url="{{ route('scheme', ['type' => 1]) }}" data-toggle="tab" aria-expanded="true" data-type="1" class="nav-link {{ ($stype != "" && $stype == 1) ? 'active' : '' }}">
                                        <span class="d-sm-block">Daily schemes</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="border-bottom"></div>
            </div>
        </div>
    </div>
    @endif
    @foreach($init->schemes as $scheme)
        @php $type = 1; @endphp
        @if(isset($scheme->version) && $scheme->version == 2)
            @php $type = 2; @endphp
        @endif
        <div class="row scheme" data-type="{{$type}}" data-id="{{$scheme->_id}}" style="display: {{$type == $stype ? 'block' : 'none' }}" data-miDate="{{ isset($scheme->minDate) && !empty($scheme->minDate) ? $scheme->minDate : "" }}">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row align-items-center mb-3">
                            <div class="col-auto">
                                <h5 class="font-size-18"><span class="scheme-type" data-type="{{$type}}"><span class="scheme-name">{{$scheme->name}}</span></h5>
                            </div>
                            <div class="col-auto ml-sm-auto">
                                @if($type == 1)
                                <a href="javascript:;" class="btn p-0 text-success mr-3 mb-2 md-md-0 convert-scheme" data-id="{{$scheme->_id}}">Convert to weekly scheme</a>
                                @else
                                    @if(isset($scheme->childs) && !empty($scheme->childs))
                                    <a href="javascript:;" class="btn p-0 text-success mr-3 mb-2 md-md-0 update-hours" data-id="{{$scheme->_id}}">Update hours</a>
                                    @endif
                                @endif
                                <a href="javascript:;" class="btn p-0 text-danger mr-3 mb-2 md-md-0 remove-scheme" data-id="{{$scheme->_id}}">Remove this scheme</a>
                                <a href="javascript:;" class="btn btn-success mr-3 mb-2 md-md-0 edit-scheme" data-id="{{$scheme->_id}}">Edit scheme</a>
                                <a href="{{ route('scheme.children.add', ['id' => $scheme->_id]) }}" class="btn btn-success mb-2 md-md-0">Add children</a>
                            </div>
                        </div>
                        <table class="table table-striped dt-responsive scheme-table" data-title="List of assigned children" data-nodata="No children added under {{$scheme->name}}." data-id="{{$scheme->_id}}">
                            <thead>
                                <tr>
                                    <th>Children name</th>
                                    <th>Added on</th>
                                    {{-- <th>Teacher</th> --}}
                                    <th>Room name</th>
                                    @if($type == 2)
                                    <th>Hours p/w</th>
                                    @endif
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($scheme->childs) && !empty($scheme->childs))
                                @foreach($scheme->childs as $child)
                                <tr>
                                    <td class="text-sm-left text-center">
                                        <img src="{{ $child->profileImage }}" class="img-meal small mr-2" alt="child" />
                                        <span>{{ $child->name }}</span> @if(isset($child->alert)) <span title="This child has under attended. Select view under attended children using the green button (top right hand corner) to learn more." data-toggle="tooltip"><i class="icon-info-red"></i></span> @endif
                                    </td>
                                    <td>{{ date('d/m/Y, h:i a', strtotime($child->addedOn)) }}</td>
                                    {{-- <td class="text-sm-left text-center">
                                        <img src="{{ Helper::assets('assets/images/dummy/teacher/1.png') }}" class="img-meal small mr-2" alt="child" />
                                        <span>Jerry Ortiz</span>
                                    </td> --}}
                                    <td>{{ isset($child->room) && !empty($child->room) ? $child->room->name : "NA" }}</td>
                                    @if($type == 2)
                                    <td>{{ isset($child->minutes) && $child->minutes > 0 ? Helper::getHoursStrShort($child->minutes) : '-'}}</td>
                                    @endif
                                    <td>
                                        <div class="dropdown align-self-center">
                                            <a href="#" class="dropdown-toggle arrow-none text-muted" data-toggle="dropdown" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
                                            <div class="dropdown-menu dropdown-menu-right" x-placement="top-end">
                                                @if($type == 2)
                                                <a href="javascript:void(0);" class="dropdown-item mange-past-hour" data-child="{{ $child->_id }}" data-scheme="{{$scheme->_id}}" data-image="{{ $child->profileImage }}" data-name="{{ $child->name }}">Manage past hours</a>
                                                @endif
                                                <a href="javascript:void(0);" class="dropdown-item text-danger remove-child" data-id="{{ $child->_id }}" data-scheme="{{$scheme->_id}}">Remove this child</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@else
<div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <p class="font-size-16">Add any governmental schemes here and assign them to children.</p>
                    <button type="button" class="btn btn-success btn-min-width add-scheme">Add scheme</button>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="modal modal-medium fade" id="addSchemeModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('scheme.save') }}" method="post" class="form-horizontal scheme-form">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Add new scheme</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label">Scheme name</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="name" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Add scheme</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal modal-medium fade" id="editSchemeModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('scheme.update') }}" method="post" class="form-horizontal scheme-form">
        <input type="hidden" class="form-control" name="id" class="id" value="">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Edit scheme</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label">Scheme name</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="name" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Edit scheme</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal modal-medium fade" id="convertSchemeModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('scheme.convert') }}" method="post" class="form-horizontal scheme-convert-form">
        <input type="hidden" class="form-control" name="id" class="id" value="">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Convert <span class="scheme-name"></span> scheme type from Daily to Weekly</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="">
                            <h5 class="font-size-16 mb-3">You are about to convert <span class="scheme-name"></span> Scheme type from Daily to Weekly. This means that the scheme will act as Weekly Scheme from selected date onwards.</h5>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-12 col-form-label font-weight-medium">Select date</label>
                            <div class="col">
                                <div class="position-relative">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="number" class="form-control flatpickr-input" name="date" value="">
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-12 col-form-label font-weight-medium">Please specify initial hours for all children availing of <span class="scheme-name"></span>. You can edit any individual children in the next step > under weekly hours.</label>
                            <div class="col">
                                <input type="number" class="form-control decimal" name="minutes" value="">
                            </div>
                            <div class="col-auto pt-3">
                                hours/week
                            </div>
                        </div>
                        <div class="">
                            <p class="text-danger">Note: Reverting to daily schemes after conversion is not possible.</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Convert</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal modal-medium fade" id="updateHourModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('scheme.update.hour') }}" method="post" class="form-horizontal scheme-update-hour-form">
        <input type="hidden" class="form-control" name="id" class="id" value="">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Update weekly hours</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="childs">

                    </div>
                    <div class="">
                        <p class="text-danger">Note: Changes will be reflected from Today's date onwards.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Update</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal modal-medium fade" id="updateChildHourModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('scheme.update.past.hour') }}" method="post" class="form-horizontal scheme-update-child-hour-form">
        <input type="hidden" class="form-control" name="scheme" class="scheme" value="">
        <input type="hidden" class="form-control" name="id" class="id" value="">
        <div class="modal-dialog 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="modal-title mb-0 child-name" id=""></h3>
                            <p class=" mb-0">Manage past hours</p>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <label>Add/Remove hours</label>
                    <div class="section-repeater" data-startingIndex="2">
                        <div class="r-group d-none">
                            <div class="form-group row">
                                <div class="col-md-4 mb-2 mb-md-0 order-lg-1 order-2">
                                    <label>From date</label>
                                    <div class="position-relative">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control not-validate flatpickr-input fromDate" name="hours[1][date]" data-pattern="hours[++][date]" value="">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-2 mb-md-0 order-lg-2 order-3">
                                    <label>To date</label>
                                    <div class="position-relative">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control not-validate flatpickr-input toDate" name="hours[1][endDate]" data-pattern="hours[++][endDate]" value="">
                                    </div>
                                </div>
                                <div class="col-md-3 mb-2 mb-md-0 order-lg-3 order-4">
                                    <label>Hours/week</label>
                                    <input type="hidden" class="id" name="hours[1][_id]" data-pattern="hours[++][_id]" value="">
                                    <input type="number" class="form-control not-validate child-hour decimal" name="hours[1][minutes]" data-pattern="hours[++][minutes]" value="">
                                </div>
                                <div class="col-lg-1 col-auto ml-auto order-lg-4 order-1 input-group-append mt-3 px-0" style="visibility:hidden;">
                                    <span class="input-group-btn pt-lg-4">
                                        <a href="javascript:void(0);" class="text-danger r-btnRemove"><i class="uil uil-multiply"></i></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="pt-3 btn-div pb-4">
                            <button type="button" class="btn btn-success r-btnAdd">Add</button>
                        </div>
                    </div>
                    <div class="hours">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Save</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal modal-extra-large-1 fade" id="viewUnderAttendedChilds" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div class="">
                    <p>The following is a list of children who have under attended. This is based on their scheme hours minus their actual marked in attendance over an 8 week period. If the child under attends every week for 8 weeks, you will be notified at the start of the 8th week. Check the weeks and hours to identify and / or correct any discrepancies in the mark attendance section or notify the relevant persons of the under attendance.</p>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-2 table-responsive">
                <table class="table under-attended-table">
                    <thead>
                        <tr>
                            <th>Child</th>
                            <th>Weeks</th>
                            <th>Total attendance hours</th>
                            <th>Total schemes hours</th>
                            <th>Required adjustment</th>
                            <th>Alert expiration</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($init->underAttendedChildSummary) && !empty($init->underAttendedChildSummary))
                        @foreach($init->underAttendedChildSummary as $schedule)
                        <tr>
                            <td class="text-sm-left text-center">
                                <img src="{{ $schedule->child->profileImage }}" class="img-meal small mr-2" alt="child" />
                                <span class="text-nowrap">{{ $schedule->child->name }}</span>
                            </td>
                            <td>
                                @if(isset($schedule->weeks) && !empty($schedule->weeks))
                                    @foreach($schedule->weeks as $week)
                                    <div>
                                        <ul>
                                            <li>
                                                {{ \Carbon\Carbon::parse($week->fromDate)->format('d/m/Y') }} to {{ \Carbon\Carbon::parse($week->toDate)->format('d/m/Y') }}
                                                <ul>
                                                    <li class="text-nowrap">Attended: {{ Helper::getHoursStrShort($week->attended) }}</li>
                                                    <li class="text-nowrap">Required: {{ Helper::getHoursStrShort($week->required) }}</li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    @endforeach
                                @endif
                            </td>
                            <td class="text-nowrap">{{ Helper::getHoursStrShort($schedule->attended) }}</td>
                            <td class="text-nowrap">{{ Helper::getHoursStrShort($schedule->required) }}</td>
                            <td class="text-nowrap">{{ Helper::getHoursStrShort($schedule->required - $schedule->attended) }}</td>
                            <td class="text-nowrap">{{ \Carbon\Carbon::parse($schedule->expiredOn)->format('d/m/Y') }}</td>
                        </tr>
                        @endforeach
                        @endif
                    </tbody>
                </table>
                <div class="">
                </div>
            </div>
            <div class="modal-footer pb-3">
                <p>If attendance schedule needs to be adjusted to reflect the actual hours attended, go to attendance > schedule. If attendance scheme hours need to be adjusted, go to attendance > scheme. Please note that any adjustments will be reflected in this table within 24 hours.</p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script>
var schemes = [];
</script>
@if(isset($init->schemes) && !empty($init->schemes))
<script>
    schemes = @json($init->schemes)
</script>
@endif
<script defer src="{{ Helper::assets('assets/libs/datatables/jquery.dataTables.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" 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/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}"></script>
<script type="text/javascript"> var visibility_change_url = "{{ route('scheme.notification-settings') }}", removeSchemeUrl="{{ route('scheme.remove') }}", removeSchemeChildUrl="{{ route('scheme.children.remove') }}", hourListSchemeChildUrl="{{ route('scheme.hours-list') }}";
</script>
<script defer src="{{ Helper::assets('assets/js/pages/scheme.js') }}?v=4" type="text/javascript"></script>
@endsection