@extends('layouts.vertical')

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

@php
$sroom = "";
$is_approved = false;
$is_update = false;
if(app('request')->input('room')){
    $sroom = app('request')->input('room');
}
if(isset($child->approved) && $child->approved == true){
    $is_approved = true;
}
if(isset($child)){
    $is_update = true;
}
$relations = config('constant.relation');
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-0 mt-0 font-weight-medium">Child registration</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ route('occupancy.waiting-list.child.approve') }}" method="post" class="add-child-form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" value="{{ $child->_id }}">
            <div class="card">
                <div class="card-body pb-3">
                    <div class="add-to-room">
                        <h5 class="font-size-18 pb-3">Child details</h5>
                        <div class="row mb-2">
                            <div class="col-lg-6 order-lg-1 order-2">
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Name of child</label>
                                    <div class="col-xl-7">
                                        <input type="text" class="form-control" name="name" value="{{ $is_update ? $child->name : old('name') }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Date of birth</label>
                                    <div class="col-xl-7">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input" name="dob" value="{{ $is_update && isset($child->dob) && $child->dob != "" ? \Carbon\Carbon::parse($child->dob)->format('d/m/Y') :  old('dob') }}" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Gender</label>
                                    <div class="col-xl-7">
                                        <select class="form-control wide" data-plugin="customselect" name="gender" data-placeholder="Select gender">
                                            <option value="">Select gender</option>
                                            <option value="0" {{ ($is_update && $child->gender == 0) ||  old('name') == 0 ? 'selected' : '' }}>Male</option>
                                            <option value="1" {{ ($is_update && $child->gender == 1) ||  old('name') == 1 ? 'selected' : '' }}>Female</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 order-lg-2 order-1">
                                <div class="form-group row align-items-center justify-content-center upload-image">
                                    <div class="col-xl-4 col-auto">
                                        <div class="d-inline-block school-logo-box mr-md-4 mr-2 mb-3 mb-md-2 p-0">
                                            <img src="{{ isset($child->profileImage) ? $child->profileImage : Helper::assets('assets/images/smily.png') }}" data-src="{{ Helper::assets('assets/images/smily.png') }}" class="img-fluid">
                                        </div>
                                    </div>
                                    <div class="col-xl-8 col-auto">
                                        <button type="button" class="btn btn-pink mr-2 mb-2 btn-upload">Upload new image</button>
                                        <button class="btn btn-danger mb-2 btn-remove-image" type="button">Remove</button>
                                        <input type="file" class=" input-validate" name="profileImage" id="profileImage">
                                        <input type="hidden" class="input-remove-image" name="removeProfileImage" >
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Expected start date</label>
                                    <div class="col-xl-7">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input-2 expectedStartDate" name="joinOnDate" value="{{$is_update && isset($child->joinOnDate) ? \Carbon\Carbon::parse($child->joinOnDate)->format('d/m/Y') : ""}}" placeholder="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row border-bottom my-5 mx-n5"></div>
                        <h5 class="font-size-18 pb-3">Parent/guardian details</h5>
                        <div class="section-repeater" data-startingIndex="1" data-first-item-remove="false">
                            @if(isset($child->parents) && !empty($child->parents))
                            @php $pcount = 0; @endphp
                            @foreach($child->parents as $parent)
                            <div class="r-group">
                                <input type="hidden" class="id" name="parents[{{$pcount}}][_id]" value="{{ $parent->_id }}">
                                <div class="row">
                                    <div class="col-md order-2 order-md-1">
                                        <div class="row">
                                            <div class="col-xl-6">
                                                <div class="form-group row">
                                                    <label class="col-xl-4 col-md-2 col-auto col-form-label">Name</label>
                                                    <div class="col-xl-8 col-lg-10">
                                                        <div class="row">
                                                            <div class="col-md-6 mb-3 mb-md-0">
                                                                <input type="text" class="form-control parent-firstname" name="parents[{{$pcount}}][firstName]" placeholder="First name" value="{{ isset($parent->firstName) ? $parent->firstName : '' }}">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <input type="text" class="form-control parent-lastname" name="parents[{{$pcount}}][lastName]" placeholder="Last name" value="{{ isset($parent->lastName) ? $parent->lastName : '' }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6">
                                                <div class="form-group row">
                                                    <label class="col-xl-4 col-md-2 pl-xl-4 col-auto col-form-label">Email</label>
                                                    <div class="col-xl-8 col-lg-10">
                                                        <input type="text" class="form-control parent-email" name="parents[{{$pcount}}][email]" value="{{ isset($parent->email) ? $parent->email : '' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-2 col-auto col-form-label">Street address</label>
                                                    <div class="col-lg-10">
                                                        <input type="text" class="form-control parent-address" name="parents[{{$pcount}}][address]" value="{{ isset($parent->address) ? $parent->address : '' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">Relationship to child</label>
                                                    <div class="col-lg-8">
                                                        <select class="form-control parent-relation" data-plugin="customselect" name="parents[{{$pcount}}][relation]">
                                                            <option value="">Select relationship</option>
                                                            @if(isset($relations) && !empty($relations))
                                                            @foreach ($relations as $relation)
                                                                <option value="{{ $relation }}" {{ isset($parent->relation) && $parent->relation == $relation ? 'selected' : '' }}>{{$relation}}</option>
                                                            @endforeach
                                                            @endif
                                                            <option value="-1" {{ isset($parent->relation) && !in_array($parent->relation,$relations) ? 'selected' : '' }}>Other, please specify</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 other-ralation" style="display:{{ isset($parent->relation) && !in_array($parent->relation,$relations) ? 'block' : 'none' }}">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">Other relationship to child</label>
                                                    <div class="col-lg-8">
                                                        <input type="text" class="form-control parent-other-relation" name="parents[{{$pcount}}][other_relation]" value="{{ isset($parent->relation) && !in_array($parent->relation,$relations) ? $parent->relation : '' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 pl-lg-4 col-auto col-form-label">Phone number</label>
                                                    <div class="col-lg-8">
                                                        <input type="number" min="0" class="form-control parent-phone" name="parents[{{$pcount}}][phone]" value="{{ isset($parent->phone) ? $parent->phone : '' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto order-1 order-md-2 ml-auto input-group-append align-items-center" style="visibility:hidden;">
                                        <span class="input-group-btn mb-md-5">
                                            <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row border-bottom my-5 mx-n5"></div>
                            </div>
                            @php $pcount++; @endphp
                            @endforeach
                                @else
                            <div class="r-group">
                                <div class="row">
                                    <div class="col-md order-2 order-md-1">
                                        <div class="row">
                                            <div class="col-xl-6">
                                                <div class="form-group row">
                                                    <label class="col-xl-4 col-md-2 col-auto col-form-label">Name</label>
                                                    <div class="col-xl-8 col-lg-10">
                                                        <div class="row">
                                                            <div class="col-md-6 mb-3 mb-md-0">
                                                                <input type="text" class="form-control parent-firstname" name="parents[0][firstName]" placeholder="First name" value="">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <input type="text" class="form-control parent-lastname" name="parents[0][lastName]" placeholder="Last name" value="">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6">
                                                <div class="form-group row">
                                                    <label class="col-xl-4 col-md-2 pl-xl-4 col-auto col-form-label">Email</label>
                                                    <div class="col-xl-8 col-lg-10">
                                                        <input type="text" class="form-control parent-email" name="parents[0][email]" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-2 col-auto col-form-label">Street address</label>
                                                    <div class="col-lg-10">
                                                        <input type="text" class="form-control parent-address" name="parents[0][address]" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">Relationship to child</label>
                                                    <div class="col-lg-8">
                                                        <select class="form-control parent-relation" data-plugin="customselect" name="parents[0][relation]">
                                                            <option value="">Select relationship</option>
                                                            @if(isset($relations) && !empty($relations))
                                                            @foreach ($relations as $relation)
                                                                <option value="{{ $relation }}">{{$relation}}</option>
                                                            @endforeach
                                                            @endif
                                                            <option value="-1">Other, please specify</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 other-ralation" style="display:none">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">Other relationship to child</label>
                                                    <div class="col-lg-8">
                                                        <input type="text" class="form-control parent-other-relation" name="parents[0][other_relation]" value="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group row">
                                                    <label class="col-lg-4 pl-lg-4 col-auto col-form-label">Phone number</label>
                                                    <div class="col-lg-8">
                                                        <input type="number" min="0" class="form-control parent-phone" name="parents[0][phone]" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto order-1 order-md-2 ml-auto input-group-append align-items-center" style="visibility:hidden;">
                                        <span class="input-group-btn mb-md-5">
                                            <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row border-bottom my-5 mx-n5"></div>
                            </div>
                            @endif
                            <div class="pt-5 btn-div">
                                <button type="button" class="btn btn-success btn-min-width r-btnAdd">Add another parent or guardian</button>
                            </div>
                        </div>
                        <div class="row border-bottom my-5 mx-n5"></div>
                        <h5 class="font-size-16 pb-3">Preferred attendance</h5>
                        <div class="row mb-4">
                            @if(isset($child->preferredAttendance) && !empty($child->preferredAttendance))
                                @foreach($child->preferredAttendance as $day)
                                @php $selectedDay = config('constant.collection_days')[$day->day]; $periods = []; @endphp
                                @foreach($day->periods as $period)
                                @php
                                   $fromTime =  $toTime = "";
                                    if(isset($period->fromTime)){
                                        $fromTime = \Carbon\Carbon::createMidnightDate(date('Y-m-d'))->addMinutes($period->fromTime)->format('h:i A');
                                    }
                                    if(isset($period->toTime)){
                                        $toTime = \Carbon\Carbon::createMidnightDate(date('Y-m-d'))->addMinutes($period->toTime)->format('h:i A');
                                    }
                                $periods[] = $fromTime . " to " . $toTime;
                                @endphp
                                @endforeach
                                <div class="col-md-4">
                                    <p>{{$selectedDay}}: {{implode(", ", $periods)}}</p>
                                </div>
                                @endforeach
                            @endif
                        </div>
                        @if(isset($child->wlQuestions) && !empty($child->wlQuestions))
                            <div class="row border-bottom my-5 mx-n5"></div>
                            @foreach($child->wlQuestions as $question)
                            <div class="mb-4">
                                <h5 class="font-size-16 pb-2">{{$question->question}}</h5>
                                <p>{{$question->answer}}</p>
                            </div>
                            @endforeach
                        @endif
                        @if(isset($child->additionalNote) && !empty($child->additionalNote))
                        <div class="row border-bottom my-5 mx-n5"></div>
                        <div class="mb-0">
                            <h5 class="font-size-16 pb-2">Additional Information</h5>
                            <p>{{$child->additionalNote}}</p>
                        </div>
                        @endif
                        @if($is_approved)
                        <div class="row border-bottom my-5 mx-n5"></div>
                        <div class="mb-4">
                            <h5 class="font-size-16 pb-2">Remarks (Only for school)</h5>
                            <textarea class="form-control" name="remark" placeholder="Type your notes here…">{{$is_update && isset($child->approvalRemark) ? $child->approvalRemark : ""}}</textarea>
                        </div>
                        @else
                            <input type="hidden" class="form-control notifyParent" name="notifyParent" value="0" placeholder="">
                            <input type="hidden" class="form-control remark" name="remark" value="" placeholder="">
                        @endif
                        <input type="hidden" class="form-control room" name="room" value="{{ $is_update && isset($child->room) ? $child->room->_id : "" }}" placeholder="">
                    </div>
                </div>
            </div>
            <div class="my-5">
                <input type="hidden" class="" name="appoved" value="{{ $is_approved ? 1 : 0 }}" placeholder="">
                @if($is_approved)
                <button type="submit" class="btn btn-success mr-2">Save changes</button>
                @else
                <input type="hidden" class="" name="saved" value="0" placeholder="">
                <button type="button" class="btn btn-success mr-2 btn-save">Save changes</button>
                <button type="button" class="btn btn-success mr-2 btn-approve">Approve</button>
                @endif

                @if((isset($child->approved) && $child->approved == false && !isset($child->approvalDate)) || (isset($child->approved) && $child->approved == true))
                <button type="button" class="btn btn-danger mr-2 btn-decline">Decline</button>
                @endif
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="approveChildModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="" class="form-horizontal approve-form">
        <div class="modal-dialog 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" id="">{{ $is_update ? $child->name : "" }}</h3>
                            <p class="mb-0">Form submitted on <span class="submited-date">{{$is_update && $child->joinOnDate ? \Carbon\Carbon::parse($child->joinOnDate)->format('d/m/Y') : ""}}</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">
                            <label>Select room</label>
                            <select class="form-control wide" data-plugin="customselect" name="room" data-placeholder="Select room">
                                <option value="">Select room</option>
                                @if(isset($rooms) && !empty($rooms))
                                @foreach ($rooms as $room)
                                <option value="{{$room->_id}}" {{ old('room') == $room->_id || ( $is_update && isset($child->room) && $child->room->_id == $room->_id) ? 'selected' : '' }}>{{$room->name}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Joins on the</label>
                            <div class="position-relative">
                                <span class="flatpickr-arrow"></span>
                                <input type="text" class="form-control flatpickr flatpickr-input-2" name="joinOnDate" value="{{$is_update && isset($child->joinOnDate) ? \Carbon\Carbon::parse($child->joinOnDate)->format('d/m/Y') : ""}}" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="custom-control-inline">
                                <div class="custom-control custom-radio mb-2 mr-3">
                                    <input type="radio" id="customRadio1" name="notifyParent" value="1" class="custom-control-input" checked>
                                    <label class="custom-control-label" for="customRadio1">Notify parent</label>
                                </div>
                                <div class="custom-control custom-radio mb-2">
                                    <input type="radio" id="customRadio2" name="notifyParent" value="0" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadio2">Do not notify parent</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Remarks (Only for school)</label>
                            <textarea rows="4" class="form-control" name="remark" placeholder="Type your notes here…"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-block">
                    <button type="button" class="btn btn-success btn-child-approve">Approve</button>
                    <p class="text-danger mt-4">Note: Choose to notify the parent if you would like TeachKloud to send the parent an email notifying them of the status of their child’s registration. If you do not wish to notify the parent through an automatic email from TeachKloud, select ‘Do not notify parent.</p>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal fade" id="declineChildModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('occupancy.waiting-list.child.decline') }}" class="form-horizontal decline-form">
        <input type="hidden" name="id" class="id" value="{{$child->_id}}">
        <div class="modal-dialog 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" id="">{{ $is_update ? $child->name : "" }}</h3>
                            <p class="mb-0">Form submitted on <span class="submited-date">{{$is_update && $child->joinOnDate ? \Carbon\Carbon::parse($child->joinOnDate)->format('d/m/Y') : ""}}</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">
                            <label>Enter reason</label>
                            <textarea rows="4" class="form-control" name="reason" placeholder="Type your reason here…"></textarea>
                        </div>
                        <div class="form-group">
                            <div class="custom-control-inline">
                                <div class="custom-control custom-radio mb-2 mr-3">
                                    <input type="radio" id="customRadio1-1" name="notifyParent" value="1" class="custom-control-input" checked>
                                    <label class="custom-control-label" for="customRadio1-1">Notify parent</label>
                                </div>
                                <div class="custom-control custom-radio mb-2">
                                    <input type="radio" id="customRadio2-1" name="notifyParent" value="0" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadio2-1">Do not notify parent</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Remarks (Only for school)</label>
                            <textarea rows="4" class="form-control" name="remark" placeholder="Type your notes here…"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-block">
                    <button type="button" class="btn btn-danger btn-child-decline">Decline</button>
                    <p class="text-danger mt-4">Note: Choose to notify the parent if you would like TeachKloud to send the parent an email notifying them of the status of their child’s registration and the reason provided by you in this section. If you do not wish to notify the parent through an automatic email from TeachKloud, select ‘Do not notify parent.</p>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script>
    var backUrl = "{{ route('occupancy') }}";
</script>
<script defer src="{{ Helper::assets('assets/js/pages/add-child-waiting.js') }}" type="text/javascript"></script>
@endsection