@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" />
<style>
    .swal-text {
        white-space: pre-line;
    }
</style>
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-12">
        <h4 class="mb-1 mt-0 font-weight-medium">Children</h4>
        <p class="mb-0">When a child is removed, TeachKloud holds it in the list of removed children for 30 days before permanently deleting it. WIthin the 30 day timeframe, you can restore the removed child. After this time period, TeachKloud will automatically delete the removed children permanently. This action cannot be undone.</p>
    </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">Removed child list</div>
                <table id="datatable" class="table table-striped dt-responsive">
                    <thead>
                        <tr>
                            <th>Children name</th>
                            <th>Assigned room</th>
                            <th>Gender</th>
                            <th>Date of birth</th>
                            <th>Deleted on</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($children) && !empty($children))
                        @foreach($children as $child)
                        <tr>
                            <td class="text-sm-left text-center">
                                <img src="{{ $child->profileImage }}" class="img-meal small mr-2" alt="child" />
                                <span>{{ $child->name }}</span>
                            </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>{{ \Carbon\Carbon::parse($child->deletedAt)->format('d/m/Y') }}</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="javascript:void(0);" class="dropdown-item restore-child" data-sub="{{ isset($child->deleteMetadata) && isset($child->deleteMetadata->archived) && $child->deleteMetadata->archived != true && isset($child->subManagedBy) && $child->subManagedBy == 'm1' ? 1 : 0 }}" data-archived="{{ isset($child->deleteMetadata) && isset($child->deleteMetadata->archived) && $child->deleteMetadata->archived == true ? 1 : 0 }}" data-id="{{ $child->_id }}">Restore</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item text-danger remove-child" data-id="{{ $child->_id }}">Delete immediately</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div> <!-- end row -->
<div class="modal fade" id="restoreChildModal" 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">
                <h3 class="modal-title mb-1" id="">Restore child</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="">Do you want parents or your childcare service to pay the TeachKloud subscription, for this child profile?</p>
            </div>
            <div class="modal-footer align-items-start">
                <a href="javascript:;" class="btn btn-success btn-restore-child" data-type="m2">Parent pays</a>
                <a href="javascript:;" class="btn btn-success btn-restore-child" data-type="m1">Childcare pays</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/datatables/jquery.dataTables.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script> var restoreChildUrl = "{{ route('children.restore') }}", removeChildUrl = "{{ route('children.remove') }}"; </script>
<script defer src="{{ Helper::assets('assets/js/pages/children-removed.js') }}?v={{time()}}"></script>
@endsection