@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-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">Remove {{$room->name}}</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ route('room.move-children-remove') }}" method="post" class="remove-child-form">
            @csrf
            <input type="hidden" name="oldRoom" id="roomId" value="{{ $room->_id }}">
            <div class="card">
                <div class="card-body">
                    <h5 class="font-size-18 pb-1">Move the children</h5>
                    <div class="font-size-16 pb-4">Move the children to another room before removing {{$room->name}}.</div>
                    <div class="row">
                    @if(isset($children) && !empty($children))
                    @php $child_count = 0; @endphp
                    @foreach($children as $child)
                        <div class="col-md-6 mb-md-0 mb-3">
                            <div class="childs row align-items-center">
                                <div class="col-auto text-center d-inline-block child-item mb-md-0 mb-3 mx-auto mx-md-0">
                                    <label>
                                        <div class="child-image position-relative">
                                            <img src="{{ $child->profileImage }}" class="img-child medium" alt="child" />
                                            <h5 class="mt-2 mb-0 font-size-18">{{ $child->name }}</h5>
                                        </div>
                                    </label>
                                    <input type="hidden" name="childs[{{$child_count}}][_id]" value="{{ $child->_id }}">
                                </div>
                                <div class="col-md-7">
                                    <select class="form-control wide room" data-plugin="customselect" name="childs[{{$child_count}}][room]" data-placeholder="Select room">
                                        <option value="">Select room</option>
                                        @if(isset($rooms) && !empty($rooms))
                                        @foreach ($rooms as $room1)
                                        <option value="{{$room1->_id}}" {{ $child->room->_id == $room1->_id ? 'selected' : '' }}>{{$room1->name}}</option>  
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="mt-3">
                                        <div class="checkbox big checkbox-pink">
                                            <input type="checkbox" class="checkbox change-schedule" name="childs[{{$child_count}}][changeSchedule]" id="child-{{$child->_id}}-1" value="1">
                                            <label for="child-{{$child->_id}}-1">Change all attendance schedules of {{$room->name}} to <span class="room-name">{{$room->name}}</span></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @php $child_count++; @endphp
                        @if($child_count%2 == 0)
                        </div>
                        <div class="row border-bottom my-3 mx-n5"></div>
                        <div class="row">
                        @endif
                    @endforeach
                    @endif
                    </div>
                </div>
            </div>
            <div class="my-5">
                <button type="button" class="btn btn-success btn-min-width mr-2 btn-remove-room mb-sm-0 mb-2">Move children and remove {{$room->name}}</button>
                <a href="{{ route('room') }}" class="btn btn-danger mr-2">Cancel</a>
            </div>
        </form>
    </div>
</div>
<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 {{$room->name}}</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25.879" height="25.879" viewBox="0 0 25.879 25.879">
                        <g id="prefix__plus" transform="rotate(45 6.47 15.619)">
                            <g id="prefix__Group_724" data-name="Group 724">
                                <path id="prefix__Path_906" fill="#fff" d="M10.291 8.008V0H8.008v8.008H0v2.283h8.008V18.3h2.283v-8.009H18.3V8.008z" data-name="Path 906"/>
                            </g>
                        </g>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <p class="d-none not-moved">You have not moved <span class="room-child">0</span> children. If you remove this room then the <span class="room-child">0</span> children will be deleted permanently.</p>
                <p class="d-block moved">Are you sure you want to delete this room?</p>
            </div>
            <div class="modal-footer align-items-start">
                <button type="button" class="btn btn-success btn-yes">Yes</button>
                <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 {{$room->name}}</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25.879" height="25.879" viewBox="0 0 25.879 25.879">
                        <g id="prefix__plus" transform="rotate(45 6.47 15.619)">
                            <g id="prefix__Group_724" data-name="Group 724">
                                <path id="prefix__Path_906" fill="#fff" d="M10.291 8.008V0H8.008v8.008H0v2.283h8.008V18.3h2.283v-8.009H18.3V8.008z" data-name="Path 906"/>
                            </g>
                        </g>
                    </svg>
                </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">
                <button type="button" class="btn btn-success btn-yes">Yes</button>
                <button type="button" class="btn btn-success" data-dismiss="modal" >No</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script>
    var restorableChildUrl = "{{ route('room.restorable-children') }}";
</script>
<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') }}"></script>
<script defer src="{{ Helper::assets('assets/js/pages/room.js') }}?v=2"></script>
@endsection