@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" />
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
@endsection

@php $type = 1; @endphp
@if(isset($scheme->version) && $scheme->version == 2)
    @php $type = 2; @endphp
@endif

@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">{{ $type == 2 ? "Weekly" : "Daily"}}</span>: {{$scheme->name}}</h4>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
            <div class="btn-group">
                <button type="button" class="btn btn-success btn-min-width add-scheme" onclick="event.preventDefault();document.getElementById('save').click();">Save scheme</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form method="post" action="{{ route('scheme.children.save') }}" class="scheme-children-form">
            @csrf
            <input type="hidden" name="scheme" value="{{ $scheme->_id }}">
            <input type="hidden" name="type" value="{{ $type }}">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center mb-3">
                        <div class="col-auto">
                            <h5 class="font-size-18">Add children in {{$scheme->name}}</h5>
                            <p>Tap to select the children.</p>
                        </div>
                        <div class="col-md-6 col-lg-4 ml-md-auto">
                            <div class="row align-items-center">
                                <label class="col-sm-auto mb-sm-0">Select room</label>
                                <div class="col-sm">
                                    <select class="form-control" data-plugin="customselect" id="room" data-placeholder="Select a theme">
                                        @if(isset($scheme->rooms) && !empty($scheme->rooms))
                                        @foreach($scheme->rooms as $key => $room)
                                            <option value="{{$room->_id}}" {{ $key== 0 ? 'selected' : ''}}>{{$room->name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="childs row">
                        @php $count = 0; @endphp
                        @if(isset($scheme->rooms) && !empty($scheme->rooms))
                            @foreach($scheme->rooms as $key => $room)
                                @if(isset($room->childs) && !empty($room->childs))
                                    @foreach($room->childs as $child)
                                        @if($type == 1)
                                            <div class="col text-center child-item mb-sm-3 mb-2" data-room="{{$room->_id}}">
                                                <label>
                                                    <input type="checkbox" class="checkbox-child" data-error="child-error" name="childs[]" value="{{$child->_id}}" {{$child->using == "true" ? 'checked' : '' }}>
                                                    <div class="child-image position-relative ">
                                                        <i class="uil uil-check icon-check"></i>
                                                        <img src="{{ $child->profileImage }}" class="img-child medium" alt="Child" />
                                                        <h5 class="mt-2 mb-0 font-size-18">{{$child->name}}</h5>
                                                    </div>
                                                </label>
                                            </div>
                                        @else
                                        <div class="col-md-6 text-center child-item px-3" data-room="{{$room->_id}}">
                                            <div class="form-group row child-group align-items-center">
                                                <div class="col-auto checkbox medium checkbox-pink">
                                                    <input type="checkbox" class="room-child input-validate" name="childs[{{$count}}][_id]" id="child-{{$child->_id}}" value="{{$child->_id}}" data-error="child-errors" {{$child->using == "true" ? 'checked' : '' }}>
                                                    <label for="child-{{$child->_id}}" class="pt-4 pl-4"></label>
                                                </div>
                                                <div class="col">
                                                    <div class="media">
                                                        <img src="{{ $child->profileImage }}" alt="Child" class="img-child -small">
                                                        <div class="media-body ml-2 text-left">
                                                            <span class="font-weight-normal">{{$child->name}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mt-2 mt-md-0">
                                                    <div class="row">
                                                        <div class="col pr-0">
                                                            <input type="number" class="form-control child-add-hour decimal" name="childs[{{$count}}][minutes]" value="{{isset($child->minutes) && $child->minutes > 0 ? round($child->minutes/60, 2) : '' }}">
                                                        </div>
                                                        <div class="col-auto pt-3">hours/week</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @php $count++; @endphp
                                    @endforeach
                                @endif
                            @endforeach
                        @endif
                        <div class="child-error col-12"></div>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-success btn-min-width" id="save">Save scheme</button>
            </div>
        </form>
    </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/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.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/scheme.js') }}?v=1" type="text/javascript"></script>
@endsection