@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/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/datatables/buttons.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" />
<style>
.swal-text {
    white-space: pre-line;
}
@media(min-width: 768px) {
    .btn-export {
        margin-top: -15px;
    }
}
</style>
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-md">
        <h4 class="mb-1 mt-0 font-weight-medium">Children</h4>
        <p class="mb-0"><a href="https://intercom.help/teachkloud/en/articles/5242696-enrolment-and-child-registration-school-interface" target="_blank">Click here</a> to learn how to manage the enrolment forms/child profiles.</p>
    </div>
    <div class="col-md-auto">
        <div class="form-inline float-md-right mt-3 mt-md-0">
            <div class="btn-group">
                <a href="{{ route('children.create') }}" class="btn btn-success btn-min-width">Add child</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="font-size-16 pb-3 d-none table-title">List of children <p class="font-size-14 text-danger">We strongly recommend archiving profiles of children who have left your service. If you choose to "Permanently delete" any child profile, the profile cannot be retrieved after the 30 day period. If within a 30 day period, it can be retrieved from Children > List of Removed Children</p></div>
                <table id="datatable" class="table table-striped dt-responsive">
                    <thead>
                        <tr>
                            <th data-priority="1">Children name</th>
                            <th>Assigned room</th>
                            <th>Gender</th>
                            <th>Date of birth</th>
                            <th>Educator name</th>
                            <th>Parent or Guardian</th>
                            <th>Parents phone number</th>
                            <th>Parents email</th>
                            <th>Chick / Other ID</th>
                            <th data-priority="2"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($children) && !empty($children))
                        @foreach($children as $child)
                        <tr>
                            <td>
                                <div class="media">
                                    <img src="{{ $child->profileImage }}" class="img-meal small mr-2" alt="child" />
                                    <div class="media-body">{{ $child->name }}</div>
                                </div>
                            </td>
                            <td>{{ isset($child->room) ? $child->room->name : 'N/A' }}</td>
                            <td>{{ $child->gender == 0 ? "Male" : "Female" }}</td>
                            <td>{{ \Carbon\Carbon::parse($child->dob)->format('d/m/Y') }}</td>
                            <td>
                                @if(isset($child->roomTeachers) && !empty($child->roomTeachers))
                                @php $roomTeachers = []; @endphp
                                @foreach($child->roomTeachers as $teacher)
                                    @php $roomTeachers[] = $teacher->firstName . ' ' . $teacher->lastName; @endphp
                                @endforeach
                                {{ implode(', ', $roomTeachers) }}
                                @endif
                            </td>
                            <td>
                                @if(isset($child->parents) && !empty($child->parents))
                                @php $parents = []; @endphp
                                @foreach($child->parents as $parent)
                                    @php $parents[] = ((isset($parent->firstName) && !empty($parent->firstName)) || (isset($parent->lastName) && !empty($parent->lastName))) ? @$parent->firstName . ' ' . @$parent->lastName : '-'; @endphp
                                @endforeach
                                {!! implode('<br/>', $parents) !!}
                                @endif
                            </td>
                            <td>
                                @if(isset($child->parents) && !empty($child->parents))
                                @php $parents = []; @endphp
                                @foreach($child->parents as $parent)
                                    @php $parents[] = (isset($parent->phone) && !empty($parent->phone)) ? @$parent->phone : '-'; @endphp
                                @endforeach
                                {!! implode('<br/>', $parents) !!}
                                @endif
                            </td>
                            <td>
                                @if(isset($child->parents) && !empty($child->parents))
                                @php $parents = []; @endphp
                                @foreach($child->parents as $parent)
                                    @php $parents[] = (isset($parent->email) && !empty($parent->email)) ? @$parent->email : '-'; @endphp
                                @endforeach
                                {!! implode('<br/>', $parents) !!}
                                @endif
                            </td>
                            <td>
                                {{ $child->otherId ?? "-" }}
                            </td>
                            <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">
                                        <a href="{{ route('children.profile', ['id' => $child->_id]) }}" class="dropdown-item">View child profile</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="{{ route('children.edit', ['id' => $child->_id]) }}" class="dropdown-item">Edit child profile</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item change-rooms" data-room="{{ isset($child->room) ? $child->room->_id : '' }}" data-id="{{ $child->_id }}" data-childName="{{ $child->name }}">Change room</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item archive-child" data-id="{{ $child->_id }}" data-subscription="{{ $child->subManagedBy ?? '' }}">Archive child</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item text-danger remove-child" data-id="{{ $child->_id }}">Permanently Delete Child Profile</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div> <!-- end row -->

<div class="modal fade" id="changeRoomsModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="" class="form-horizontal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Change room</h3>
                    <p class="mb-0">for <span class="child-name">Jose Freeman</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">
                            <label class="col-md-12 form-control-label">Select room</label>
                            <div class="col-md-12">
                                <select class="form-control wide change-room" 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}}">{{$room->name}}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-12 mt-3">
                                <div class="checkbox big checkbox-pink">
                                    <input type="checkbox" class="checkbox change-schedule" name="changeSchedule" id="child-1" value="1">
                                    <label for="child-1">Change all attendance schedules of <span class="selected-room-name"></span> to <span class="room-name"></span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-min-width btn-child-room-update">Update</button>
                </div>
            </div>
        </div>
    </form>
</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/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/datatables/dataTables.buttons.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/buttons.bootstrap4.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/buttons.html5.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script type="text/javascript"> var archiveChildUrl = "{{ route('children.archive') }}", removeChildUrl = "{{ route('children.remove') }}", changeChildRoomUrl = "{{ route('children.change-room') }}"; </script>
<script defer src="{{ Helper::assets('assets/js/pages/children.js') }}?{{time()}}" type="text/javascript"></script>
@endsection