@extends('layouts.vertical')

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

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-md">
        <h4 class="mb-1 mt-0 font-weight-medium">Rooms</h4>
        <p class="mb-0"><a href="https://intercom.help/teachkloud/en/articles/5241999-adding-and-managing-rooms" target="_blank">Click here</a> to learn how to edit, delete and manage rooms. Watch our short demo on how to use the TeachKloud: Childcare App <a href="https://intercom.help/teachkloud/en/articles/5472770-navigating-the-teacher-app" target="_blank">here</a>.</p>
    </div>
    <div class="col-md-auto ml-auto">
        <div class="form-inline float-md-right mt-3 mt-md-0">
            <a href="{{ route('children.create') }}" class="btn btn-pink btn-min-width mr-2 mb-2 mb-sm-0">Add child</a>
            <a href="{{ route('room.add') }}" class="btn btn-success btn-min-width mb-2 mb-sm-0">Add room</a>
        </div>
    </div>
</div>
@endsection

@section('content')
@if(isset($rooms) && !empty($rooms))
@foreach ($rooms as $room)
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="">
                    <div class="dropdown align-self-center float-right">
                        <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('room.edit', ['id' => $room->_id]) }}" class="dropdown-item">Edit room</a>
                            <div class="dropdown-divider"></div>
                            @if(isset($room->childList) && !empty($room->childList))
                            <a href="javascript:;" data-href="{{ route('room.remove', ['id' => $room->_id]) }}" data-room="{{$room->name}}" class="dropdown-item text-danger btn-before-remove-room">Remove room</a>
                            @else
                            <a href="javascript:;" data-href="{{ route('room.destroy', ['id' => $room->_id, 'utcOffset' => 'utcOffset']) }}" data-room="{{$room->name}}" data-id="{{$room->_id}}" class="dropdown-item text-danger btn-remove-single-room">Remove room</a>
                            @endif
                        </div>
                    </div>
                    <h5 class="font-size-18 pb-1">{{$room->name}}</h5>
                    <div class="font-size-16 pb-3">{{$room->description}}</div>
                    @if(isset($room->childList) && empty($room->childList))
                    <a href="{{ route('children.create', ['room' => $room->_id]) }}" class="btn btn-pink btn-min-width">Add child</a>
                    @endif
                </div>
                @if(isset($room->childList) && !empty($room->childList))
                <div class="mt-4">
                    <div class="childs row">
                        @foreach ($room->childList as $child)
                        <div class="col text-center d-inline-block child-item mb-sm-3 mb-2">
                            <a href="{{ route('children.profile', ['id' => $child->_id]) }}">
                                <div class="child-image position-relative">
                                    @if(\Carbon\Carbon::parse($child->dob)->isBirthday())
                                    <span class="custom-icon custom-icon-purple icon-cake" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="It’s his birthday today"></span>
                                    @endif
                                    {{-- <span class="custom-icon custom-icon-pink icon-alert" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Needs special attention"></span> --}}
                                    <img src="{{ isset($child->profileImage) ? $child->profileImage : '' }}" class="img-child medium" alt="child" />
                                    <h5 class="mt-2 mb-0 font-size-18">{{$child->name}}</h5>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endforeach
@endif
<div class="modal fade" id="removeRoomModal" 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="">Remove <span class="room-name"></span></h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="">Are you sure you want to delete this room?</p>
            </div>
            <div class="modal-footer align-items-start">
                <a href="javascript:;" class="btn btn-success">Yes</a>
                <button type="button" class="btn btn-success" data-dismiss="modal" >No</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="restoreRoomModal" 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="">Remove <span class="room-name"></span></h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="">Few children from this room are scheduled to be deleted within 30 days. By deleting this room, you will not be able to restore those children back. Do you want proceed?</p>
            </div>
            <div class="modal-footer align-items-start">
                <a href="javascript:;" class="btn btn-success">Yes</a>
                <button type="button" class="btn btn-success" data-dismiss="modal" >No</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="beforeRoomModal" 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="">PLEASE READ BEFORE PROCEEDING</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="">If a room is deleted, it will delete attendance and other important data associated with that room. Once deleted, this information cannot be retrieved. We strongly recommend archiving children, rather than deleting rooms, to avoid losing data. To archive a child, go to, "Children > List of Children; using the three grey dots next to each child you wish to archive, select "archive." Do you wish to proceed in your deletion request?</p>
            </div>
            <div class="modal-footer align-items-start">
                <button type="button" class="btn btn-success" data-dismiss="modal" >No, go back</button>
                <a href="javascript:;" class="btn btn-success">Yes, continue with deletion</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script>
    var restorableChildUrl = "{{ route('room.restorable-children') }}";
    $(document).ready(function() {
        $(document).on('click','.btn-before-remove-room', function() {
            $("#beforeRoomModal").find(".modal-footer a").attr('href', $(this).attr('data-href'));
            $("#beforeRoomModal").modal({show:true});
        })
    });
</script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/js/pages/room.js') }}?v=4"></script>
@endsection