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

@section('breadcrumb')
<div class="row pt-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body py-3">
                <p class="font-size-16 mb-0">Use this button to stop parents from marking their child as absent. If disabled, parents will still be able to submit an absence reason but only when requested by educators using the app.
                    <span class="d-inline-block custom-control custom-switch ml-2">
                        <input type="checkbox" class="custom-control-input" name="visibility" id="visibilitySwitch">
                        <label class="custom-control-label" for="visibilitySwitch"></label>
                    </span>
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-body py-3">
                <p class="font-size-16 mb-0">Enable this button to ask for a digital signature when a parent adds a check-in or check-out:
                    <span class="d-inline-block custom-control custom-switch ml-2">
                        <input type="checkbox" class="custom-control-input" name="sign" id="signSwitch" {{isset($init) && !empty($init) && isset($init->attendanceSignRequire) && ($init->attendanceSignRequire == true || $init->attendanceSignRequire == "true") ? "checked" : ""}}>
                        <label class="custom-control-label" for="signSwitch"></label>
                    </span>
                </p>
                <p><a href="javascript:;" class="font-weight-medium" data-toggle="modal" data-target="#checkInOutQRCodeModal">View Check-In/Check-Out QR Code</a></p>
            </div>
        </div>
    </div>
</div>

<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="m-0 font-weight-medium">Mark attendance</h4>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
            <div class="">
                <a href="javascript:;" class="btn btn-success btn-min-width btn-schedule-all" style="display: none">Create schedule</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')

<div class="row show-banner" style="display: none">
    <div class="col-12">
        <div class="alert alert-danger py-3 px-3" role="alert">
            <div class="d-sm-flex btn-group d-block align-items-center">
                <div class="col-sm px-0 mb-1 mb-sm-0">
                    <div class="d-flex align-items-center">
                        <i class="icon-alert-danger mr-2"></i>
                        <span class="font-weight-medium text-danger alert-miss-schedule">Some children are not checked out on: 3rd Mar, 23rd Apr, 28th May, 1st Jun, & 9th Jun.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body room-section">
                <div class="row">
                    <div class="col-xl-6">
                        <div class="row form-group">
                            <div class="col-xl-6 mb-3 mb-xl-0 mb-3">
                                <select class="form-control wide single-arrow" data-plugin="customselect" name="room" id="room" data-placeholder="Select room"></select>
                            </div>
                            <div class="col-xl-6">
                                <div class="position-relative">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input-date" id="date" name="date" value="{{date('d/m/Y')}}" data-date-end-date="0d">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 section-child" style="display: none">
                        <div class="row form-group">
                            <div class="col-xl-6 mb-3 ml-md-auto">
                                <select class="form-control wide select2-custom" name="child" id="children" data-placeholder="Select child">
                                    <option value="-1" selected data-count="0">All children</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom mt-3 mb-5 mx-n5 alert-border"></div>
                <div class="row alert-message">
                    <div class="col-md-12">
                        <div class="row align-items-center">
                            <div class="col-xl-4 col-md-6 text-center mx-auto">
                                <h5 class="mb-md-0 font-size-19 message-1" style="display: none">Create attendance schedule</h5>
                                <p class="message-1" style="display: none">Please set up the attendance schedule for <span class="room-name"></span>.</p>

                                <h5 class="mb-md-0 font-size-19 message-2" style="display: none">Create attendance schedule</h5>
                                <p class="message-2" style="display: none">To view the schedule, create an attendance schedule for <span class="child-name"></span>.</p>

                                <h5 class="mb-md-0 font-size-19 message-3" style="display: none">No schedules</h5>
                                <p class="message-3" style="display: none">An attendance schedule has not been created for <span class="selected-date"></span>.</p>

                                <h5 class="mb-md-0 font-size-19 message-4" style="display: none">No schedule</h5>
                                <p class="message-4" style="display: none"><span class="child-name"></span> is not scheduled to attend for <span class="selected-date"></span>.</p>

                                <a href="javascript:;" data-href="{{ route('schedule.create', ["id" => "ids" ]) }}" class="btn btn-success btn-min-width btn-no-schedule" style="display: none">Create schedule</a>
                                <a href="javascript:;" class="btn btn-success btn-min-width btn-schedule" style="display: none">Create schedule</a>

                                <h5 class="mb-md-0 font-size-19 message-5" style="display: none">Children are on holiday!</h5>
                                <p class="message-5" style="display: none">All of the children in this room are on holiday.</p>

                                <h5 class="mb-md-0 font-size-19 message-6" style="display: none"><span class="child-name"></span> is on holiday!</h5>
                                <p class="message-6" style="display: none"><span class="child-name"></span> is on holiday - <span class="selected-date"></span>.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body room-not-section" style="display: none">
                <div class="row">
                    <div class="col-lg-12">
                        <p class="font-size-16">Please add a room before mark attendance.</p>
                        <a href="{{ route('room.add') }}" class="btn btn-success btn-min-width">Add room</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="records"><div class="text-center my-5">Loading...</div></div>

<div class="modal modal-medium fade" id="checkInModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('mark-attendance.log.add-edit') }}" method="POST" class="form-horizontal check-in-form">
        @csrf
        <input type="hidden" name="_id" value="">
        <input type="hidden" name="activity" value="">
        <input type="hidden" name="date" value="">
        <input type="hidden" name="room" class="room" value="">
        <input type="hidden" name="child" class="child" value="">
        <input type="hidden" name="fromTime" class="fromTime" value="">
        <input type="hidden" name="toTime" class="toTime" value="">
        <input type="hidden" name="old_publisher" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media">
                        <img src="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 child-name">John Wilson</h3>
                            <p class="mb-0"><span class="room-name">Breakfast club</span> (<span class="start-time">09:00 am</span> to <span class="end-time">10:00 am</span>)</p>
                        </div>
                    </div>
                    <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 align-items-center">
                            <label class="col-md-4 mb-md-0">Check in time</label>
                            <div class="col pl-md-0">
                                <span class="flatpickr-arrow"></span>
                                <input type="text" class="form-control flatpickr flatpickr-times" name="checkIn" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row align-items-center publisher-section">
                            <label class="col-md-4 mb-md-0">Select publisher</label>
                            <div class="col pl-md-0">
                                <select class="form-control wide select2-custom publisher" name="publisher" data-placeholder="Select publisher">
                                    <option value="">Select publisher</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label class="col-md-4 mb-md-0">Dropped by</label>
                            <div class="col pl-md-0">
                                <input type="text" class="form-control dropped-by" name="droppedBy" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="other-childs"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Check in</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="checkInAllChildModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('mark-attendance.log.add-edit') }}" method="POST" class="form-horizontal check-in-all-form">
        @csrf
        <input type="hidden" name="date" value="">
        <input type="hidden" name="room" class="room" value="">
        <input type="hidden" name="fromTime" class="fromTime" value="">
        <input type="hidden" name="toTime" class="toTime" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Check in all children</h3>
                    <p class="mb-0"><span class="room-name">Breakfast club</span> (<span class="start-time">09:00 am</span> to <span class="end-time">10:00 am</span>)</p>
                    <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 align-items-center">
                            <label class="col-md-4 mb-md-0">Check in time</label>
                            <div class="col pl-md-0">
                                <span class="flatpickr-arrow"></span>
                                <input type="text" class="form-control flatpickr flatpickr-times" name="checkIn" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label class="col-md-4 mb-md-0">Select publisher</label>
                            <div class="col pl-md-0">
                                <select class="form-control wide select2-custom publisher" name="publisher" data-placeholder="Select publisher">
                                    <option value="">Select publisher</option>
                                </select>
                            </div>
                        </div>
                        <div class=""><p class="font-weight-medium">Select children</p></div>
                        <div class="form-group row card-parent">
                            <div class="other-childs"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Check in</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="checkOutModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('mark-attendance.log.add-edit') }}" method="POST" class="form-horizontal check-in-form">
        @csrf
        <input type="hidden" name="_id" value="">
        <input type="hidden" name="activity" value="">
        <input type="hidden" name="date" value="">
        <input type="hidden" name="room" class="room" value="">
        <input type="hidden" name="child" class="child" value="">
        <input type="hidden" name="fromTime" class="fromTime" value="">
        <input type="hidden" name="toTime" class="toTime" value="">
        <input type="hidden" name="checkIn" class="checkIn" value="">
        <input type="hidden" name="old_publisher" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media">
                        <img src="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 child-name">John Wilson</h3>
                            <p class="mb-0"><span class="room-name">Breakfast club</span> (<span class="start-time">09:00 am</span> to <span class="end-time">10:00 am</span>)</p>
                            <p class="font-weight-medium"><span class="text-success">Check in: <span class="checkin-time">09:00 am</span></span> (<span class="spent-time">01:35:48</span>)</p>
                        </div>
                    </div>
                    <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 align-items-center">
                            <label class="col-md-4 mb-md-0">Check out time</label>
                            <div class="col pl-md-0">
                                <span class="flatpickr-arrow"></span>
                                <input type="text" class="form-control flatpickr flatpickr-times" name="checkOut" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row align-items-center publisher-section">
                            <label class="col-md-4 mb-md-0">Select publisher</label>
                            <div class="col pl-md-0">
                                <select class="form-control wide select2-custom publisher" name="publisher" data-placeholder="Select publisher">
                                    <option value="">Select publisher</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label class="col-md-4 mb-md-0">Dropped by</label>
                            <div class="col pl-md-0">
                                <input type="text" class="form-control dropped-by" name="droppedBy" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label class="col-md-4 mb-md-0">Collected by</label>
                            <div class="col pl-md-0">
                                <input type="text" class="form-control collected-by" name="collectedBy" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="other-childs"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger btn-min-width">Pause / Check out</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="checkInOutModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('mark-attendance.log.add-edit') }}" method="POST" class="form-horizontal check-in-form">
        @csrf
        <input type="hidden" name="_id" value="">
        <input type="hidden" name="activity" value="">
        <input type="hidden" name="date" value="">
        <input type="hidden" name="room" class="room" value="">
        <input type="hidden" name="child" class="child" value="">
        <input type="hidden" name="fromTime" class="fromTime" value="">
        <input type="hidden" name="toTime" class="toTime" value="">
        <input type="hidden" name="old_publisher" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media">
                        <img src="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 child-name">John Wilson</h3>
                            <p class="mb-0"><span class="room-name">Breakfast club</span> (<span class="start-time">09:00 am</span> to <span class="end-time">10:00 am</span>)</p>
                        </div>
                    </div>
                    <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 align-items-center">
                            <label class="col-md-4 mb-md-0">Check in time</label>
                            <div class="col pl-md-0">
                                <span class="flatpickr-arrow"></span>
                                <input type="text" class="form-control flatpickr flatpickr-times" name="checkIn" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label class="col-md-4 mb-md-0">Check out time</label>
                            <div class="col pl-md-0">
                                <span class="flatpickr-arrow"></span>
                                <input type="text" class="form-control flatpickr flatpickr-times" name="checkOut" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row align-items-center publisher-section">
                            <label class="col-md-4 mb-md-0">Select publisher</label>
                            <div class="col pl-md-0">
                                <select class="form-control wide select2-custom publisher" name="publisher" data-placeholder="Select publisher">
                                    <option value="">Select publisher</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label class="col-md-4 mb-md-0">Dropped by</label>
                            <div class="col pl-md-0">
                                <input type="text" class="form-control dropped-by" name="droppedBy" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label class="col-md-4 mb-md-0">Collected by</label>
                            <div class="col pl-md-0">
                                <input type="text" class="form-control collected-by" name="collectedBy" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width btn-add">Add record for <span class="selected-date">01/06/2020</span></button>
                    <button type="submit" class="btn btn-success btn-min-width btn-update" style="display: none">Update hours</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="addSchemeHourModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{route('mark-attendance.scheme.add-edit')}}" method="POST" class="form-horizontal scheme-hour-form">
        @csrf
        <input type="hidden" name="child" class="child" value="">
        <input type="hidden" name="scheme" class="scheme" value="">
        <input type="hidden" name="date" class="selected-date" value="">
        <input type="hidden" name="utcOffset" class="utcOffset" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media">
                        <img src="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 child-name">John Wilson</h3>
                            <p class="mb-0"><span class="modal-action">Add</span> <span class="scheme-name">ECCE</span> 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">
                    <div class="">
                        <div class="form-group row align-items-center">
                            <label class="col-md-4 mb-md-0">Add hours</label>
                            <div class="col pl-md-0">
                                <span class="flatpickr-arrow"></span>
                                <input type="text" class="form-control flatpickr flatpickr-duration" name="time" value="" placeholder="" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width"><span class="modal-action">Add</span> hours</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="markAbsentSick" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('mark-attendance.mark.absent-sick') }}" method="POST" class="form-horizontal mark-absent-sick-form" enctype="multipart/form-data" autocomplete="off">
        @csrf
        <input type="hidden" class="child" name="child" value="">
        <input type="hidden" class="selected-date" name="date" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media">
                        <img src="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 child-name">Mark <span class="child-name">John</span> as absent/sick</h3>
                            <p class="mb-0"><span class="selected-date">11/06/2020</span></p>
                        </div>
                    </div>
                    <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="row form-group ">
                            <div class="col-md-12">
                                <label class="mb-3">Select reason</label>
                                <div>
                                    <div class="checkbox-tag danger d-inline-block">
                                        <input type="checkbox" class="checkbox" id="absent" name="reason" value="0" data-error="reason-error" checked>
                                        <label for="absent">Absent</label>
                                    </div>
                                    <div class="checkbox-tag danger d-inline-block">
                                        <input type="checkbox" class="checkbox" id="sick" name="reason" value="1" data-error="reason-error">
                                        <label for="sick">Sick</label>
                                    </div>
                                </div>
                                <div class="reason-error"></div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Your comments</label>
                                <textarea class="form-control" name="comment" value="" placeholder="Type your comments here…" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Supporting evidence</label>
                                <div class="col-12 px-0">
                                    <div class="upload-file">
                                        <i class="icon-cross"></i>
                                        <i class="icon-plus"></i>
                                        <i class="icon-pdf"></i>
                                        <img src="" class="icon-image" />
                                        <input type="file" name="image" class="image" data-error="uploadfile1-error">
                                        <input type="hidden" class="remove-image" name="removeEvidence" id="removeEvidence" value="0">
                                    </div>
                                    <span class="file-name"></span>
                                    <div class="uploadfile1-error"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <div class="checkbox big checkbox-pink mb-3 mb-xl-0">
                                    <input type="checkbox" class="input-validate parent-shared" name="requestReason" id="requestReason" value="1" checked data-error="shared-error">
                                    <label for="requestReason" class="pt-2">Request absence reason from parent</label>
                                </div>
                                <div class="shared-error"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width btn-add">Submit</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="updateMarkAbsentSick" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('mark-attendance.mark.absent-sick.update') }}" method="POST" class="form-horizontal mark-absent-sick-form" enctype="multipart/form-data" autocomplete="off">
        @csrf
        <input type="hidden" name="id" class="id">
        <input type="hidden" name="child" class="child">
        <input type="hidden" class="selected-date" name="date" value="">
        <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="modal-title mb-1"><span class="child-name">John Wilson</span> marked as <span class="reason">sick</span></h3>
                            <p class="mb-0"><span class="selected-date">11/06/2020</span></p>
                        </div>
                    </div>
                    <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="row form-group ">
                            <div class="col-md-12">
                                <label class="mb-3">Select reason</label>
                                <div>
                                    <div class="checkbox-tag danger d-inline-block">
                                        <input type="checkbox" class="checkbox" id="absent1" name="reason" value="0" data-error="reason-error">
                                        <label for="absent1">Absent</label>
                                    </div>
                                    <div class="checkbox-tag danger d-inline-block">
                                        <input type="checkbox" class="checkbox" id="sick1" name="reason" value="1" data-error="reason-error">
                                        <label for="sick1">Sick</label>
                                    </div>
                                </div>
                                <div class="reason-error"></div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Your comments</label>
                                <textarea class="form-control" name="comment" value="" placeholder="Type your comments here…"  rows="5"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Supporting evidence</label>
                                <div class="col-12 px-0">
                                    <div class="upload-file">
                                        <i class="icon-cross"></i>
                                        <i class="icon-plus"></i>
                                        <i class="icon-pdf"></i>
                                        <img src="" class="icon-image" />
                                        <input type="file" name="image" class="image" data-error="uploadfile-error">
                                        <input type="hidden" class="remove-image" name="removeEvidence" value="0">
                                    </div>
                                    {{-- <span class="file-name"></span> --}}
                                    <div class="uploadfile-error"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <div class="checkbox big checkbox-pink mb-3 mb-xl-0">
                                    <input type="checkbox" class="input-validate parent-shared" name="requestReason" id="requestReason1" value="1" checked data-error="shared-error">
                                    <label for="requestReason1" class="pt-2">Request absence reason from parent</label>
                                </div>
                                <div class="shared-error"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Save changes</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="viewMarkAbsentSick" 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="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child">
                    <div class="media-body media-right">
                        <h3 class="modal-title mb-1"><span class="child-name">John</span></h3>
                        <p class="mb-0"><span class="selected-date">11/06/2020</span></p>
                    </div>
                </div>
                <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="row">
                        <div class="col-md-12 form-group">
                            <p class="mb-0 font-size-16">Your comment: <span class="font-weight-medium comment">I spoke to John’s parent and she said that he was having fever in the morning.</span></p>
                        </div>
                    </div>
                    <div class="form-group row" style="display: none">
                        <div class="col-md-12">
                            <div class="col-12 px-0">
                                <div class="upload-file">
                                    <i class="icon-pdf"></i>
                                    <img src="" class="icon-image" />
                                </div>
                                <span class="file-name"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="font-size-16 parent-comment">Parent’s comment isn’t requested.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success btn-remove-absent-sick" data-id=""><span class="child-name">John</span> was not absent/sick</button>
                <button type="button" class="btn btn-pink btn-edit-absent-sick" data-id="">Edit details</button>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-medium fade" id="addChildrenSchedule" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('schedule.children.add') }}" method="post" class="form-horizontal add-schedule-children-form">
        @csrf
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media single-child" style="display: none;">
                        <img src="" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 child-name" id="">John Wilson</h3>
                            <p class="mb-0">You can create a new schedule.</p>
                        </div>
                    </div>
                    <div class="media all-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1" id="">Create schedule</h3>
                            <p class="mb-0">For children of <span class="room-name"></span></p>
                        </div>
                    </div>
                    <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="custom-control-inline mb-3">
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" id="customRadio111" name="dayType" class="day-type custom-control-input" checked value="1">
                                <label class="custom-control-label" for="customRadio111">Weekdays</label>
                            </div>
                            <div class="custom-control custom-radio mb-2">
                                <input type="radio" id="customRadio112" name="dayType" class="day-type custom-control-input" value="2">
                                <label class="custom-control-label" for="customRadio112">Calendar dates</label>
                            </div>
                        </div>
                        <div class="form-group weekday-option">
                            <div class="col-12 px-0">
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day11" value="1" data-error="cdays-error">
                                    <label for="day11">M</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day12" value="2" data-error="cdays-error">
                                    <label for="day12">T</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day13" value="3" data-error="cdays-error">
                                    <label for="day13">W</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day14" value="4" data-error="cdays-error">
                                    <label for="day14">T</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day15" value="5" data-error="cdays-error">
                                    <label for="day15">F</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day16" value="6" data-error="cdays-error">
                                    <label for="day16">S</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day17" value="0" data-error="cdays-error">
                                    <label for="day17">S</label>
                                </div>
                            </div>
                            <div class="cdays-error"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 form-group weekday-option">
                                <label class="">Select start date</label>
                                <div class="position-relative">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input-start startDate" name="startDate" placeholder="Select date" value="">
                                </div>
                            </div>
                            <div class="col-md-6 form-group calendar-option" style="display:none;">
                                <label class="">Select dates</label>
                                <div class="flatpickr-custom">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control" name="dates" placeholder="Select dates" value="" data-error="cdates-error" data-input>
                                    <span class="input-button" title="toggle" data-toggle>Select days</span>
                                </div>
                                <div class="cdates-error"></div>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="">Select room</label>
                                <select class="form-control wide" data-plugin="customselect" name="room" data-placeholder="Select room">
                                    <option value="">Select room</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row time-group">
                                    <div class="col-md-6 form-group">
                                        <label>Start time</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-times fromTime" name="fromTime" value="" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label>End time</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-times toTime" name="toTime" value="" placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <label class="col all-child">List of children in <span class="room-name"></span></label>
                            <label class="col single-child" style="display:none;">Select children to set same schedule</label>
                            <div class="col-md-12 children-list"></div>
                            <div class="col-md child-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-block">
                    <div class=""><button type="submit" class="btn btn-success btn-min-width">Create schedule</button></div>
                    <div class="col-12 px-0 mt-4 weekday-option start-date-option" style="display: none;">
                        <p class="text-danger mb-0">Note: This schedule will be applied to all future selected weekdays after <span class="start-date">{date}</span>.</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="checkInOutQRCodeModal" 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">
                <h3 class="modal-title mb-0">Scan this QR code in the parent app for check-in and check-out</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-0 pb-5">
                <div>
                    <img src="" class="img-qr-code">
                </div>
                <a href="#" class="btn btn-success btn-min-width btn-qr-code" download="QRCode">Download</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<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/sweetalert/sweetalert.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 type="text/javascript">var getSchedule = "{{route('mark-attendance.schedules')}}",getRooms = "{{route('mark-attendance.rooms')}}", deleteLog = "{{route('mark-attendance.log.delete')}}", visibility_change_url = "{{route('mark-attendance.settings')}}", sign_change_url = "{{route('mark-attendance.signature.settings')}}", qr_code_image = "{{ $init->qrCode ?? '' }}"; </script>
<script defer src="{{ Helper::assets('assets/js/pages/AttendanceDataManager.js') }}?v=2" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/mark-attendance.js') }}?{{time()}}" type="text/javascript"></script>
@endsection